View Full Version : cross browser problems(again)

Mar 17th, 2007, 10:28 PM
I dont know but the margins collapse in Firefox but work fine in IE.


any ideas?

the menu doesnt margin across and sits flush to the side of the container.

the top margins in the header are the correct space apart but not as low as they are in IE.


Mar 18th, 2007, 12:01 AM
I dont know but the margins collapse in Firefox but work fine in IE.Margin collapsing is correct behavior. Think about when you put two paragraphs elements one after another and assign them margins of 1 em. Notice that there is a space of 1 em between them, not 2 em, since they collapse into whichever margin length is longest. This is what margin collapsing was intended for. I do wish that there was a CSS property to disable it though since it can be problematic.

Solution: Use padding instead.

the menu doesnt margin across and sits flush to the side of the container.Not sure about this one. I would kill all default margins and padding at the top of your main style sheet to ensure that those are not sources of problems:

* { margin: 0; padding: 0; }

This may also be related to your page being in quirks mode because you forgot to add a document type declaration at the top of the document source. Related Resources:

Recommended DTDs to Use in Your Web Document (http://www.w3.org/QA/2002/04/valid-dtd-list.html) provides a list of W3C document type (doctype) declarations that you can use in your documents. I’d recommend that you use HTML 4.01 Strict; if you’re up for more of a challenge or know XML, XHTML 1.0 Strict is also suitable.
Activating the Right Layout Mode Using the Doctype Declaration (http://hsivonen.iki.fi/doctype/) and Quirks Mode and Strict Mode (http://www.quirksmode.org/css/quirksmode.html) provide information concerning standards‐compliance and quirks modes and which doctype declarations trigger which mode.
After you’ve added a doctype declaration, validating your document against it ensures that your (X)HTML code is valid according to the chosen doctype. Validation services include the Validome Validator (http://www.validome.org/) and the W3C Markup Validator (http://validator.w3.org/); I’d recommend the former since it catches errors with more precision (http://www.validome.org/lang/en/errors/ALL) than the official (latter) validator.

Other Issues:

Your code contains errors. See the third set of resources above.
You should not comment out your style sheets or scripts, especially if using XHTML, since they will literally be commented out. I would say that there’s no need to cater to browsers that don’t recognize the script element in this day and age, so you can get rid of them even if using HTML.
Also note things such as #sidebar dl, dt, dd, ul, li are not the same as #sidebar dl, #sidebar dt, #sidebar dd, #sidebar ul, #sidebar li.
You would declare your event attributes to be JavaScript with a meta element or HTTP header, not the javascript: scheme.

<meta http-equiv="Content-Script-Type" content="text/javascript">

(Remember to close that if using XHTML.)

Content-Script-Type: text/javascript
Your code is not semantic. For example, you’ve done things like mark up forms as paragraphs. Paragraphs consist one or more sentences…
The document contains inline CSS; all CSS should be in a style sheet, not in the document source. This makes code more maintainable.
No character encoding is specified. You can do this using one of the following methods:

HTTP Header:

Content-Type: text/html; UTF-8;

meta Element:

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

XML Declaration (if XHTML):

<?xml version="1.0" encoding="UTF-8"?>

Byte Order Mark: Save the document in something like Notepad as UTF-8.