homepage Welcome to WebmasterWorld Guest from 23.20.77.156
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
NN7 & IE Differences in CSS Interpretation
Rockin' along in IE, falling all over itself in NN7
TomJones




msg:1211926
 9:52 pm on Apr 22, 2003 (gmt 0)

Really, REALLY starting to love using CSS. But, all kinds of funny stuff is happening in N7 (I don't have any other versions installed but, I shudder to think what they look like). Particularly, I have a DIV containing just an h6 header. It looks great in IE but, balloons about 200px vertically in N7. Is there a good list of all the hacks to use to get the different browsers to display your content correctly? Does IE for Mac handle CSS the same as IE 4 PC?

I'm naming all of my DIVs #soandso in my external style sheet. Is this going to cause me any problems? .soandso would be used to nest under the #soandso, correct? Do I need to label divs DIV#soandso? I'm still fuzzy on that.

I should have posted twice ;0
Thanks once again. I'm going to name my first child Nick_WDrDOCJatarkBirdmantxbakers....

And her name just keeps getting longer!

 

MWpro




msg:1211927
 10:16 pm on Apr 22, 2003 (gmt 0)

Can you post some of your code so we can get a better feel of what you want to do and how you are doing it? I am not sure whether it is a good idea to have id's and classes with identical names, but generally I think it is a good idea to just do #soandso instead of div#soandso.

grahamstewart




msg:1211928
 12:08 am on Apr 23, 2003 (gmt 0)

Just did a quick test and this code...

<div style="border:1px solid #000">
<h6>Hello</h6>
</div>

Looks the same in IE and NN7.

I'm naming all of my DIVs #soandso in my external style sheet. Is this going to cause me any problems? .soandso would be used to nest under the #soandso, correct? Do I need to label divs DIV#soandso? I'm still fuzzy on that.

MWPro is right. Classes and ids should not have the same name.

id is useful for identifying a single element that you would like to apply some style to.
Every id should be unique on the page. (this is important - IE ignores it but others are not so forgiving)

class is useful for defining styles that are used multiple times on a page.

So...

div {
color: #ff0000;
background: #0000ff;
border: 1px dashed #000000;
}
div.myclass {
border: 2px solid #00ff00;
}
div#myid {
border-width: 10px;
}
div.myclass a {
color: #cccccc;
background: transparent;
}

  • First rule sets ALL divs to have red text, blue background and a black dashed border that is 1 pixel thick.

  • Second rule says that divs of with class="myclass" should have a solid green border that is 2 pixels thick (they will inherit the other settings from div).

  • Third rule says that if there is a div with id="myid" then its border should be thicker.

  • Fourth rule says that any <a> links, that appear inside a div with class="myclass", should be grey.

    Note you could have an element that has both class and id set: such as <div class="myclass" id="myid">, which will give it a 10 pixel solid green border.

    Hope that helps clear it up a little.

  • DrDoc




    msg:1211929
     9:43 am on Apr 23, 2003 (gmt 0)

    That's an excellent post, grahamstewart :)

    Now, I have a question... You're saying that it looks good in IE, but horrible in NN7. Which IE version are we talking about? Also, have you considered making it look good in NN7 first, and then looked in IE?

    It's usually easier to make a page look good in the more stricter browsers first (like Opera, Mozilla, Netscape) and tweak it to work in IE.

    Now, if you're testing in IE5.5, I'm afraid that you're in for a headache. It does not render widths and heights and stuff the way it's supposed to. All other browsers are right...

    No matter the scenario, there are ways of making it work in them all... But first we need to know which browsers you're talking about :)

    grahamstewart




    msg:1211930
     12:06 pm on Apr 23, 2003 (gmt 0)

    IE5.5.. does not render widths and heights and stuff the way it's supposed to

    Make sure you use the complete doctype on your html.

    I write all my html in HTML4.01 Strict and the doctype I use is..
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    (all on one line at the very top of the document)

    This tells the browser to render the page in accordance with standards, which can help correct these little differences. (not sure if it helps IE5.5 get its sum right tho - any idea DrDoc?)

    See [alistapart.com...] for more details.

    TomJones




    msg:1211931
     2:37 pm on Apr 23, 2003 (gmt 0)

    Hey Guys, thanks for the posts! Very informative re: my current situation.

    Regarding naming IDs and Classes the same, I was just being lazy (maybe that's another big reason why CSS is so appealing), I always give everything unique names so, I know what they are a few months later.

    I test in IE6 (is there a breakdown of percentages for the worldwide population use of each, ie., Opera 3% NN 5% IE 92%? I'm curious). Here's some of the code from my external for a header I am using on each page:

    DIV#header{position: absolute;
    left:0px;
    top: 75px;
    width:740px;
    height: 50px;
    text-align: center;}

    Here's another possible problem area I just realized. Maybe it's my H3 & H6 settings. Here they are -code posts to a minimum, this is my first code post ;)

    h3{ font:italic bold larger Times, "Times New Roman", serif; text-align: center; font-size: 1.3em; color: #006400;
    }
    h6{font: italic bold larger Times, "Times New Roman", serif; text-align: center; font-size: 3em; color: Black;
    }

    OK, now I realize it's gotta be something in the headers. I was toying with some tables a while ago and, the headers were doing the same thing. I always heard that em was the preferable measurement, then px. Is the 3em throwing everything off? Thx, THx, THX!

    TJ
    -BTW- what browser (version)is the best for testing CSS, without being an undue burden?

    WibbleWobble




    msg:1211932
     3:23 pm on Apr 23, 2003 (gmt 0)

    Why have you defined the font size twice for the h3 & h6 tags?

    h6{font: italic bold larger Times, "Times New Roman", serif; text-align: center; font-size: 3em; color: Black;}

    I don't really know about whats going on elsewhere ;)

    TomJones




    msg:1211933
     5:07 pm on Apr 23, 2003 (gmt 0)

    That's a good question. I'm using Topstyle, which makes the process easier but, it also allows you to specify things more than once or, more exactly, in more than one way. I'll popout the larger and, see what happens.

    DrDoc




    msg:1211934
     7:08 pm on Apr 23, 2003 (gmt 0)

    grahamstewart is right, using a full doctype definition helps IE6 to get things right. Without the full doctype, or with an invalid one (or, if the DTD tag isn't the very first element, no exceptions), IE6 will get kicked into oblivion and start rendering things as crappy as IE5.5! :o

    And no, gs... it won't help IE5.5 at all. In fact, nothing will. It's stuck rendering things the wrong way for ever and ever! ;)

    grahamstewart




    msg:1211935
     10:52 pm on Apr 23, 2003 (gmt 0)

    is there a breakdown of percentages for the worldwide population use of each

    Take a look at <snip> but heed the warnings regarding statistics :)

    it won't help IE5.5 at all

    Damn, I was afraid that might be the case.
    So how can I test my page on IE5 (I only have IE6, Opera7 and NN7 on this laptop). I'm guessing windows xp is too heavily mixed in with IE to allow a joint installation.
    Are there any IE5 dodgy box model simulators available?

    [edited by: Nick_W at 5:30 am (utc) on April 24, 2003]
    [edit reason] no urls please [/edit]

    TomJones




    msg:1211936
     12:02 am on Apr 24, 2003 (gmt 0)

    Right On, Graham!

    That's exactly what I was looking for (and about what I figured for stat breakdowns). Makes me feel better when my pages are still falling down in NN7.

    I've changed everything I can think of. The next change is going to be from em measurements to px. Of course, it's not just slight visual problems, the headers are over 25% down the page and there's about 2 inches between the two different headers. Back to tweaking..

    grahamstewart




    msg:1211937
     12:41 am on Apr 24, 2003 (gmt 0)

    Simplify, simplify, simplify...

    Often the best way to figure out whats going on is to start with a fresh page and build it up style by style till you see what the problem is. Then go back to the other page and correct it.

    Try this on page, usual headers and footers but without any external stylesheets


    <div style="border:1px solid #000">
    <h6>Hello</h6>
    </div>

    That works fine for me in IE6 and NN7 - it should do for you too. Now start adding in some of your header styles and see where it all goes wrong.

    Incidentally border: 1px solid #000 is my most common debugging technique. You might find it useful when tracking things down to make CSS rules like..

    div, h1, h2, h3, h4, h5, h6 {
    border: 1px solid #000;
    }

    so you can figure out whats going on.

    Global Options:
     top home search open messages active posts  
     

    Home / Forums Index / Code, Content, and Presentation / CSS
    rss feed

    All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
    Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
    WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
    © Webmaster World 1996-2014 all rights reserved