1. Home
  2. Forums Index
  3. Browser Side / CSS 11:40 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Absolute positioning for IE7vs Firefox & Safari

Need help with IE7 fix

         

wavydavy

10:42 pm on Nov 10, 2008 (gmt 0)

10+ Year Member



Hope I did it right as far as pasting the code! (SEE BELOW) I'm a little confused as to how someone could evaluate the layout without my graphics, but it said don't post links to the working site, so I didn't! :)

Here is my problem:

I see my absolutely positioned DIVs containing text, ie. <div id="GALgallery"> and <div id="GALseemore">, show up about 10px vertically higher in IE7 versus FF or Safari. I don't know if this is a IE glitch, like the double margin thing, or maybe a specificity issue in my css.

There is a javascript slideshow playing behind the design, and the top nav bar is all CSS. Most of the absolutely positioned divs, such as those containing photos, are positioning the same on all browsers. It's just the ones that have only text in them that behave differently.

Right now I have the positioning adjusted so that it looks right in IE7, which is what my client uses. That means I have to visually nudge those text divs down in MY native browser (Safari) so that they look best in IE7.

Any help would be greatly appreciated!

Thanks!

*************************

CSS code:

body, #container, #wrapper, #header, #photoShow, #logoBox, h1, h2, h3, h4, ul, li, a{
margin: 0;
padding:0;
}

body{
text-align: center;
color: #999999;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100.1%;
background-color: #212328;
background-image: url(../images/bluprintbkgd.png);
background-repeat: no-repeat;
}

#container{
}

#wrapper{
position: relative;
margin: 0 auto;
width: 1005px;
text-align: left;
}

#header{
height: 678px;
padding: 0;
margin: 0;
width: 955px;
position: relative;
}
#footer{
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-align: center;
float: none;
width: 955px;
margin-top: -35px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#header h6{
display:inline;
float: right;
margin: 10px 0 0 0;
padding: 0;
color: #d00000;
font: bold 1.10em Verdana;
text-align: right;
padding: 0;
}

#logoBox{
position: absolute;
width: 1005px;
height: 678px;
top: 0px;
left: 0px;
z-index: 100;
}

#photoShow{
position: absolute;
width: 650px;
height: 500px;
z-index: 80;
top: 28px;
left: 331px;
}

.imageElement{
display: none;
}

#FPphoto {
position: absolute;
z-index: 200;
left: 45px;
top: 238px;
}

#FPtextright {
position: absolute;
z-index: 200;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
top: 255px;
left: 210px;
letter-spacing: 0.1em;
}

#FPtrloc {
margin-top: -12px;
}

#FPtrjob {
margin-top: 16px;
}

#FPtextbot {
position: absolute;
z-index: 200;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #212328;
left: 60px;
top: 408px;
width: 370px;
height: 100px;
font-weight: bold;
letter-spacing: 0.08em;
}

#phonenumber {
position: absolute;
z-index: 200;
left: 55px;
top: 490px;
}

.FPtextright1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #212328;
font-weight: bold;
}

.FPtextright2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
}

.FPtextright3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
font-weight: bold;
}

.FPtextright4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #BBBBBB;
font-weight: bold;
}

#GALphoto {
position: absolute;
z-index: 200;
left: 745px;
top: 488px;
}

#GALgallery {
position: absolute;
z-index: 200;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
top: 488px;
left: 760px;
letter-spacing: 0.1em;
}

#GALseemore {
position: absolute;
z-index: 200;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #212328;
left: 882px;
top: 490px;
width: 370px;
height: 100px;
font-weight: bold;
letter-spacing: 0.08em;
}

#quote {
position: absolute;
z-index: 200;
left: 315px;
top: 535px;
}

.style1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 9px;
padding: 5px;
color: #ffffff;
z-index: 300;
position: relative;
}

#menu2 {
padding:0;
width:955px;
margin:0;
list-style:none;
position:absolute;
z-index:500;
font-family:arial, verdana, sans-serif;
background-color:#c6691e;
height: 29px;
left: 25px;
}

#menu2 li.top {
display:block;
float:left;
text-indent:0px;
position: relative;
left: 74px;
}

#menu2 li a.top_link {
display:block;
height:30px;
float:left;
line-height:22px;
font-size:12px;
font-weight:bold;
padding:0px 20px 0px 20px;
color:#ffffff;
text-decoration:none;
border-top:3px solid #c6691e;
}

#menu2 li a.top_link:hover {color:#ffffff; border-color:#212328;}

#menu2 li:hover > a.top_link {color:#ffffff; border-color:#212328;}

#menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

#menu2 a:hover {visibility:visible; position:relative; z-index:200;}
#menu2 li:hover {position:relative; z-index:200;}

#menu2 ul,
#menu2 :hover ul ul,
#menu2 :hover ul :hover ul ul,
#menu2 :hover ul :hover ul :hover ul ul,
#menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; height:0; margin:0; padding:0; list-style:none;}

#menu2 :hover ul.sub {left:0; top:25px; white-space:nowrap; width:120px; height:auto; z-index:300; padding-top:5px; background:url(trans.gif);}
#menu2 :hover ul.sub li {display:block; float:left; width:100%; height:25px;}
#menu2 :hover ul.sub li span {display:block; height:25px; float:left; width:90px; font-weight:normal;}
#menu2 :hover ul.sub li b {display:block; height:25px; float:left; width:30px; font-weight:normal;}

#menu2 :hover ul.sub li a {
display:block;
position:relative;
font-size:11px;
height:25px;
width:120px;
margin-right:-30px;
line-height:25px;
text-indent:10px;
color:#ffffff;
text-decoration:none;
background:url(trans.gif);
}

#menu2 :hover ul.sub li span a:hover {color:#f97;}

#menu2 :hover ul.sub li:hover > span a {color:#f97;}

#menu2 :hover ul :hover ul,
#menu2 :hover ul :hover ul :hover ul,
#menu2 :hover ul :hover ul :hover ul :hover ul,
#menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:120px; top:0; white-space:nowrap; width:120px; z-index:400; height:auto;}

#menu2 :hover ul.wide {width:205px;}
#menu2 :hover ul.wide li span {width:175px;}
#menu2 :hover ul.wide li a {width:205px;}

#menu2 :hover ul.narrow {width:90px;}
#menu2 :hover ul.narrow li span {width:60px;}
#menu2 :hover ul.narrow li a {width:90px;}

#menu2 :hover ul.narrow :hover ul,
#menu2 :hover ul :hover ul.narrow :hover ul,
#menu2 :hover ul :hover ul :hover ul.narrow :hover ul,
#menu2 :hover ul :hover ul :hover ul :hover ul.narrow :hover ul
{left:90px;}

#menu2 li > span {
background: url(tab-midleft.png);
}
#menu2 li > b {
background: url(tab-midright.png)
}
#menu2 li.fly > b {
background: url(tab-midright-sub.png)
}

#menu2 li.subtop > span,
#menu2 li.flytop > span {
background:url(tab-topleft.png);
}
#menu2 li.subtop > b {
background:url(tab-topright.png);
}

#menu2 li.flytop > b {
background:url(tab-topright-sub.png);
}

#menu2 li.subbot > span,
#menu2 li.flybot > span {
height:35px !important; background:url(tab-botleft.png);
}

#menu2 li.subbot > b {
height:35px !important; background:url(tab-botright.png);
}
#menu2 li.flybot > b {
height:35px !important; background:url(tab-botright-sub.png);
}

END CSS CODE

***************************

HTML 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><title>
test
</title><meta name="keywords" content="test" /><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><meta name="description" content="PDCweb" /><link rel="stylesheet" type="text/css" href="index_files/main.css" /><link rel="stylesheet" type="text/css" href="index_files/jd.gallery.css" />

