PDA

Click to See Complete Forum and Search --> : I need help understanding relative positioning in IE

BossLovely
08-31-2008, 10:08 PM
I'm creating a site:
http://www.cornbreadart.com/indexTEST.html

I was told by a guru on here that I needed to relatively position my store div so it would act right. It works, but now it doesn't in IE.

Can someone please help me understand relative positioning for IE so that it looks the same as it does in Firefox?

Thanks :) :cool:
no/good/at/this
08-31-2008, 10:15 PM
Post your code so as to better advise you.
BossLovely
08-31-2008, 10:26 PM
This is the HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/main.css" type="text/css" />
<title>CornbreadArt.com</title>
</head>
<body bgcolor="#000000" topmargin="0" bottommargin="0">
<div id="topBlueBar">&nbsp;</div>
<div id="blackSpace">&nbsp;</div>
<div id="wrapper">
<div id="logoSpace">&nbsp;</div>
<div id="topMenu">
<ul>
<li class="home"><img src="images/button_home.jpg"></li>
<li class="bio"><img src="images/button_bio.jpg"></li>
<li class="paint"><img src="images/button_paint.jpg"></li>
<li class="photo"><img src="images/button_photo.jpg"></li>
<li class="sketch"><img src="images/button_sketch.jpg"></li>
<li class="contact"><img src="images/button_contact.jpg"></li>
</ul>
</div>
<div id="moreBlackSpace">&nbsp;</div>
<div id="header"><img src="images/header.jpg"></div>
<div id="pageMenu"><img src="images/pageMenu.jpg"></div>
<div id="body"><p>hello</p></div>
<div id="storeTitle"><img src="images/storeTitle.jpg"></div>
<div id="storeBG"><p>coming soon</p></div>
<div id="storeLink"><p>link coming soon</p>
<p class="tab">&nbsp;</p>
</div>

</div>
</body>
</html>


This is the CSS:
/* CSS Document */

#topBlueBar{
background-image:url(../images/topBlueBar.png);
background-repeat: repeat-x;
width: auto;
height: auto;
margin-top: -10px;
}

#wrapper{
width: 694px;
margin: 0 auto;
text-align: left;
}

#blackSpace{
height:42px;
background-color: #000;
}

#logoSpace{
width: 251px;
height: 79px;
}

#topMenu{
width: 443px;
height: 41px;
margin-left: 210px;
margin-top: -90px;
}

#topMenu ul{
width: 443px;
height: 41px;
}

#topMenu ul li{
display: block;
height: 41px;
float: left;
}

#topMenu ul li .home{
display: block;
height: 41px;
}

#topMenu ul li .bio{
display: block;
height: 41px;
}

#topMenu ul li .paint{
display: block;
height: 41px;
}

#topMenu ul li .photo{
display: block;
height: 41px;
}

#topMenu ul li .sketch{
display: block;
height: 41px;
}

#topMenu ul li .contact{
display: block;
height: 41px;
}

#moreBlackSpace{
height: 38px;
background-color: #000;
}

#header{
width: 694px;
height: 285px;
background-image:url(../images/header.jpg);
}

#pageMenu{
width: 453px;
height: 132px;
}

#body{
width: 439px;
height: 200px;

}

#body p{
width: 400px;
font-family: Tahoma, Verdana, Arial;
font-size: 10px;
color: #fff;
}

#storeTitle{
width: 241px;
height: 44px;
position: absolute;
top: 429px;
right: 284px;
}

#storeBG{
width: 241px;
height: 276px;
background-image:url(../images/storeBG.jpg);
background-repeat: no-repeat;
position: absolute;
left: 738px;
top: 472px;

}

#storeBG p{
width:180px;
height: 150px;
font-family: Tahoma, Verdana, Arial;
font-size: 12px;
color: #000;
margin-top: 0px;
margin-left: 25px;
text-align:center;
}

#storeLink{
width: 241px;
background-image:url(../images/storeLink-.jpg);
height: 40px;
position: absolute;
left: 738px;
top: 750px;
}

#storeLink p{
width:180px;
font-family: Tahoma, Verdana, Arial;
font-size: 12px;
font-weight:bold;
color: #fff;
margin-top: 0px;
margin-left: 25px;
text-align:center;
padding-top: 12px;
}

#storeLink p.tab{
width: 241px;
height: 10px;
background:url(../images/roundit.jpg)no-repeat;
margin-top: 0px;
margin-left: 0px;
}

#bottomBlackSpace{
height: 22px;
background-color:#000;
}

#blueSpace{
height:27px;
background-color: #0359ff;
}

#footerMenu{
width: 694px;
height: 20px;
background-color: #0359ff;
}

#footerMenu p{
text-align: center;
}

#footerMenu a{
font-famiily: Tahoma, Verdana, Arial;
font-size: 10px;
color: #fff;
font-weight:bold;
}

#footerMenu a:hover{
font-family: Tahoma, Verdana, Arial;
font-size: 10px;
color: #fff;
font-weight:bold;
text-decoration: underline;
}

#copyright{
width: 694px;
height: 20px;
background-color:#0359ff;
}

#copyright p{
font-family: Tahoma, Verdana, Arial;
font-size: 9px;
color: #000;
}

#bottomBlueSpace{
height: 35px;
background-color:#0359ff;
}
drhowarddrfine
08-31-2008, 11:35 PM
Validate your html and css for those lists of errors. There is some loose garbage at the end of the file, too. Plus, you are using Xhtml end tags, />, but declare HTML. Remove the slashes there.

All new web pages should use a strict doctype. There is no need for transitional.