validation help with bloated CSS code

GOLGO-13

Nov 2nd 2004, 8:37 pm

hello! my first post!!
well i'm trying to make the move to total CSS layouts. i've gotten a lot of input from people which has been VERY helpfull, and based on that input, i've created a rough layout that works (for the most part) in IE6 and netscape7. Even before i validated it, the code seemed bloated and repetitive.. but i dont know enough to know WHAT i can delete!! and when i ran it through a validator... YIKES!!

can anybody take a look at it, and give me any suggestions? i dont know where to go from here. the code is just a rough layout of colored divs, that i will fill with content later (hopefully after its THINNER and validates!)

<!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">
<head>
<title>CSSP</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">



html,body
{
margin-left:20px;
margin-right:20px;
margin-top:34px;
margin-bottom:0px;
padding:0;
background:#000000;
background-color:#000000;
text-align:center;/* centre for ie5 and 5.5. */
min-width:800px/* for mozilla to stop sliding off the left side */
}

/*containter and outter divs oh yeah, and strange netscape comment bug here */

#container {
width:781px;/*set the size*/
height:553px;/*my addition*/
margin-left:auto;/* centre for compliant browsers */
margin-right:auto;/* centre for compliant browsers */
background:#FFFFFF;
text-align:left;/*reset text*/
padding: 0px;
}

#section1,
#section2,
#data,
#section4
{
border: 0px;
margin: 0px;
min-height: 553px;
height: 553px;
float:left;
display:inline;/* ie double margin fix*/
}

* html #section1, * html #section2{height:553px}
* html #section2{height:553px}
* html #data{height:553px}
* html #section4{height:553px}/* for ie*/

#section1 { background-color: #E14E62; width: 175px; }
#section2 { background-color: #8E8C20; width: 178px; }
#data { background-color: #D0ECEF; width: 391px; }
#section4 { background-color: #E9AAF4; width: 37px; }


#top,
#nav,
#logo,
#content,
#nonprof,
#nav2,
#bottom
{
border: 0px;
margin: 0px;
min-widtht: 391px;
width: 391px;
float:left;
display:inline;/* ie double margin fix*/
}

* html #top, * html #nav{height:79px}
* html #nav{height:79px}
* html #logo{height:79px}
* html #content{height:79px}
* html #nonprof{height:79px}
* html #nav2{height:79px}
* html #bottom{height:79px}

#top { background-color: #FDEB55; height:79px; }
#nav { background-color: #55EBFD; height:79px; }
#logo { background-color: #F4CAAA; height:79px; }
#content { background-color: #8C289E; height:79px; }
#nonprof { background-color: #8FB42C; height:79px; }
#nav2 { background-color: #515449; height:79px; }
#bottom { background-color: #537103; height:79px; }

</style>
</head>

<body>

<div id="container">
<div id="section1">content</div>
<div id="section2">content</div>
<div id="data">
<div id="top">top</div>
<div id="nav">nav</div>
<div id="logo">logo</div>
<div id="content">content</div>
<div id="nonprof">non prof</div>
<div id="nav2">nav2</div>
<div id="bottom">bottom</div>
</div>
<div id="section4"></div>

</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>

the problems i've been able to notice, are that in NS7, the background color (for the body tag) isint showing (but i'm going to use an image eventually, so no biggie) and the margins dont seem to be working properly in NS7 on my 800*600 monitor. and also in NS7, for some reason, the type of comment tags i'm using, seem to be affecting the margins...??? cant figure that one out.. FYI, these are problems i can live with though.. but i would really like to know how to thin out the code (seems repetitive to me) and get on the road to validation.

thanks for ANY input!!

flawebworks

Nov 2nd 2004, 9:16 pm

First; separate the css from the html. Create a separate css file for the css; and validate it that way. I did testing it; and the background showed up. It'll create less confusion for you. Link to it in between the <head></head> tags like so:

<link rel="stylesheet" href="val.css" type="text/css" />

No style tags needed; and I would lose the comments too if the style sheet is yours.

reh3363

Nov 8th 2004, 3:36 pm

I would lose the comments too if the style sheet is yours.

IMO opinion comments are a good thing. If you go back to your code in a few months it will be a little easier to understand. Just don't go overboard with comments and it will be fine.

Also if you put your style declarations on one line like so:

#yourCode {
background: #fff; width: 100%; padding: 0; margin: 0;
}

instead of

#yourCode {
background: #fff;
width: 100%;
padding: 0;
margin: 0;
}

And use CSS shorthand like:

#yourCode {
padding: 0 4px 5px 10px;
}

instead of

#yourCode {
padding-top: 0;
padding-right: 4px;
padding-bottom: 5px;
padding-left: 10px;
}

Using these techniques can help you reduce your code size.

dyn4mik3

Dec 13th 2004, 11:16 am

also for some colors with a repeat code like (#000000) you can use the short version #000.