CSS Layout Issue

Question

Using CSS I am attempting my first tableless page layout and
I am bumping up against a problem I cannot figure out. I am posting
this hoping that kind soul out there will take a drive by and tell
me what I'm doing wrong.
Testing with Firefox and IE6&7 for PC and Mac, Netscape
7.2 and Safari for the Mac, all seem to work. My HTML and CSS both
validated at W3C.
I initially worked out some bugs and it was working well
until I updated Netscape from 8.1 to 8.1.2. A rollover that belongs
on the farthest right is now pushed out of position and appears
below the masthead. Resulting in an additional scroll bar under the
masthead area and along the right side. My content appears below
this additional scroll bar.
You can see the page here:
http://www.voicedatacable.com/index2.html
The css is here:
http://www.voicedatacable.com/styles/main.css
To summarize, I have my div tags nested in this fashion:
<overall_page_container>
<masthead_container>
<masthead_row1 />
<masthead_row2_1 />(float: left)
<masthead_row2_2 />(float: left)
<masthead_row2_3 />(float: left)
<masthead_row2_4 />(float: left)
<masthead_row2_5 />(float: left)
</masthead_container >
<content_container />
<footer />
</overall_page_container >
I hope someone out there can tell me what I'm missing here.
Thanks in advance.

Answer 1

Change this -
DIV#logo {
BACKGROUND: url(images/images/logo.gif);
FLOAT: left;
MARGIN: 0px 0px 0px 70px;
WIDTH: 225px;
HEIGHT: 150px
to this -
DIV#logo {
BACKGROUND: url(images/images/logo.gif);
FLOAT: left;
MARGIN: 0px 0px 0px 70px;
WIDTH: 225px;
HEIGHT: 150px;
DISPLAY:inline;
and see what happens.
It's the IE double margin bug.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"dog n' moon" <[email protected]> wrote in
message
news:e28epu$l3o$[email protected]..
> In Safari, the two top elements are horizontally level
with each other. I
> just
> checked on Win XP and the navigation cluster is below
the logo, so the
> float is
> not working...
> URL is:
>
http://hopehouseoc.com/admission.html
>
> any help with CSS floats or a better way to set these
two elements even
> with
> each other horizontally?
>
> thanks in advance
>