Welcome to WebmasterWorld Guest from 54.226.146.15

Forum Moderators: not2easy

Message Too Old, No Replies

NN7 & IE Differences in CSS Interpretation

Rockin' along in IE, falling all over itself in NN7

     

TomJones

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

10+ Year Member



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

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

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

    WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



    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

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

    WebmasterWorld Senior Member 10+ Year Member



    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

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

    10+ Year Member



    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

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

    10+ Year Member



    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

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

    10+ Year Member



    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

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

    WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



    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

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

    WebmasterWorld Senior Member 10+ Year Member



    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

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

    10+ Year Member



    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

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

    WebmasterWorld Senior Member 10+ Year Member



    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.

     

    Featured Threads

    Hot Threads This Week

    Hot Threads This Month