CSS: Absolute positioning woes with IE

CodeXP · 2006-03-03 14:18

CodeXP
Senior Member
Offline

From: /dev/null
Registered: 2004-07-07
Posts: 503

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.):

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

Well, then look at a IE6 screenshot:

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

CodeXP · 2006-03-04 01:04

CodeXP
Senior Member
Offline

From: /dev/null
Registered: 2004-07-07
Posts: 503

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

Paul · 2006-03-04 01:52

Paul
Senior Member
Offline

From: Wales, UK.
Registered: 2003-08-13
Posts: 3,089

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?

CodeXP · 2006-03-04 02:13

CodeXP
Senior Member
Offline

From: /dev/null
Registered: 2004-07-07
Posts: 503

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 Unfortunately, I don't have a live demo yet, but I'll post a link when I do.

Paul · 2006-03-04 02:17

Paul
Senior Member
Offline

From: Wales, UK.
Registered: 2003-08-13
Posts: 3,089

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.

CodeXP · 2006-03-04 02:24

CodeXP
Senior Member
Offline

From: /dev/null
Registered: 2004-07-07
Posts: 503

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:

*continues intestigation*

decaf · 2006-03-04 02:28

decaf
Member
Offline

Registered: 2006-03-03
Posts: 10

Re: CSS: Absolute positioning woes with IE

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

Paul · 2006-03-04 02:29

Paul
Senior Member
Offline

From: Wales, UK.
Registered: 2003-08-13
Posts: 3,089

Re: CSS: Absolute positioning woes with IE

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

CodeXP · 2006-03-04 02:30

CodeXP
Senior Member
Offline

From: /dev/null
Registered: 2004-07-07
Posts: 503

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

Paul · 2006-03-04 02:37

Paul
Senior Member
Offline

From: Wales, UK.
Registered: 2003-08-13
Posts: 3,089

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.

CodeXP · 2006-03-04 02:47

CodeXP
Senior Member
Offline

From: /dev/null
Registered: 2004-07-07
Posts: 503

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.

Paul · 2006-03-04 02:59

Paul
Senior Member
Offline

From: Wales, UK.
Registered: 2003-08-13
Posts: 3,089

Re: CSS: Absolute positioning woes with IE

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

CodeXP · 2006-03-04 03:08

CodeXP
Senior Member
Offline

From: /dev/null
Registered: 2004-07-07
Posts: 503

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 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

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

Paul · 2006-03-04 03:20

Paul
Senior Member
Offline

From: Wales, UK.
Registered: 2003-08-13
Posts: 3,089

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>

CodeXP · 2006-03-04 03:25

CodeXP
Senior Member
Offline

From: /dev/null
Registered: 2004-07-07
Posts: 503

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

hcgtv · 2006-03-04 03:50

hcgtv
Senior Member
Offline

From: Charlotte, NC
Registered: 2004-06-25
Posts: 1,991

Re: CSS: Absolute positioning woes with IE

Paul,

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

PHPCrossRef . TXP Make . TXP Themes . TXP Tags . TXP Planet . We Love TXP

Paul · 2006-03-04 03:52

Paul
Senior Member
Offline

From: Wales, UK.
Registered: 2003-08-13
Posts: 3,089

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.

CSS: Absolute positioning woes with IE

Posts: 17

1 Topic by CodeXP 2006-03-03 14:18

Topic: CSS: Absolute positioning woes with IE

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

Re: CSS: Absolute positioning woes with IE

3 Reply by Paul 2006-03-04 01:52

Re: CSS: Absolute positioning woes with IE

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

Re: CSS: Absolute positioning woes with IE

5 Reply by Paul 2006-03-04 02:17

Re: CSS: Absolute positioning woes with IE

6 Reply by CodeXP 2006-03-04 02:24

Re: CSS: Absolute positioning woes with IE

7 Reply by decaf 2006-03-04 02:28

Re: CSS: Absolute positioning woes with IE

8 Reply by Paul 2006-03-04 02:29

Re: CSS: Absolute positioning woes with IE

9 Reply by CodeXP 2006-03-04 02:30

Re: CSS: Absolute positioning woes with IE

10 Reply by Paul 2006-03-04 02:37

Re: CSS: Absolute positioning woes with IE

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

Re: CSS: Absolute positioning woes with IE

12 Reply by Paul 2006-03-04 02:59

Re: CSS: Absolute positioning woes with IE

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

Re: CSS: Absolute positioning woes with IE

14 Reply by Paul 2006-03-04 03:20

Re: CSS: Absolute positioning woes with IE

15 Reply by CodeXP 2006-03-04 03:25

Re: CSS: Absolute positioning woes with IE

16 Reply by hcgtv 2006-03-04 03:50

Re: CSS: Absolute positioning woes with IE

17 Reply by Paul 2006-03-04 03:52

Re: CSS: Absolute positioning woes with IE

Posts: 17