SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    hi galen's Avatar
    Join Date
    Jan 2006
    Location
    New Haven, CT
    Posts
    1,228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is this an IE bug?

    http://britneyspearsbelieve.com/html/

    Everything works fine in firefox. XHTML and CSS are both valid.

    The problem is in IE
    Code:
    #container { width: 833px; height: 597px; margin: 0 auto; position:relative;}
    	#container.inspiration {background: url(../_images/inspiration-bg.jpg) no-repeat;}
    	#container.home {background: url(../_images/home-bg.jpg) no-repeat;}
    	#container.fragrance {background: url(../_images/fragrance-bg.jpg) no-repeat;}
    	#container.stores {background: url(../_images/stores-bg.jpg) no-repeat;}
    	#container.extra {background: url(../_images/extra-bg.jpg) no-repeat;}
    	#container.shop {background: url(../_images/shop-bg.jpg) no-repeat;}
    	#container.signup {background: url(../_images/signup-bg.jpg) no-repeat;}
    	#container.design {background: url(../_images/design-bg.jpg) no-repeat;}
    	#container.collection {background: url(../_images/collection-bg.jpg) no-repeat;}
    The line (in this case .inspiration) that comes after the #container style works fine. All lines after the first display no background, or anything style I add in there. So if i delete the .inspiration line, the .home line will work.

    Any ideas?

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2007
    Location
    New London, CT
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see a bunch of boxes with color and text in IE6. Is that what I should be seeing?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    HI,

    Yes its a bug in ie6 and under where it doesn't understand the dot notation of concatenating classes.

    IE6 treats #container.class1 and #container.class2 etc as basically the same thing so only one of them actually gets actioned. Therefore you cannot use this method at all if you want to support ie6.

    It looks as though you can simply remove the concatenated elements.

    e.g.

    Code:
        .inspiration {background: url(http://britneyspearsbelieve.com/html/_images/inspiration-bg.jpg) no-repeat;}
        .home {background: url(http://britneyspearsbelieve.com/html/_images/home-bg.jpg) no-repeat; border: 90px solid #000;}
        .fragrance {background: url(http://britneyspearsbelieve.com/html/_images/fragrance-bg.jpg) no-repeat;}
        .stores {background: url(http://britneyspearsbelieve.com/html/_images/stores-bg.jpg) no-repeat;}
        .extra {background: url(http://britneyspearsbelieve.com/html/_images/extra-bg.jpg) no-repeat;}
        .shop {background: url(http://britneyspearsbelieve.com/html/_images/shop-bg.jpg) no-repeat;}
        .signup {background: url(http://britneyspearsbelieve.com/html/_images/signup-bg.jpg) no-repeat;}
        .design {background: url(http://britneyspearsbelieve.com/html/_images/design-bg.jpg) no-repeat;}
        .collection {background: url(http://britneyspearsbelieve.com/html/_images/collection-bg.jpg) no-repeat;}
    If you do need that page uniquely identified then you will need to put the id on the body tag and the class on an inner nested wrapper so you can address it as #id .class (note the space before the dot) in the normal way.

    Hope that makes sense

  4. #4
    hi galen's Avatar
    Join Date
    Jan 2006
    Location
    New Haven, CT
    Posts
    1,228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That fixed it. Thanks. There was another part of my stylesheet that had #id.class but that worked in IE. Are there certain cases where it does work? do you have a link to where i could read about this, or do you know the "name" of the bug so i can google it.

    Thanks again.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Yes it will work if it is only defined once or if you are using only the first instance.

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #test.red {background:red;}
    #test.blue{background:blue}
    #test.green {background:green;}
    </style>
    </head>
    <body id="test" class="red">
    <!-- <body id="test" class="green"> -->
    <!-- <body id="test" class="blue"> -->
    <h1>Ie6 Classname bug</h1>
    <p>Only the first #test.classname will affect this page. e.g. #test.red</p>
    <p>Change the classname in the body and you will see that no style gets applied. Or alternatively change the order of the stylesheet and the rule that comes first is the one that gets applied.</p>
    </body>
    </html>
    I think I was one of the first to document the bug and there are many threads in the forums but there is some more information here.

    IE6 also has problems with multiple classes joined by dot notation and gets those wrong also.


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
  •