Divs - IE and Firefox... I HATE IT!

Ever since I stopped using IE and started using Firefox, I've noticed a few things.

1) No damn popup windows (good thing)
2) My CSS actually looks good (good thing)
3) IE doesn't display my CSS properly (HORRIBLE THING!)

Here's the link:
http://www.despectare.com


Here's the CSS:
<style type="text/css">

div.sidebox{
text-align:center;
width: 150px;
position: absolute;
top: <? print $top; ?>;
left: <? print $left; ?>;}

div.boxhead{
border: 1px solid black;
background-color: #000000;
height: 35px;}

div.boxbody{
border: 1px solid black;
background-color: #aaaaaa;
color: #000000;
font-size: 12px;}

h2{
color: #ffffff;
font-size: 12px;
vertical-align: middle;}

a, a:visited, a:active{
color: #000000;
font-size: 12px;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

</style>


And here's the code:
<div class="sidebox">
<div class="boxhead"><h2>Current Content</h2></div><div class="boxbody">
<p><a href="/makayla/">Makayla's Gallery</a></p>
<p><a href="/amber/">Amber's Gallery</a></p>
<p><a href="http://xxx.xxx.xxx.xxx/cam/" target="new">Ryan's Cam</a></p>
<p>More coming soon.</p>
</div>
</div>

you should consider using doctypes. they can put ie and other browsers into standards compliant mode, and they will behave more alike.


if that doesnt solve your problem, please tell us what the problem is.

similar issue. Mozilla supports it,

IE doesn't.

link: http://www.livejournal.com/users/porchboy

relevant style code:

<style type="text/css">
body,td
{
font-size: 10px;
font-family:"Verdana", "Arial";
margin:0;}


body
{
background-repeat: no-repeat;
background-image:url(http://www.despectare.com/art/albums/ElinGrindemyrPS.jpg);
}

a:link, a:visited, a:active
{
color: #000000;
text-decoration: none;
}

a:hover
{
text-decoration: line-through;
}

.date
{
font-size: 9px;
font-style: italic;
}

.title
{
font-size:12px;
font-weight:bold;
}

div#journal
{
position: absolute;
top: 60px;
left: 365px;
border: 1px solid black;
width:410;
height:720;
overflow:auto;
padding:2;
}

div#alphabig
{
position: absolute;
top: 60px;
left: 365px;
width:415;
height:725;
}

div#bigshadowbottom
{
filter:alpha(opacity=45);-moz-opacity:.45;opacity:.45;
background: black;
position: absolute;
top: 786px;
left: 362px;
width:416;
height:3;
margin:0;
padding:0;
}

div#bigshadowleft
{
filter:alpha(opacity=45);-moz-opacity:.45;opacity:.45;
background: black;
position: absolute;
top: 63px;
left: 362px;
width:3;
height:723;
margin:0;
padding:0;
}





div#legend
{
position: absolute;
top: 20px;
left: 244px;
border: 1px solid black;
width:72;
height:84;
overflow:hidden;
padding:2;
text-align: center;
}

div#alphasmall
{
position: absolute;
top: 20px;
left: 244px;
width:77;
height:89;
}

div#legendshadowbottom
{
filter:alpha(opacity=45);-moz-opacity:.45;opacity:.45;
background: black;
position: absolute;
top: 110px;
left: 241px;
width:75;
height:3;
margin:0;
padding:0;
}

div#legendshadowleft
{
filter:alpha(opacity=45);-moz-opacity:.45;opacity:.45;
background: black;
position: absolute;
top: 23px;
left: 241px;
width:3;
height:89;
margin:0;
padding:0;
}





div#disclaimer
{
text-align:center;
position: absolute;
border: 1px solid black;
top: 20px;
left: 365px;
width:410;
height:13;
overflow:hidden;
padding:2;
}

div#dcbg
{
position: absolute;
top: 20px;
left: 365px;
width:415;
height:19;
}

div#dcshadowbottom
{
filter:alpha(opacity=45);-moz-opacity:.45;opacity:.45;
background: black;
position: absolute;
top: 39px;
left: 362px;
width:416;
height:3;
margin:0;
padding:0;
}

div#dcshadowleft
{
filter:alpha(opacity=45);-moz-opacity:.45;opacity:.45;
background: black;
position: absolute;
top: 23px;
left: 362px;
width:3;
height:16;
margin:0;
padding:0;
}

.alpha
{
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
background: white;
}

</style>

again, WHAT IS YOUR PROBLEM?


btw- i noticed the link that sais "get mozilla firefox"
when you hover on it the text style changes to strike-through....looks like your saying the link is bad. might wanna change that....

nice pictures

oh and "optomized" should be "optimized"

and ditch the <font> tags, use <span>

>>oh and "optomized" should be "optimized"
Or even "optimise" in English