SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Help with validation..

    http://validator.w3.org/check?uri=ht...le.com%2Fss%2F

    What can I do to make my page function the same, but validate as XHTML Strict?
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Use css instead of the align attribute.

    See my faq sticky thread on how to center things with css.

    If that makes no sense then shout

    paul

  3. #3
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It made sense but caused problems...

  4. #4
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Do you have an instant messenger i can contact you on?

    Edit: Didn't want to make anotherp ost.

    Here is your sticky idea implimented: http://www.shockedstyle.com/ss/ See how messed up it is in FireFox?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>.::SHOCKEDSTYLE::. The Next Generation Of Webdesign</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style typer="text/css">
    body {
    	 background-color: #DEDEDE;
    	 margin: 0px;
    	 font-family: Verdana, Arial, Helvetica, sans-serif;
    	 font-size: 10px;
    }
    img {
    	border: 0px;
    	}
    div.header {
    		 width: 660px;
      height: 30px;
      text-align: center;
      border-top: 5px solid #B00000;
      border-bottom: 1px solid #8A8A8A;  
      background-color: #FFFFFF;
      padding: 15px 0px 15px 0px;
    }
    div.bg {
    		 width: 730px;
    		 height: 100%;
      background-image: url(img/bg.gif);
      background-repeat: repeat-y;
      padding-top: 30px;
    }
    .content {
    	 height: 100px;
    	 width: 100%;
    	 background-color: #FFFFFF;
    }
    /* Begin Navigation */
    a.navi:link {
      font-weight: bold;
      color: #333333;
      text-decoration: none;
      border-left: 1px solid #777777;
      padding: 0px 10px 0px 10px;
    }
    a.navi:visited {
      font-weight: bold;
      color: #333333;
      text-decoration: none;
      border-left: 1px solid #777777;
      padding: 0px 10px 0px 10px;
    }
    a.navi:hover {
      font-weight: bold;
      color: #B00000;
      text-decoration: none;
      border-left: 1px solid #777777;
      padding: 0px 10px 0px 10px;
    }
    a.navir:link {
      font-weight: bold;
      color: #333333;
      text-decoration: none;
      border-left: 1px solid #777777;
      border-right: 1px solid #777777;
      padding: 0px 10px 0px 10px;
    }
    a.navir:visited {
      font-weight: bold;
      color: #333333;
      text-decoration: none;
      border-left: 1px solid #777777;
      border-right: 1px solid #777777;
      padding: 0px 10px 0px 10px;
    }
    a.navir:hover {
      font-weight: bold;
      color: #B00000;
      text-decoration: none;
      border-left: 1px solid #777777;
      border-right: 1px solid #777777;
      padding: 0px 10px 0px 10px;
    }
    /* End Navigation */
    div.header a, div.header img  {vertical-align:middle}
    body {text-align:center}/* center for ie5 and 5.5.*/
    #wrapper {
    width:730px;
    margin-left:auto;/* center for compliant browsers*/
    margin-right:auto;/* center for compliant browsers*/
    }
    </style>
    </head>
    <body>
    <div id="wrapper"> 
      <div class="bg"> 
    	<div class="header"> <a href="index.htm" class="navi">HOME</a> <a href="index.htm" class="navi">PORTFOLIO</a> 
    	  <a href="index.htm" class="navi">ARTICLES</a> <a href="index.htm" class="navi">TUTORIALS</a> 
    	  <a href="index.htm" class="navi">FORUM</a> <a href="index.htm" class="navir">CONTACT</a> 
    	  &nbsp; &nbsp; &nbsp; <img src="http://www.wv-online.nl/shockedstyle/img/logo.gif" alt="ShockedStyle" title="ShockedStyle" /> 
    	</div>
      </div>
      <p> <a href="http://validator.w3.org/check?uri=referer"><img
    		  src="http://www.w3.org/Icons/valid-xhtml10"
    		  alt="Valid XHTML 1.0!" height="31" width="88" class="validate"/></a> 
    	<a href="http://jigsaw.w3.org/css-validator/check/referer"><img
    		  src="http://www.w3schools.com/images/vcss.gif"
    		  alt="Valid CSS2!" height="31" width="88" class="validate"/></a> </p>
    </div>
    </body>
    </html>
    Paul

  6. #6
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Once again, view www.shockedstyle.com/ss with FireFox. Check my CSS and code and tell me why.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hold on - I'll just grab your page and try it locally !

  8. #8
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Code:
    div.header {
    	 width: 660px;
      height: 30px;
      text-align: center;
      border-top: 5px solid #B00000;
      border-bottom: 1px solid #8A8A8A;  
      background-color: #FFFFFF;
      padding: 15px 0px 15px 0px;
     margin-left:auto;
     margin-right:auto;
    }
    Your image is bigger than the content so you need to center the content inside the image holder.

    Paul

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You might be better off repating the background on the body if you want it always to be full length.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>.::SHOCKEDSTYLE::. The Next Generation Of Webdesign</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style typer="text/css">
    html,body {margin:0;padding:0}
    body {
    	 background-color: #DEDEDE;
    	 margin: 0px;
    	 font-family: Verdana, Arial, Helvetica, sans-serif;
    	 font-size: 10px;
     background: url(http://www.shockedstyle.com/ss/img/bg.gif) repeat-y center top;
    }
    body {text-align:center}/* center for ie5 and 5.5.*/
    #wrapper {
    width:660px;
    margin-left:auto;/* center for compliant browsers*/
    margin-right:auto;/* center for compliant browsers*/
    padding-top: 30px;
    }
    img {
    	border: 0px;
    	}
    div.header {
    	 width: 660px;
      height: 30px;
      text-align: center;
      border-top: 5px solid #B00000;
      border-bottom: 1px solid #8A8A8A;  
      background-color: #FFFFFF;
      padding: 15px 0px 15px 0px;
    }
    
    .content {
    	 height: 100px;
    	 background-color: #FFFFFF;
    }
    /* Begin Navigation */
    a.navi:link {
      font-weight: bold;
      color: #333333;
      text-decoration: none;
      border-left: 1px solid #777777;
      padding: 0px 10px 0px 10px;
    }
    a.navi:visited {
      font-weight: bold;
      color: #333333;
      text-decoration: none;
      border-left: 1px solid #777777;
      padding: 0px 10px 0px 10px;
    }
    a.navi:hover {
      font-weight: bold;
      color: #B00000;
      text-decoration: none;
      border-left: 1px solid #777777;
      padding: 0px 10px 0px 10px;
    }
    a.navir:link {
      font-weight: bold;
      color: #333333;
      text-decoration: none;
      border-left: 1px solid #777777;
      border-right: 1px solid #777777;
      padding: 0px 10px 0px 10px;
    }
    a.navir:visited {
      font-weight: bold;
      color: #333333;
      text-decoration: none;
      border-left: 1px solid #777777;
      border-right: 1px solid #777777;
      padding: 0px 10px 0px 10px;
    }
    a.navir:hover {
      font-weight: bold;
      color: #B00000;
      text-decoration: none;
      border-left: 1px solid #777777;
      border-right: 1px solid #777777;
      padding: 0px 10px 0px 10px;
    }
    /* End Navigation */
    div.header a, div.header img  {vertical-align:middle}
    </style>
    </head>
    <body>
    <div id="wrapper"> 
    	<div class="header"> <a href="index.htm" class="navi">HOME</a> <a href="index.htm" class="navi">PORTFOLIO</a> 
    	  <a href="index.htm" class="navi">ARTICLES</a> <a href="index.htm" class="navi">TUTORIALS</a> 
    	  <a href="index.htm" class="navi">FORUM</a> <a href="index.htm" class="navir">CONTACT</a> 
    	  &nbsp; &nbsp; &nbsp; <img src="http://www.wv-online.nl/shockedstyle/img/logo.gif" alt="ShockedStyle" title="ShockedStyle" /> 
    	</div>
      <p> <a href="http://validator.w3.org/check?uri=referer"><img
    		  src="http://www.w3.org/Icons/valid-xhtml10"
    		  alt="Valid XHTML 1.0!" height="31" width="88" class="validate"/></a> 
    	<a href="http://jigsaw.w3.org/css-validator/check/referer"><img
    		  src="http://www.w3schools.com/images/vcss.gif"
    		  alt="Valid CSS2!" height="31" width="88" class="validate"/></a> </p>
    </div>
    </body>
    </html>
    Sometimes Ie will round the image down by a pixel when the screen is resized so you have to be careful if content is tight to the images edge. If this is a problem then you can use the previous method.

    Paul

  11. #11
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    http://www.shockedstyle.com/ss/

    Hoyl crap are things messed up now. Test in FF.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    wrong link I think!

    My code above works fine in firefox!

  13. #13
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Well, I redid it a little, what do you think?

    www.shockedstyle.com/ss

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Well, I redid it a little, what do you think?
    Honestly I think my last version was better and gives you 100% height.

    But its your choice and some peole prefer left-aligned pages

    Paul


Bookmarks

Posting Permissions

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