Firefox leaves blank line, IE6 doesn't

[akapsycho]

Hi everyone, this is my first post so I'll try to make it as clear and concise as possible.

I'm working on a PHP game and it's coming along well but as it's growing I've realized that my disgusting coding habits are catching up to me and I'm repeating code, assigning the same data to different variables and making an all-around mess of things. That's why I've decided to re-code the site and while I'm at it make sure that everything is XHTML 1.1 and CSS compliant.

You can find what I've made so far, just the beginning of a CSS layout, at http://www.antiriddle.com/test/. If you look at the page in IE6 and then FF you'll see the problem immediately. FF adds an extra line break between navtop and branding, which isn't supposed to be there. I've tried a ton of different fixes but haven't made any real progress. IE6 currently displays the page as I want it to look.

Any advice is much appreciated! Thanks in advance.

[phvfl]

Hi,

The insertion of the line is caused by the margin on the paragraph element in the branding div.

You can remove this by setting the margin of the paragraph to 0. You may find it easier to set all padding and margins to 0 using the universal selector and then putting margins and padding back on elements that require it explicitly. To set all elements to 0 padding and margin use:

* {padding:0;marg in:0;}

This also has the advantage of removing browser default padding and margins which causes some display differences between browsers

[akapsycho]

Amazing, you are god. Thank you so much for helping me fix my problem!

[drhowarddrfine]

Never, ever use IE as a reference to how things work. It's old, buggy and non-standard. It's like saying your 1998 Ford doesn't work like your 2007 Porsche, and then you try and fix the Porsche.

First, you should not be trying to use xhtml1.1. Version 1.1 is to be served as XML only. If you are truly serving xhtml (you probably aren't) then use version 1.0. Of course, IE does not do xhtml so it's rather worthless and you should just use html4.01.

Second, you are using an id more than once. id names are only to be used once per page and unique to one element. If you must use the same styles applied to multiple elements, use 'class'.

I'm not on my dev computer so, after fixing all that, let me know what happens.

[akapsycho]

Alright well I'm going to make the change back to XHTML 1.0 Strict and I changed it to two different id's. I wasn't using IE as a reference for checking whether my code was good, but more as a reference to how I wanted it to end up looking. I'm also using PHPEdit which previews similarly to how IE6 displays it so that was messing me up. Thanks for the tips.

And what do you mean by, which I'm probably not? I'm passing it through the validator, isn't that enough? I just want something that will really separate structure from presentation which, to my understanding, is what XHTML and CSS are there for.

[drhowarddrfine]

What I mean is, even though you declare xhtml in the doctype, your server has already declared the page as html. I just looked and, as I said, you are serving the page as text/html rather than xhtml. Most people are. So writing xhtml doesn't mean anything because all browsers will interpret it as html cause the server said it is. It's called "tag soup" and actually is read as invalid html though it works anyway.

This is the reason it works at all in IE even though IE does not work with xhtml. It thinks you are serving html and interprets it as such.

I wasn't using IE as a reference for checking whether my code was good, but more as a reference to how I wanted it to end up looking.

This you shouldn't do because even though your markup may be correct, IE is more likely to display it incorrectly. This is why you should always check your page first in Firefox or Opera. Then see if IE does it right.

IEs bugs and quirks are known, along with the fixes, so it's more important to get it right in a modern browser, then adjust for old, buggy, non-standard IE.

[akapsycho]

Alright that makes since about IE displaying things incorrectly. I'll try to make sure it works with FF first in the future. Is there any way to make my server serve it up as xhtml? Is there a problem if I keep serving it as xhtml even though it is being received as html? I would prefer to just keep going through it as xhtml so that I'm forced to write neater code.

[drhowarddrfine]

Your server is serving it as html. The doctype is ignored. Like I said above, you can continue writing xhtml, and it will work fine but interpreted by all browsers as html.

XHTML does not force you to write cleaner code. You can write clean markup with HTML, too. The validator will tell you when you make errors in either. Browsers will still make the best of whatever you write while true XHTML won't display anything at all if there is an error.

So, in that sense, you gain nothing by writing xhtml though it doesn't hurt to do so. Others disagree and there are "may be harmful" articles on the web.

[akapsycho]

OK cool I think I'll just keep going then so that I can feel virtuous. Thanks for all of your help!