SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast cowboystyle's Avatar
    Join Date
    Jun 2005
    Location
    Binghamton, NY or New Windsor, NY
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Strange problem w/ a:hover on IE v6

    Hi everyone, this is my first post, I'll admit I came here in despiration.
    Over the last few days I've been ankle deep using CSS to completely replace the tables used in layout for a site. I've gotten a lot from bluerobot.com and w3schools.com, it's been a lot easier and a lot more fun than I thought it would be. Everything was going relatively smoothly until I had the following error in IE v6 (site looks and works fine in Moz FF) which doesn't follow any discernible logic in my mind:

    Basically, I have a list filled with links that I'm using for a navigation menu. I have three areas of the list, each with a different background and rollover color. This works exactly as I would like in Mozilla Firefox. The list only partially works in IE 6. The problem is that the first link / title in each list does not have a background color or rollover color. Also, the "clickable area" for each link is about halfed horizontally in IE 6. This probably has something to do with my ul, li, a ordering in my CSS file, but I haven't the slightest idea what. Here is the CSS:

    Code:
    #Menu {
    	position:relative;
    	width:180px;
    	margin:0 0 0 420px;
    }
    
    #Menu ul {
    	margin:0; 		/* removes indent IE and Opera */
    	padding:0; 		/* removes indent Mozilla and NN7 */
    	list-style-type:none; 	/* removes bullets */
    }
    
    #Menu li {display:inline;}	/* Prevent extra line breaks */
    
    /* Link A background color */
    #Menu ul.nava a:visited, #Menu ul.nava a:active, #Menu ul.nava a:link  {
    	color:black;
    	background:#9C9;
    }
    
    /* Link A rollover color */
    #Menu ul.nava a:hover {
    	color:black;
    	background:#9F6;
    }
    
    /* Link A title color */
    #Menu ul.nava b {
    	color:white;
    	background:#9C9;
    }		
    
    /* Link B background color */
    #Menu ul.navb a:visited, #Menu ul.navb a:active, #Menu ul.navb a:link  {
    	color:black;
    	background:#C66;
    }	
    
    /* Link B rollover color */
    #Menu ul.navb a:hover {
    	color:black;
    	background:#C30;
    }	
    
    /* Link B title color */
    #Menu ul.navb b {
    	color:white;
    	background:#C66;
    }
    
    /* Link C title color */
    #Menu ul.navc b {
    	color:white;
    	background:#9CC;
    }
    
    /* Link C background color */
    #Menu ul.navc a:visited, #Menu ul.navc a:active, #Menu ul.navc a:link  {
    	color:black;
    	background:#9CC;
    }
    
    /* Link C title color */
    #Menu ul.navc a:hover {
    	color:black;
    	background:#6CF;
    }
    
    #Menu a {
    	display:block;		
    	text-decoration:none;
    	padding:2px 5px;
    	font-size:11px;
    	line-height:16px;
    	font-family:tahoma, verdana, sans-serif;
    }
    
    #Menu b {
    	display:block;	
    	padding:2px 5px;
    	font-size:14px;
    	line-height:16px;
    	font-weight:700;
    	font-family:tahoma, verdana, sans-serif;
    }
    and here is the html:

    HTML Code:
    <html>
    <head>
    <title>multicolored menu</title>
    <style type="text/css" media="screen">@import "style.css";</style>
    </head>
    
    <body>
    
    <div id="Menu">
    
    	<ul class="nava">
    		<li><a href="#">This is link one</a></li>
    		<li><a href="#">This is link two</a></li>
    		<li><a href="#">This is link three</a></li>
    	</ul>
    
    	<ul class="navb">
    		<li><b>Links B</b></li>
    		<li><a href="#">This is link one</a></li>
    		<li><a href="#">This is link two</a></li>
    		<li><a href="#">This is link three</a></li>
    	</ul>
    
    	<ul class="navc">
    		<li><b>Links C</b></li>
    		<li><a href="#">This is link one</a></li>
    		<li><a href="#">This is link two</a></li>
    		<li><a href="#">This is link three</a></li>
    	</ul>
    
    </div>
    
    </body>
    </html>
    You can also view the site here: http://www.jakemcgraw.com/web
    Any help will be much appreciated! Thanks.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to give the ul a width for ie so that it gets forced into layout mode. You then also need a hack for the anchor to force it into 100% width also.

    Code:
    <html>
    <head>
    <title>multicolored menu</title>
    <style type="text/css" media="screen">
    #Menu {
     position:relative;
     width:180px;
     margin:0 0 0 420px;
    }
    #Menu ul {
     margin:0;   /* removes indent IE and Opera */
     padding:0;   /* removes indent Mozilla and NN7 */
     list-style-type:none;  /* removes bullets */
     width:100%;
    }
    #Menu li {display:inline;} /* Prevent extra line breaks */
    /* mac hide \*/
    * html #Menu li a{height:1%}
    /* end hide*/
    /* Link A background color */
    #Menu ul.nava a  {
     color:black;
     background:#9C9;
    }
    /* Link A rollover color */
    #Menu ul.nava a:hover {
     color:black;
     background:#9F6;
    }
    /* Link A title color */
    #Menu ul.nava b {
     color:white;
     background:#9C9;
    }  
    /* Link B background color */
    #Menu ul.navb a  {
     color:black;
     background:#C66;
    } 
    /* Link B rollover color */
    #Menu ul.navb a:hover {
     color:black;
     background:#C30;
    } 
    /* Link B title color */
    #Menu ul.navb b {
     color:white;
     background:#C66;
    }
    /* Link C title color */
    #Menu ul.navc b {
     color:white;
     background:#9CC;
    }
    /* Link C background color */
    #Menu ul.navc a {
     color:black;
     background:#9CC;
    }
    /* Link C title color */
    #Menu ul.navc a:hover {
     color:black;
     background:#6CF;
    }
    #Menu a {
     display:block;  
     text-decoration:none;
     padding:2px 5px;
     font-size:11px;
     line-height:16px;
     font-family:tahoma, verdana, sans-serif;
    }
    #Menu b {
     display:block; 
     padding:2px 5px;
     font-size:14px;
     line-height:16px;
     font-weight:700;
     font-family:tahoma, verdana, sans-serif;
    }
    </style>
    </head>
    <body>
    <div id="Menu"> 
      <ul class="nava">
    	<li><a href="#">This is link one</a></li>
    	<li><a href="#">This is link two</a></li>
    	<li><a href="#">This is link three</a></li>
      </ul>
      <ul class="navb">
    	<li><b>Links B</b></li>
    	<li><a href="#">This is link one</a></li>
    	<li><a href="#">This is link two</a></li>
    	<li><a href="#">This is link three</a></li>
      </ul>
      <ul class="navc">
    	<li><b>Links C</b></li>
    	<li><a href="#">This is link one</a></li>
    	<li><a href="#">This is link two</a></li>
    	<li><a href="#">This is link three</a></li>
      </ul>
    </div>
    </body>
    </html>
    You could have done it without hacks by floating the lists and declaring the anchors as block and giving them widths.

    IE behaves differently when elements don't have dimensions and its something to watch out for

    http://msdn.microsoft.com/workshop/a...tion.asp#intro
    http://msdn.microsoft.com/workshop/a.../haslayout.asp

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You should also think about using a doctype because if you implement one at a later stage the whole rendering will be different

  4. #4
    SitePoint Enthusiast cowboystyle's Avatar
    Join Date
    Jun 2005
    Location
    Binghamton, NY or New Windsor, NY
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    You should also think about using a doctype because if you implement one at a later stage the whole rendering will be different
    doctype? sorry, I'm somewhat new to all of this.

    btw, your fix works great! thanks a million.

  5. #5
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put this at the very top of your page :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd ">

  6. #6
    SitePoint Enthusiast cowboystyle's Avatar
    Join Date
    Jun 2005
    Location
    Binghamton, NY or New Windsor, NY
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, I've seen his before, I don't need to go through some kind of certification to put this on my pages?

  7. #7
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cowboystyle
    ok, I've seen his before, I don't need to go through some kind of certification to put this on my pages?
    No. Just make sure your document validates to the specification specified in the doctype declaration. Visit The World Wide Web Consortium's Web site for more info on validation and doctypes.

    P.S. Another doctype to consider is "XHTML 1.0 Strict".
    I will not flame the newbies,
    I will not flame the newbies,
    I will flame the newbies...
    Table free is the way to be!

  8. #8
    SitePoint Enthusiast cowboystyle's Avatar
    Join Date
    Jun 2005
    Location
    Binghamton, NY or New Windsor, NY
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks all...

    here's what I've been cooking up:

    http://www.jakemcgraw.com/web

    once again, thanks everyone!

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

    Nice page nice menu,

    But consider importing your CSS Sheet differently

    you have a nasty Case of FOUC

    http://www.bluerobot.com/web/css/fouc.asp
    Last edited by all4nerds; Jun 8, 2005 at 13:36.

  10. #10
    SitePoint Enthusiast cowboystyle's Avatar
    Join Date
    Jun 2005
    Location
    Binghamton, NY or New Windsor, NY
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    whoops, didn't test it in IE, thanks for the warning.


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
  •