4 replies [Last post]
abochman
abochman's picture
Offline
newbie
Last seen: 12 years 16 weeks ago
Timezone: GMT-5
Joined: 2007-03-29
Posts: 6
Points: 5

I'll post the essentials first.d

Live example:

www.dtarcieri.com

HTML:

<div id="wrapper">
<img class="main_image" src="images/DT.png" alt="DT Arcieri photograph" />
	<h1>DT Arcieri - playwright based in Long Island, New York</h1> 
 
    <ul id="nav">
	    <li class="selected"><a href="#" title="Homepage of DT Arcieri (You are already here)" class="selected"">Home</a></li>
    	<li><a href="plays.html" title="A thorough list of plays written by DT Arcieri">Plays</a></li>
    	<li><a href="bio.html" title="A short biography and contact link for DT Arcieri">Bio</a></li>
	</ul>
 
 
 
    <div id="content">
    	<div id="sub_content">

CSS:

#nav {float:right;width:620px;height:80px;margin-top:1.2em;}
#nav li {width:188px;float:left;background:url(images/nav.png) no-repeat bottom center;height:76px;}
#content {width:860px;background:url(images/content.png) center repeat-y;margin-top:6em;padding:3em 1em;}
#sub_content {background-image:url(images/content_bg.gif);padding:3em;margin:0 auto;width:80%;border:1px solid #666;}

So thats all the code and a live example. Other version of IE and every other browser/platform works fine.

However for some reason IE7 decided to position the content div incorrectly.

Also attaching png of duplicated issue.

Thank you for all your help.

Asafd

AttachmentSize
DTie7.png411.51 KB
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 31 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Try clear: both on #content

Try clear: both on #content and remove the top margin.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

abochman
abochman's picture
Offline
newbie
Last seen: 12 years 16 weeks ago
Timezone: GMT-5
Joined: 2007-03-29
Posts: 6
Points: 5

clear:both, doesnt work

Tried clear both, right and left, unfortunately due to the picture on the top left, #content clears that as well. I floated the img on the top left so that it would overlap #content. Not sure what I'm doing wrong or why only IE7 is not reading it correctly.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 31 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Make #wrapper position:

Make #wrapper position: relative and make the image position: absolute and replace your margin-top with top and margin-left with left.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

abochman
abochman's picture
Offline
newbie
Last seen: 12 years 16 weeks ago
Timezone: GMT-5
Joined: 2007-03-29
Posts: 6
Points: 5

fixed

thank you all for help.

absolute positioning with no left or right value was the fix in the end.

dtarcieri.com