Stylesheets - nav menu placement different in IE/moz/opera

Author

nav menu placement different in IE/moz/opera

gil

2006-04-22, 7:02 pm

Viewing my site in Moz 1.7.12 and Opera 8.54, the nav menu intrudes into
the content area, but it seems to display correctly in IE 6.0. Between
browsers, there is a marked difference in the displayed left margin
(padding?) of the navigation menu, with IE showing the intended spacing.

The menu appears to be shifted right in Moz/Opera and pushes into the
main page data.

I wanted the nav menu centered in the left floated block and have the
whole thing about 250 pixels wide. This nav menu is a modified version
of one from alistapart.

Can someone look at my site, check out the CSS, and show me where I
screwed up. I am fairly new to style sheets, and I might be missing
something that would be obvious to a more experienced person.

http://www3.ns.sympatico.ca/gilservices/
the CSS is at .../pagefile/gil.css

I would be thankful for any help,

Gil

Neredbojias

2006-04-22, 7:02 pm

To further the education of mankind, gil <gilsxervicxes@ns.sxympatico.ca>
vouchsafed:

> Viewing my site in Moz 1.7.12 and Opera 8.54, the nav menu intrudes into
> the content area, but it seems to display correctly in IE 6.0. Between
> browsers, there is a marked difference in the displayed left margin
> (padding?) of the navigation menu, with IE showing the intended spacing.
>
> The menu appears to be shifted right in Moz/Opera and pushes into the
> main page data.
>
> I wanted the nav menu centered in the left floated block and have the
> whole thing about 250 pixels wide. This nav menu is a modified version
> of one from alistapart.
>
> Can someone look at my site, check out the CSS, and show me where I
> screwed up. I am fairly new to style sheets, and I might be missing
> something that would be obvious to a more experienced person.
>
> http://www3.ns.sympatico.ca/gilservices/
> the CSS is at .../pagefile/gil.css

I believe the problem is the way in which you are using float:left on the
#nav div. Floats are tricky and it isn't something obvious, and obviously
you know what you're doing as I can tell from the code. You could try
placing #nav _after_ the other content in the container, but I'd...

An easy fix is to use position:absolute; on #nav.

--
Neredbojias
Infinity has its limits.

Jim Moe

2006-04-22, 7:02 pm

gil wrote:
>
> The menu appears to be shifted right in Moz/Opera and pushes into the
> main page data.
>
You found the problem? The layout looks okay here.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

gil

2006-04-22, 7:02 pm

No, haven't solved it yet.
in IE, the homepage looks like
[____MENU____HOMEPAGE_____etc.

but in Mozilla and Opera it looks like
[___________MENUHOMEPAGE_____etc.

It actually pushes the text of the main page to the right while
alongside the menu, and then reforms to the correct margin below the menu.

Problem is definitely not related to screen resolution. Same problem
1024 x 768 as at 1280 x 1024.

Gil

At approximately 2006/04/22 17:30, Jim Moe typed these characters:
> gil wrote:
>
>
> You found the problem? The layout looks okay here.
>

Jim Moe

2006-04-22, 11:03 pm

gil wrote:
> No, haven't solved it yet.
>
Ah, I was using Seamonkey (mozilla) which does not show that problem.
Add "clear: both;" to #nav before the "float: left;".

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Neredbojias

2006-04-23, 3:52 am

To further the education of mankind, Jim Moe <jmm-list.AXSPAMGN@sohnen-
moe.com> vouchsafed:

> gil wrote:
> Ah, I was using Seamonkey (mozilla) which does not show that problem.
> Add "clear: both;" to #nav before the "float: left;".

Now, just how can that work? I know it does - I've seen it (in FF), but
isn't clear suppose to _clear_ everything else from the same "line"? The
#content div still overlaps (-the horizontal space). What am I missing
here?

--
Neredbojias
Infinity has its limits.

jim

2006-04-23, 3:52 am

Gil,
I found that removing:
#banner img {
--> display: block;
float: left;
--> margin: .5em 2em .5em .5em;
--> border: none
}

and replacing with:
#banner img {
float: left;
}

