Problems with website in Explorer

[ozzie123]

I've designed a home page which looks perfectly in Firefox, Netscape and Safari but is butchered in Explorer. The link is http://www.powerofonehumaneeducation.org/ The problem is with the 3 info boxes along the bottom and the address and contact information next to them. In the decent browsers (sorry, I hate Microsoft!), the boxes are perfectly sized and spaced evenly and the address and contact information lines up and is spaced perfectly. In IE, the boxes are miles apart and different sizes which then screws up the spacing of the contact information. I've tried desperately to figure this out but am not a huge coder. I confess that I rely primarily on Dreamweaver and then go in and tweak when necessary. This one is beyond my knowledge. Would love any help on this problem.

[jscheuer1]

Looks like it is mostly the width of the cells in that row of the pootable that contain the 'boxes' (like the one containing the latestnews table, etc). An alternate stylesheet could work for that.

I'd give each of them the same class, ex:

<td class="pooBox" width="213" height="97" align="left" valign="top">

and set their style width to like 200px for IE only:

<!--[if IE]>
<style type="text/css">
.pooBox {
width:200px;
}
</style>
<![endif]-->

Also, since IE has larger default top and/or bottom margins for p, it might help out on the height of the content in those cells to set those explicitly for p.

[ozzie123]

Hi jscheuer1;

I tried your fix but IE refuses to give. Any other ideas? I adjusted the code as you mentioned and added the css you mentioned to my style sheet but no go. I just read that Netscape is officially dead. I am really hoping that IE is next.

[jscheuer1]

It doesn't go in the stylesheet, it goes on the page - after any other style links and sections. And please use the type attribute as I wrote it, not:

<!--[if IE]>
<style type="poostyles.css">
.pooBox {
width:200px
}
</style>
<![endif]-->

as you have it.

[ozzie123]

Hi John;

Thanks for the clarification. I've made the adjustment...hopefully its what you meant. IE is still not recognizing it though so I suspect I'm still missing something.

BTW, thank you so much for taking on this challenge. I'm taking a course in CSS in the hopes that this will cure my table woes.

[jscheuer1]

You're getting warmer, at least you have it on the page, but you have it inside another style tag. It needs to be in the head, not in another tag. So, where you have:

<style type="text/css">
<!--
.style1 {color: #CCCCCC; font-size: 9px;}
.style9 {font-size: 9px}
.style11 {color: #CCCCCC}
.style13 {color: #FFFFFF}
.style14 {font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 13px;}
<!--[if IE]>
<style type="text/css">
.pooBox {
width:200px;
}
</style>
<![endif]-->
-->
</style>

It should be:

<style type="text/css">
<!--
.style1 {color: #CCCCCC; font-size: 9px;}
.style9 {font-size: 9px}
.style11 {color: #CCCCCC}
.style13 {color: #FFFFFF}
.style14 {font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 13px;}
-->
</style>

<!--[if IE]>
<style type="text/css">
.pooBox {
width:200px;
}
</style>
<![endif]-->

[ozzie123]

Okay, I've made the changes and I think I have it right. It still seems a bit wonky in IE though...

[jscheuer1]

You do have the IE conditional style in the right spot now. However, my recommendation was to give that class to all the cells in that row. You missed the last one. Also, as I look at this some more, it looks as though that one cell, the one without the bluish background that has the name and phone number info in it is the most important one in IE, you could probably get by just applying the pooBox class name to that one last cell in that row. Try it both ways, see if you can tell a difference.

[ozzie123]

Wow, I think that may have worked...let me know what you think!

I want to thank you again for your patience. You rock!

[jscheuer1]

Looks good here.