SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: IE6 woes

  1. #1
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    671
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 woes

    The only page that looks good across all browsers is the home page.

    All the PRODUCTS in the products drop down on this site look fine in all browsers except IE6. It seems as if the browser is not fully loading the css. The positioning is correct and the H1 tag is the right size and color but the background image does not show up and the normal font is the wrong color.


    The problem with the other pages is that the main content starts way to far down the page and I can not figure out why, plus, there is no image to the left of the content like there is suppose to be, except for the LINKS page.

    Any help here would be greatly appreciated.

    Thanks,
    Houston
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.

  2. #2
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    671
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No takers on this one? I am slipping through the cracks here. Thanks
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE6 seems to have problems with multiple classes, IDs or a combination of the two so I think it's falling over on these styles

    Code:
    #container.dayCream {
    	background:url(../images/bgndDayCream.jpg) no-repeat 0px 30px #CC0000;
    }
    You'll need to do a couple of things in your CSS in order to fix this.

    First, remove the ID if possible so that you're just left with the class.

    Code:
    .dayCream {
    	background:url(../images/bgndDayCream.jpg) no-repeat 0px 30px #FFF;
    }
    However, this still won't be picked up because you'll have a problem with specificity as an ID will take precedence over a class so you'll need to remove the background from #container

    Code:
     #container {
    	width: 994px;
    	margin: 40px auto;
    	border:none;
    	text-align: left;
    	text-transform:uppercase;
    	line-height:1.5em;
    }
    You've specified the colour of white on the body so this will always show through anyway when there's no background image so you don't actually need it on the #container.

    You should ensure though that the background colour of each class does provide enough contrast as I don't think you've considered how the site will appear to users with images switched off.

    The problem on your links page seems to be this...

    Code:
    #mainContent {
    	padding: 435px 20px 0px 408px;
    	background:none;
    	color:#00483a;
    	border:solid 1px green;
    }
    Changing the 435px to 0 should fix the problem.

    Hope this helps.

  4. #4
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    671
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz View Post
    The problem on your links page seems to be this...

    Code:
    #mainContent {
        padding: 435px 20px 0px 408px;
        background:none;
        color:#00483a;
        border:solid 1px green;
    }
    Changing the 435px to 0 should fix the problem.

    Hope this helps.
    The solution for the products page, removing the ID part worked perfectly but I still seem to be having a bit of a problem with what I think is the box model issue on, but that is another story, on those pages. Thank you for that solution.

    The links page has different padding at the top due to the fact that the content starts at the top, unlike some of the other pages that start 435px down. So I placed in a class that overrides, or does in other browsers, the 435px and sets it to 0px. This is done here:
    Code:
    /*Links Page*/
     #mainContent.linksPage {
        padding: 0px 0px 0px 458px;
        background:none;
        color:#6c5735;
    }
    So are you telling me that IE6 will not recognize this code:
    Code:
    <div class="linksPage" id="mainContent">
    and ignores the class all together and defaults to what the id is?
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.


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
  •