will move your div to the desired margin; why? ... who knows!

BTW:
May I offer a plugin suggestion for firefox:
http://chrispederick.com/work/webdeveloper/

This ** [[ FREE ]] ** tool bar enhancement (honestly, no spyware,
pure bookmarklet javascript stuff) is invaluable for demarking boxes
and for its css editor. I easily identified the div boxes, heirarchy
and step-by-step amended (ie: deleted) css properties to find the
offending css error. If you are designing for firefox, I highly
recommend this useful tool bar for diagnostic css and javascripting
procedures!

-Jim

gil

2006-04-23, 3:52 am

Thanks to Jim Moe and Neredbojias, The clear trick seems to work. And,
like you, I wonder why it does?

At approximately 2006/04/23 00:15, Neredbojias typed these characters:
> To further the education of mankind, Jim Moe <jmm-list.AXSPAMGN@sohnen-
> moe.com> vouchsafed:
>
>
>
>
> Now, just how can that work? I know it does - I've seen it (in FF), but
> isn't clear suppose to _clear_ everything else from the same "line"? The
> #content div still overlaps (-the horizontal space). What am I missing
> here?
>

gil

2006-04-23, 3:52 am

Thanks Jim. Your suggestion lines up the nav menu, but it throws off the
header spacing that I was looking for.
I found that Jim Moe's suggestion of a 'clear: both' in #nav also
corrects the problem but does not affect the layout of the banner.

Thanks again for your effort.

Gil

At approximately 2006/04/23 00:48, jim typed these characters:

> Gil,
> I found that removing:
> #banner img {
> --> display: block;
> float: left;
> --> margin: .5em 2em .5em .5em;
> --> border: none
> }
>
> and replacing with:
> #banner img {
> float: left;
> }
>
> will move your div to the desired margin; why? ... who knows!
>
> BTW:
> May I offer a plugin suggestion for firefox:
> http://chrispederick.com/work/webdeveloper/
>
> This ** [[ FREE ]] ** tool bar enhancement (honestly, no spyware,
> pure bookmarklet javascript stuff) is invaluable for demarking boxes
> and for its css editor. I easily identified the div boxes, heirarchy
> and step-by-step amended (ie: deleted) css properties to find the
> offending css error. If you are designing for firefox, I highly
> recommend this useful tool bar for diagnostic css and javascripting
> procedures!
>
> -Jim
>

Wÿrm

2006-04-23, 3:52 am

"Neredbojias" <http://www.neredbojias.com/fliam.php?cat=alt.html> kirjoitti
viestissä:Xns97ADCE171D418httpwwwneredbojiasco@208.49.80.251...

<snip>

> Now, just how can that work? I know it does - I've seen it (in FF), but
> isn't clear suppose to _clear_ everything else from the same "line"?

I think you should read slightly more abou box model and floats.

> The
> #content div still overlaps (-the horizontal space). What am I missing
> here?

That banner didn't have height?

Here's little bit of stuff to think about

http://www.kolumbus.fi/ace/ng/floats.html

before you need rush read some more about box model and floats ;)

Jim Moe

2006-04-23, 3:52 am

Neredbojias wrote:
>
> Now, just how can that work? I know it does - I've seen it (in FF), but
> isn't clear suppose to _clear_ everything else from the same "line"? The
> #content div still overlaps (-the horizontal space). What am I missing
> here?
>
You are possibly misunderstanding what "clear" means.
A CSS "clear" means to position the block element so that the element is
*not adjacent* to any earlier floated element, left, right, or both.
However, I do not see how that applies here. The #nav block is not
adjacent to anything. Bit of a mystery here.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

gil

2006-04-23, 3:52 am

