IE 6.0 / Firefox 1.07 and CSS positioning differences

L

Len Philpot

I'm very new to CSS (just experimenting) and this may well just be an
unavoidable difference between the two browsers, but I'd like to know
for sure. I have no others here at home to test with. At work I have
Opera, Konqueror, Galeon, etc., etc. but not here.

Anyway, the following code just creates a scrolling menu (complete with
dummy links ;-) I've commented out all but basically the essentials and
still it happens : In Firefox it automatically adjusts the width
properly and doesn't generate a horizontal scrollbar (just the
vertical). While in IE it /always/ makes it too narrow and thus adds one
there. The commented stuff is obviously just visual candy, but it
happens regardless.

I'm more than wide open to the distinct possibility I'm going astray
somehow, but if so, what am I doing wrong?

<html>
<head>
<style type="text/css">
<!--
.menu
{
position: absolute;
height: 6em;
overflow: auto;
border-color: black;
border-style: solid;
border-width: 1px;
/*
left: 10px;
top: 10px;
background-color: rgb(220,220,220);
padding: 15px;
padding-top: 5px;
padding-bottom: 5px;
font-weight: bold;
font-size: 10pt;
*/
}
/*
.menu_item
{
color: black;
text-decoration: none;
padding-left: 5px;
padding-right: 5px;
}

.menu_item:hover
{
color: yellow;
background-color: rgb(0,0,196);
}
*/
-->
</style>
</head>
<body>
<p class="menu">
<a href="dummy" class="menu_item">Menu choice one</a><br>
<a href="dummy" class="menu_item">Menu choice two</a><br>
<a href="dummy" class="menu_item">Menu choice three</a><br>
<a href="dummy" class="menu_item">Menu choice four</a><br>
<a href="dummy" class="menu_item">Menu choice five</a><br>
<a href="dummy" class="menu_item">Menu choice six</a><br>
<a href="dummy" class="menu_item">Menu choice seven</a><br>
<a href="dummy" class="menu_item">Menu choice eight</a><br>
<a href="dummy" class="menu_item">Menu choice nine</a><br>
<a href="dummy" class="menu_item">Menu choice ten</a><br>
</p>
</body>
</html>

Thanks!
 
?

=?ISO-8859-15?Q?G=E9rard_Talbot?=

Len Philpot a écrit :
I'm very new to CSS (just experimenting) and this may well just be an
unavoidable difference between the two browsers, but I'd like to know
for sure. I have no others here at home to test with. At work I have
Opera, Konqueror, Galeon, etc., etc. but not here.

Anyway, the following code just creates a scrolling menu (complete with
dummy links ;-) I've commented out all but basically the essentials and
still it happens : In Firefox it automatically adjusts the width
properly and doesn't generate a horizontal scrollbar (just the
vertical). While in IE it /always/ makes it too narrow and thus adds one
there. The commented stuff is obviously just visual candy, but it
happens regardless.

I'm more than wide open to the distinct possibility I'm going astray
somehow, but if so, what am I doing wrong?
Click to expand...

You are not posting an url which is always better for this kind of post.

No doctype declaration. I recommend

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

so that you make sure you trigger all modern/web standards compliant
browsers (including MSIE 6) into standards compliant rendering mode.
When triggered in standards compliant rendering mode, MSIE 6 implements
correctly the CSS1 box model.

<html>
<head>
<style type="text/css">
<!--
Click to expand...

Commenting the style declarations is no longer needed.
.menu
{
position: absolute;
height: 6em;
Click to expand...

The height is supposed to be for the whole paragraph which has 10 links
with forced wrapping. What's wrong with not setting the height at all?
.... thus letting the content set the box height?
overflow: auto;
border-color: black;
border-style: solid;
border-width: 1px;
/*
left: 10px;
top: 10px;
background-color: rgb(220,220,220);
padding: 15px;
padding-top: 5px;
padding-bottom: 5px;
font-weight: bold;
font-size: 10pt;
*/
}
/*
.menu_item
{
color: black;
text-decoration: none;
padding-left: 5px;
padding-right: 5px;
}

.menu_item:hover
{
color: yellow;
background-color: rgb(0,0,196);
}
*/
-->
Click to expand...

Commenting the style declaration is unneeded.

