Firefox woes

**satterfield.ben** · 04-13-2007 08:32 AM

It is a rare moment when I develop something and have it work beautifully in IE7 and then be shock to find that Firefox is having problems with my CSS. Typically it is the other way around. The code in action is http://www.amherst.k12.va.us/index6.php and http://www.amherst.k12.va.us/web/css/style6.css

I'm sure it is a minor positioning problem with my ID of "header", but I haven't found anything that really moves it in Firefox without sending the header way to the right in IE. Thanks for any input. Inspiration for this theme came from Quatuor's website [WorkSafe].

Thanks in advance.
Ben

**satterfield.ben** · 04-13-2007 01:16 PM

Well I decided to make a slight sacrifice to fix my problem. I had to create another container box for and stuck everything in the header to align it up with the main content. Sounds confusing but it works

#top {
/* border: 1px solid #ff0000; */
width: 900px;
margin: 0 auto;
text-align: center;
}

Added that and then changed my page to put that ID around my other div's.

Also fixed the height of the main container by added
"display: table;" to my container div. (Thanks Google)

You can see my updated progress at http://www.amherst.k12.va.us/index3.php.

**drhowarddrfine** · 04-13-2007 04:38 PM

It is a rare moment when I develop something and have it work beautifully in IE7 and then be shock to find that Firefox is having problems with my CSS.

And therein lies your problem. You should be checking in a modern, standards compliant browser like Firefox and not old, buggy non-compliant IE.

You aren't properly linking your stylesheet.

Also, validate your html and css for your list of errors. Get it working in Firefox first. Then we can adjust for IEs quirks and bugs.

**WebJoel** · 04-13-2007 07:09 PM

See if this helps (too tired to explain what I changed, -sorry)

Looks about the same for IE6 as Fx 2.0.0.3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<link rel="stylesheet" href=
"http://www.amherst.k12.va.us/web/css/style6.css" type="text/css">
</head>
<body>
<div id="headerlogo"><img src=
"http://www.amherst.k12.va.us/images/logo2.gif" alt=
"XXXXXXXX"></div>
<div id="Container" style="height:100%;">
<div id="header" style="width:650px;">
<ul id="primary">
<li><span>Home</span></li>
<li style="list-style: none">
<ul id="secondary">

<li><a href="#">Calendar</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">News</a></li>
<li><a href="pages/home/superintendent.php">Superintendent</a></li>
</ul>
</li>
<li><a href="#">School Board</a></li>
<li><a href="#">Administration</a></li>
<li><a href="#">Instruction</a></li>
<li><a href="#">Schools</a></li>

<li><a href="#">Parents/Students</a></li>
<li><a href="#">Find It Quickly</a></li>
</ul>
</div>
<div id="Content" style="height:30px;"></div>
<div id="left">
<ul id="sideNav">
<li><a href="#" id="homeLink" name="homeLink">Home</a></li>
<li><a href="#" id="featureLink" name=
"featureLink">Features</a></li>
<li><a href="#" id="expertLink" name="expertLink">Experts</a></li>
<li><a href="#" id="quizLink" name="quizLink">Quiz</a></li>

<li><a href="#" id="projectLink" name=
"projectLink">Projects</a></li>
<li><a href="#" id="horoscopeLink" name=
"horoscopeLink">Horoscopes</a></li>
</ul>
</div>
<div id="right" style="float:left; width:650px;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque est. In risus velit, nonummy a, rhoncus et, aliquam quis,
nibh. Suspendisse nonummy dui id metus. Sed lacus urna,
sollicitudin eget, blandit in, molestie quis, turpis. In ut risus.
Pellentesque sodales magna at nunc. Nam dapibus magna quis augue.
Integer in tellus vitae risus egestas porttitor. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque est. In risus velit, nonummy a, rhoncus et, aliquam quis,
nibh. Suspendisse nonummy dui id metus. Sed lacus urna,
sollicitudin eget, blandit in, molestie quis, turpis. In ut risus.
Pellentesque sodales magna at nunc. Nam dapibus magna quis augue.
Integer in tellus vitae risus egestas porttitor. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque est. In risus velit, nonummy a, rhoncus et, aliquam quis,
nibh. Suspendisse nonummy dui id metus. Sed lacus urna,
sollicitudin eget, blandit in, molestie quis, turpis. In ut risus.
Pellentesque sodales magna at nunc. Nam dapibus magna quis augue.
Integer in tellus vitae risus egestas porttitor. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos.</p>
</div>
</div>
</body>
</html>

(p.s., -thanks for making your URLs be 'absolute-path' for post, -so much easier for editing on-desktop if links/images/styles are abs-path & working).

**satterfield.ben** · 04-16-2007 09:59 AM

Originally Posted by drhowarddrfine

And therein lies your problem. You should be checking in a modern, standards compliant browser like Firefox and not old, buggy non-compliant IE.

You aren't properly linking your stylesheet.

Also, validate your html and css for your list of errors. Get it working in Firefox first. Then we can adjust for IEs quirks and bugs.

First off, Firefox is my main browser. I hit CTRL+SHIFT+R more than you know.
Now there are some cases [read "very few"] that Firefox's interpretation of CSS is more forgiving than IE7 reading. So to say that Firefox is always perfect and IE7 is completely wrong is a bad assumption. But I'm sure you know that.

Secondly, I don't fully understand your statement about me not linking my stylesheet properly.
<link rel="stylesheet" ref="http://www.amherst.k12.va.us/web/css/style6.css" /> the only thing I left out is type="text/css" part.

The example I have in front of me is
<link rel="stylesheet" href="/pathname/stylesheet.css" type="text/css" />
taken from page 280 in O'Reilly's Web Design in a Nutshell (3rd Edition)

Thread: Firefox woes

Thread Tools

Display

Hybrid View

Firefox woes

Update to my own post

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions