Closed
Bug 363743
Opened 19 years ago
Closed 19 years ago
Anomaly re rendering of HTML4 with CSS
Categories
(Firefox :: General, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: george.albright, Unassigned)
Details
Attachments
(1 file)
|
4.72 KB,
text/html
|
Details |
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)
Build Identifier: Firefox 2.0
I am creating a simple, text mode website, using only HRML and CSS. There is no use of scripting languages of any type.
The HTML4 is “Strict”, and it has been verified as such.
I have created a very simple, very standard, horizontal tabbed navigation construct that I use on every page.
Here is the anomaly --- The tabbed navigation renders perfectly in Internet Explorer, Netscape, Opera, and MSN Explorer. It does NOT render correctly in FireFox versions 1.5 and 2. In brief, the rendering of the tab below the tab text is not correct. In all cases, the tab border is not rendered below the bottom edge of the text. Additionally, for unselected tabs the tab color is not carried down below the bottom edge of the tab text; for “hover” and “selected” the tab color is rendered OK, but as mentioned above the lower portion of the border is not drawn.
I am not sure if this message area will permit me to add my HTML and CSS. If not, and it you want it, please get back to me at the email I specified and I will send it to you. You can also reach me at my home email, which is
Galaxy97@cox.net
==============
Here is the HTML
==============
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Free and Simple Home</title>
<link rel="stylesheet" type="text/css" href="Free and Simple.css">
</head>
<body id="home">
<h2>Free and Simple - The Home Page</h2>
<ul id="tabnav">
<li class="home"><a href="#">Home</a></li>
<li class="news"><a href="news.html">News</a></li>
<li class="products"><a href="#">Products</a></li>
<li class="support"><a href="#">Support</a></li>
<li class="technotes"><a href="#">Technotes</a></li>
<li class="best"><a href="#">The Best</a></li>
<li class="websites"><a href="#">Web Sites</a></li>
<li class="contribute"><a href="#">Contribute</a></li>
</ul>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras quis tellus sit amet diam consectetuer scelerisque. Nulla facilisi. Praesent sit amet justo. Sed mattis arcu sed nisl. Vestibulum ante urna, gravida rhoncus, porta vel, sodales id, nisl. Vestibulum lectus velit, dignissim quis, molestie vel, iaculis quis, tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris sollicitudin dolor quis dolor. Donec at nisl ac felis vestibulum placerat. Fusce sollicitudin tristique nibh. Donec aliquam. Proin vitae neque iaculis dolor eleifend rhoncus. Curabitur dictum lobortis arcu. Vivamus tincidunt metus at justo. Aliquam dui. Nulla semper, nunc sit amet viverra placerat, mauris wisi sodales massa, et tincidunt sapien nisl eget nulla. Vivamus a neque vel quam cursus tincidunt. Fusce porttitor justo nec nisl. In vel velit eget tortor feugiat placerat.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam nulla nunc, interdum nec, interdum non, hendrerit in, enim. Donec eget risus. In eget neque vel nunc posuere iaculis. In adipiscing justo in enim. Donec commodo, dui ac pharetra interdum, libero wisi tincidunt arcu, sed ornare magna velit vel elit. Sed nec risus a massa imperdiet euismod. Nunc hendrerit. Fusce sit amet eros. Etiam vitae nulla at lectus fermentum rhoncus. </p>
</div>
<h6>Copyright (C) Free and Simple, LLC All rights reserved. </h6>
</body>
</html>
==============
Here is the CSS
==============
body {
color: Black;
font-family: Verdana, Helvitica, Ariel, "Ariel Black", Broadway, sans-serif;
font-size: medium;
font-weight: normal;
background-image: url(images/lgrey011.jpe);
}
a {
color: Blue;
text-decoration: none;
}
a:hover {
color: Gray;
text-decoration: none;
}
h1{
font-family: "Arial Black";
font-size: 400%;
font-weight: bold;
}
h2{
font-family: Verdana;
font-size: 120%;
font-style: italic;
line-height: 100%;
font-weight: bolder;
margin-bottom: 0%;
color: Blue;
}
h3{
font-size: medium;
font-style: italic;
font-family: Verdana;
}
h6{
font-size: xx-small;
font-style: italic;
font-family: Verdana;
font-weight: lighter;
}
ul#tabnav {
list-style-type: none;
margin: 0;
padding-left: 40px;
padding-bottom: 33px;
border-bottom: 2px solid #711515;
font: bold 11px verdana, arial, sans-serif;
padding-top: 20px;
}
ul#tabnav li {
float: left;
height: 21px;
display: block;
background-color: Black;
margin: 2px 2px 2px 2px;
border: 1px solid #711515;
font-size: large;
}
ul#tabnav a:link, ul#tabnav a:visited {
display: block;
color: White;
background-color: transparent;
text-decoration: none;
padding: 4px;
}
ul#tabnav a:hover {
background-color: #F4869C;
color: #FFFFFF;
}
body#home li.home,
body#news li.news,
body#products li.products,
body#support li.support
body#technotes li.technotes
body#best li.best
body#best li.websites
body#best li.contribute
{
border-bottom: 1px solid #fff;
color: #000000;
background-color: #FFFFFF;
}
body#home li.home a:link, body#home li.home a:visited,
body#news li.news a:link, body#news li.news a:visited,
body#products li.products a:link, body#products li.products a:visited,
body#support li.support a:link, body#support li.support a:visited
body#technotes li.technotes a:link, body#technotes li.technotes a:visited
body#best li.best a:link, body#best li.best a:visited
body#websites li.websites a:link, body#websites li.websites a:visited
body#contribute li.contribute a:link, body#contribute li.contribute a:visited
{
color: #000000;
background-color: #FFFFFF;
}
#content {
border: 1px solid #711515;
border-top: none;
padding: 25px 60px 6px 60px;
font-size: larger;
}
Reproducible: Always
Steps to Reproduce:
1. Copy my HTML and CSS files contained in this bug report.
2. Place both files into a test directory.
3. Open my HTML file in FireFox ver 2 (also try it in ver 1.5)
4. Then open in in IE, Opera, Netscape, and MSN explorer.
Actual Results:
THE ANOMALY IS OBVIOUS - ONLY FIREFOX FAILS TO RENDER CORRECTLY.
Expected Results:
Firefox shows anomalous rendering.
Firefox shoould render HTML2 with CSS2 as the other 4 browsers do.
|
||
Comment 1•19 years ago
|
||
|
|
||
Comment 2•19 years ago
|
||
In SeaMonkey 2006121102 I get the same layout as Opera9, both on Linux.
I assuming the error is the partly missing border under "Home"?
Please describe what the error is so we don't have to guess. Thanks.
|
||
Comment 3•19 years ago
|
||
Fwiw, on OS X, Minefield, Firefox 2.0, Safari 2.04, Opera 9 all render the test case the same way.
And so does IE 7 WinXPSP2.
Your layout appears to rely on a bug in IE 6 win, in that IE 6 expands elements even though a width (or height in your case) is assigned. I'm referring to this rule:
ul#tabnav li {
float: left;
height: 21px; /* <--- that one */
...
}
If you have problems with stylesheets and conflicts between browsers, you should subscribe to a dedicated mailing list, such as CSS-D:
http://www.css-discuss.org/mailman/listinfo/css-d
|
|
Reporter | |
Comment 4•19 years ago
|
||
Thanks for the response. I have a few comments --
My HTML4/CSS2 displays as I designed it, and as I want it, on IE6, Opera, Netscape, and MSN Explorer, tested under both Win XP and Windows 2000.
It does not display as I want it on Firefox 1.5 and 2.0.
Its appearance is obviously defective in Firefox.
Your comment about my layout relying on a bug in IE6 (win) may be technically correct from your viewpoint, but I have to report that Firefox is the only browser I’ve tested that produces a fractured appearance.
As I am sure you are well aware, adherence to HMTL and CSS standards is uneven. I suggest that while you may be technically correct, you are in the minority.
I was hoping to find some way to make it appear right in Firefox, or at least to get the Mozilla org to acknowledge the situation, and to make it appear as it does in the other browsers when you release the next update to Firefox.
It sounds to me like Mozilla is going to wrap itself up in a “compliance cocoon”, and I am disappointed.
I would very much appreciate hearing from you on what I can do to make it appear correct in Firefox.
Barring that, and since I have a product and a website to release in the very hear future, I will need to add a “special note to Firefox users” on my website. That note will simply say that Firefox displays the page differently than does IE6, Opera, Netscape, and MSN Explorer. I need to say this lest Firefox users think that I have done sloppy coding on my website. All of my HTML4 qualifies as “strict”, and there are no reported issues in my CSS2.
You may be right, but you are also the only one marching out of step on this one.
George Albright.
|
|
||
Comment 5•19 years ago
|
||
(In reply to comment #4)
> You may be right, but you are also the only one marching out of step on this
> one.
No, your design does not work in Opera9 or IE7 either. Setting a slightly
larger font size in the preferences produces the same "error" in those UAs.
Different platforms/UA combinations differs slightly in which font family/size
is the default and some users configure their UA with a larger default
font size.
I recommend that you use 'em' units instead of 'px' and please verify
that the page works with different font sizes. (You can easily test that
in Firefox using CTRL++ and CTRL+- to zoom the text size.)
-> INVALID
Status: UNCONFIRMED → RESOLVED
Closed: 19 years ago
Resolution: --- → INVALID
|
|
Reporter | |
Comment 6•19 years ago
|
||
MANY THANKS --
THIS IS REAL HELP.
HOPEFULLY MY PROBLEM IS SOLVED.
AND I GET AN EDUCATION AS WELL.
George Albright
You need to log in
before you can comment on or make changes to this bug.
Description
•