Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2006
    Location
    Florida
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS Not Working (IE 6)

    Okay, this code works fine in both FF2 and IE7. However, in IE6, it will only display the random background for the first option. I don't get it.

    Code:
    #sidebar {
    	width: 250px;
    	height: 250px;
    	position: absolute;
    	right: 0;
    	top: 183px;
    }
    #sidebar.rand1 { background: url(../imgs/rand1.gif) left top no-repeat; }
    #sidebar.rand2 { background: url(../imgs/rand2.gif) left top no-repeat; }
    #sidebar.rand3 { background: url(../imgs/rand3.gif) left top no-repeat; }
    #sidebar.rand4 { background: url(../imgs/rand4.gif) left top no-repeat; }
    #sidebar.rand5 { background: url(../imgs/rand5.gif) left top no-repeat; }
    The HTML looks like this:

    Code:
    <div id="sidebar" class="rand2">
    	<h3 class="rnd3"><a href="http://kiswa.com/work" title="View my work">My Work</a></h3>
    	<p><a href="http://kiswa.com/work" title="View my work">See how my designs can help you.</a></p>
    </div>
    As you can see, I do the same thing for the h3 within that 'sidebar' div. That one works in all tested browsers, no problem. This makes me even more confused.

    Here's the CSS for the h3:

    Code:
    #sidebar h3 {
    	position: absolute;
    	bottom: 42px;
    	right: 10px;
    	width: 158px;
    	height: 32px;
    }
    #sidebar h3.rnd1 { background: url(../imgs/side_h3_1.gif) left top no-repeat; }
    #sidebar h3.rnd2 { background: url(../imgs/side_h3_2.gif) left top no-repeat; }
    #sidebar h3.rnd3 { background: url(../imgs/side_h3_3.gif) left top no-repeat; }
    #sidebar h3.rnd4 { background: url(../imgs/side_h3_4.gif) left top no-repeat; }
    #sidebar h3.rnd5 { background: url(../imgs/side_h3_5.gif) left top no-repeat; }
    These code examples should give me the second random background, and the third random h3 image. And they do, except on IE6 which doesn't show any background other than the first random background (the h3 works fine in all).

    Also, the rand# and rnd# are generated by PHP to change every page load.

    Any ideas?

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Sounds strange? Do you have a link? Maybe that will enlighten us somehow.

  • #3
    New Coder
    Join Date
    Jan 2006
    Location
    Florida
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sure thing: http://kiswa.com

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    This is an IE6 bug. Perhaps Nathan Smith was the first to report the bug: IE6 Multi-Class Bug. His example is very similar to yours, but the bug is more general than the article indicates.

    You need to be careful when combining class and id in a selector. webdevout.net is a good source for learning about CSS parsing bugs. The IE6 bug you are affected by is listed there too:

    http://www.webdevout.net/browser-sup...-css2selectors

    It is phrased as follows:
    When a simple selector containing a class selector and an ID selector isn't matched, all of the following selectors that end with a simple selector containing a class selector and the same ID are treated as unmatching.
    With that knowledge it should be possible for you to find a workaroud. Find another construction for your selectors that does the same.

  • #5
    New Coder
    Join Date
    Jan 2006
    Location
    Florida
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks!

    I think I have an idea on how to make it work, now that I know what the problem is.


  •  

    Posting Permissions

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