newbie: css: box problem in IE6

11-28-2005

Hey!

When running this code in IE6, the submenu (see code below) Div is placed
beneath the content DIV (in other words the submenu DIV disapear under the
content DIV), that is strange because in Opera the submenu Div is placed on
the left side of the content DIV. The purpose of it is to create a 3 column
layout... Can anyone please give me some advice on what I must do to make
the submenu appear on the left side (when using IE6, tips on IE5 would be
great too)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

index.php:
"http://www.w3.org./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link rel="StyleSheet" type="text/css" href="styles.css" media="screen" />
</head>
<body bgcolor=#8A2BE2>
<div id="gui">
<div id="header">
<p>header</p>
</div>
<div id="container">
<div id="submenu">
<p>submenu</p>
</div>
<div id="calendar">
<p>calendar</p>
</div>
<div id="content">
<p>content</p>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
</body>
</html>

styles.css:
#calendar {
background-color:#DDF;
/* border:2px solid #00C; */
position:absolute;
right:0px;
top:0px;
width:175px;
}

#submenu {
background-color:#FFFFFF;
position:absolute;
left:0px;
top:0px;
width:175px;
text-align:left;
}

#header {
position:relative;
background-color:#FFFFFF;
height:55px;
}

#footer {
text-align:center;
background-color:#FDD;
border:1px solid #C00;
}

#content {
margin:0 190px;
background-color:#FFFFFF;
position:relative;
}

#container {
background-color:#FFD000;
position:relative;
}

#gui {
height:100%;
margin-left:5%;
margin-right:5%;
background-color:#FFD000;
position:relative;
}

If I change #container to this: then its working on IE6, but not on Opera:
With this settings the footer DIV will on Opera get overwritten by the
content of the content DIV - if the content of the content DIV's height is
higher than 400px
#container {
height:400px;
background-color:#FFD000;
position:relative;
}

Please give me some tips abot what I must do to get the submenu DIV position
correctly (left for the content area)

Best Regards

Jeff

11-28-2005

> "Jeff" <> wrote:
> news

....
>
> Hey!
>
> When running this code in IE6, the submenu (see code below) Div is
> placed beneath the content DIV (in other words the submenu DIV
> disapear under the content DIV), that is strange because in Opera
> the submenu Div is placed on the left side of the content DIV. The
> purpose of it is to create a 3 column layout... Can anyone please
> give me some advice on what I must do to make the submenu appear on
> the left side (when using IE6, tips on IE5 would be great too)
> <snip>
> If I change #container to this: then its working on IE6, but not on
> Opera: With this settings the footer DIV will on Opera get
> overwritten by the content of the content DIV - if the content of
> the content DIV's height is higher than 400px
> <snip>
> Please give me some tips abot what I must do to get the submenu DIV
> position correctly (left for the content area)

I do not know what Opera will do to this, but it appears more or less
the same in IE6, Mozilla 1.7.12, Firefox 0.8.0 and Netscape 7.2. .

If nothing else maybe this will give you a different approach to a
solution.

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content=
"text/html; charset=windows-1252" />
<style type="text/css">
/*<![CDATA[*/
body{
width:800px;
/*margin: top right bottom left*/
margin: 15px auto 10px auto;
}

p{
margin: 0;
padding: 10px;
}

#calendar {
background-color: #DDDDFF;
color: #000000;
float: right;
width: 175px;
}

#container {
background-color: #FFD000;
color: #000000;
}

#container div{
margin-top: 0;
}

#content {
background-color: #FFFF99;
color: #000000;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
width: 400px;
}

#footer {
background-color: #FFDDDD;
border: 1px solid #CC0000;
color: #000000;
text-align: center;
}

#gui {
background-color: #FFD000;
color: #000000;
margin: auto;
width: 760px;
}

#header {
background-color: #FFFFFF;
color: #000000;
height: 55px;
}

#submenu {
background-color: #FF9999;
color: #000000;
float: left;
text-align: left;
width: 175px;
}
/*]]>*/
</style>

<title></title>
</head>

<body bgcolor="#8A2BE2">
<div id="gui">
<div id="header">
<p>header</p>
</div>

<div id="container">
<div id="submenu">
<p>submenu</p>
</div>

<div id="calendar">
<p>calendar</p>
</div>

<div id="content">
<p>content</p>
</div>
</div>

<div id="footer">
<p>footer</p>
</div>
</div>

<p><a href="http://validator.w3.org/check?uri=referer"><img src=
"http://www.w3.org/Icons/valid-xhtml10" alt=
"Valid XHTML 1.0 Transitional" height="31" width="88" /></a><br />
<a href="http://jigsaw.w3.org/css-validator/"><img src=
"http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"
height="31" width="88" /></a></p>
</body>
</html>

--
BootNic Monday, November 28, 2005 9:52 AM

Humor is emotional chaos remembered in tranquility.
*James Thurber*

11-28-2005

