newbie: css: box problem in IE6

J

Jeff

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
 
B

BootNic

Jeff said:
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)
Click to expand...

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

Jeff

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 said:
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)
Click to expand...

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

BootNic

Jeff said:
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: /*]]>*/
Click to expand...
that is the closing part of /*<![CDATA[*/
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;
}
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Positioning CSS components 1
Interfering CSS 1
Working on mobile css menu with plenty of frustration! 2
Help with my responsive home page 2
Justify-content not working 1
Help with Visual Lightbox: Scripts 2
Trouble with css 4
How to position the *tooltip* comment on these buttons? 9

Members online

No members online now.
Total: 31 (members: 0, guests: 31)
Robots: 156

Forum statistics

Threads
473,755
Messages
2,569,534
Members
45,008
Latest member
Rahul737

Latest Threads

Top