473,287 Members | 1,741 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,287 software developers and data experts.

nav menu placement different in IE/moz/opera

gil
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
Apr 22 '06 #1
15 1840
To further the education of mankind, gil <gi***********@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.
Apr 22 '06 #2
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)
Apr 22 '06 #3
gil
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:
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.

Apr 22 '06 #4
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)
Apr 23 '06 #5
To further the education of mankind, Jim Moe <jmm-list.AXSPAMGN@sohnen-
moe.com> vouchsafed:
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;".


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.
Apr 23 '06 #6
jim
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

Apr 23 '06 #7
gil
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:

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;".

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?

Apr 23 '06 #8
gil
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

Apr 23 '06 #9

"Neredbojias" <http://www.neredbojias.com/fliam.php?cat=alt.html> kirjoitti
viestissä:Xn**********************************@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 ;)
Apr 23 '06 #10
Neredbojias 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?

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)
Apr 23 '06 #11
gil
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:
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?


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.

Apr 23 '06 #12
To further the education of mankind, "W˙rm"
<no*************@north.invalid> 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"?


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


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.
Apr 23 '06 #13
To further the education of mankind, Jim Moe
<jm***************@sohnen-moe.com> vouchsafed:
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?

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.
Apr 23 '06 #14

"Neredbojias" <http://www.neredbojias.com/fliam.php?cat=alt.html> kirjoitti
viestissä:Xn**********************************@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... ;)
Apr 23 '06 #15
gil
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ä:Xn**********************************@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... ;)

Apr 24 '06 #16

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Dennis M. Marks | last post by:
Is there a javascript alternative to the dropdown menu in a form (SELECT OPTION). I would like the ability to pass a selected item to a function but I would like more control in the design of the...
1
by: Macamba | last post by:
Hi all, I am currently developing a website for a voluntary organisation. It is my first step in website development. The dynamic menu I developed has some bugs, which I addressed in another...
1
by: ajay | last post by:
I have following code for a slide menu but i twiked it to work for a single level menu. Open it in a Browser to get a clear picture. I have 2 Qs 1) How to make first entry as non-link. i.e i...
28
by: Lachlan Hunt | last post by:
Hi, I've been trying, but failing to work out what is causing Opera to render my drop down menu incorrectly on my site. http://www.lachy.id.au/ For some reason, there seems to be extra margin...
2
by: RWD | last post by:
I am trying to figure out how to change the target frame in my hyperlink on a DHTML menu. The menu is in one frame and the target frame is called "main" The code is below: Thanks in advance...
5
by: Sura | last post by:
Hi I have designed a simple DHTML menu which comes over a flash animation when it appears. I have set the window mode as transparent in the flash project. This menu is showing fine when seen...
11
by: Edwin Knoppert | last post by:
Just wanted to verify since we need a good menu for different browsers. The XP lookalikes are awesome!! http://www.aspxlab.com/ From the help: AspxLab Menu and SlideMenu support these...
0
by: Garmt de Vries-Uiterweerd | last post by:
X-posted to opera.page-authoring, because this is a bit Opera-specific for the moment. F'up to ciwas. I am playing around with dedicated styling for the projection media type.. Currently the...
15
by: LuB | last post by:
I am constantly creating and destroying a singular object used within a class I wrote. To save a bit of time, I am considering using 'placement new'. I guess we could also debate this decision -...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.