SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist Brandon Luhring's Avatar
    Join Date
    Apr 2002
    Location
    IN, USA
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS inheritance and winIE6

    I'm creating a nav in CSS with lists, etc. I'm getting favorable results when testing on a Mac (IE5, Safari, Op7, Mz1.5), and I'm getting favorable results in all browsers on a PC except IE6 (haven't tested IE5 or IE4 though)...

    Here's the simplified HTML code:
    Code:
    <div id="navbar">
    <ul class="category1">
        <li class="cat1title"><a href="#0" class="white">Heading</a></li>
            <ul>
    	    <li><a href="#1">page1</a></li>
    	    <li><a href="#2">page2</a></li>
            </ul>	
    </ul>
    </div>
    Here's the simplified CSS code:
    Code:
    #navbar a, a:link, a:visited, a:active, a:hover {
    	display: block;
    	color: #626466;
    	text-decoration: none;
    	background: transparent; 
    	}	
    #navbar a:active {
    	color: #000;
    	font-weight: bold;
    	}
    #navbar a:hover {
    	color: #000;
    	text-decoration: underline;
    	background: #CAC9CD; 
    	}
    #navbar a.white, a:link.white, a:visited.white, a:active.white {
    	color: #FFF;
    	text-decoration: none;
    	background: transparent;
    	}
    #navbar ul {
    	/* main sections */
    	margin: 0px 0px 13px 0px;
    	padding: 2px 2px 2px 0px;
    	list-style-type: none; 
     	}
    #navbar ul ul {
    	/* sub-sections */
    	margin:0px;
    	padding: 0px;
    	}
    #navbar ul ul ul {
    	/* sub-sub-sections */
    	margin:0px;
    	padding: 0px 0px 0px 8px;
    	}
    #navbar li {
    	padding-left: 2px; 
    	}
    . category1 {
    	background: #F4F4F9;
    	}
    . cat1title {
    	background-color: #9C9BBE;
    	}
    Now, it should create a "category" where all links inside .category1 will have a transparent BG which shows the parent's BG-color for the entire category, the category headline is unique and has a separate background color assigned by .cat1title... This works PERFECTLY in all the browsers, but IE6 on WinXP uses the .cat1title BG-color for ALL links/li tags, not just the one given the class name.

    It's obviously an inheritance thing, but I can't figure it out for anything! I've put "background: transparent;" everywhere I can think of, but to no avail -- it's all or none with IE6.

    Can anyone easily find where I'm going wrong? I'd appreciate any help.

    Thanks!
    B

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

    I can't really see what you are trying to do but you do have some errors on your page.

    The first one is that your lists are incorrectly constructed. The sub lists (ul) should be contained wholly within the list item. (As i see it IE6 was the only one who was displaying correctly anyway). Sublists should be like this :
    <ul>
    <li>

    <ul>
    <li></li>
    </ul>

    </li>
    </ul>

    Heres the correct code for that snippet:
    Code:
    <div id="navbar"> 
    <ul class="category1">
    	<li class="cat1title"><a href="#0" class="white">Heading</a> 
    	 <ul>
    		<li><a href="#1">page1</a></li>
    		<li><a href="#2">page2</a></li>
    	 </ul>
        </li>
    </ul>
    </div>
    The other problem is that you have defines the styles as below:
    Code:
    #navbar a, a:link, a:visited, a:active, a:hover {
    display: block;
    color: #626466;
    text-decoration: none;
    background: transparent; 
    }
    What you are defining is all states of the anchor inside the id of #navbar (#navbar a) then you go on to define all anchors anywhere on the page with a:link and a:visited etc. I think you meant #navbar a:link, #navbar a:visited etc.

    However if you define #navbar a{} then all states are defined anyway so you don't need to define the other states. You have made the same mistake for your .white styles as well.

    I'm not sure if this will solve your problem or make it worse because mozilla now displays like ie did

    Paul

  3. #3
    SitePoint Evangelist Brandon Luhring's Avatar
    Join Date
    Apr 2002
    Location
    IN, USA
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for taking the time to look through that.

    You're absolutely right on all counts, and I've corrected those errors. Simply correcting them caused the rest of my browsers to view the same as IE6. ...so I set out to correct the deeper problems, and this is what I've come up with (still not 100% where I want it):

    HTML Code:
    Code:
    <div id="navbar">
    	<ul class="category1">
    		<li><a href="#0" class"cat1titlelink">Household</a>
    			<ul>
    				<li><a href="#1">Link 1</a></li>
    				<li><a href="#2">Link 2</a></li>
    			</ul>
    		</li>
    	</ul>
    </div>
    CSS Code:
    Code:
    ul, li {
    	margin: 0px;
    	padding: 0px;
    	border: 0px;
     	}
    #navbar ul {
    	/* main sections */
    	margin: 0px;
    	padding: 2px 2px 2px 0px;
    	list-style-type: none;
     	}
    #navbar li {
    	margin: 0px;
    	padding: 0px;
     	}
    #navbar ul ul {
    	/* sub-sections */
    	margin: 0px;
    	padding: 0px;
    	list-style-type: none; 
    	}
    #navbar ul ul ul {
    	/* sub-sub-sections */
    	margin: 0px;
    	padding: 0px 0px 0px 8px;
    	list-style-type: none; 
    	}
    #navbar a {
    	display: block;
    	color: #626466;
    	text-decoration: none;
    	padding: 0px 0px 0px 2px;
    	margin: 0px;
    	background: transparent; 
    	}	
    #navbar a:active {
    	color: #000;
    	font-weight: bold;
    	}
    #navbar a:hover {
    	color: #000;
    	text-decoration: underline;
    	background: #CAC9CD; 
    	}
    #navbar a.cat1titlelink {
    	color: #FFF;
    	text-decoration: none;
    	background-color: #9C9BBE;
    	}
    .category1 {
    	border-top: 1px solid #666;
    	border-right: 1px solid #666;
    	border-bottom: 1px solid #666;
    	background: #F4F4F9;
    	margin: 10px 0px;
    	}
    What's happening now, is still only showing up in IE6, so maybe I still have some syntax wrong...

    On all browsers other than IE6, my links have what looks like a single line-return (maybe a tad more) -- exactly what I want.

    On IE6, however, it has a ton of space in between links, more like a double-space line-return. I thought it might be inherited from .category1's top and bottom margin of 10px, but as you can see I've set margins and paddings to 0px everywhere else....

    The weird thing is that when I add a border attribute (for debuggin) to the "#navbar ul" and "#navbar li", then IE6 callapses the space -- just like I want. But, if I put "border: 0px" in them, the space comes back...

    Is this my error, or some sort of bug?



    Thanks again!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,283
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Is this my error, or some sort of bug?
    No its some sort of bug.

    Heres the solution:

    Code:
    <div id="navbar">
     <ul class="category1">
      <li><a href="#0" class"cat1titlelink">Household </a>
       <ul>
    	<li><a href="#1">Link 1 </a></li>
    	<li><a href="#2">Link 2 </a></li>
       </ul>
      </li>
     </ul>
    </div>
    Copy that code exactly and try it out

    If you can spot what the solution is then award yourself a prize

    Paul

  5. #5
    SitePoint Evangelist Brandon Luhring's Avatar
    Join Date
    Apr 2002
    Location
    IN, USA
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    --pulling hair out--


    Well, it looks like the solution to the bug was adding the trailing space to each link.

    When the space is absent, IE6 renders the extra padding/margins around the <li> tag that holds the link...

    When the space is there, IE6 and all other browsers render them the proper way.




    Additionaly, I had to add "#navbar a.cat1titlelink, #navbar a:hover.cat1titlelink," to the existing CSS Style. Apparently IE will still inherit existing "a:hover" styles if using the base "#navbar a" without specifying "#navbar a:hover" as well.


    Thanks for your help, Paul!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,283
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    lol - sorry to make you work for it

    Lists can be a pain at times and adding the space before the anchor fixes the bug you had. There are also other methods if that doesn't work in other cases and thats to close the white space between the opening and closing list tags in the html so that they are back to back etc. (you can also try floating the lists and other various things depending on the situation but it is very annoying when there should be no need.)

    Paul


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
  •