IE wraps without reason

Hello all,

I have run into a very weird problem. The page has valid XHTML 1.0 and CSS (well except maybe a -mox-border-radius tag I just throw in to make it look nicer :P). The problem is that when viewing it in IE in a higher resolution, everything is fine. But as soon as there is less room, the #Location div (red text) gets unwrapped all the way, even while its FAR from needed.

FireFox 0.9 shows the desired behavior.

http://worstje.mine.nu/test/

Related XHTML:

<div id="Header">
<div id="Title">Worstje.mine.nu</div>
<div id="Location">/
<a href="http://worstje.mine.nu/" title="Main page">Testje</a>
/ <a href="http://worstje.mine.nu/comic.php" title="Comic">Comic</a>
</div>
</div>

Related CSS (styles.css)

#Header {
margin:50px 50px 0px 50px;
padding: 10px 10px 10px 170px;
background: black url('/images/header.png') no-repeat;
height: 130px;
}

#Title {
position: absolute;
top: 100px;
left: 230px;
color: #ddd;
font-size: 36pt;
}

#Location {
position: absolute;
top: 170px;
left: 230px;
color: #f55;
}

I would appreciate any look you might be able to throw at this problem.. Thanks! :)

I can't get it to recreate the problem in IE6 on Windows. :(

Screenshot is here:

http://worstje.mine.nu/test/IE1.png

Thanks for looking at it.
Am using IE 6, with SP2 :)

I don't think IE is smart enough to know this, but you should put those in something other than just a div -- There are more advanced ways (like a list with slashes as dots), but you may just as well do a simple list:

<div id="Location">/
<a href="http://worstje.mine.nu/" title="Main page">Testje</a>
/ <a href="http://worstje.mine.nu/comic.php" title="Comic">Comic</a>
</div>


<ul id="Location">
<li>/<a href="http://worstje.mine.nu/" title="Main page">Testje</a></li>
<li>/<a href="http://worstje.mine.nu/comic.php" title="Comic">Comic</a></li>
</ul>


Give it whatever CSS you want for the "location" id, but give your lists:

#location li {
display: inline;
}


That should let them float right next to each other, put more spaces as you need, and you can position them and style them like you want -- bit it's probably because IE is handling those as block level elements, I may be wrong. If you still don't get that fixed, then apply the same thing to the a tags:

#location li, #location li a {
display: inline;
}

I just tried your changes, but no luck... IE is still behaving the same foolish way :( Anyone else got any ideas?

Oh and thanks for the <ul> idea.. that's an alot better thing to use than using a div :D

maybe you have to force a width then? Try it as a float forced width -- give it your absolute position, then give the a tags this:

#location li, #location li a {
display: block;
float: left;
width: 150px;
height: auto;
}


Whatever width you want, ems or a different pixel width, but try that out and see if it flies instead...

I tried your suggestion.. didn't work... it gave me an idea though :)

And.. I found the way to fix it.. but it's not to nice...

I applied width: 250px; to the #location element. For some reason, IE does not like width: auto;.. Currently I am experiementing with ways to keep this automatic anyway... since I don't want a scrollbar to show up in small windows, nor have long dynamic content cause the bug all over again.. :/ Overflow: hidden; is just a hack and would remove usability instead of adding it what a locationbar is usually ment for anyway.. :)

I appreciate all the help you are giving me! Thanks! :)

EDIT:

I got the solution... for the interested, my problems were solved like this:

#Location {
position: absolute;
top: 170px;
left: 230px;
color: #f55;
margin: 0;
padding: 0;
/* Following is a fix for a IE bug concerning width: auto;
and it misinterpreting width: 100%. Using the fact IE
does not understand > selector so that browsers other
than IE get the right width: auto; anyway. */
width: 100%;
}


html>body #Location {
width: auto;
}

Good job :thumbsup:

I didn't think about that, I've had issues with the width auto before... why, I do not know, other than they need to update their browser pronto:)