Not signed in (Sign In)

Vanilla 1.0.3 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorkgillham
    • CommentTimeJan 23rd 2007 edited
     

    Hello!


    I'm preparing a site for my last assignment which must be standards compliant and viewable on at least two different browsers. This site is delivered perfectly in Firefox, but has errors in both IE6 (the rounded corner box and right hand border) and IE7 (the rounded corner box).


    ourFootprints

    Thanks in advance for your help.

    •  
      CommentAuthormattymcg
    • CommentTimeJan 25th 2007 edited
     
    Kim,

    The short answer is to add browser-specific CSS to address the fact that different browsers are rendering your page differently. You could use IE's conditional comments to add this to a separate style sheet, for example:

    <!--[if IE]>
    <style type="text/css">
    #ddcolortabs, #mainnav, #footer {
    width: 789px;
    }
    #ddcolortabsline {
    width: 798px;
    </style>
    <![endif]-->

    However, the long answer is that your markup is overly complicated, and that's one of the reasons why your CSS is struggling to hold it together. I'd recommend you re-think exactly what each element on your page is doing. For example, do you really need a separate div that does nothing but contain a blue line? This is presentation-related, and belongs in your style sheet. So you should instead consider, for example, applying a bottom margin to the container above where this blue line sits, This will result in markup that is cleaner, leaner and easier to understand.

    I also noticed there are a stack of CSS hacks in your style sheet too; you should make sure you understand what those are doing, try to avoid using them, and use conditional comments to move them into an IE-specific style sheet.

    Hope that helps,
    Matt