[SOLVED] ie8 vs. everything else. Width issue (i think)

[monkeytooth]

Ok got this site...

http://floridaforeclosureexpo.com/

 

Works fine in all browsers: chrome, safari, firefox, opera... except IE8 open it in IE8 and it looks to be a width issue on a couple of the elements. also looks like an alignment issue. It's supposed to be centered.

 

So what I am wondering is, is there any known issues that pertain to IE8 and width/alignment issues in a non-positioned layout (meaning not fixed, absolute, relative.)

 

Heres the CSS i am using.

@charset "utf-8";
html{height:100%;}
body{margin:0;padding:0;height:100%;font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt; color:#000;}
form{margin:0;padding:0;}
#conwrap{min-height:100%;width:800px;margin:0 auto;padding:0;background:#FFF;overflow:auto;}
#head{width:800px;height:166px;margin:0;padding:0;background:#FFF url(../img/SFlaExpo_01.png);}
#contentA{width:221px;height:178px;margin:0;padding:0 0 0 20px;background:url(../img/SFlaExpo_02.png);float:left;}
#contentB{width:203px;height:178px;margin:0;padding:0 0 0 5px;background:url(../img/SFlaExpo_03.png);float:left;}
#contentC{width:351px;height:178px;margin:0;padding:0;background:url(../img/SFlaExpo_04.png);float:left;}
#contentD{width:300px;height:222px;margin:0;padding:0 4px 0 146px;background:url(../img/SFlaExpo_05.png);float:left;overflow:auto;}
#contentE{width:350px;height:222px;margin:0;padding:0;background:url(../img/SFlaExpo_06.png);float:left;}
#contentF{width:300px;height:192px;margin:0;padding:30px 4px 0 146px;background:url(../img/SFlaExpo_07.png);float:left;overflow:auto;}
#contentG{width:350px;height:222px;margin:0;padding:0;background:#FFF;float:left;}
#foot{width:800px;height:75px;margin:0;padding:0;background:#FFF;clear:left;text-align:center;}
#imgP{width:350px;height:108px;margin:100px 0 0 0;padding:0;}
#imgP1{width:109px;height:108px;margin:0 0 0 4px;padding:0;background:url(../img/SFlaPOP_01.png);float:left;}
#imgP2{width:109px;height:108px;margin:0 7px 0 7px;padding:0;background:url(../img/SFlaPOP_03.png);float:left;}
#imgP3{width:109px;height:108px;margin:0;padding:0;background:url(../img/SFlaPOP_05.png);float:left;}
#leftlist{width:344px;margin:0;padding:0 3px;text-align:center;}
#leftlist1{width:172px;margin:0;padding:0;float:left;text-align:left;}
#leftlist2{width:172px;margin:0;padding:0;float:left;text-align:left;}
font.fontV { font-family:Verdana; font-size:8pt; color:#000000; }
font.fontW { font-family:Verdana; font-size:10pt; color:#000000; }
font.fontX { font-family:Verdana; font-size:12pt; color:#000000; }
font.fontY { font-family:Verdana; font-size:14pt; color:#000000; }
font.fontZ { font-family:Verdana; font-size:18pt; color:#000000; }
a.hlink:link{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:8pt;color:#000;font-weight:bold;text-decoration:none;}
a.hlink:visited{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:8pt;color:#000;font-weight:bold;text-decoration:none;}
a.hlink:hover{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:8pt;color:#1BB6C3;font-weight:bold;text-decoration:none;}
a.hlink:focus{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:8pt;color:#1BB6C3;font-weight:bold;text-decoration:none;}
a.hlink:active{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:8pt;color:#000;font-weight:bold;text-decoration:none;}

#head2{width:800px;height:166px;margin:0;padding:0;background:#FFF url(../img/SFlaExpo2_01.png);}
#content2A{width:221px;height:178px;margin:0;padding:0 0 0 20px;background:url(../img/SFlaExpo2_02.png);float:left;}
#content2B{width:550px;margin:0;padding:0 0 0 5px;background:url(../img/SFlaExpo2_03.png);float:left;}

 

Any takers on what the problem may be between the 4 other main browsers vs. ie8? Or what I can do to fix/hack it so it works.

[monkeytooth]

can noone help me?

[Hybride]

First thing I noticed was you were lacking a:

*{padding:0; margin:0} 

tag. This resets all browsers' padding/margin to 0.

 

You should try also changing the html{} tag to margin:0; .

[haku]

You have way bigger problems than just IE8. And your problem is probably because you have a big table before your doctype and head. Or if that's not the end problem, its one of them.

[monkeytooth]

humm didnt think about the table possibly messing it up.. was tired and didnt want to convert that one over.. I will remove the table, and try that margin bit see how that works out, thanks.

[haku]

Basic HTML: a document needs to be structured like this:

 

<doctype>

<html>

  <head>

    <title>

    css

  </head>

  <body>

    all content - no exceptions

  </body>

</html>

 

• No content must not be anywhere other than between the body tags. IE all content must be between the body tags.
  
• Script tags can go either between the head tags, or the body tags, but must not be outside of either of them (for example - between the head and body tags).
  
• Link tags and all CSS must go between the head tags.
  
• Always use a doctype
  
• The doctype must be the very first thing in the document, before anything, including whitespace (space keys and enter keys/newlines are whitespace). If it's not, it will not be recognized by the browser.
  

 

 

Read the above carefully - it's seriously lesson 1 of basic HTML, and if you follow the rules in it, it will solve many of your problems before they ever begin.

[monkeytooth]

You know what your right.. removing the table cleared up the issue.. I included the table in through a separate php file for easier editing later.. and it didnt phase me that the way I was including it in was above the <html> tags.. after playin around a bit I am forgoing the table converting it to be apart of the css based structure and am including it properly so it fits in the structure properly. Thanks again for all your help guys..

[monkeytooth]

Truly glad a forum like this exists.. if it wasn't for it I would deffinately be constantly stuck in my own holes wondering what I did wrong cause sometimes the simplest stuff evades me, and the 3rd party view always help