Topic: CSS: Absolute positioning woes with IE

As the title suggests, I'm having some absolute positioning woes with IE.

To explain what I'm trying to do, consider the following two screens from a PunBB style/theme I'm working on:

In Opera (and FF, Safari etc.):
http://img54.imageshack.us/img54/3707/correct5lq.th.jpg

Notice how the absolute positioned menu at the top goes all the way from left -> right?

Well, then look at a IE6 screenshot:
http://img57.imageshack.us/img57/7352/ie1sf.th.jpg

Then, here's an extract of the CSS relevant to the positioning:

#punwrap { margin: 158px 20px 20px 20px }
.pun #brdmenu {
    position: absolute;
    left:0;
    top:0;
    right:0;
}

See, this would work in any *real* browser, but of course, IE doesn't play along (and don't even get me started on the IE7 beta!). Adding width:100% to the .pun #brdmenu block improves thing a bit, but not entirely (IE still positions it relative to #punwrap, something it shouldn't). Of course, removing the margins from #punwrap would solve it, but that's not what I'm looking for. Surely, using absolute positioning on a element should remove it from the "regular" flow of the document?

Anyone have any good suggestions on how to solve this, without having to move the menu block outside #punwrap in the .tpl (something which would kinda mess up the structure for non-css browsers)?

Any input would be greatly appreciated smile

2 (edited by CodeXP 2006-03-04 01:05)

Re: CSS: Absolute positioning woes with IE

Nobody have any ideas?


At this point, I'm hating IE so much, that I'm feeling tempted to serve it a text-only version of my site wink

3

Re: CSS: Absolute positioning woes with IE

Does #punwrap have a defined height or width (maybe in the hacks section of the stylesheet). If so, try removing it and see what happens. You will still need to give the menu 100% width though but it might change the way IE handles positioning.

Try the 100% width on the <ul> rather than the div.

Do you have a link to the site where this is being tested?

4 (edited by CodeXP 2006-03-04 02:14)

Re: CSS: Absolute positioning woes with IE

Paul wrote:

Does #punwrap have a defined height or width (maybe in the hacks section of the stylesheet). If so, try removing it and see what happens. You will still need to give the menu 100% width though but it might change the way IE handles positioning.

No, #punwrap only has those margins listed above, no size set anywhere... I just can't for the life of me figure out how to solve it properly by just using CSS.

EDIT: I'll try 100% on the UL, thanks for the tip smile Unfortunately, I don't have a live demo yet, but I'll post a link when I do.

5

Re: CSS: Absolute positioning woes with IE

#punwrap doesn't have a dimension on it but div.pun does and of course the menu is inside that one as well.

Re: CSS: Absolute positioning woes with IE

Tried playing around a bit by setting various size/margins/padding etc. on .pun, but with the same result.

Here's how it looks by using 100% on the UL:
http://img210.imageshack.us/img210/6151/ul1005of.th.jpg

*continues intestigation*

7

Re: CSS: Absolute positioning woes with IE

Maybe you should give both the ul and the div a width of 100%?

8

Re: CSS: Absolute positioning woes with IE

Give me a moment. I will try and duplicate the problem.

Re: CSS: Absolute positioning woes with IE

decaf wrote:

Maybe you should give both the ul and the div a width of 100%?

Already tried wink

10

Re: CSS: Absolute positioning woes with IE

What about replacing the left and right margins on #punwrap with left and right padding on body.

NB: It doesn't work in 1.3 either.

11 (edited by CodeXP 2006-03-04 02:50)

Re: CSS: Absolute positioning woes with IE

Paul wrote:

What about replacing the left and right margins on #punwrap with left and right padding on body.

NB: It doesn't work in 1.3 either.

Doesn't work either... I also tried creating a simple .html file, with the following contents, but the results in IE is the same..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test case #1</title>
<style type="text/css">
<!--
html,body,ul,li {margin:0;padding:0}
li{display:inline}
#wrap { margin: 158px 20px 20px 20px }
#menu {
    position:absolute;
    left:0;
    top:0;
    right:0;
    background:#333;
    width:100%
}
-->
</style>
</head>
<body>

<div id="wrap">
    <div id="menu">
        <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
        </ul>
    </div>

<p>some content</p>

</div>

</body>
</html>

Works fine in other browsers though, even IE7 (which actually doesn't need width:100%).

EDIT: Removed doctype to test IE's quirks mode, and the results are the same.

12

Re: CSS: Absolute positioning woes with IE

What happens if you try * html #menu ul {width: 100%; padding-right: 40px}

13 (edited by CodeXP 2006-03-04 03:16)

Re: CSS: Absolute positioning woes with IE

Paul wrote:

What happens if you try * html #menu ul {width: 100%; padding-right: 40px}

You know, I think I love you right now wink It solved the problem, thanks a lot for your help! It's kinda strange that it did though, but of course, this *is* IE we're talking about...

EDIT: Screenshot of IE actually working

http://img295.imageshack.us/img295/9058/iefixed4wd.th.jpg

I did set the padding & width on #brdmenu instead, just so it wouldn't mess with my existing hover & active page effect, but it worked just as well smile

14

Re: CSS: Absolute positioning woes with IE

Looking good. You might find things like this easier in the future

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <!-- pun_local -->>
<head>
<!-- pun_head -->
</head>
<body>

<div id="pun<!-- pun_page -->" class="punwrap">
<div id="pun" class="pbb">

<!-- pun_title -->

<!-- pun_skipdown -->

<!-- pun_navlinks -->

<!-- pun_ulinks -->

<!-- pun_announcement -->

<!-- pun_status -->

<div id="pun-bcrumbs1" class="pbb-section"><!-- pun_bcrumbs --></div>

<!-- pun_main -->

<!-- pun_stats -->

<div id="pun-bcrumbs2" class="pbb-section"><!-- pun_bcrumbs --></div>

<!-- pun_qjump -->

<!-- pun_about -->

<!-- pun_debug -->

</div>
</div>

</body>
</html>

15

Re: CSS: Absolute positioning woes with IE

Paul wrote:

Looking good. You might find things like this easier in the future

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <!-- pun_local -->>
<head>
<!-- pun_head -->
</head>
<body>

<div id="pun<!-- pun_page -->" class="punwrap">
<div id="pun" class="pbb">

<!-- pun_title -->

<!-- pun_skipdown -->

<!-- pun_navlinks -->

<!-- pun_ulinks -->

<!-- pun_announcement -->

<!-- pun_status -->

<div id="pun-bcrumbs1" class="pbb-section"><!-- pun_bcrumbs --></div>

<!-- pun_main -->

<!-- pun_stats -->

<div id="pun-bcrumbs2" class="pbb-section"><!-- pun_bcrumbs --></div>

<!-- pun_qjump -->

<!-- pun_about -->

<!-- pun_debug -->

</div>
</div>

</body>
</html>

Thanks, that'll come in handy the next time I'm about to tear my hair out in frustration over IE wink

16

Re: CSS: Absolute positioning woes with IE

Paul,

Don't you think it's time you changed Note: I am NOT a Guru wink

17

Re: CSS: Absolute positioning woes with IE

Knowing that if something is 40 pixels short the way to fix it is by adding 40 pixels does not make one a religious icon.