double padding in IE6 and display:inline; not working

[ksduded]

IE7 and FF works great. But IE6 is a different monster alltogether. There are quite a few problems that I have to fix with IE6, but lets start with the double padding. After reading about the display:inline; hack for IE6, I tried it, but it didn't work. Here is my css code

 

#hdtv_background
{
background-attachment: fixed;
background-image: url(images/oasis_back_01.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #000000;
}

#html, body 
{
margin:0;
padding:0;
height:100%;
}

#layout 
{
position:relative;
margin: 0 auto;
border:solid 1px #000000;
border-bottom:0;
border-top:0;
width:762px;
min-height:100%;
display:block;
}


#listing
{
padding-left:20px;
padding-top:116px;
float:left;
width:450px;
padding-bottom:80px;
}  

* html #listing
{ 
display:inline-block;
}

#phpcalendar
{
padding-left:20px;
padding-top:116px;
float:left;
width:250px;
padding-bottom:80px;
}

* html #phpcalendar
{
display:inline;
}

#statictopbar
{
font-family: Century Gothic;
font-size: 12px;
color: #999999;
background-color: #000000;
height: 114px;
border:solid 0px #000000;
width:762px;
position: fixed;
top:0;
left:50%;
margin-left:-381px;

}

* html #statictopbar
{
position:absolute;
}


#bottom
{
font-family: Century Gothic;
font-size: 12px;
color: #999999;
background-color: #000000;
height: 60px;
border:solid 0px #000000;
width:762px;
position:absolute;
bottom:0;
left:0;
}

* html #bottom
{
display:inline;
}

 

and my html div nesting structure

 

<div layout>
<div statictopbar></div>
<div listing></div>
<div phpcalender></div>
<div bottom></div>
</div>

[dbrimlow]

The display:inline; hack is to fix a bug in IE with "floats", it can't help with "position:absolute" (which is a problematic way to layout a page).

 

position:absolute takes an element outside of the flow of the rest of the page and other elements that are around it. It makes the element either relative to the browser window or a parent element that uses position:relative (as you do with #layout). Since it is outside the flow of html, positioning it where you want it relative to other elements in your page is very, very involved and not for the faint of heart ... it is avoided entirely by most who are proficient using css.

 

IE is not position:absolute friendly because of "HaveLayout".

 

BUT, I assume (hope) that the "div nesting" structure (aka "markup") you showed was actually just for discussion purposes and that you actually use the proper "id=" syntax:

 

<div id="layout">
<div id="statictopbar"></div>
<div id="listing"></div>
<div id="phpcalender"></div>
<div id="bottom"></div>
</div>

 

Now, that said, the wire-frame layout is affected by how you enter content in your divs. Divs are ONLY html placeholders and are not meant to contain unstructured ("untagged") text content. You populate "divs" with headers, paragraphs, lists, etc.

 

These affect how your paddings and margins are applied. If you DON'T put text in proper tags, then you are basically leaving the browser to assume the text should be in a paragraph and apply its own default paragraph margins/paddings. The last thing anyone in the world would want is to leave IE 6 to apply defaults.

 

Are you using a proper doctype? If not, you are in "quirks mode" and once again telling browsers to guess and apply their own defaults.

 

I recommend that you create your "wire-frame" layout using floated and un-floated elements.

 

Generally for a 2 column layout it is:

 

1. non-floated - header (top), footer (bottom).

 

2. float:left  - left column, content-column

 

your html would still be:

 

<div id="layout">
<div id="statictopbar"></div>
<div id="listing"></div>
<div id="phpcalender"></div>
<div id="bottom"></div>
</div>

 

 

[TheFilmGod]

#hdtv_background
{
background-attachment: fixed;
background-image: url(images/oasis_back_01.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #000000;
}

 

Change that to:

 

#hdtv_background
{
background: url(images/oasis_back_01.jpg) center center no-repeat #000;
}

 

#listing
{
padding-left:20px;
padding-top:116px;
float:left;
width:450px;
padding-bottom:80px;
}

 

Change to:

 

#listing
{
             padding: 116px 0 80px 20px;
float:left;
width:450px;
}