CSS Problem in IE

Hi all…I am simply trying to create a header (colored bar). Every thing is fine, even in IE 8 but when it comes to IE 6, the bar does not appears. The code is simple

CSS code is

#css
{
position:absolute;
top:0px;
height:30px;
right:0%;
left:0%;
background-color:#805670;
border-style:solid;
border-width:thin;
border-color:#805670;
padding-top:12px;
}

and I have just added this line in my .php page

<div id="mybio"></div>

What can be the problem??

Position: absolute is not the best thing to be using here. It would be better to remove that and do something like this:

#mybio {
  height:30px; /* better not to set a height at all */
  background-color:#805670;
  border:thin solid #805670;
  padding-top:12px;
}

I assume you meant to write #mybio rather than css, as that would not style a div with id=“mybio”.

It’s better not to set a height on a div, but let the content inside it establish its height, even if you add padding or margins.

If this doesn’t help, then either show us a link or provide the code for the full page.

I’ve also moved this to the CSS forum. :slight_smile:

Thnx a ton for your reply. But the problem is still there. Please go to Walknshine.com using ie6. I can see the bar now but positioning has been disturbed of other elements. Can you help me out here??

Hi,

The issue in you first example was that you set left:0 and right:0 on the absolute element and IE6 only understand one of those at a time. For IE6 you would have needed to say left:0 and width:100% but of course that would make it too big because of the border so another approach would be better.

In your second example you haven’t taken into account the default margins on the form element in IE which is giving you that gap and you would need form:margin:0 to clear it. You also used #mybio twice in the html which is not allowed as ids must be unique. If you need to use something twice then it needs to be a class but you don’t actually need both of those anyway to make that header.

As Ralph said absolute positioning isn’t the best for this and you could have done something more simply with some floats and a semantic structure. here is the header section recoded and a small default reset to get you started.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
/* reset */
html, body, table {
    margin: 0;
    padding: 0;
    font-size: 100%;
}
object, iframe, blockquote, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, fieldset, form, legend, table, caption, th, td {
    margin: 0;
    padding: 0;
    border:none;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
    vertical-align:top;
}
a img, img {
    border:none;
}/* remove borders from linked images*/
input, textarea, select, label {
    font-family:Arial; /* set font-family for IE*/
    vertical-align:middle;
}
p,h1,h2,h3,h4,h5,h6,ul {margin-bottom:.75em}
/* end reset styles */
body{font-family:Georgia, "Times New Roman", Times, serif;line-height:1.3}
#header {
    background-color:#805670;
    border:1px solid #805670;
    padding:12px 25px;
    overflow:hidden;/* contain floats*/
    zoom:1.0;/* contain floats in IE7 and under*/
    text-align:center;
}
#header h1,#header h2,#header p{
    color:#e2e3e3;
    font-size:18px;
    margin:0;
    float:left;
}
#header h2,#header p{
    float:none;
    color:#fff;
    overflow:hidden;
}
#header ul{
    margin:0;
    float:right;
}
#header ul li{
    float:left;
    margin:0 10px;
    color:#e2e3e3;
}
#header ul li a,
#header ul li a:visited{
    text-decoration:none;
    color:#e2e3e3;
}
#header ul li a:hover{text-decoration:underline}
</style>
</head>
<body>
<div id="header">
    <h1>Walk'n'Shine Welcomes You</h1>
    <ul>
        <li><a href="#">Share&nsb;Popular</a></li>
        <li><a href="#">Get&nbsp;Popular</a></li>
    </ul>
    <p>Auditorium</p><!-- could be an h2 if this is really a heading -->
</div>
</body>
</html>


The rest of your code needs a tidy up also but I couldn;t tell what direction you were going so have not recoded it. However I can tell you that you should think about removing the deprecated (in strict doctpes) presentational elements such as the font tag (no one uses them these days at all), the align attributes and the use of breaks to make space and non breaking spaces where padding should be used.

You also have a mismatched font tag and a b tag here:


<font size="-1" face="Arial" > </div>

.....

[B]<b>[/B]<a href="http://www.walknshine.com/index.php?order=2" class='nav4' >Recent Acts</a></font></font> </div>
    <br />
    <br />
    <div align="right"> </div>
    <br />
    <br />
    [B]</b>[/B]



The font tag isn’t closed and the b tag can’t go arround a div.

Hope that helps:)