Header behaviour between browsers

Discussion in 'HTML' started by Syl, Aug 16, 2007.

  1. Syl

    Syl Guest

    Hello group - I'm getting different behaviour between IE and Netscape.
    IE is displaying correctly.

    I have two divs - header and menu.
    If you take a look at :
    http://checkeredshirt.com/content_too.html

    I have put a red border around the header div.
    Like this :
    <body>
    <div id="header">
    <h1>Centre</h1>
    <div id="menu">
    etc, etc, etc,
    </div>
    </div>

    The menu div is inside the header div, but Netscape is not recognizing
    it this way.

    Help on this would be hugely appreciated!

    Thanks.
    Syl, Aug 16, 2007
    #1
    1. Advertising

  2. Syl

    John Hosking Guest

    Syl wrote:
    > Hello group - I'm getting different behaviour between IE and Netscape.


    You mean groups. But followups set to c.i.w.a.s.

    > IE is displaying correctly.


    You mean, IE is displaying the way you want?

    >
    > I have two divs - header and menu.
    > If you take a look at :
    > http://checkeredshirt.com/content_too.html


    Actually, you have a lot of divs. That's a pretty big page for a
    simplified test case. Maybe for future debugging you could remove the
    irrelevant code before posting.

    Similarly, that's an awful lot of CSS. And if you do need it all (which
    I really doubt), then I suggest (and request) that you make it external
    rather than embedded as it is here.

    Cool, though, that both your markup and CSS are validated!

    >
    > The menu div is inside the header div, but Netscape is not recognizing
    > it this way.


    Do you mean you want the green nav tabs to be to the right of the
    "Centre" text? Not gonna happen (in a conforming browser, that is).

    div#header h1 { width:800px; margin:0 auto; text-align:left; }
    div#menu { width:800px; margin:0 auto;text-align:left; }
    div#header h1 { padding: 5px 0 10px; color: #FFF}

    The first ruleset asks for h1 to be 800px wide (instead of, e.g.,
    leaving it at its natural width, or specifying it in em units). (The
    third ruleset doesn't change that but it's sitting separately and I
    can't tell why.) The second ruleset wants your #menu to be another 800px
    wide, but you don't have a minimum of 1600 px for these two things to be
    side by side, even if they wanted to be.

    Or maybe you want the green tabs to appear up in front of the darker
    gray bg. The menu div is inside the header div, as you say, but the
    green tabs (ul#menudrop) have been floated, and so are out of the flow
    (i.e., have no height as far as #menu is concerned.

    One approach is to give #menu a height:3.2em; (more or less, suck it and
    see). But probably someone like Ben C will come along with better
    advice; mine is just a workaround. (You'll have trouble when somebody
    resizes your text, due to the mix of px and em, but you've got that
    problem already anyway.)

    Misc. now, entirely unrelated to your problem here:

    BTW 1: I don't know what's centered about your "Centre" texts; I guess
    they refer to a facility, eh?

    BTW 2: You get a horizontal scrollbar because #header has width:100% and
    a 1px border. 100% + 2px = scrollbar.

    BTW 3: Please don't do this: body {font: 85%/1.3 Verdana }. Use another
    font face and make it 100%.

    HTH.

    --
    John
    Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html
    John Hosking, Aug 16, 2007
    #2
    1. Advertising

  3. Syl

    Syl Guest

    On Aug 16, 3:37 pm, John Hosking <>
    wrote:
    > Syl wrote:
    > > Hello group - I'm getting different behaviour between IE and Netscape.

    >
    > You mean groups. But followups set to c.i.w.a.s.
    >
    > > IE is displaying correctly.

    >
    > You mean, IE is displaying the way you want?
    >
    > >
    > > I have two divs - header and menu.
    > > If you take a look at :
    > >http://checkeredshirt.com/content_too.html

    >
    > Actually, you have a lot of divs. That's a pretty big page for a
    > simplified test case. Maybe for future debugging you could remove the
    > irrelevant code before posting.
    >
    > Similarly, that's an awful lot of CSS. And if you do need it all (which
    > I really doubt), then I suggest (and request) that you make it external
    > rather than embedded as it is here.
    >
    > Cool, though, that both your markup and CSS are validated!
    >
    >
    >
    > > The menu div is inside the header div, but Netscape is not recognizing
    > > it this way.

    >
    > Do you mean you want the green nav tabs to be to the right of the
    > "Centre" text? Not gonna happen (in a conforming browser, that is).
    >


    >
    > Or maybe you want the green tabs to appear up in front of the darker
    > gray bg. The menu div is inside the header div, as you say, but the
    > green tabs (ul#menudrop) have been floated, and so are out of the flow
    > (i.e., have no height as far as #menu is concerned.
    >
    > One approach is to give #menu a height:3.2em; (more or less, suck it and
    > see). But probably someone like Ben C will come along with better
    > advice; mine is just a workaround. (You'll have trouble when somebody
    > resizes your text, due to the mix of px and em, but you've got that
    > problem already anyway.)
    >
    > Misc. now, entirely unrelated to your problem here:
    >
    > BTW 1: I don't know what's centered about your "Centre" texts; I guess
    > they refer to a facility, eh?
    >
    > BTW 2: You get a horizontal scrollbar because #header has width:100% and
    > a 1px border. 100% + 2px = scrollbar.
    >
    > BTW 3: Please don't do this: body {font: 85%/1.3 Verdana }. Use another
    > font face and make it 100%.



    Hello John!

    THANKS for taking the time to provide such a concise answer.
    I'll be picking apart tonight in the expectations that it will be
    resolved from yuor post!

    I think the key lives here :
    > div#header h1 { width:800px; margin:0 auto; text-align:left; }
    > div#menu { width:800px; margin:0 auto;text-align:left; }
    > div#header h1 { padding: 5px 0 10px; color: #FFF}
    >
    > The first ruleset asks for h1 to be 800px wide (instead of, e.g.,
    > leaving it at its natural width, or specifying it in em units). (The
    > third ruleset doesn't change that but it's sitting separately and I
    > can't tell why.) The second ruleset wants your #menu to be another 800px
    > wide, but you don't have a minimum of 1600 px for these two things to be
    > side by side, even if they wanted to be.


    Well noted about removing relevant / irrelevant info when posting. So
    my apologies.

    I was amazing it validated too! lol.
    I know it's a mess - I have been spending time bringing several CSS
    methods into the Nifty Corners code in order to integrate drop down
    menus with the Nifty layout.
    Hence the absolute mess of js and css

    Yes - IE is displaying the way I want it (the client wants it) to.

    Thanks again!
    Syl, Aug 16, 2007
    #3
  4. On Thu, 16 Aug 2007, Syl wrote:

    > Hello group - I'm getting different behaviour between IE and Netscape.


    Netscape 3 or Netscape 4?
    Andreas Prilop, Aug 17, 2007
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. john
    Replies:
    2
    Views:
    469
    Chris Jackson
    Dec 11, 2003
  2. =?Utf-8?B?TVIuIFVOREVSSElMTA==?=

    Inconsistent look between browsers

    =?Utf-8?B?TVIuIFVOREVSSElMTA==?=, Apr 20, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    270
    bruce barker
    Apr 20, 2004
  3. El Kabong

    Browsers, browsers! Quo vadis?

    El Kabong, May 11, 2007, in forum: HTML
    Replies:
    23
    Views:
    877
    dorayme
    May 13, 2007
  4. Andy Chambers
    Replies:
    1
    Views:
    376
    Daniel Dyer
    May 14, 2007
  5. mlt
    Replies:
    2
    Views:
    816
    Jean-Marc Bourguet
    Jan 31, 2009
Loading...

Share This Page