PDA

View Full Version : Spacing gap in Firefox



Azzaboi
Feb 19th, 2010, 11:54 PM
Spacing gap in Firefox

There seems to be a huge gap under my websites header for my friend using Firefox. On my computer however it looks fine. How can I go about fixing this?

Is this a firefox issue? Are there any other browser compatible issue I need to address?

Correctly displayed:
http://i47.tinypic.com/2mxihqw.png

Incorrect gap:
http://i47.tinypic.com/15mgqqd.png

Aaron's Game Zone
Online flash games: http://azzaboi.weebly.com

Thanks!

drhowarddrfine
Feb 20th, 2010, 01:11 AM
The gap also exists in Opera, Chrome and Epiphany so something's not coded right.

EDIT: 177 HTML errors, 9 CSS errors and you're using an XML only doctype. It's being pushed down by your #banner div.

Excavator
Feb 20th, 2010, 01:47 AM
Hello Azzaboi,
It looks like your line-height:100px; vertically centers the menu in your header but it also centers your 100px by 100px animated.gif.

Try removing this bit highlighted in red -
#header {
height:100px;
line-height:100px;
background-image:url(theme/bg-header.gif?895196);
background-repeat:no-repeat;
padding-left:15px;
}
You can position your menu and .gif margins then.

Also, of course, the doctor is right - 177 errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fazzaboi.weebly.com%2F) need fixed.

Azzaboi
Feb 20th, 2010, 09:19 AM
Thanks, I have cleaned up some of the errors, some have to do with weebly code. Woah I didn't know there would be so many, but most look like the same stuff. I'll see what I can do.

As for using an XML only doctype, what doctype should I be using?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

I moved that line-height just to the navigation rather than the entire header, cheers hopefully it's just that!

abduraooft
Feb 20th, 2010, 09:37 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">XHTML1.1 document should be served with application/xhtml+xml media type, as per standards. Use XHTML1.0 strict instead.

Azzaboi
Feb 20th, 2010, 09:17 PM
So just to confirm it should be?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Excavator
Feb 20th, 2010, 10:08 PM
So just to confirm it should be?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

That looks right - a good way to confirm is to see if the validator complains about it and it doesn't.

Azzaboi
Feb 23rd, 2010, 09:19 AM
I have attempted to change the doctype in my html, but it keeps changing back on publish. Asked Weebly about this and they said they don't allowed the doctype to be changed as of yet (it just forces you to use that one). :(

As for the gap, it was that 'line-height:100px;', thank you, but it's still there a tiny bit in Firefox, maybe due to the banner?

What where the 9 CSS errors?

Aaron's Game Zone: http://azzaboi.weebly.com

Hopefully you can work it out from the site link, but if you need the html or css, just let me know. Thanks!

abduraooft
Feb 23rd, 2010, 09:25 AM
You must add CDATA comments inside your <script> tags in xhtml, to tell the validator not to consider them as part of your markup. Read http://javascript.about.com/library/blxhtml.htm

Why are you using that much of inline styles?