View Thread: IE6 to IE7 absolute inside of relative div not working

Welcome Guest | Register | Login

Killersites.com Forum

Category: General Web Design

Forum: CSS - Styling your pages with Cascading Style Sheets.

Thread: IE6 to IE7 absolute inside of relative div not working

Quick Go »

No member browsing this thread

Thread Status: Active
Total posts in this thread: 6

[ ]

Author

This topic has been viewed 8181 times and has 5 replies

fantomx
Stranger

Joined: Feb 6, 2007
Post Count: 3
Status: Offline


IE6 to IE7 absolute inside of relative div not working

www.lookatyourwebsitenow.com/aboutus.html

In IE6 it looks right.
In IE7 the left hand column under the fish is moved to the left.

So the left column is under the body and container :

<body><div#container><div#leftcolumn>

Here's the CSS:

body {
background-color: #25587E;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
margin: 0px;
padding: 0px;
text-align: center;
height: 100%;
}

#container{
position:relative;
width: 960;
margin: 40px auto;
}

#leftcolumn{
position:absolute;
left: 10px;
top: 320px;
width:300px;
height: 1200px;
margin: 0px;
background-color: #669900; /* Green Background on this column */
}

#leftcolumn p{
margin: 40px;
text-align:left;
line-height: 1.2em;
color:#FFF; /* Color of the font */
font-weight:bold;
font-size:16px;

}

Can anybody tell me what is happening??

[Feb 6, 2007 8:05:25 PM]

[Link]

lm
Advanced Member

Joined: Oct 27, 2004
Post Count: 2550
Status: Offline


Re: IE6 to IE7 absolute inside of relative div not working

there is an explanation of positioning here .

If you have 2 column layout and have difficulties with positioning, you can take a good css template first and study it.
/people, couldnt find link to this new killers templates gallery/

I dont see why you suddenly decided to give your left column position: absolute.
give it also position relative, float:left for example.
----------------------------------------

My blog

----------------------------------------
[Edit 1 times, last edit by lm at Feb 7, 2007 9:11:16 AM]

[Feb 7, 2007 9:06:37 AM]

[Link]

fantomx
Stranger

Joined: Feb 6, 2007
Post Count: 3
Status: Offline


Re: IE6 to IE7 absolute inside of relative div not working

First of all it works fine in IE6, its IE7 that is the problem, for some reason. I tried your suggestion and in ie6 it doesn't work. It shoves the column completely left.

What I need is to find out why it doesn't work in IE7??

[Feb 7, 2007 10:29:39 AM]

[Link]

billyboy
Advanced Member

Joined: Sep 3, 2005
Post Count: 2206
Status: Offline


Re: IE6 to IE7 absolute inside of relative div not working

You're missing the unit in the width declaration for #container. IE6 may be letting you get away with it, but IE7 is stricter when it comes to coding errors.

You may also have to align the text left in #container - IE can mess up the positioning when absolute positioning is used in conjunction with text-align: center.

Incidentally, 760 px is the max width that can be used without side scroll for users with resolution set to 800x600. (Assuming they're even viewing your site at full screen). Consider using % instead of a fixed width to fit different resolutions and window sizes.
----------------------------------------
Quiquid latine dictum sit altum viditur

[Feb 7, 2007 10:55:10 AM]

[Link]

lm
Advanced Member

Joined: Oct 27, 2004
Post Count: 2550
Status: Offline


Re: IE6 to IE7 absolute inside of relative div not working

well i forgot to say that first thing first - before you try to position anything - just do simple thing - validate CSS and HTML first.
----------------------------------------

My blog

[Feb 7, 2007 11:06:42 AM]

[Link]

fantomx
Stranger

Joined: Feb 6, 2007
Post Count: 3
Status: Offline


Re: IE6 to IE7 absolute inside of relative div not working

THANKS BILLY BOY!!!!!!

When you said I forgot the width declaration for #container, I thought ... wait its there. But you meant I forgot what type of value the 960 represented... instead of 960; It should have been 960px;

That's all it took... Again thanks

[Feb 7, 2007 1:54:43 PM]

[Link]

[ ]

Current timezone is GMT
May 19, 2013 10:47:33 PM