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?

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">
<!--

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

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);
}
*/
-->

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>

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!

Post an url.

Gérard
 
L

Len Philpot

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

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

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.

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?

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.

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

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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top