Header behaviour between browsers

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
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 :

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

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

Help on this would be hugely appreciated!


Re: Header behaviour between browsers

Syl wrote:
Quoted text here. Click to load it

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

Quoted text here. Click to load it

You mean, IE is displaying the way you want?

Quoted text here. Click to load it

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!

Quoted text here. Click to load it

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%.


Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html

Re: Header behaviour between browsers

Quoted text here. Click to load it

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 :
Quoted text here. Click to load it

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!

Re: Header behaviour between browsers

On Thu, 16 Aug 2007, Syl wrote:

Quoted text here. Click to load it

Netscape 3 or Netscape 4?

Site Timeline