As you may already know, I’m playing with CSS for the first time in my short lived web development life. Now, the page works GREAT in IE but for some reason it is all slammed to one side on Fire Fox. Is there something in my DIV tags that is throwing everything off?
A friend suggested not using px’s for positioning and that I should try percents but that didn’t take care of the problem. Is it because I’m using floats? Any ideas?
Are you sure that the problem is with FireFox. IE’s CSS handling is not great. Check it out with something else - Opera maybe.
Si
That response isn’t terribly helpful. IE’s CSS handling may not be standardized, but it’s giving the results that the OP wants.
OTOH, there’s probably not much that any of us can suggest without seeing some source code and trying it out in firefox/opera/IE ourselves.
I don’t understand this; if IE is the problem, why does IE display the page correctly, but FF does not?
CSS is defined by a standard. As far as I can tell Firefox is one of the better renderers of CSS and IE is the worse. Correct rendering in IE (as in, giving Surby what s/he wants to see) does not mean syntactically correct CSS, so Firefox probably won’t render it correctly.
You may need to apply some filtering techniques to get appropriate CSS to various browsers.
Also
So float may be a problem.
Si
Well, here is my CSS
/* Sets the background color */
body {background-color: b0c4de}
/* This will format the header */
#header
{
text-align = “center”;
height: 130px;
}
/* This will format the menu bar to the left */
#links
{
float:left;
width: 170px;
margin:0;
padding:10px;
font-size: 108%
}
/* This will align the footer on each page */
#footercontainer
{
clear:left;
width: 100%;
text-align: center;
}
/* This will format the footer */
#footer
{
text-align:center;
padding:0.5em;
color:black;
background-color:b0c4de;
clear:left;
font-size: 70%;
margin-left: auto;
margin-right:auto;
width = 400px;
border:2px solid #ff6600
}
/* This will format the content in the body of the page */
#content
{
text-align:left;
float:right;
width: 752px;
}
/* This will format the links on the page */
a
{
font-family: “Trebuchet MS”, sans-serif
float:left;
width:8em;
color:#003366;
background-color:b0c4de;
padding:0.4em 0.8em;
border-right:2px solid #ff6600;
}
/* This will format the links on a page that the cursor is over */
a:hover {
background-color:#ff6600;
color:white;
font-style: italic;
border-right:2px solid #003366;
border-left:4px solid #003366;
}
/* This will format the horizontal line on the page */
hr
{
clear:left;
width = 62%;
color = #FF6600;
}
I will see if I can get the page uploaded somewhere
I have no help to offer - I can’t actually write CSS/HTML - I just know a few things about browsers (and that IE screws up my own CSS templated website something awful). Thats when I dug up some stuff about browsers.
Si
here is the site, uploaded it on school space
well I figured out one of my problems, Firefox does not like the <br> tag!
I’m guessing Firefox doesn’t like = signs in your CSS either. I know I wouldn’t.
I would consider scrapping the % in sizes for your text too. Just pick a size.
And add semicolons where there are none (although it usually works when you don’t have one on the last element, but still…) and # where there should be some.
Then come back and show us again.
I have no problem with BR tags.
The first step is to correct all your “property = value;” lines to the correct “property: value;” format.
for your <hr> tag, you’ll have to use the background-color property to get the color to change in FireFox.
Validate you code here first.
Once it validates without errors, THEN start tweaking it to work around browser-specific problems.
The CSS standards were developed by W3C, and, in the opinions of me and many others, they did a pretty lousy job of it. Some of their standards are inexplicably bone-headed.
My guess is that when Microsoft looked at what W3C was coming up with they said, “Screw that. We’re Microsoft, so we’ll just ignore some of the more screwy
standards and come up with our own, and everybody else will have to go along 'cause we’re Microsoft.” Alas, it didn’t quite work out that way.
In most cases MS’s variants of the standards are actually more intuitive and just plain better, and since IE still dominates the browsers, a lot of people just write to the MS standards and let the other browser users deal with it. Of course, this isn’t a very good approach.
Right now the whole Web development environment is one big stinking mess which is why I got out of it.
Adding a semi colon after the font-family property fixed your <A> tags. I had to add height to your header to get it to line up right, since your image hight was defined as larger than the div’s height.
Also, try adding “border: 0;” to the hr tag along with the background color property to get it to render correctly in Firefox.
This causes the display in firefox to look pretty much just like the original did in IE. I did not check to see if it affects IE at all:
/* Sets the background color */
body {background-color: b0c4de}
/* This will format the header */
#header
{
text-align: center;
height: 180px;
}
/* This will format the menu bar to the left */
#links
{
float:left;
width: 170px;
margin:0;
padding:10px;
font-size: 108%;
}
/* This will align the footer on each page */
#footercontainer
{
clear:left;
width: 100%;
text-align: center;
}
/* This will format the footer */
#footer
{
text-align:center;
padding:0.5em;
color:black;
background-color:b0c4de;
clear:left;
font-size: 70%;
margin-left: auto;
margin-right:auto;
width: 400px;
border:2px solid #ff6600;
}
/* This will format the content in the body of the page */
#content
{
text-align:left;
float:right;
width: 752px;
}
/* This will format the links on the page */
a
{
font-family: "Trebuchet MS", sans-serif ;
float:left;
width:8em;
color:#003366;
background-color:b0c4de;
padding:0.4em 0.8em;
border-right:2px solid #ff6600;
}
/* This will format the links on a page that the cursor is over */
a:hover {
background-color:#ff6600;
color:white;
font-style: italic;
border-right:2px solid #003366;
border-left:4px solid #003366;
}
/* This will format the horizontal line on the page */
hr
{
clear:left;
width: 62%;
color: #FF6600;
background-color: #FF6600;
border: 0;
}
wow, aktep, I can’t believe a few “=” signs and a border: 0 was messing me up so bad. Thanks for your proof reading, I appreciate it immensely. As for the rest of you, thanks for your help too. I’ll make sure I validate my code from the WC3 in the future. Although, to be fair, I learned alot of the code of a WC3 school website.
But none the less,
THANKS!
Putting aside the nonsense Firefox vs IE argument, I suggest the following:
Use Firefox as your browser developer tool of choice. With Firefox, install the following FF toolbar extensions:
[ul]
[li] HTML Validator [/li][li] IE View Lite [/li][li] View Source Charts [/li][li] Web Developer [/li][/ul]
W3Schools is a great site for reference, but sometimes one needs practical examples to study and practice. So surf DownUnder to Russ Weakley’s Max Design for some really, really good tutorials. Specifically, check out these basic CSS liquid layouts, and the comprehensive listamatics, listutorials, floatorials, selectutorials, etc.
If the bells starts your Pavlovian juicies, Position Is Everything is another industry respected site. PIE has some great articles that looks into the IE vs standards argument from a fair and professional point of view. PIE also has loads of other tips and articles to keep you well nourished, including links to other well-respected sites.
Thanks Duckster
I have a lot of great links to CSS references saved here: http://del.icio.us/brookeln/css
Like others have said, your code is full of typos. You have to pay attention to your punctuation; don’t use =, don’t forget ; at the end of each line, don’t forget # for colors. One misplaced punctuation will screw up your whole page, so make sure you do it right the first time.