Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    White space around whole page Safari/Chrome

    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,

    Code:
    body {
    	margin:0; padding:0;
    	background-color:#323232;
    }
    http://lookseewatch.com/test/ss/index2.php

    Thanks,
    Henry

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by drhowarddrfine View Post
    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

    Code:
    <style type="text/css"> 
    @charset "UTF-8";
    But you don't have a solution for the white space? I'm completely mind boggled.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    There's an easy option in notepad++ under the format tab as "UTF-8 without BOM". Give it a try.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    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?

  • #6
    Regular Coder jamesicus's Avatar
    Join Date
    Oct 2008
    Posts
    106
    Thanks
    0
    Thanked 11 Times in 10 Posts
    Quote Originally Posted by hiimhenryyy View Post
    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?
    Quote Originally Posted by hiimhenryyy View Post
    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
    Web Developer Tool Kit - for creating Standards compliant and Interoperable web pages
    W3C Markup Validation Service - validate HTML code for reliable rendering in all Browsers
    WAVE accessibility evaluation tool - check page structure, image alt text, form labels, etc.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    <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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Regular Coder jamesicus's Avatar
    Join Date
    Oct 2008
    Posts
    106
    Thanks
    0
    Thanked 11 Times in 10 Posts
    Quote Originally Posted by jamesicus View Post
    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
    Last edited by jamesicus; 01-14-2010 at 03:40 AM. Reason: corrected spelling errors
    Web Developer Tool Kit - for creating Standards compliant and Interoperable web pages
    W3C Markup Validation Service - validate HTML code for reliable rendering in all Browsers
    WAVE accessibility evaluation tool - check page structure, image alt text, form labels, etc.

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Your markup has many errors, see http://validator.w3.org/check?uri=ht.../ss/index2.php
    Fix them all first.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    367
    Thanks
    9
    Thanked 53 Times in 52 Posts
    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
    Last edited by hdewantara; 01-18-2010 at 02:14 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •