floating borders push away content IE problems [Archive]

tdsmithj

06-03-2008, 09:24 PM

I have attached two float images on my site which are used as borders. But in IE the content gets pushed below the floating images. The site works fine in firefox, opera, safari, just not any IE's.

any ideas?

here is my code

HTML

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Villa in the sun</title>
<link href="css/master.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="wrapper">
<img class="iefix" style="float:left; z-index:1;width:69px; height:772px;" src="images/background-left.png" alt="background" />
<img class="iefix" style="float:right; z-index:1;width:69px; height:772px;" src="images/background-right.png" alt="background" />
<div id="header">
<div id="navMenu"><?php include ("includes/menu.html"); ?></div>
</div>
<div id="contents"><br />
<p class="text">
<img src="images/header.png" alt="header" /><br /><br />
<span style="font-size:16px; font-weight:bold;">"Villa for sale!"</span><br /><br />
<span style="font-size:1.5em;">T</span>his is a lovely Country house set in Costa Calida which is on the Valle Del Sol valley, Murcia.
The villa itself sits in approx 2,700.sq metres of land, which is walled and fenced to give you privacy and security.
San Xavier airport also known as Murcia airport, is only a 15 minute drive making the Villa ideal for the Airport.
Murcia City is only 15 minutes away and the famous Torrevieja Town is only 40 min in the other.<br /><br/ >
The Villa is only a short distance from the Mar Menor which has a stunning inland sea, surrounded by over 20 beaches.
Also for all you keen Golfers there are several golf courses within minutes of the villa.
Which include the famous Polaris World and Mosa Trajectum and the all new 3 Molinos golf courses.<br /><br />

The villa is perfect for those who settling for retirement or just want a second home where they can relax and enjoy
the weather and scenary. Please browse through the site for more information on the villa.
</p><br />

</div>

</div>
</body>

CSS

@charset "utf-8";
/* CSS Document */

html, body {
text-align:center;
font-family: arial, 'lucida console', sans-serif;
background-image:url(../images/background.jpg);
background-repeat:repeat;
z-index:0;
width:100%;
border:0px solid black;
}

#wrapper {
position:relative;
text-align:left;
width:860px;
border:1px solid black;
margin-left: auto;
margin-right: auto;

}

#header {
height:160px;
border-bottom:1px solid black;
background:#ffffff;
background-image:url(../images/logo.png);
background-repeat:no-repeat;
z-index:0;
width:100%;
}

#contents {
width:100%;
border:1px solid black;
background:#FFFFFF;
background-image:url(../images/background-inner.jpg);
background-repeat:no-repeat;
background-position:right top;
z-index:0;
}

#navMenu {
position:absolute;
top:132px;
left:400px;
border-width: 0px 0px 0px 0px;
border-style:solid;
border-color:#000000;
font-size:12px;
width:auto;
padding:8px;
}

#navMenu ul {
list-style-type:none;
}

#navMenu li {
display:inline;
}

#navMenu a {
padding:5px;
text-align: center;
border-width: 1px 1px 1px 1px;
border-style:solid;
border-color:#000000;
text-decoration: none;
font-weight:bold;
background:#CC3333;
color:#FFFFFF;
}

#navMenu a:link, #navMenu a:active, #navMenu a:visited {color:#ffffff;}

#navMenu a:hover {
color:#ffffff;
background-color:#0066FF;
border-width: 1px 1px 1px 1px;
border-style:solid;
border-color:#000000;
padding-bottom:5px;
font-size:12px;
font-weight:bold;
}

p.text{
font-size:.85em;
font-style:italic;
padding-left:20px;
margin-right:450px;
margin-left:10px;
border-left:1px solid black;
}

Centauri

06-03-2008, 10:35 PM

So what is the "iefix.css" ? You would probably be better off absolutely positioning those images rather than floating them.

tdsmithj

06-04-2008, 05:37 AM

the IEFIX basically changes the size of the margins by a few pixels in internet explorer 6 in the header section and below and takes away the borders for versions that do not support transparency in pictures. i.e. 6 and below.

though in IE7 which render margins alot better it uses the defualt css not the fix but still causes the problem which i have. if i dont use the fix on the other explorers the same problem arises like IE7.

i tried absolute positioning but in lower resolutions the borders are sometimes stuck in the middle of the screen instead of being at the sides.

Centauri

06-04-2008, 07:05 AM

The problem here is that the content divs you want to slide in behind the floats have sizes set - height and width on #header, and width on #contents (no need to specify 100% width on a non-floated div either - it will naturally expand to the width), which triggers "HasLayout" in IE. When this happens, the divs will not ignore the floats as they should, and will not slide in behind them.

As you have a relative position on #wrapper, you should be able to absolutely position them with left:0;top:0; on the left image and right:0;top:0; on the right. You would most likely need to have the images the last thing in #wrapper in the html to ensure they stack on top.

tdsmithj

06-04-2008, 12:33 PM

hey, it is working now, i changed them to absolute and works fine in smaller resolutions :) i thought i set them as absolute before, guess i ididnt.

thx for your help