Ugly CSS Pages in Mozilla/Firefox

July 1, 2006 1:02 PM

CSS Filter: I was so proud of myself. I can write HTML but could never wrap my head around CSS. Today, for the first time, I got a page up and running using CSS, and its fine in IE, but Firefox/Mozilla....

Well, Firefox and Mozilla are another story. The DIVs don't seem to work right, and the text overlaps.

Here's a link to the page. What the heck did I do wrong?

(FYI: I hand code in notepad. I'm not an expert. I'm just following books kinda blindly and hoping for the best. I know my code isn't elegant or perfect. Please don't be too harsh.)

posted by anastasiav to Computers & Internet (16 answers total)

Just shooting from the hip (I'd have to look things up...) but looking at it, it appears both your text use the entire window as your document root. You probably want to look into floating your main text so that it 'pushes' against the menu on the left.

Take a look at this site and do some comparison. There's a few good layouts there.
posted by id at 1:09 PM on July 1, 2006

Best answer: It's overlapping in my IE, too. It looks like the left menu has a position: absolute set, which is like saying "glue this here, no matter what's going on around me". Have you played around with floats yet?
posted by gimonca at 1:11 PM on July 1, 2006

Best answer: Oh, here's a great way to learn, with Firefox:

EditCSS creates a sidebar on the left in Firefox that allows you to edit and change CSS on the fly, with updates instantly. You get to see how things change what right in front of you.

I design for Firefox first (standards-compliant) and IE later.

Good luck!
posted by id at 1:12 PM on July 1, 2006

+gimonca. It's the absolute positioning on #menu.

There are a few ways you can approach this:

First, wrap <div id=body> and <div id=content> in an enclosing div (technically, you don't absolutely need to do this, but it'll make things easier to keep track of). Let's call that <div id=wrapper>. You might also want to rename <div id=body>, so that you don't accidentally confuse #body with body in your css.

Then:

1. absolutely position "wrapper" so it stays out of the way of "menu".

or

2. Instead of absolutely positioning things, use float=left on both the "menu" and "wrapper" divs. You will need to set widths on both of them, otherwise the wrapper div may get pushed underneath the menu div.

The way that CSS deals with block positioning can be kind of confusing—even when it works as intended and you don't hit browser bugs—until you start wrapping your head around some critical concepts. I recommend you check out Position is everything.
posted by adamrice at 1:38 PM on July 1, 2006

Best answer: One step solution:

In your #menu section, replace position:absolute with float:left

Might want to fix the margins, but I assume that's more or less what you wanted?
posted by Hildago at 2:15 PM on July 1, 2006

Response by poster: Thanks, yes, that's more along the lines of what I wanted.

**goes off to read about float**
posted by anastasiav at 2:35 PM on July 1, 2006

Validating the HTML: 30 errors. Not valid.

Validating the CSS: three errors. Not valid.

You should get into the habit of validating. Like voting, it should be done early and often, especially if you're a hand-code-with-notepad sort of person.

If you don't understand the errors, ask. It's a good way to learn.
posted by AmbroseChapel at 2:58 PM on July 1, 2006

Float is cool. You'll enjoy float.
posted by Hildago at 3:15 PM on July 1, 2006

Best answer: CSS Zen Garden is great... You may have seen the layouts, but they also have a wonderful resource section that will help you with layouts, etc...
posted by hatsix at 4:13 PM on July 1, 2006

You should get into the habit of validating. Like voting, it should be done early and often, especially if you're a hand-code-with-notepad sort of person.

By all means learn why you page isn't validating, and learn to judge for yourself whether it's important or not. But don't be a slave to web standards. A tag in all uppercase, or an image without an ALT tag is not going to break your site. Ever.
posted by Civil_Disobedient at 4:19 PM on July 1, 2006

A tag in all uppercase, or an image without an ALT tag is not going to break your site. Ever.

Except, of course, your web page will be read by anything other than a web browser... If you claim that you page is xhtml, and therefore no uppercase tags, cell phone browsers, page readers, and any xml-based readers WILL break when trying to parse your page.

Regardless of what Civil_Disobedient says, if you're going to do something, do it right. You'll either be a slave to Microsoft, Mozilla or Web Standards. I'd prefer the Standards.
posted by hatsix at 4:29 PM on July 1, 2006

I bet you're a riot at parties, hatsix.
posted by boo_radley at 5:26 PM on July 1, 2006

oh, and try our own Tryptophan-5ht's Rendr for CSS and HTML noodling.
posted by boo_radley at 5:27 PM on July 1, 2006

boo_radley:
I haven't found out yet, My standards for parties include 1 tapped keg, cooled to 40 degrees, one backup keg per 10 people. There must be sitting room for 10% of the party occupants, however, no more than 50%. There must be at least two bathrooms, and a large tree or medium shrub that can be used as a third as the night progresses. The ratio of Male:Female must be maintained between 1:3 and 3:2.

Unfortunately, it seems that the parties that meet a majority of the standards seem to have trouble maintaining an acceptable M:F ratio.
posted by hatsix at 10:54 AM on July 2, 2006

A worthy comeback. My hat's off to you, sir.
posted by Hildago at 11:05 AM on July 2, 2006

Well done, madam.
posted by boo_radley at 8:42 PM on July 2, 2006