SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: Display:Block

Hybrid View

  1. #1
    SitePoint Guru mdumka's Avatar
    Join Date
    Jul 2003
    Location
    True North
    Posts
    642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Display:Block

    Hello,

    I am using Display:Block for some hyperlink navigation. In Firefox the mouse will display the block but IE will only display the block when over the text.

    Is there any way around this?

    Thanks

    Mike

  2. #2
    SitePoint Enthusiast meltingInPhoenix's Avatar
    Join Date
    May 2005
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Post some CSS code

  3. #3
    SitePoint Guru mdumka's Avatar
    Join Date
    Jul 2003
    Location
    True North
    Posts
    642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    a.navigation:link, a.navigation:visited { 
    	color:#006699; 
    	text-decoration:none;
    	display:block; padding:2px 2px 2px 2px;
    	border:1px solid #F0F0F0; 
    }
    a.navigation:hover { 
    	color:#006699; 
    	text-decoration:none;
    	display:block; 
    	background-color:#FFFFFF;
    	border:1px solid #006699;
    }
    Thanks

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    give the a tag a width or height

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>12345 12345 12345 12345 12345 </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	.w{width:150px;}
    	
    	a.navigation:link,a.navigation:visited{
    	/*width:150px;*/height:1%;
    	color:#006699;
    	text-decoration:none;
    	display:block;
    	padding:2px 2px 2px 2px;
    	border:1px solid #F0F0F0; 
    	}
    	a.navigation:hover {
    	color:#006699; 
    	background:#FFFFFF;
    	border-color:#006699;
    	}
    	</style>
    </head>
    <body>
    <p class="w"><a href="##" class="navigation">12345</a></p>
    </body>
    </html>

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Michigan
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all4nerds, that still only makes the border on the block visable upon hovering it in IE.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Use lists for your navigation</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 150px;
    }
    #navigation ul li {
    border: 1px solid #006699;
    display: block;
    padding: 2px 2px 2px 5px;
    margin: 5px;
    }
    </style>

    </head>
    <body>

    <div id="navigation">
    <ul>
    <li>Link1</li>
    <li>Link2</li>
    <li>Link3</li>
    </ul>
    </div>

    </body>
    </html>
    I suggest using a list to organize your navigation, it makes life easier.

    Try the above code - that should keep your border visable at all times.

    -Mason

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stoavio
    all4nerds, that still only makes the border on the block visable upon hovering it in IE.



    I suggest using a list to organize your navigation, it makes life easier.

    Try the above code - that should keep your border visable at all times.

    -Mason
    ?? on hover it chages from #F0F0F0 to #006699 like he asked for ??

    the list are maybe symatically correct, i like the strait forward use of the a tag's far more

    only display the block when over the text in IE was the main question i think ????

  7. #7
    SitePoint Guru mdumka's Avatar
    Join Date
    Jul 2003
    Location
    True North
    Posts
    642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Guys,

    First Thanks for the help.

    I do not want to use a width because the the navigation valus may change dynamically. I tried the height:1% and my problem was fixed in IE but in FF I only had a small sliver show up (thus the 1% I guess).

    What I was wondering is there a hack that will make IE see the 1% and have FF ignore it?

    Thanks, Mike

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello

    yes:

    * html a.navigation:link,a.navigation:visited{height:1%;}

  9. #9
    SitePoint Guru mdumka's Avatar
    Join Date
    Jul 2003
    Location
    True North
    Posts
    642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awsome, thanks guys.

    This one has been bugging me for a while.

  10. #10
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    PS you can also give it a (real) height 20px, etc

  11. #11
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all4nerds, you mean this:
    Code:
    * html a.navigation:link,* html a.navigation:visited{height:1%;}
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  12. #12
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    all4nerds, you mean this:
    Code:
    * html a.navigation:link,* html a.navigation:visited{height:1%;}
    Yes i am not in the hacking business, Sorry


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •