Jump to content

Validation causing problems with my CSS


Herbie

Recommended Posts

I have another XHTML validation question.Why does my page look just fine here:www.sweeneyauction.net/valid/nodoctype.htmBut when I add a doctype the main class gets distoreted:www.sweeneyauction.net/valid/doctype.htmThe pages are exactly the same except that the second has<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">at the top.

Link to comment
Share on other sites

Short Answer: because the first page is running in Quirks mode, which means the Browser hasn't been told which DTD to use, so it guesses at what you attempting to accomplish and so the result is different when you apply the DTD because then the Browser has a different set of rules to use when it lays-out the page.Problem with Quirks mode is that different Browsers will render the page differently, so my suggestion would be to 'throttle down' the DTD to an HTML 4.01 transitional and see if that fixes anything, then work back up to xHTML stransitional before applying the xHTML strict. Unless you know that all your Users will be using the same Browser, I reccomend designing in Opera or FF and then checking it in IE6 to see what changes need to be made. The renderings will be 'similar' but not 'the same'. I'll have another look to see if I can track the actual problem for you and post back if I find it.*edit*There is a whole bunch of position:absolute on that page and that is most likely the greatest obstacle for the rendering. I would suggest you head over to cssplay.co.uk or positioniseverything.com or csscreator and check out their 3 column layouts. The csscreator.com has a layout generator which may be the best place to start. For consistent presentations across Browsers, I think you will be better off dropping the position absolute and getting a div based model that uses the document flow better. your design is fairly straightforward, so there shouldn't be any difficulties finding one to suit the design. :)Before you go to all that trouble, though, set a z-index on the right-hand pictures to see if that will "pop them up" to the forefront. (???)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" ><head><title>CssCreator-->XTML 1.0 Transitional Template</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><meta name="generator" content="www.csscreator.com" /><link rel="stylesheet" href="your_style.css" type="text/css" /></head><body><div id="pagewidth" >	<div id="header" > Head </div>			<div id="wrapper" class="clearfix" > 		<div id="twocols" class="clearfix"> 			<div id="maincol" > Main Content Column  Main Content Column  Main Content Column  Main Content Column  Main Content Column                         </div>			<div id="rightcol" > right Column </div>		</div> 			<div id="leftcol" > Left Column </div>                 </div>	<div id="footer" > Footer 	</div>	</div></body></html>

and some css for that:

/* generated by csscreator.com */ html, body{  margin:0;  padding:0;  }  #pagewidth{ } #header{ position:relative;  height:15%;   background-color:#E0E0E9;  width:100%;}  #leftcol{ width:15%;  float:left;  position:relative;  background-color:#F3F6F6;  } #twocols{ width:85%;  float:right;  position:relative;   } #rightcol{ width:18%;  float:right;  position:relative;  background-color:#F3F6F6; } #maincol{background-color: #E0E0E9;   float: left;  display:inline;  position: relative;  width:82%;  } #footer{ height:5px;   background-color:#E0E019;  clear:both; }    /* *** Float containers fix: [url="http://www.csscreator.com/attributes/containedfloat.php"]http://www.csscreator.com/attributes/containedfloat.php[/url] *** */ .clearfix:after { content: ".";  display: block; height: 0;  clear: both;  visibility: hidden; } .clearfix{display: inline-block;}/* Hides from IE-mac \*/* html .clearfix{height: 1%;}.clearfix{display: block;}/* End hide from IE-mac */    /*printer styles*/  @media print{ /*hide the left column when printing*/ #leftcol{display:none;} /*hide the right column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;}}

Fill your content into the div's and change the css file to suit. :)The lesson to be learned here is handling of div's and floating them to behave the way you want them to. Absolute positioning is a major problem. Best to avoid it if possible. Especially when new to the process because it will just cause you grief.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...