<script src="index_files/mootools.v1.11.js" type="text/javascript"></script>
<script src="index_files/jd.gallery.js" type="text/javascript"></script>

</head>

<body>

<div id="container">
<div id="wrapper">
<div id="header">
<ul id="menu2">
<li class="top"><a href="http://www.example.com" class="top_link">Home</a></li>
<li class="top"><a href="http://www.example.com" class="top_link">Green Building</a></li>
<li class="top"><a href="http://www.example.com" class="top_link">Commercial Floors</a>
<ul class="sub wide">
<li class="subtop"><span><a href="http://www.example.com">Gallery</a></span><b></b></li>
<li><span><a href="http://www.example.com">Diamond Polished Concrete Floors</a></span><b></b></li>
<li><span><a href="http://www.example.com">Chemical Stain and Seal</a></span><b></b></li>
<li><span><a href="http://www.example.com">Architectural Cement Overlays</a></span><b></b></li>
<li class="subbot"><span><a href="http://www.example.com">VAP System</a></span><b></b></li>
</ul>
</li>
<li class="top"><a href="http://www.example.com" class="top_link">Industrial Floors</a>
<ul class="sub wide">
<li class="subtop"><span><a href="http://www.example.com">Gallery</a></span><b></b></li>
<li class="subbot"><span><a href="http://www.example.com">Diamond Polished Concrete Floors</a></span><b></b></li>
</ul>
</li>
<li class="top"><a href="http://www.example.com" class="top_link">Residential Floors</a>
<ul class="sub wide">
<li class="subtop"><span><a href="http://www.example.com">Gallery</a></span><b></b></li>
<li><span><a href="http://www.example.com">Diamond Polished Concrete Floors</a></span><b></b></li>
<li><span><a href="http://www.example.com">Chemical Stain and Seal</a></span><b></b></li>
<li class="subbot"><span><a href="http://www.example.com">Architectural Cement Overlays</a></span><b></b></li>
</ul>
</li>
<li class="top"><a href="http://www.example.com" class="top_link">About Us</a>
<ul class="sub wide">
<li class="subtop"><span><a href="http://www.example.com">Business Profile</a></span><b></b></li>
<li><span><a href="http://www.example.com">Our Certifications</a></span><b></b></li>
<li><span><a href="http://www.example.com">Services Offered</a></span><b></b></li>
<li><span><a href="http://www.example.com">Our Staff</a></span><b></b></li>
<li><span><a href="http://www.example.com">Our Corporate Team</a></span><b></b></li>
<li><span><a href="http://www.example.com">Our Clients</a></span><b></b></li>
<li><span><a href="http://www.example.com">Our Testimonials</a></span><b></b></li>
<li><span><a href="http://www.example.com">Our Projects</a></span><b></b></li>
<li><span><a href="http://www.example.com">Helpful Links from PDC</a></span><b></b></li>
<li class="subbot"><span><a href="http://www.example.com">Employee Login</a></span><b></b></li>
</ul>
</li>
<li class="top"><a href="http://www.example.com" id="privacy" class="top_link">Contact Us</a></li>
</ul>


<div id="logoBox"><img src="images/PDChomeBkgd.png" width="1005" height="678" alt="logo layer" /></div>
<div id="photoShow">
<script type="text/javascript">

function startGallery(){
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showInfopane: false,
showCarousel: false,
embedLinks: false,
delay: 4600 });
document.gallery = myGallery;
}
window.onDomReady(startGallery);
</script>