</style>
</head>
<body>
<p class="menu">
<a href="dummy" class="menu_item">Menu choice one</a><br>
<a href="dummy" class="menu_item">Menu choice two</a><br>
<a href="dummy" class="menu_item">Menu choice three</a><br>
<a href="dummy" class="menu_item">Menu choice four</a><br>
<a href="dummy" class="menu_item">Menu choice five</a><br>
<a href="dummy" class="menu_item">Menu choice six</a><br>
<a href="dummy" class="menu_item">Menu choice seven</a><br>
<a href="dummy" class="menu_item">Menu choice eight</a><br>
<a href="dummy" class="menu_item">Menu choice nine</a><br>
<a href="dummy" class="menu_item">Menu choice ten</a><br>
</p>
Click to expand...

I disagree with your semantic markup. Better is to use a real list for
your navigation menu.

<ul id="MenuNav">
<li><a href="dummy">Menu choice one</a></li>
<li><a href="dummy">Menu choice two</a></li>
<li><a href="dummy">Menu choice three</a></li>
<li><a href="dummy">Menu choice four</a></li>
<li><a href="dummy">Menu choice five</a></li>
<li><a href="dummy">Menu choice six</a></li>
<li><a href="dummy">Menu choice seven</a></li>
<li><a href="dummy">Menu choice eight</a></li>
<li><a href="dummy">Menu choice nine</a></li>
<li><a href="dummy">Menu choice ten</a></li>
</ul>

That way, your navigation menu of 10 links will degrade gracefully in
user agents not supporting CSS.

You can style the list item for that <ul> like this:

ul#MenuNav li {...}

Here, it's better to use id and not class for the list because such list
is likely to be only once used in your page. Class is used for elements
which can be grouped logically in style declarations.

Note that <ul> and <li> have different margin and padding values from
browser (version) to browser (version).

Consistent List Indentation:
http://developer.mozilla.org/en/docs/Consistent_List_Indentation
</body>
</html>

Thanks!
Click to expand...

Post an url.

Gérard
 
L

Len Philpot

You are not posting an url which is always better for this kind of post.
Click to expand...

It's not published anywhere - Just on a PC. It was just a page I had
created while reading some stuff online, trying various things. In fact,
I don't even have access to it right now, but I'll save your reply for
when I can sit down with it (thanks!).

No doctype declaration. I recommend
Click to expand...

Partially (and misguidely) intentional on my part - I was trying to
strip it down to the bare essentials, but I guess removing influential
code is going a bit too far, eh? ISTR I was using 4.01 transitional.

so that you make sure you trigger all modern/web standards compliant
browsers (including MSIE 6) into standards compliant rendering mode.
When triggered in standards compliant rendering mode, MSIE 6 implements
correctly the CSS1 box model.
Click to expand...

That's good to know, although other things I wrote don't seem to work as
expected once quirks mode is gone (obviously). The last time I wrote any
HTML was using Netscape 2 era code, so it's been a while and obviously I
have a lot to (re)learn.

The height is supposed to be for the whole paragraph which has 10 links
with forced wrapping. What's wrong with not setting the height at all?
... thus letting the content set the box height?
Click to expand...

Well, I had other content below below it that I wanted to remain
onscreen, IIRC.

I disagree with your semantic markup. Better is to use a real list for
your navigation menu.
Click to expand...

See the answer before last - Obviously I need to rethink things. :)
Thanks for the tip.

You can style the list item for that <ul> like this:

ul#MenuNav li {...}

Here, it's better to use id and not class for the list because such list
is likely to be only once used in your page. Class is used for elements
which can be grouped logically in style declarations.

Note that <ul> and <li> have different margin and padding values from
browser (version) to browser (version).

Consistent List Indentation:
http://developer.mozilla.org/en/docs/Consistent_List_Indentation
Click to expand...

Bookmarked for future reference.

Thanks again and Merry Christmas.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with Visual Lightbox: Scripts 2
Positioning CSS components 1
Buttons lining up 1
Interfering CSS 1
Dropdown menu in a fixed navbar 2
Working on mobile css menu with plenty of frustration! 2
Index.php with bootstrap implementation and extern sites inclusion 0
Positioning a popup 10

Members online

No members online now.
Total: 49 (members: 2, guests: 47)
Robots: 244

Forum statistics

Threads
473,994
Messages
2,570,222
Members
46,809
Latest member
moe77

Latest Threads

Top