No replies
Last seen: 18 years 5 weeks ago
Joined: 2004-10-24
Posts: 1
Points: 0


I should preface this by saying that I am pretty new to CSS, and probably pretty stupid about things.

However, I am currently working on a demo site that displays perfectly well in Safari, Firefox (cross-platform), Netscape 7, and IE 5.2 (mac), but NOT in IE 6.x for Windows. A screenshot of one of the typical pages (viewed on Safari) can be seen at


When viewing the same page in IE 6.x/WIN
-the large pic on the left of the page ("backgroundPic") gets cut off where it overlaps the menu;
-the orange box with pullout text ("pulloutText") on the right gets cut off where it leaves the content div on the right;
-and the icons on the bottom of the page don't show up at all.
All of these things are positioned outside of the main content div ("content") using negative margins, which seems to be a problem for IE, and is probably a bad idea in retrospect.

I have a few ideas on doing these without negative margins, but I am wondering if there might be a relatively simple way to hack things for IE that I don't know about.

If anyone has any ideas on a way to get this working on all browsers, I would really appreciate it!

-------> (from the css - "content" encloses "backgroundPic" and "pulloutText")


div.content {
position absolute;
top 135px;
left 16px;
width 720px;
overflow visible;
background-color #EEEEEE;
border-bottom 1px solid rgb(90,160,190);
border-left 5px solid rgb(90,160,190);
border-right 1px solid rgb(90,160,190);
z-index 7;

div.backgroundPic {
position absolute;
top 0px;
left 0px;
z-index 8;

p.pulloutText {
font-family Verdana, Arial, Helvetica, sans-serif;
font-weight normal;
font-size 8pt;
color #FFFFFF;
background-color #EB3200;
border thin solid rgb(215,195,0);
padding 3px;
margin 15px -10px 15px 10px;

---------> (from the html)


<div class="backgroundPic" style="width 350px;">
<img src="images/pic_masq.png" height="416" width="330" style="margin -73px 0px 0px 0px;" />