<div id="myGallery">
<div class="imageElement">
<img class="full" src="images/PDC-home-slide-01.jpg" width="650"
height="500" alt="" /> </div>
<!-- end imageElement -->
<div class="imageElement">
<img class="full" src="images/PDC-home-slide-02.jpg" width="650"
height="500" alt="" /> </div>
<!-- end imageElement -->
<div class="imageElement">
<img class="full" src="images/PDC-home-slide-03.jpg" width="650"
height="500" alt="" /> </div>
<!-- end imageElement -->
<div class="imageElement">
<img class="full" src="images/PDC-home-slide-04.jpg" width="650"
height="500" alt="" /> </div>
<!-- end imageElement -->
<div class="imageElement">
<img class="full" src="images/PDC-home-slide-05.jpg" width="650"
height="500" alt="" /> </div>
<!-- end imageElement -->
<div class="imageElement">
<img class="full" src="images/PDC-home-slide-06.jpg" width="650"
height="500" alt="" /> </div>
<!-- end imageElement -->
<div class="imageElement">
<img class="full" src="images/PDC-home-slide-07.jpg" width="650"
height="500" alt="" /> </div>
<!-- end imageElement -->
<div class="imageElement">
<img class="full" src="images/PDC-home-slide-08.jpg" width="650"
height="500" alt="" /> </div>
<!-- end imageElement -->
<div class="imageElement">
<img class="full" src="images/PDC-home-slide-09.jpg" width="650"
height="500" alt="" /> </div>
<!-- end imageElement -->
<div class="imageElement">
<img class="full" src="images/PDC-home-slide-10.jpg" width="650"
height="500" alt="" /> </div>
<!-- end imageElement -->
</div><!-- end mygallery -->
</div><!-- end photoShow -->
<div id="FPphoto" onclick="location.href='http://www.example.com';" style="cursor:pointer;"><img src="images/FPphoto.png" alt="FPphoto" width="160" height="170" /></div>
<div id="FPtextright" onclick="location.href='http://www.example.com';" style="cursor:pointer;"><p class="FPtextright1">FEATURED PROJECT</p>
<p class="FPtextright2">Harley Davidson</p>
<p class="FPtextright3" id="FPtrloc">Lathrop, CA</p>
<p class="FPtextright3" id="FPtrjob">Diamond Polish<br />Integral Colored Concrete<br /></p>
<p class="FPtextright4">SEE MORE &gt;</p></div>

<div id="FPtextbot"><p>LICENSED CONTRACTORS AND INSTALLERS<br />
SERVING NORTHERN AND CENTRAL CALIFORNIA</p>
<p>NUMBER 123456 &bull; BONDED AND INSURED</p>
</div>
<div id="phonenumber"><img src="images/PDCphone.png" width="285" height="30" alt="call for an estimate" /> </div>

<div id="GALphoto" onclick="location.href='http://www.example.com';" style="cursor:pointer;"><img src="images/PDC-gallery-home-avantgarde.png" alt="GALphoto" width="230" height="150" /></div>
<div id="GALgallery" onclick="location.href='http://www.example.com';" style="cursor:pointer;"><p class="FPtextright1">GALLERY</p></div>

<div id="GALseemore" onclick="location.href='http://www.example.com';" style="cursor:pointer;"><p class="FPtextright4">SEE MORE &gt;</p>
</div>
<div id="quote"><img src="images/quote-anim.gif" width="416" height="91" alt="qoutes" /> </div>


</div><!-- end header -->
</div>
<!-- end wrapper -->
</div><!-- end container -->

<div id="footer">
<p>Copyright &copy; 2008 All Rights Reserved.</p>
</div><!-- end footer -->

</body>
</html>

END CODE

****************************************

designer88

11:31 am on Nov 11, 2008 (gmt 0)

10+ Year Member



This is the same problem I am experiencing. I have set up a post with this as well. Firefox, Safari, Opera and Chrome all work fine but IE7 pushes the content down below the absolute positioned tags which then makes the AP tags appear too high. Wish I could show you properly but I had my original post taken down for putting it on, but pretty sure it is exactly what you are experience.

Hopefully someone has the answer...

designer88

2:05 pm on Nov 11, 2008 (gmt 0)

10+ Year Member



Don't know if this is just me but once I moved away from inline css to a seperate css file the problem was sorted :s. Although that then messed a few other things out and it still looks crap in IE6
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 11:40 pm May 1, 2026