css layering wrong

**thebutterfly** · 05-07-2008, 08:31 PM

Hi there

I'm having a very hard time with a layout I'm working on. I know my code must be wrong but it all validates (both css & html) and IE shows it correctly (not that that says anything). If anyone can help I'd be VERY grateful!

Short Version:
class balls is showing behind the class right.
class left is ending aboveclass left1 not going on behind it
there is a space between class left 1 and class left2

the css:

Code:

/* SW CSS Document */

body {
margin: 0px; 
padding: 0px;
background-color: #000000;
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
text-align: center; 
font-family:  Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;

scrollbar-base-color: #ffffff;
scrollbar-arrow-color: #E31836;

scrollbar-shadow-color: #CDCCD7;
scrollbar-lightshadow-color: #DDDDE5; 
scrollbar-darkshadow-color: #4B4C4E;

scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #E5E5ED;

}

.container{
width: 745px;
background-color: #ffffff;
}


.top{
background-image: url(images/top.jpg);
background-repeat: no-repeat;
height: 158px;
width: 745px;
}

.right{
background-image: url(images/r1.jpg);
background-repeat: repeat-y;
background-position: right;
width: 745px;
z-index: 1;
}
.left{
background-image: url(images/l1.jpg);
background-repeat: repeat-y;
background-position: left;
width: 745px;
text-align: left;
}

.left1{
background-image: url(images/2h.jpg);
background-repeat: no-repeat;
background-position: top;
float: left;
width: 317px;

}
.left2{
background-image: url(images/h1.jpg);
background-repeat: no-repeat;
background-position: 149px 112px;
width: 317px;
}

.content{
float: right;
background-image: url(images/3.jpg);
background-repeat: no-repeat;
background-position: top;
width: 428px;
text-align: left;
margin-top: 0px;
}

.content2{
margin-top: 45px;
margin-right: 45px;
margin-left: 15px;
margin-bottom: 20px;
}


.navb{
color: #4B4C4E;
font-weight: normal;
font-size: 12px;
line-height: 200%;
margin-left: 15px;
}

.navt{
color: #4B4C4E;
font-weight: bold;
font-size: 12px;
border: 1px #000000;
width: 180px;
margin-top: 20px;
margin-left: 20px;
height: 300px;
}

a.nav:link {color: #4B4C4E; text-decoration: none;}
a.nav:visited {color: #4B4C4E; text-decoration: none;}
a.nav:hover {color: #E31836; text-decoration: none;}
a.nav:active {color: #E31836; text-decoration: none;}

.balls{
background-image: url(images/r2.jpg);
background-repeat: no-repeat;
background-position: bottom right;
width: 745px;
height: 105px; 
z-index: 3;
}
.b1{
background-image: url(images/b1.jpg);
background-repeat: no-repeat;
background-position: bottom left;
height: 37px; 
width: 745px;
}
.b2{
background-image: url(images/b2.jpg);
background-repeat: no-repeat;
background-position: bottom right;
width: 164px;
height: 37px;
float: right;
}

the HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="sw.css">
</head>

<body>
<div align="center">
<div class="container">
<div class="top"></div>
<div class="right">
<div class="left">
<div class="balls">
<div class="content">
<div class="content2">
      <p>ALL CONTENT</p>
					
</div></div>
<div class="left1">
<div class="left2">
<div class="navt"> 
              products 
              <p class="navb"><a href="link.htm" class="nav">link</a><br>
        <a href="link.htm" class="nav">link</a><br>
              <a href="link.htm" class="nav">link</a><br><a href="link.htm" class="nav">link</a><br><a href="link.htm" class="nav">link</a><br></p> 

	  </div>
	  </div>
</div>
</div>
</div><div style="clear:both"></div>
<div class="b1">
<div class="b2"></div>
</div>
</div>
</div>
</div>
</body>
</html>

Thank you for any help - it's driving me nutz!

**Medyman** · 05-07-2008, 10:36 PM

Do you have a link to the page? Without seeing the image backgrounds or knowing what it's supposed to look like or having semantic class names, it's hard to know what's going on there.

**thebutterfly** · 05-08-2008, 12:55 PM

Whoops - sorry about that!

http://clients.locallink.com/sw/www2/

Thank you for any help you can give.
You can see it "correctly" in IE.

**thebutterfly** · 05-09-2008, 03:14 PM

Anyone know how I can fix this?

Thank you!

**coothead** · 05-10-2008, 11:42 AM

Hi there thebutterfly,

the first thing that I noticed when viewing your page was that it was an excellent example of 'Divitis'

Check out the symptoms here...

Divitis:- what it is, and how to cure it

I have therefore completely reworked the page as the attachment will show.

coothead

**thebutterfly** · 05-12-2008, 02:43 PM

Hi There

Ahh.. yeah still learning the art of css layout - & yeah, I tend to get super div-crazy! hehehe

I will go through this even more, I can learn a lot! Thank you!!!!

**coothead** · 05-12-2008, 04:13 PM

No problem, you're very welcome.

**thebutterfly** · 05-12-2008, 05:24 PM

Oh no - problem. Now the overall layout does not strech to fit the content - it just goes over the lower stuff and disappers off the area. I really dont want to make a scrolling div - it really needs to stretch. Any thoughts?

**coothead** · 05-12-2008, 08:51 PM

Hi there thebutterfly,

unfortunately, for me

, you did not say that you wished to add extra content to the layout.

Still, 'it's an ill wind that blows no good'.

It means that you get your background-images refined somewhat.

With added content they did look a little clumsy at the edges.

coothead

Thread: css layering wrong

Thread Tools

Search Thread

css layering wrong

The Following User Says Thank You to coothead For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions