9 replies [Last post]
selevercin
Offline
Regular
Last seen: 14 years 2 weeks ago
Joined: 2005-11-09
Posts: 12
Points: 0

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?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 14 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Re: (yet another) problem in firefox

selevercin wrote:
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.

Verschwindende wrote:
  • CSS doesn't make pies

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 days 13 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

(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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

drhowarddrfine
Offline
Leader
Last seen: 9 years 51 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

(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

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

jimhere
jimhere's picture
Offline
Enthusiast
Cambridge Mass
Last seen: 10 years 4 weeks ago
Cambridge Mass
Timezone: GMT-4
Joined: 2005-03-14
Posts: 57
Points: 0

Re: (yet another) problem in firefox

thepineapplehead wrote:
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?

born in the 20th century

selevercin
Offline
Regular
Last seen: 14 years 2 weeks ago
Joined: 2005-11-09
Posts: 12
Points: 0

(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.

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 1 year 6 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

(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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 days 13 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

(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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

selevercin
Offline
Regular
Last seen: 14 years 2 weeks ago
Joined: 2005-11-09
Posts: 12
Points: 0

(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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 14 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

(yet another) problem in firefox

Much nicer, very nice code Laughing out loud

<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 Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies