471,618 Members | 1,070 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,618 software developers and data experts.

Firefox leaves blank line, IE6 doesn't

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.
Aug 18 '07 #1
8 2114
phvfl
173 Expert 100+
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;margin:0;}

This also has the advantage of removing browser default padding and margins which causes some display differences between browsers
Aug 18 '07 #2
Amazing, you are god. Thank you so much for helping me fix my problem!
Aug 18 '07 #3
drhowarddrfine
7,435 Expert 4TB
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.
Aug 18 '07 #4
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.
Aug 18 '07 #5
drhowarddrfine
7,435 Expert 4TB
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.
Aug 18 '07 #6
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.
Aug 18 '07 #7
drhowarddrfine
7,435 Expert 4TB
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.
Aug 18 '07 #8
OK cool I think I'll just keep going then so that I can feel virtuous. Thanks for all of your help!
Aug 18 '07 #9

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

12 posts views Thread by dan glenn | last post: by
18 posts views Thread by Gustaf Liljegren | last post: by
5 posts views Thread by Martin Chen | last post: by
5 posts views Thread by JulioHM | last post: by
3 posts views Thread by SAL | last post: by
reply views Thread by leo001 | last post: by
1 post views Thread by ZEDKYRIE | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.