PDA

View Full Version : Right float in IE


nicolec
07-12-2007, 05:35 PM
Hi, I'm trying to create a page where on my header I have an image on the left hand side and the site name on the right hand side. I am using divs and have floated the right one. Now it all works perfectly in Firefox, but when I preview in IE 6 the image jumps down below the site name (but on the left hand side). It doesn't look like there are any margin issues here as it all seems to line up - just not in the places I want. Here's the relevant parts of my code:

<body>
<div id="holder">
<div id="header">
<div id="header_text_wrapper">
<div id="header_text_top">Content for id "header_text_top" Goes Here</div>
<div id="header_text_bottom">Content for id "header_text_bottom" Goes Here</div>
</div>
<div id="header_image"><img src="../Images/iStock_000001235740XSmall.gif" width="258" height="171" alt="Header Image" /></div>
</div>
<!--end of header -->
<div id="nav"><a href="javascript:;">home</a><br />
<a href="javascript:;">sign up</a><br />
<a href="javascript:;">log in</a><br />
<a href="javascript:;">my profile</a><br />
<!--end of nav_wrapper -->
</div>

And the css:

body {
font: 100% Arial, Helvetica, sans-serif;
color: #000000;
background: #FE6554;
text-align: center;
}
#holder {
background: url(Images/nav_bg1.gif) repeat-y;
text-align: left;
margin: 0px auto;
width: 760px;
}
#nav a:link, nav a:visited {
font-size: 90%;
color: #000000;
background: center;
text-decoration: none;
}
#nav a:hover, nav a:active {
font-size: 90%;
color: #FFF;
background: center;
text-decoration: none;
}
#header_text_wrapper {
float: right;
margin-right: 0px;
width: 502px;
height: 171px;
background: #FFFA65;
}
#header_text_top {
font-size: 120%;
font-weight: bold;
color: #000000;
text-align: center;
height: 85px;
}
#header_text_bottom {
text-align: center;
height: 86px;
}
#nav {
padding-right: 5px;
padding-left: 15px;
padding-top: 10px;
float: left;
width: 167px;
margin-left: 0px;
font-weight: bold;
line-height: 2em;
color: #000000;
text-decoration: none;
}

Also, I've set styles for the nav links - which again work in firefox but not IE, when I preview in IE they come out purple and underlined.

If anyone can help I'd be very grateful. I am a bit of a beginner and this has just stumped me!
:-D

domedia
07-12-2007, 07:24 PM
Replace the order of the elements:
<div id="holder">
<div id="header">
<div id="header_image"><img src="../Images/iStock_000001235740XSmall.gif" width="258" height="171" alt="Header Image" /></div>
<div id="header_text_wrapper">
<div id="header_text_top">Content for id "header_text_top" Goes Here</div>
<div id="header_text_bottom">Content for id "header_text_bottom" Goes Here</div>
</div>
</div>
<!--end of header -->
<div id="nav"><a href="javascript:;">home</a><br />
<a href="javascript:;">sign up</a><br />
<a href="javascript:;">log in</a><br />
<a href="javascript:;">my profile</a><br />
<!--end of nav_wrapper -->
</div>

and then add this line in the css:
#header_image {width: 258px; float: left;}