[Solved] Absolute Positioning & IE Problems

[quarterlight]

Hey! can anyone help me with this?

I have a div positioned absolute within a div positioned relative, works fine in all browsers except IE (7 not tried 6 or 8 yet).

here you can see how it looks in Firefox etc.. (Scroll to the right..!)
[attachment=1]accgworks.jpg[/attachment]

here you can see how IE messes it up… (scroll right again)
[attachment=0]accgbroken.jpg[/attachment]

ive tried allsorts, different positioning, margins, padding, widths / heights of div and or parent div, but nothing seems to be happening.

Heres the code.

Code:

• home
• services
• community
• volunteering
• support
• about us

• 
• 
• 

Welcome to the ACCG

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi non nisl vitae nisi posuere scelerisque id ullamcorper tellus.
Fusce felis turpis, blandit a gravida vitae, ultricies vel ante.
Vivamus tincidunt, elit sit amet congue dictum, nisl nulla mollis orci,
nec tempus mi magna vitae nisl. Suspendisse potenti. Suspendisse augue ante,
fringilla sed aliquet sit amet, viverra id ipsum. Sed egestas ipsum nec massa volutpat id
tincidunt dui dignissim?

Claremont Resource Centre
Rolls Crescent
Hulme
Manchester
M15 5FS

Click here
to see map

Services at Claremont are
Tuesday, Thursday & Friday
10:00am – 3:30pm

Harry Lord House
Humphrey Road
Old Trafford
Manchester
M16 9DF

Click here
to see map

Services at Harry Lord House
are Monday & Wednesday
10:00am – 3:30pm

Code:

* { padding:0; margin:0; }
body { font-size:10pt; background-image:url(‘../images/header_short.jpg’); background-repeat:repeat-x; background-color:#9ba978; }
#container { width:945px; margin-left:auto; margin-right:auto; }
#header { padding: 30px 0 0 0; }
.logo { padding:0 0 0 55px; float:left; width:135px; }
.title { padding:15px 0 0 0; float:left; width:752px; }

#nav { font:10pt georgia; text-transform:uppercase; float:left; width:710px;}
#nav ul { margin:0; padding:10px 10px 0 0; list-style-type:none; }
#nav .selected { float:left; margin:0 1px 0 0; padding:0 0 0 10px; background-image: url(‘../images/nav_left.gif’); background-repeat: no-repeat; }
#nav .selected a { float:left; display:block; padding:5px 10px 5px 0; text-decoration:none; color:#999999; background-image: url(‘../images/nav_right2.gif’);
background-repeat: no-repeat; background-position: right top; color:#4c722b;}
#nav li { float:left; margin:0 1px 0 0; padding:0 0 0 10px; }
#nav a { float:left; display:block; padding:5px 10px 5px 0; text-decoration:none; color:#FFFFFF; }
#nav a:hover { color:#BBBBBB; }

#mask { width:100%; position:relative; }
#page { overflow:auto; top:-4px; position:relative; width:945px; background-color:#FFF; padding:10px 10px 10px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

#content-area { width:710px; color:#000000; float:left; }
#grey-block { background-color:#FAFAFA; width:660px; height:245px; padding:0 5px 5 5px; }
#sidebar { font:8pt verdana; width:200px; background-color:#FAFAFA; position:absolute; right:0px; top:-0px; color:#000000;border: 1px solid #EAEAEA; padding:10px; border-bottom:2px solid #CCCCCC; }
#footer { padding:10px; position:absolute; bottom:10px; text-align:center;}

.info { padding:5px 0 5px 0; font:8pt verdana; }
.info2 { top:-20px; position:relative; padding:0 0 5px 0; font:8pt verdana; }
.rolls { left:3px; position:relative; top:5px; }
.map-link a { position:relative; left:110px; top:-60px; text-align:center; text-decoration:none; color:#84211d; line-height:12pt; }
.map-link a:hover { text-decoration:underline; }
.seperate { padding-bottom:15px; }
.email { padding-top:10px; }
.welcome-image { padding:10px 0 10px 10px;}
.main-text { padding:0 10px 0 10px;}

div#rotator { position:relative; height:125px; padding-top:10px;}
div#rotator ul li { left:0px;float:left;position:absolute;list-style: none; padding-left:10px;}
div#rotator ul li img { border:0px;padding:0px; }
div#rotator ul li.show { z-index:500; }

cheers
mark

[quarterlight]

Hi, i just uploaded it here so you can have a look

http://www.quarterlightdesign.com/accg/

thanks!

[quarterlight]

Thanks for taking the time to look through it, appreciated!

my feelings were it was something to do with the positioning of mask, im gonna keep digging!

mark

[quarterlight]

hey virtual,
ill try the -30, i tried -170 and some others before, but ill give that a go.
yeah im gonna do the pngfix,

cheers
mark

[quarterlight]

hmmm no joy setting the top:-30px or even -3000px even :?

finally tested it in IE 8 and it works fine, 6 destroys it which i expected anyway

mark

[quarterlight]

rob,
tried that, no luck im afraid.
i have the top on #sidebar set to 0 but it is ignoring the top rule completely :?

mark

[quarterlight]

yeah that made the firefox, safari etc.. version look the same as the IE version, even in my IE stylesheet it didnt make any difference :?

anyway, i fixed it now :D

i removed the mask and made the #container relative and positioned the #sidebar absolute to that.

cheers for the help rob!

mark

[Author]

Posts