IE Alignment Problems

[cassisdesign]

I have been having problems with the floats, padding, and alignment in IE and them not working in IE. The alignment, floats, and padding work perfect in Mozilla and Safari, but as I figured they wouldn't work in IE. I've tried different solutions to fix this problem but none work.

Below are the two links to the two different variations that I have created that don't work, along with a screenshot of what each page looks like in IE. If anyone has any suggestions or know what to do, that would be awesome![/COLOR]

http://thinkcassis.com/ksmbt2/about/team.html
screenshot - http://thinkcassis.com/ksmbt2/screenshot_1.jpg

http://thinkcassis.com/ksmbt2/about/team2.html
screenshot - http://thinkcassis.com/ksmbt2/screenshot_2.jpg

[jcdevelopment]

you have "81 errors" in your HTML

you may need to fix those and see what happens then.

Validate (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fthinkcassis.com%2Fksmbt2%2Fabout%2Fteam.html)

[rzea]

After reading your HTML, oh suprise!, you are using a table for your layout. So I went ahead and copied your page code to Dreamweaver to see how your lay out looked. Well... not pretty.

Your problem is you are using a table to lay out your page elements, tables should be used only with tabular data. Go here to learn more: Why Tables for Layout is Stupid. (http://www.hotdesign.com/seybold/index.html)

I suggest you stack your layers like this:

HTML: As you can see I repeated the div.persons-container DIV to ilustrate how the stacking correctly works.

<div class="infotext">
<div class="persons-container">
<div class="persons-info">persons-info</div>
<div class="persons-picture">persons-picture</div>
<br />
<hr />
<div class="clear"></div>
</div>
<div class="persons-container">
<div class="persons-info">persons-info</div>
<div class="persons-picture">persons-picture</div>
<br />
<hr />
<div class="clear"></div>
</div>
<div class="persons-container">
<div class="persons-info">persons-info</div>
<div class="persons-picture">persons-picture</div>
<br />
<hr />
<div class="clear"></div>
</div>
</div>


CSS:

div.infotext {
padding-left:190px;
}
div.persons-container {
margin-bottom:20px;
}
div.persons-info {
float:left;
width:360px;
margin-right:10px;
}
div.persons-picture {
float:left;
width:185px;
}
div.infotext hr {
width:100%;
height:1px;
border-top:#000 1px solid;
border-bottom:0;
}
.clear {
clear:both;
}


The above code works in Firefox 2.0.0.14, IE6/7, Opera 9.0 and Safari 3.1.1.

Hope this helps.

[cassisdesign]

thanks for that reply! that helped a lot. i'm not the one who created this code and it's pretty sloppy and terrible if you're asking me. thanks for putting the idea of redoing the code and layout.

helped a bunch!:thumbsup:

[rzea]

Glad to help :)

Let us know how it goes.

[cassisdesign]

worked awesome! THANKS! man that feels great beating IE...haha.