Reply to Re: IE 6.0 / Firefox 1.07 and CSS positioning differences

Your name:

Reply:


Posted by Gιrard Talbot on 12/21/41 11:35

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
--
remove blah to email me

[Back to original message]


УдалСнная Ρ€Π°Π±ΠΎΡ‚Π° для программистов  •  Как Π·Π°Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π° Google AdSense  •  England, UK  •  ΡΡ‚Π°Ρ‚ΡŒΠΈ Π½Π° английском  •  PHP MySQL CMS Apache Oscommerce  •  Online Business Knowledge Base  •  DVD MP3 AVI MP4 players codecs conversion help
Home  •  Search  •  Site Map  •  Set as Homepage  •  Add to Favourites

Copyright © 2005-2006 Powered by Custom PHP Programming

Π‘Π°ΠΉΡ‚ ΠΈΠ·Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½ Π² Π‘Ρ‚ΡƒΠ΄ΠΈΠΈ Π’Π°Π»Π΅Π½Ρ‚ΠΈΠ½Π° ΠŸΠ΅Ρ‚Ρ€ΡƒΡ‡Π΅ΠΊΠ°
ΠΈΠ·Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π²Π΅Π±-сайтов, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния, поисковая оптимизация