Forums

x386

Hello!
Here's my html:

...
<body>

	<div id=\"header\">
		
		<div id=\"top_nav\">
		<ul>
			<li><a href=\"#\">Ø®Ø§Ù†Ù‡</a></li>
			<li><a href=\"#\">Ù…ØØµÙˆÙ„Ø§Øª</a></li>
			<li><a href=\"#\">ØªÙ…Ø§Ø³</a></li>
		</ul>
		</div>
		
		<h1 id=\"logo\"><a href=\"#\">ICE PACK</a></h1>
	</div>
....

and here's my css:

@charset \"utf-8\";

* {
padding: 0;
margin: 0;
}

body {
font: 13px/1.9em Tahoma;
}

a {
color: #639000;
text-decoration: underline;
}

a:hover {
text-decoration: none;
}


#header {
width: 100%;
background: url(images/header_bg.gif) repeat-x;
height: 76px;
}

#top_nav {
float: right;
}

#top_nav ul {
margin: 25px 30px 0 0;
}

#top_nav li {
background: url(images/bullet.gif) no-repeat left center;
float: right;
margin-left: 10px;
padding-left: 20px;
list-style: none;
}

#top_nav li a {
color: #FFF;
text-decoration: none;
font-size: 10px;
}

#header h1#logo {
float: left;
padding: 10px 0 0 20px;
}

#header h1#logo a {
display: block;
width: 196px; height: 46px;
background: url(images/logo.gif) no-repeat;
overflow: hidden;
text-indent: -9999px;
}

.clear { clear: both; }

in IE 6, it looks like this:
http://saheran.persiangig.com/ie6-screenshot.jpg
well, in FF it looks nice.
Why in IE the floated element shows out of the header?

Jonz

You've gotta add a with to the id of top_nav. The reason for this is because divs by default take up 100% of the screen unless specified.

The top_nav div is taking up 100% so the other divs are being pushed below it.

Eg. put this in a new html document.
<div id="hello" style="background-color: #333;">Try</div>

x386

Thanks! Problem resolved! Still, it seems a bit odd to me. When you float elements, no matter how much is there width, they overlap together not push together away. Though, it rendered well in FF. Should I know it as an IE like-ever bug?! :D
Thank you.

Jonz

:D I hmm not sure how it would really have to be either be elastic and "take the width it's given" or 100% of the screen no matter what unless defined.

Anyay no probs happy coding ^^

treehouse : what would you like to learn today?

Forums

floated element position problem in ie6