|
|
Posted by BootNic on 11/28/05 16:52
> "Jeff" <it_consultant1@hotmail.com.NOSPAM> wrote:
> news:pv6dnR6x6Zgt5xfe4p2dnA@telenor.com....
>
> 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*
[Back to original message]
|