What's wrong with my CSS?

**tidalwav1** · 12-20-2004, 11:54 AM

I'm working on a new page design. So far, everything works great in Firefox but not very good in IE. IE seems to be displaying the 'topedge' and 'corner' div layers twice, one on top of each other, instead of once.

The page can be found at http://freepgs.com/kflash/jd/template.htm, and the CSS sheet is available at http://freepgs.com/kflash/jd/stylesheet.css.

Anyone know what the problem is?

**faze1** · 12-23-2004, 03:00 AM

Hello,

I changed things up a little, I thought you might want to see another approach. Of course there is a million ways to do things, so I just did it my way. I hope you dont mind.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- Created by Josh Dick-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Josh Dick</title>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>
	<div id="topbar"></div>
	<div id="leftbar">
<a href="#">main</a>
<a href="#">bio</a>
<a href="#">creations</a>
<a href="#">credentials</a>
<a href="#">services</a>
<a href="#">contact</a>
	</div>
	<div id="content">
		
This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content 
	
	</div>
</body>
</html>

Code:

html,body {
 height: 100%;
 width: 100%;
}
 body {
 background:#FFFFFF;
 font: normal 1em Verdana, Arial, Helvetica, sans-serif;
 color: #000080;
}

/*theme*/
#topbar {
 background: #0000FF url(horizontal.bmp) repeat-x scroll bottom;
 position:absolute;
 top:0px; left:0px;
 width:100%; height:42px;
 z-index:1;
}

/*nav bar stuff*/
#leftbar {
 background: #0000FF url(vertical.bmp) repeat-y scroll right;
 position:absolute;
 top:36px; left:0px;
 width:156px; height:100%;
 padding: 100px 0;
 text-align:center;
 z-index: 1;
}
#leftbar a {
 clear: both;
 display: block;
 font: bold 12px Verdana, Arial, Helvetica, sans-serif;
 padding: 10px 0;
}
#leftbar :link { color: #FFFFFF; text-decoration: none; } 
#leftbar :visited { color: #FFFFFF; text-decoration: none; } 
#leftbar :hover { color: #FFFFFF; text-decoration: underline; } 
#leftbar :active { color: #FFFFFF; } 
/*end nav bar*/

#content {
 background: transparent url(corner.bmp) no-repeat scroll left top;
 position:absolute;
 top:36px; left:150px;
 width:70%; height:100%;
 z-index: 99;
 padding: 50px;
}
/*end theme*/

/*Site styles*/
a{
font: normal 1em Verdana, Arial, Helvetica, sans-serif;
text-decoration: none; 
background: transparent;
color: #0000FF;
}
a:hover {
text-decoration: none; 
background: transparent;
color: #FF0000;
}

/*TABLES! WE DONT NEED NO STINKIN TABLES*/
table {
width: 100%;
height: 100%;
}

td {
vertical-align: middle;
}
/*end styles*/

I hope this helps you. If not, thanks for providing tonights entertainment.

Cheers,

**faze1** · 12-25-2004, 07:28 AM

It just occured to me that I never actually answered the question. The problem appeared to me to be the absence of a "background-repeat" tag.

Feel free to use the code in my first post if you want, if you have any questions about what I did, post them here, I'd be happy to explain.

Welcome to the forum,