...

View Full Version : White space around whole page Safari/Chrome



hiimhenryyy
01-13-2010, 03:19 AM
I've scanned my code a million times for problems but I can't figure out why there is white space around the whole page in only Safari and Chrome.

Here is the link to the test page, maybe someone can help guide me in the right direction.

and yes,


body {
margin:0; padding:0;
background-color:#323232;
}

http://lookseewatch.com/test/ss/index2.php

Thanks,
Henry

drhowarddrfine
01-13-2010, 04:08 AM
That is strange but the validator says you have some unknown characters in the source. Check to make sure your editor is not saving as utf-8.

hiimhenryyy
01-13-2010, 12:43 PM
That is strange but the validator says you have some unknown characters in the source. Check to make sure your editor is not saving as utf-8.
Should I be saving in UTF-8? Cause I'm prettty sure I am an I have it set like this


<style type="text/css">
@charset "UTF-8";

But you don't have a solution for the white space? I'm completely mind boggled.

abduraooft
01-13-2010, 01:21 PM
There's an easy option in notepad++ under the format tab as "UTF-8 without BOM". Give it a try.

hiimhenryyy
01-13-2010, 09:40 PM
There's an easy option in notepad++ under the format tab as "UTF-8 without BOM". Give it a try.I did that, thanks for the little tip.

But the remaining problem is the white space around the entire page. I'm searching to find a fix.

Any Help CodingForums?

jamesicus
01-14-2010, 01:46 AM
I did that, thanks for the little tip.

But the remaining problem is the white space around the entire page. I'm searching to find a fix.

Any Help CodingForums?


I did that, thanks for the little tip.

But the remaining problem is the white space around the entire page. I'm searching to find a fix.

Any Help CodingForums?

Do not use background-color -- should be background

Try this:

html {
background : #323232;
}

body {
background: #323232;
}

James

Excavator
01-14-2010, 02:28 AM
background-color: #323232; is perfectly valid.
So is
background-image
background-repeat
background-attachment
background-position


All those selectors can be condensed into a single line with shorthand. The shorthand property for background is simply "background" - so background: #323232; is also valid.

Pretty sure the background property has nothing to do with your problem. I don't have Chrome to see what's going on but you could start by validating your markup/CSS.
In particular, this bit highlighted in red is suspect -

<style type="text/css">
@charset "UTF-8";


/* Background-Styles */

body {
margin:0; padding:0;
background-color:#323232;
}
#gutter {
background:#ffffff url(http://www.lookseewatch.com/test/ss/images/gutter_bg.png) repeat-x;
}
#gutter .text {
width:1020px;
height: 84px;
color: #ffffff;
margin:0 auto;
position:relative;
}




I've scanned my code a million times for problems but I can't figure out
Many times in situations like this the validator will find errors you are overlooking. It's a great learning tool as well since, once it's found, it's unlikely you'll make the same error again.
See the three links about validation in my sig below.

jamesicus
01-14-2010, 03:32 AM
Do not use background-color -- should be background

Try this:

html {
background : #323232;
}

body {
background: #323232;
}

James

Yes, I just tested that and it works fine in the Chrome Browser. I believe that both Chrome and Safari are treating your style sheet as XML compliant, therefor the HTML background needs to be styled. I am curious why you are serving your document as a .PHP file? It seems to me an HTML 4.01 (strict) document served as content-type text/html with a linked external style sheet is more appropriate.

You really should validate your HTML Markup and CSS -- Validation enhances Interoperability -- correct rendering in all user agents. However, web pages can, and do, fail validation and still display pretty much as expected in graphical Browsers anyway due to their built-in Markup discrepancy compensation -- thereby relying on the often unreliable error correcting properties of individual graphical Browsers.

Validation does catch many easily corrected Markup errors and the resultant code is consequently easy to maintain or change. Pages containing invalid Markup may not display or function correctly in Screen Readers, BRAILLE interpreters and Textual Browsers or when incorporated into other applications. As we move toward the Semantic Web, the rigors of XML will result in a greater requirement for Valid Markup.

Valid and well formed Markup also bespeaks careful craftsmanship and that appeals to many web authors.

James

abduraooft
01-14-2010, 07:10 AM
Your markup has many errors, see http://validator.w3.org/check?uri=http://lookseewatch.com/test/ss/index2.php
Fix them all first.

hdewantara
01-18-2010, 02:12 PM
But the remaining problem is the white space around the entire page. I'm searching to find a fix. Hello hiimhenryyy,
Browsed your site through FF3.5.7 in small window,
and found that some of the text, e.g: "Wait,what?" and content(?)
are going off much to the right. Aren't they supposed to be staying within a wrapper?

Better fix that first :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum