CSS positioning problem IE

evilhomer · 07-05-2006 10:13pm #1

I have not had to do much CSS recently and have lost touch with a bit.

I'm having a problem with displaying the right_panel div in IE6 (and older versions too)

It displays as expected in firefox 1.5, but I just don't know if there is a hack or something to make this display properly in IE6.

problem is viewable at http://test.webdevireland.com/bka/

Any help would be greatly appreciated.

louie · 07-05-2006 11:17pm

try puting this inside the div id header:

<div id="right_header">

</div>

evilhomer · 07-05-2006 11:50pm

louie wrote:

try puting this inside the div id header:

<div id="right_header">

</div>

thats already in there Louie

thanks for having a look.
anymore suggestions?

AngryAnderson · 08-05-2006 7:24am

Add the following attribute:value to the right column -

clear: both;

louie · 08-05-2006 7:53am

evilhomer wrote:

thats already in there Louie

thanks for having a look.
anymore suggestions?

is actually not there. there is an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
<html xmlns="[URL="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/URL]">
<head>
 <title>Corporate Entertainment, Childrens Partys, Santa, Large and small Events, Promotions - Blackthron Arts</title>
 <meta name="generator" content="notepad++" />
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <!--link href="css/main_format.css" rel="stylesheet" type="text/css"-->
<style type="text/css">
BODY {
 color: Navy;
 background-color: #FFD700;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 0.8em;
 margin: 20px 0px ;
 
}
A {
 color: Navy;
 text-decoration: none;
}
A:HOVER {
 color: #8B008B;
 text-decoration: underline;
}
#wrap{
width:800px;
margin-left:auto;
margin-right:auto;
}
#header{
 background-color: Navy;
 font-weight: bold;
 font-size: 1.5em;
 color: White;
 height: 60px;
 /*margin-top: 20px;
 padding-left: 15px;
 padding-top: 15px;*/
 width: 800px;
}
#right_panel{
 background-color: Navy;
 width: 200px;
 color: White; 
 float: right;
 height: 480px;
 background-image: url(../imgs/logo.gif);
 background-repeat: no-repeat;
 background-position: center;
}
#right_header{
 background-color: #8B008B;
 height: 60px;
 width: 200px;
 color: White; 
 float: right;
 /* #header 60px + 15px padding means I have to -75px from
  the right header to get it back on same line
 margin-top: -75px; 
 */
}
#gold_text{
 color: #FFD700;
}
</style>
</head>
<body>
<div id="wrap"> 
 <div id="header">
  <div id="right_header">
   right header
  </div>
  <div style="padding:15px 0px 0px 15px;">
  Blackthorn Arts <br />
  <span id="gold_text">&amp; entertainment</span>
  </div>
 </div> 
 
 <div id="right_panel">
  &nbsp;
 </div>
 <ul>
  <li>Who we are</li>
  <li>Who we specialise for</li>
  <li>Performance Areas</li>
 </ul>
</div>
</body>
</html>

evilhomer · 08-05-2006 11:10am

AngryAnderson wrote:

Add the following attribute:value to the right column -

clear: both;

Thats the one

cheers AngryAnderson

AngryAnderson · 08-05-2006 12:01pm

evilhomer wrote:

Thats the one

cheers AngryAnderson

No problem. That's what I'm here for. To be both angry and helpful. GRRRRRRRRRRRRRRRRRR

CSS positioning problem IE

Comments