Firefox woes

@satterfield_benApr 13.2007

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 ~~[URL=”http://www.amherst.k12.va.us/index6.php”]~~http://www.amherst.k12.va.us/index6.php[/URL] and ~~[URL=”http://www.amherst.k12.va.us/web/css/style6.css”]~~http://www.amherst.k12.va.us/web/css/style6.css[/URL]

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 ~~[URL=”http://www.quatuor.be/”]~~Quatuor’s website[/URL] [WorkSafe].

Thanks in advance.
Ben

to post a comment

CSS

4 Comments(s) _↴

@satterfield_benauthorApr 13.2007 — #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

[COLOR="Blue"]#top {

/* border: 1px solid #ff0000; */

width: 900px;

margin: 0 auto;

text-align: center;

}[/COLOR]

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.

@drhowarddrfineApr 13.2007 — #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.[/QUOTE]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.

@WebJoelApr 14.2007 — #See if this helps (too tired to explain what I changed, -sorry) :o

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>[/QUOTE] (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_benauthorApr 16.2007 — #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.[/QUOTE]

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.

[COLOR="Blue"]<link rel="stylesheet" ref="http://www.amherst.k12.va.us/web/css/style6.css" />[/COLOR] 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)

Also in #CSS _↴

Forms : making the submit button revert to default appearance scrolling at definite width of table, need help Table borders within DIVs :: IE6 weirdness

Success!

Help @satterfield_ben spread the word by sharing this article on Twitter...

Tweet This

Firefox woes

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Firefox woes

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