- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hello!
Here’s my html:
and here’s my css:
* {
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:
[img]http://saheran.persiangig.com/ie6-screenshot.jpg[/img]
well, in FF it looks nice.
Why in IE the floated element shows out of the header?
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>
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.
: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 ^^