ie6 nightmare

[olison]

hi all

does anyone know why my site falls apart in ie6 – works fine in everything else

is driving me crazy

could this be to do with the double margin bug

any help would be much appreciated

site at http://www.hannaford-forensic.com
oli

[TheDoc]

15 errors:
http://validator.w3.org/

[AshtonSanders]

"olison" wrote:

does anyone know why my site falls apart in ie6

It’s kind of like asking, "why does gravity suck?"

Reminds me of this pie chart:
[img]http://www.mango-design.net/wp-content/uploads/2009/02/webdev_workflow3.gif[/img]

You just have to take it one problem at a time. Once you get those errors sorted out, let us know how it goes. It definitely doesn’t guarantee that it will work the way you want it to, but it’s a great place to start.

[olison]

Just cant seem to get the orange tab at the top of the page which is a marker for the current page to sit properly

ie6 is expanding it to the same width as my main div tag

in my dreamweaver browser check the only problem i am told about is that there is some problem

with

<style type="text/css">

html validator also confirms this, but I dont think thyis is the route of the problem

oli

[AshtonSanders]

Hi Olison,

Yes, this is a common problem in IE6 when making Unordered Lists into horizontal Nav bars. The problem stems not giving a width to the List Item; so it extends 100% in IE6. (Even though the "float" should ignore that width 100%…)

The short cut (manual) fix is to assign a width to each LI.

But that isn’t the only way.. I don’t know exactly the magic item which fixes it, but I’d guess it has something to do with defining a height for the UL so the LI’s have no where to go.

Sorry I don’t have time right now to get the full answer. Here’s the code that’s working on my website. I absolute positioned the UL inside my header which has an assigned height.

Code:

/* ~-~-~~-~-~ NAVIGATION BAR ~-~-~-~-~ */

ul#navbar {
position: absolute;
right:0;
bottom:0;
margin:0;
padding:0 2px 0 0;
background: url(‘../images/layout/nav-divider.jpg’) bottom right no-repeat;
}

ul#navbar li {
display:block;
float:right;
padding-left:2px;
background: url(‘../images/layout/nav-divider.jpg’) bottom left no-repeat;
}

ul#navbar li a {
display:block;
padding:23px 23px;
text-decoration:none;
font-size: 20px;
color: #024558;
background: url(‘../images/layout/nav-hover.jpg’) repeat-x;
background-position: 0 -80px;
}

I hope that helps.
Ashton Sanders

[Author]

Posts