I realize a lot of people are having problems with firefox. I've searched around a bit, but I must have done something terribly awful because no one else seemed to have anything so bad!
http://selever.freeshell.org/projects/project_page.shtml
http://selever.freeshell.org/projects/style.css
My site and style sheet.
It looks great in Opera. Looks good in IE. Ridiculously horrible in FireFox. After snooping around here I added a doctype declaration, but it didn't change a thing.
FF removed the margins and padding. It almost looks as if it did not read the style sheet at all! The only way that I know it did was that it managed to put a border around the main text. There is also no background image.
Did I do something obviously wrong? Or should I just hope no one browses through with Mozilla?
Re: (yet another) problem in firefox
I realize a lot of people are having problems with firefox.
Did I do something obviously wrong? Or should I just hope no one browses through with Mozilla?
I'm sorry, but with an attitude like that you're asking for trouble. Out of the three browsers mentioned, Firefox has THE BEST implementation of CSS. How DARE you call IE better than my beloved Ff - IE is s**t. It is. It can't do anything right .
Here's an idea.
Google for IE CSS Bugs.
Then do the same for Firefox.
Be amazed.
Your problems, unsurprisingly, stem from the fact you use Absolute Positioing, yet you clearly have no regard for how it works (or Web Standards, for that matter).
Ditch IE immediately and test in Firefox as you go along.
(yet another) problem in firefox
Take a look at the validator results.
The links must be in the head. There are overlapped (not properly nested) elements. There are deprecated elements, but you specify a strict DTD. & alia.
You need to wrap your paragraphs in um, paragraph tags, and lose the <br> tags used in their stead.
Absolute positioned elements are out of the flow. They don't react to other elements and vice versa.
Inline elements do not have width, and padding and margins have special rules. Remember those missing <p> tags? They're block elements.
cheers,
gary
(yet another) problem in firefox
But it works in IE!
Even Microsoft calls IE7 bad and it's not even out yet. Do I still have my link to "IE is a cancer on the web" below?
Nope: Windows advocate calls IE a cancer on the web
Re: (yet another) problem in firefox
Your problems, unsurprisingly, stem from the fact you use Absolute Positioing, yet you clearly have no regard for how it works (or Web Standards, for that matter).
but this is the Beginner's forum... For myself, I'm getting better at web standards and Positioing, but where can we turn to to help if not at csscreator.com?
(yet another) problem in firefox
Fixed! Thanks for the validator link, Gary! Check it out!
After cleaning up my html so that it could "tentatively pass" I found the css validator. Turned out my problem was that I needed to remove the script tag that was necessary for css inside of html.
To be honest, all of my html uses breaks instead of paragraph tags, is there a compelling reason to use paragraph tags?
Eventually I'll try to replace the absolute positioning with relative positioning, but I'm not sure at the moment how to do that.
(yet another) problem in firefox
is there a reason to use paragraph tags? Uh... yeah, that's what they're for... text in paragraphs. They're semantically correct as well. There "may" be the odd times where a <br> is appropriate, like when using the <address> tag but for the most part, you should use <p> and other tags like <h2> etc
(yet another) problem in firefox
Wow! Looks a lot better.
Now look at this
<u>RECENT CHANGES</u><br> November 10, 2005
Those are, semantically and structurally, headers. Now compare;
<h2>Recent Changes</h2> <h3>November 10, 2005</h3> <p> … </p> <h3>November 9, 2005</h3> <p> … </p> ========== h2 { font-size: 1em; text-transform: uppercase; text-decoration: underline; } h3 { font: 1em georgia, geneva, serif; font-weight: normal; text-transform: capitalize; }
cheers,
gary
(yet another) problem in firefox
I went ahead and made the changes you suggested. It looks very nice! I am quite pleased with how it looks. I think now I'm going to focus on content.
(yet another) problem in firefox
Much nicer, very nice code
<p> <a href="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a> </p>
The image probably doesn't need to be in a <p> tag.
Good job though