Topic: All Broswers Do Suck... (aka - Help me with my CSS) (Page 1 of 1)

Alright, I knew I'd have to start using stylesheets in my layouts so I tried to create a page without tables. I only strayed from CSS once when I got discouraged with vertical alignment and such. I had plans on coming back to it later though.

When I checked the page in Netscape (7) it doesn't come out the way I was hoping. I had expected it to render the page perhaps a few pixels off, but this happened to be way off. I suspect it's easier my sucky (beginner) CSS and/or one browser creating it correctly (presumably Netscape) and IE just messed with me.

Could one of the CSS junkies tell me if this is fixable?
http://home.maine.rr.com/dbjqyoyoworld/Stuff/WIPTA/


Thanks guys. Remember this is my first adventure into style sheets and such, so it's not great...




-Chesta

It has no doctype. This could account for anywhere from 5% to 100% of the problems.

Whoops, good call. I'm not used to adding doctypes. Obviously I need to get in the habit.

I tried validating the page and the CSS appears to be valid. I was getting some strange error when trying to validate the html.

In any case, the background still appears not centered and the logo/title is way off to the right in Netscape. Any more ideas?


-Chesta

Edit: Fixing up the spelling and such. I can't type

[This message has been edited by Chesta (edited 04-15-2003).]

If you add this meta tag to the head of your document, you should be able to validate the HTML:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

It gives the web browser (and the validator) information about the way the characters (letters/numbers/punctuation) are encoded (represented as bits).

As for the CSS: I notice you're using a <center> tag. You should remove that and do the centering with CSS. Any attempt to fix the problem now will likely be useless after the <center> tag has been removed, or in future designs which don't use the <center> tag.

You seem to be overusing position:relative. You use it in a lot of places where it's not necessary. You should probably remove those.

Alright...we seem to be moving along, despite that I'm showing my ignorance and feeling pretty stupid.

The background is now properly aligned in Netscape and the banner is almos in the correct place. But the main text and stuff has gone off to the left.

The HTML validation went pretty smoothly, except three things which I do not understand. Something about border not being an image attribute and an end tag for head and something about the meta tag you gave me. Despite reading the descriptions it went way over my head.

I got rid of the center tag, but I'm not sure how to get rid of the relative positioning. I was wanting it to show up centered in different resolutions, which is how I think it'll work in IE.

Any thoughts on this would be most appreciated. Thanks Slime for your help so far.



-Chesta

With regards to your validation...

- take the border=0 off the image and do it in css.
- take the / out of your meta-tag (self-closing tags are xhtml, not html).
- put in a <title></title>.

Josh Morey

Sorry to butt in here like this...

Slime: I've seen you use the utf-8 character set before in encoding, but as far as I know the iso-8859-1 set is more universal. Is there a special reason for using utf, and how is it different from the iso-8859-1 set?

Well, thanks to you guys the site now validates both with HTML (4.0 strict) and CSS.

Unfortunately it still doesn't work in Netscape...despite the fact that I have a doctype which I believe should make both browswers interpret in standards mode.

Could anyone give me a way of designing the site without using relative positioning? It's a pain to do this now but it would also hurt to just give up on the design.

Anybody who can help me may take my pill rations for the week ;-)



-Chesta

Well, in netscape, from what I can see, it does exactly what you tell it to.

In IE, it sort of does too, but in a far different way of course.

suggestions:

forget all about position:relative

For that matter, don't use position:absolute either.

Forget about position.

Especially forget about negative measurements. =(

the layout your after is far simpler than you're making it. Look into the float:left property and just let your divs hang