What IE bug is this called?

[cookie053177]

Hi!

I am a CSS newbie, I code the css from scratch, it works perfectly fine on firefox and safari, etc. But IE is not working well.
the sample site is: http://mm.strangeorange.com

Do any know knows what’s this problem called?

Here is the code:
HTML

Code:

About Us
Contact Us Portfolio Design Packages Advantage Price SEE THE DIFFERENCE
WEB DESIGN MARKETING PACKAGES EXCELLENCE IS A MUST CAN WE AFFORD IT?

Marksman Marketing is a group of creative individuals who want to offer their talents and ingenuity to those who are ready to improve their company image; increase sales and boost morale without spending more than they comfortably can on their marketing.

CSS

Code:

body{
font-size: 100%;
font-family: “Verdana”, sans-serif;
font-weight: normal;
text-decoration: none;
color: #333333;
background: url(images/bg.png) repeat-x top #f4f3f3;
margin: 0;
padding: 0;
}

#page-wrap{
width: 1100px;
position: relative;
margin: auto;
padding: auto;

}

div#header{
position: relative;
width: auto; height: 1020px;
background: url(images/index.png) no-repeat center top;
list-style: none;
}

div#header pa a{
position: absolute;
left: 30px;
width: 0;
float: left;
margin: 120px;
margin-top: 290px;
color: #666666;
text-decoration: none;
font-size: 24px;
}

div#header da a{
position: absolute;
left: 275px;
width: 0;
float: left;
margin: 50px;
margin-top: 290px;
color: #666666;
text-decoration: none;
font-size: 24px;
}

div#header pkg a{
position: absolute;
left: 375px;
width: 0;
float: left;
margin: 100px;
margin-top: 290px;
color: #666666;
text-decoration: none;
font-size: 24px;
}

div#header avg a{
position: absolute;
left: 570px;
width: 0;
float: left;
margin: 90px;
margin-top: 290px;
color: #666666;
text-decoration: none;
font-size: 24px;
}

div#header price a{
position: absolute;
left: 750px;
width: 0;
float: left;
margin: 100px;
margin-top: 290px;
color: #666666;
text-decoration: none;
font-size: 24px;
}

div#header cu a{
position: absolute;
width: 80px;
left: 908px;
margin: 1px;
color: #f5f5f5;
font-size: 14px;
}

div#header au a{
position: absolute;
width: 80px;
left: 810px;
margin: 1px;
color: #f5f5f5;
font-size: 14px;
}

div#header a{
position: relative;
width: 0;
float: left;
margin: 85px;
margin-top: 290px;
color: #666666;
text-decoration: none;
font-size: 24px;
}

div#header pa a:hover, div#header pa a:active{
background: url(images/arrow.png) no-repeat center top;
position: absolute;
left: 30px;
width: 0;
float: left;
margin: 120px;
margin-top: 290px;
color: #b5121b;
}

div#header da a:hover, div#header da a:active{
color: #b5121b;
}

div#header pkg a:hover, div#header pkg a:active{
color: #b5121b;
}

div#header avg a:hover, div#header avg a:active{
color: #b5121b;
}

div#header price a:hover, div#header price a:active{
color: #b5121b;
}

div#header cu a:hover, div#header cu a:active{
color: #ffffff;
}

div#header au a:hover, div#header au a:active{
color: #ffffff;
}

sd{
position: absolute;
left: 150px;
bottom: 680px;
font-size: 9px;
}

wd{
position: absolute;
left: 335px;
bottom: 680px;
font-size: 9px;
}

pk{
position: absolute;
left: 475px;
bottom: 680px;
font-size: 9px;

}

av{
position: absolute;
left: 665px;
bottom: 680px;
font-size: 9px;
}

prc{
position: absolute;
left: 835px;
bottom: 680px;
font-size: 9px;
}

p{
position: absolute;
width: 360px;
left:615px;
bottom: 70px;
font-size: 12px;
}

I understand it looks confusing to you, however I don’t know what’s the solution for it when I put <li> because the text align distributing well but some texts are pretty long and it doesn’t look proportional at all, so I come up with my own version.

[AshtonSanders]

"cookie053177" wrote:

Do any know knows what’s this problem called?

I think this problem is called "The life of a web developer."

Your code is most likely not written correctly. IE is less forgiving than some of the other modern browsers.

I would start by validating your code:
http://validator.w3.org/check?verbose=1 … nge.com%2F

[Author]

Posts