/    Sign up×
Community /Pin to ProfileBookmark

I need help understanding relative positioning in IE

Copy linkTweet thisAlerts:
Sep 01.2008

I’m creating a site:
[url]http://www.cornbreadart.com/indexTEST.html[/url]

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 ? ?

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@no_good_at_thisSep 01.2008 — Post your code so as to better advise you.
Copy linkTweet thisAlerts:
@BossLovelyauthorSep 01.2008 — 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;

}
Copy linkTweet thisAlerts:
@drhowarddrfineSep 01.2008 — 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.
×

Success!

Help @BossLovely spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...