The problem, now corrected, acts as if something in the banner? was
sticking below the border so that the nav block would 'catch' on it. The
clear: both; would drop the following sections below the projecting bit,
but there appeared to be no vertical displacement of nav or content
before or after the clear was applied. I also tried giving a background
color and border to the banner, nav and content elements. There appeared
to be no projections outside the desired boundaries.

Jim Moe's fix works. The why can be left to the theorists among us.

At approximately 2006/04/23 03:43, Jim Moe typed these characters:

> Neredbojias wrote:
>
>
> You are possibly misunderstanding what "clear" means.
> A CSS "clear" means to position the block element so that the element is
> *not adjacent* to any earlier floated element, left, right, or both.
> However, I do not see how that applies here. The #nav block is not
> adjacent to anything. Bit of a mystery here.
>

Neredbojias

2006-04-23, 6:59 pm

To further the education of mankind, "Wÿrm"
<nomailstodragon@north.invalid> vouchsafed:

>
> I think you should read slightly more abou box model and floats.

Okay, clear applies only to _earlier_ _floated_ boxes. My mistake was in
thinking it "cleared" everything.

>
> That banner didn't have height?
>
> Here's little bit of stuff to think about
>
> http://www.kolumbus.fi/ace/ng/floats.html

Yes, the first 2 examples seem analogous to Gil's situation. I don't see
that as css-compliant, however.

--
Neredbojias
Infinity has its limits.

Neredbojias

2006-04-23, 6:59 pm

To further the education of mankind, Jim Moe
<jmm-list.AXSPAMGN@sohnen-moe.com> vouchsafed:

> You are possibly misunderstanding what "clear" means.

Yes, but I have that straightened now.

> A CSS "clear" means to position the block element so that the
> element is
> *not adjacent* to any earlier floated element, left, right, or both.
> However, I do not see how that applies here. The #nav block is not
> adjacent to anything. Bit of a mystery here.

Wyrm's example showed it, but I don't know why.

--
Neredbojias
Infinity has its limits.

Wÿrm

2006-04-23, 6:59 pm

"Neredbojias" <http://www.neredbojias.com/fliam.php?cat=alt.html> kirjoitti
viestissä:Xns97AE6CBE5479Chttpwwwneredbojiasco@208.49.80.251...

<snip>

> Wyrm's example showed it, but I don't know why.

because original problem html/css had

#nav with padding-top: 1em; and #banner img with margin: 0.5em 2em
0.5em 0.5em; and #banner had no height set.

if you would have set border: 1px solid red; to #nav and #banner img,
and changed #banner img margin to padding instead you would have seen
something... ;)

gil

2006-04-24, 6:54 pm

mea culpa.
In testing the original problem, I only applied a test border to the
image and didn't see any problem. After reading Wÿrm's message a few
times, I finally figured out that the image 'MARGIN' was below the
bottom of the Banner border; and, would snag the floated nav block and
prevent it from sliding into the place I desired.

Is this a case of the non-standards compliant IE 6.0 actually displaying
the banner and nav as I intended it to be, because it ignored the
problem, while compliant browsers Moz and Opera appeared to fail, but
were actually correctly interpreting the instructions?

Kind of reminds me of the old saying about a computer.
Computers don't make mistakes. If a program has an error in it, the
computer will faithfully follow the incorrect instructions to the
letter. GIGO - (garbage in - garbage out).

At approximately 2006/04/23 16:56, Wÿrm typed these characters:
> "Neredbojias" <http://www.neredbojias.com/fliam.php?cat=alt.html> kirjoitti
> viestissä:Xns97AE6CBE5479Chttpwwwneredbojiasco@208.49.80.251...
>
> <snip>
>
>
>
> because original problem html/css had
>
> #nav with padding-top: 1em; and #banner img with margin: 0.5em 2em
> 0.5em 0.5em; and #banner had no height set.
>
> if you would have set border: 1px solid red; to #nav and #banner img,
> and changed #banner img margin to padding instead you would have seen
> something... ;)
>
>