Thanks that helped me, but I have a few questions related to the example you
gave me:
- if I for example add more data to the submenu div, the submenu div will
eventually overwrite the footer, What css settings must I do so that if more
data is entered in the submenu the footer isn't overwritten....so that the
footer always represent the end of the document....?

- What is this: /*]]>*/

Best Regards

Jeff

"BootNic" <> wrote in message
news:bREif.2534$ ...
> "Jeff" <> wrote:
> news

....
>
> Hey!
>
> When running this code in IE6, the submenu (see code below) Div is
> placed beneath the content DIV (in other words the submenu DIV
> disapear under the content DIV), that is strange because in Opera
> the submenu Div is placed on the left side of the content DIV. The
> purpose of it is to create a 3 column layout... Can anyone please
> give me some advice on what I must do to make the submenu appear on
> the left side (when using IE6, tips on IE5 would be great too)
> <snip>
> If I change #container to this: then its working on IE6, but not on
> Opera: With this settings the footer DIV will on Opera get
> overwritten by the content of the content DIV - if the content of
> the content DIV's height is higher than 400px
> <snip>
> Please give me some tips abot what I must do to get the submenu DIV
> position correctly (left for the content area)

I do not know what Opera will do to this, but it appears more or less
the same in IE6, Mozilla 1.7.12, Firefox 0.8.0 and Netscape 7.2. .

If nothing else maybe this will give you a different approach to a
solution.

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content=
"text/html; charset=windows-1252" />
<style type="text/css">
/*<![CDATA[*/
body{
width:800px;
/*margin: top right bottom left*/
margin: 15px auto 10px auto;
}

p{
margin: 0;
padding: 10px;
}

#calendar {
background-color: #DDDDFF;
color: #000000;
float: right;
width: 175px;
}

#container {
background-color: #FFD000;
color: #000000;
}

#container div{
margin-top: 0;
}

#content {
background-color: #FFFF99;
color: #000000;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
width: 400px;
}

#footer {
background-color: #FFDDDD;
border: 1px solid #CC0000;
color: #000000;
text-align: center;
}

#gui {
background-color: #FFD000;
color: #000000;
margin: auto;
width: 760px;
}

#header {
background-color: #FFFFFF;
color: #000000;
height: 55px;
}

#submenu {
background-color: #FF9999;
color: #000000;
float: left;
text-align: left;
width: 175px;
}
/*]]>*/
</style>

<title></title>
</head>

<body bgcolor="#8A2BE2">
<div id="gui">
<div id="header">
<p>header</p>
</div>

<div id="container">
<div id="submenu">
<p>submenu</p>
</div>

<div id="calendar">
<p>calendar</p>
</div>

<div id="content">
<p>content</p>
</div>
</div>

<div id="footer">
<p>footer</p>
</div>
</div>

<p><a href="http://validator.w3.org/check?uri=referer"><img src=
"http://www.w3.org/Icons/valid-xhtml10" alt=
"Valid XHTML 1.0 Transitional" height="31" width="88" /></a><br />
<a href="http://jigsaw.w3.org/css-validator/"><img src=
"http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"
height="31" width="88" /></a></p>
</body>
</html>

--
BootNic Monday, November 28, 2005 9:52 AM

Humor is emotional chaos remembered in tranquility.
*James Thurber*

11-28-2005

> "Jeff" <> wrote:
> news:....
>
> Thanks that helped me, but I have a few questions related to the
> example you gave me:
> - if I for example add more data to the submenu div, the submenu
> div will eventually overwrite the footer, What css settings must I
> do so that if more data is entered in the submenu the footer isn't
> overwritten....so that the footer always represent the end of the
> document....?
>
> - What is this: /*]]>*/
that is the closing part of /*<![CDATA[*/
>
>> "BootNic" <> wrote in message
>> news:bREif.2534$ ...
<snip>
>> #footer {
>> background-color: #FFDDDD;
>> border: 1px solid #CC0000;
>> color: #000000; text-align: center; }
replace ^^^ with the following should take care of it.
#footer {
background-color: #FFDDDD;
border: 1px solid #CC0000;
color: #000000;
text-align: center;
clear: both;
width:760px;
}

--
BootNic Monday, November 28, 2005 5:25 PM

I try to take one day at a time, but sometimes several days attack me at once.
*Jennifer Unlimited*

11-28-2005

BootNic wrote:

> /*<![CDATA[*/
> /*]]>*/

This is junk. Don't use it.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
div box questions; float text around a box, fit box to image size	Gnarlodious	HTML	4	05-05-2010 11:30 AM
AJAX problem: slow response using IE6 on Win2000 versus IE6 on XP	Pugi!	Javascript	0	02-05-2007 10:34 AM
IE6 SP1 rendering vs IE6 SP2 rendering	Peter Mount	HTML	4	01-31-2006 08:01 AM
Bug in IE6 , cant remove ie6 to replace	Ockerr	Computer Support	2	01-21-2005 04:01 PM
Just one ie6 template that works with ie6!?	Ivor O'Connor	HTML	4	11-25-2003 09:16 PM