Menu
Hi, the CSS has got me…
Below is a grid layout, currently not having any content.
I’m having two issues: in Dreamweaver CS3 I keep losing divs – literally, when previewed sections are not there. This happens in IE7 and Firefox.
Also in Dreamweaver, the design preview shows some of the 5px divs as much wider although this does not show up in the browser.
I’ve sent both pages through the HTML and CSS validators.
Can anyone point out where I may be going wrong?
This is the code:
[CODE]
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Welcome to THT Doncaster</title>
<style type=”text/css”>
body {
color: #FFFFFF;
}
#positioned-element44 {
background-color: #ffffff;
height: 525px;
left: 50px;
position: absolute;
top: 55px;
width: 5px;
z-index: 100
}
#HEADLINEBOX {
background-color: #800000;
height: 75px;
left: 55px;
position: absolute;
top: 55px;
width: 155px;
z-index: 20
}
#positioned-element39 {
background-color: #ffffff;
height: 5px;
left: 50px;
position: absolute;
top: 50px;
width: 650px;
z-index: 100
}
#positioned-element23 {
background-color: #ffffff;
height: 40px;
left: 295px;
position: absolute;
top: 25px;
width: 5px;
z-index: 4
}
#positioned-element21 {
background-color: #ffffff;
height: 120px;
left: 455px;
position: absolute;
top: 55px;
width: 5px;
z-index: 10
}
#positioned-element17 {
background-color: #ffffff;
height: 5px;
left: 55px;
position: absolute;
top: 130px;
width: 645px;
z-index: 100
}
#positioned-element15 {
background-color: #ffffff;
height: 5px;
left: 50px;
position: absolute;
top: 575px;
width: 645px;
z-index: 100
}
body {
background-image: url(images/155475_5051.jpg)
}
#positioned-element41 {
background-color: #ffffff;
height: 525px;
left: 695px;
position: absolute;
top: 55px;
width: 5px;
z-index: 100
}
#positioned-element18 {
background-color: #ffffff;
height: 525px;
left: 210px;
position: absolute;
top: 55px;
width: 5px;
z-index: 100
}
#positioned-element20 {
background-color: #ffffff;
height: 5px;
left: 55px;
position: absolute;
top: 130px;
width: 400px;
z-index: 1
}
#positioned-element22 {
background-color: #ffff00;
height: 395px;
left: 55px;
overflow: hidden;
position: absolute;
top: 180px;
width: 155px;
z-index: 20
}
#positioned-element25 {
background-color: #CC3300;
height: 75px;
left: 215px;
position: absolute;
top: 55px;
width: 480px;
z-index: 20
}
#positioned-element26 {
background-color: #ffffff;
height: 5px;
left: 55px;
position: absolute;
top: 175px;
width: 645px;
z-index: 100
}
#positioned-element27 {
background-color: #8000ff;
height: 40px;
left: 55px;
position: absolute;
top: 135px;
width: 155px;
z-index: 20
}
#positioned-element28 {
height: 40px;
left: 135px;
position: absolute;
top: 135px;
width: 75px;
z-index: 38
}
#positioned-element29 {
background-color: #408080;
height: 40px;
left: 215px;
position: absolute;
top: 135px;
width: 75px;
z-index: 20
}
#positioned-element30 {
background-color: #8000ff;
height: 40px;
left: 295px;
position: absolute;
top: 135px;
width: 75px;
z-index: 20
}
#positioned-element24 {
background-color: #808000;
height: 395px;
left: 215px;
position: absolute;
top: 180px;
width: 480px;
z-index: 20
}
#positioned-element21 {
background-color: #ffffff;
height: 1px;
left: 455px;
position: absolute;
top: 55px;
width: 5px;
z-index: 43
}
#positioned-element19 {
background-color: #008080;
height: 40px;
left: 375px;
position: absolute;
top: 135px;
width: 75px;
z-index: 20
}
#positioned-element31 {
background-color: #8080ff;
height: 40px;
left: 455px;
position: absolute;
top: 135px;
width: 75px;
z-index: 20
}
#positioned-element32 {
background-color: #99CC66;
height: 40px;
left: 535px;
position: absolute;
top: 135px;
width: 75px;
z-index: 46
}
#positioned-element33 {
background-color: #8000ff;
height: 40px;
left: 615px;
position: absolute;
top: 135px;
width: 80px;
z-index: 20
}
#positioned-element34 {
background-color: #ffffff;
height: 40px;
left: 130px;
position: absolute;
top: 135px;
width: 5px;
z-index: 48
}
#positioned-element35 {
background-color: #ffffff;
height: 40px;
left: 290px;
position: absolute;
top: 135px;
width: 5px;
z-index: 49
}
#positioned-element36 {
background-color: #ffffff;
height: 40px;
left: 370px;
position: absolute;
top: 135px;
width: 5px;
z-index: 50
}
#positioned-element37 {
background-color: #ffffff;
height: 40px;
left: 450px;
position: absolute;
top: 135px;
width: 5px;
z-index: 51
}
#positioned-element38 {
background-color: #ffffff;
height: 40px;
left: 530px;
position: absolute;
top: 135px;
width: 5px;
z-index: 52
}
#positioned-element40 {
background-color: #ffffff;
height: 40px;
left: 610px;
position: absolute;
top: 135px;
width: 5px;
z-index: 53
}
#positioned-element28 {
background-color: #808080;
height: 40px;
left: 535px;
position: absolute;
top: 135px;
width: 75px;
z-index: 54
}
#positioned-element20 {
background-color: #ffffff;
height: 40px;
left: 290px;
position: absolute;
top: 135px;
width: 5px;
z-index: 100
}
#positioned-element21 {
background-color: #ffffff;
height: 40px;
left: 370px;
position: absolute;
top: 135px;
width: 5px;
z-index: 100
}
#positioned-element28 {
background-color: #ffffff;
height: 40px;
left: 450px;
position: absolute;
top: 135px;
width: 5px;
z-index: 100
}
#positioned-element34 {
height: 40px;
left: 535px;
position: absolute;
top: 135px;
width: 75px;
z-index: 20
}
#positioned-element35 {
background-color: #ffffff;
height: 40px;
left: 530px;
position: absolute;
top: 135px;
width: 5px;
z-index: 100
}
#positioned-element32 {
background-color: #ffffff;
height: 40px;
left: 610px;
position: absolute;
top: 135px;
width: 5px;
z-index: 100
}
</style>
</head>
<body>
<div id=”positioned-element44″>this is the positioned element originally called “positioned-element3″</div>
<div id=”HEADLINEBOX”>this is the positioned element originally called “positioned-element2″</div>
<div id=”positioned-element39”>this is the positioned element originally called “positioned-element”</div>
<div id=”positioned-element17”>this is the positioned element originally called “positioned-element17″</div>
<div id=”positioned-element15”>this is the positioned element originally called “positioned-element13″</div>
<div id=”positioned-element41″>Rborder</div>
<div id=”positioned-element18”>this is the positioned element originally called “positioned-element18″</div>
<div id=”positioned-element22″></div>
<div id=”positioned-element25″>
</div>
<div id=”positioned-element26”>this is the positioned element originally called “positioned-element26″</div>
<div id=”positioned-element27”>this is the positioned element originally called “positioned-element26″</div>
<div id=”positioned-element29”>this is the positioned element originally called “positioned-element28″</div>
<div id=”positioned-element30”>this is the positioned element originally called “positioned-element29″</div>
<div id=”positioned-element24”>this is the positioned element originally called “positioned-element21″</div>
<div id=”positioned-element19”>this is the positioned element originally called “positioned-element18″</div>
<div id=”positioned-element31”>this is the positioned element originally called “positioned-element19″</div>
<div id=”positioned-element33”>this is the positioned element originally called “positioned-element21″</div>
<div id=”positioned-element20”>this is the positioned element originally called “positioned-element19″</div>
<div id=”positioned-element21”>this is the positioned element originally called “positioned-element20″</div>
<div id=”positioned-element28”>this is the positioned element originally called “positioned-element21″</div>
<div id=”positioned-element34”>this is the positioned element originally called “positioned-element22″</div>
<div id=”positioned-element35”>this is the positioned element originally called “positioned-element23″</div>
<div id=”positioned-element32”>this is the positioned element originally called “positioned-element23″</div>
</body>
</html>