CSS box model issue in IE

main content dropping below left collumn

[Captain_Pin]

Hello. I have a very frustrating CSS issue with IE which if any of you have encountered before and can help would be brilliant. It's my first posting on such a forum so excuse my lack of technical explanation.

Basically as with many browser problems the site is appearing fine in firefox yet in IE the main content area is not aligning in the middle and is instead dropping below the left column. I'm aware of the narrower box model that IE has and have attempted to implement the width of the central area so that it appears as it should alongside the left column but to no avail. The main content area is being read from a .master file and importing a form to display the text info.

I've tried all sorts of things to remedy the situation including those suggested on css help sites such as removing padding and margins to reduce the addition of IE adding their sizes to the objects, but still no luck.

Below are the relevant sections of the .master html and css:

Sorry for including such a large chunk of code, only I wanted to give as much info as possible if any of you know a solution.

Thanks.

<div id="dis_wrap">

<div id="dis_header">
<a href="http://sitename.com/" title="Go Home"><img src="static_images/dis_title.gif" height="100" width="246" alt="Site Name" id="dis_title" /></a>
</div>

<div id="dis_topnav">

<form id="dis_srch" action="http://sitename.com/content/site_search">

<h3>Search</h3>
<input type="text" name="query" value="" class="srch_input" />
<input type="image" name="srch_btn" alt="Go!" src="static_images/srch_btn.gif" value="Go!" class="srch_btn" />

</form>

<div id="dis_content">

<div id="dis_colleft">

<div id="comm_main">

<div class="top_header2">
<strong>Search</strong>
</div>

<div id="user_info">
<div id="login">

<form id="form1" runat="server" action="http://www.google.co.uk">

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td nowrap="nowrap"><b>Artist/event</b></td>
</tr>
<tr>
<td nowrap="nowrap">
<G_Webengine:CampaignQuickSearchBox_image ID="CampaignQuickSearchBox1" runat="server" btnimg="/drownedinsound/images_main/searchbtn.gif" />
</td>
</tr>
</table>

</div>
</div>

<hr />

<div id="side_bar_community">

(all info on left side bar removed for this posting)

<div id="dis_colmiddle">

<div id="reco_main">

<div class="top_header">
Site Name
</div>

<!--<div>
<table width="100%" background:#FFFFFF; border="0" cellspacing="0" cellpadding="0">

<table width="367" cellpadding="0" cellspacing="0" border="0" class="normal">
<tr><td class="normal">

</div>-->
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">

</asp:contentplaceholder>

<!--</td></tr></table>-->

</form>

</div>
</div>

}
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 11px Georgia, "Times New Roman", Times, serif; PADDING-TOP: 0px, WIDTH:900px
}
IMG {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
HR {
DISPLAY: none
}
DIV {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
A {
TEXT-DECORATION: none
}
A:link {
TEXT-DECORATION: none
}
A:visited {
TEXT-DECORATION: none
}
A:active {
TEXT-DECORATION: none
}
A:hover {
TEXT-DECORATION: underline
}
P {
MARGIN: 0px 0px
}
#dis_wrap {
MARGIN: 0px auto; OVERFLOW: off; WIDTH: 1000px; HEIGHT: 100%
}
#popup {
FONT-SIZE: 120%; MARGIN: 0px; LINE-HEIGHT: 150%
}
#top_advert {
FLOAT: left; MARGIN: 0px 0px 0px 0px
}
#dis_title {
FLOAT: left
}
#dis_topnav {
CLEAR: both; MARGIN: 0px 0px 0px
}
#side_advert {
FLOAT: right
}
#short_advert {
MARGIN: 0px 0px
}
#dis_header {
MARGIN: 0px 0px 0px 0px; POSITION: relative; HEIGHT: 105px
}
#bottom_advert {
PADDING-RIGHT: 0px; BORDER-TOP: #cfcfd0 1px dashed; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px; PADDING-TOP: 10px
}
#dis_nav {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 15px; PADDING-TOP: 7px
}
#dis_srch {
PADDING-RIGHT: 0px; BORDER-TOP: #cfcfd0 1px dashed; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 6px; MARGIN: 0px; WIDTH: 180px; PADDING-TOP: 6px
}
#dis_srch H3 {
FONT-SIZE: 14px
}
#dis_nav UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#dis_nav UL LI {
PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 2px; MARGIN: 0px; PADDING-TOP: 0px
}
#dis_nav UL LI A {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 13px; PADDING-BOTTOM: 1px; MARGIN: 0px 1px; PADDING-TOP: 0px
}
#dis_srch H3 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 5px 0px 0px; VERTICAL-ALIGN: middle; PADDING-TOP: 0px
}
#dis_colmiddle LABEL {
DISPLAY: block; MARGIN: 3px 0px
}
#dis_colmiddle LABEL.inline {
DISPLAY: inline
}
#dis_colmiddle INPUT {
MARGIN: 0px 0px 0px
}
#dis_colmiddle TEXTAREA {
MARGIN: 0px 0px 5px
}
#dis_colmiddle SELECT {
MARGIN: 0px 0px 5px
}
INPUT.srch_input {
BORDER-RIGHT: #cfcfd0 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #cfcfd0 1px solid; PADDING-LEFT: 3px; FLOAT: left; PADDING-BOTTOM: 1px; MARGIN: 0px 3px 0px 0px; FONT: bold 10px Georgia, "Times New Roman", Times, serif; VERTICAL-ALIGN: middle; BORDER-LEFT: #cfcfd0 1px solid; WIDTH: 76px; PADDING-TOP: 1px; BORDER-BOTTOM: #cfcfd0 1px solid; HEIGHT: 14px
}
INPUT.srch_btn {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(static_images/srch_btn.gif) #333 no-repeat; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: middle; WIDTH: 33px; CURSOR: hand; BORDER-TOP-STYLE: none; TEXT-INDENT: -2000px; PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 18px; BORDER-BOTTOM-STYLE: none; outline: none
}

INPUT.event_search_text_box {
BORDER-RIGHT: #cfcfd0 1px solid; BACKGROUND:#ffffff; PADDING-RIGHT: 0px; BORDER-TOP: #cfcfd0 1px solid; PADDING-LEFT: 3px; FLOAT: left; PADDING-BOTTOM: 1px; MARGIN: 0px 0px 0px 0px; FONT: bold 10px Georgia, "Times New Roman", Times, serif; VERTICAL-ALIGN: middle; BORDER-LEFT: #cfcfd0 1px solid; WIDTH: 103px; PADDING-TOP: 1px; BORDER-BOTTOM: #cfcfd0 1px solid; HEIGHT: 14px

}

div#login {
WIDTH: 176px; PADDING-RIGHT: 0px;
}

#div.entry_list {
FLOAT: left; OVERFLOW: hidden; POSITION: relative; ALIGN: left; HEIGHT: 20px;
}
#dis_content {
CLEAR: both; WIDTH: 0px; POSITION: relative
}
#dis_colmiddle {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 0px; OVERFLOW: hidden; WIDTH: 635px; PADDING-TOP: 0px; POSITION: relative
}
#dis_colright {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 0px; OVERFLOW: hidden; WIDTH: 0px; PADDING-TOP: 0px; POSITION: relative
}
#dis_colleft {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 15px 0px 0px; OVERFLOW: hidden; WIDTH: 185px; PADDING-TOP: 0px; POSITION: relative
}

#td {
ALIGN: bottom; LEFT: 0px;
}

#side_bar_community {
HEIGHT: 300px; WIDTH: 185px;
}

#dis_footer {
CLEAR: both; BACKGROUND: #fff; WIDTH: 900px
}
#dis_footer_info {
PADDING-RIGHT: 8px; BORDER-TOP: #cfcfd0 1px dashed; MARGIN-TOP: 10px; PADDING-LEFT: 8px; FLOAT: left; PADDING-BOTTOM: 8px; WIDTH: 100%; PADDING-TOP: 8px; TEXT-ALIGN: center
}
#dis_content .top_header {
CLEAR: both; PADDING-RIGHT: 0px; BORDER-TOP: #cfcfd0 1px dashed; PADDING-LEFT: 0px; FONT-WEIGHT: bolder; FONT-SIZE: 14px; FLOAT: left; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: #cfcfd0 1px dashed; HEIGHT: 0px
}
#dis_content .top_header2 {
CLEAR: both; PADDING-RIGHT: 0px; BORDER-TOP: #cfcfd0 1px dashed; PADDING-LEFT: 0px; FONT-WEIGHT: bolder; FONT-SIZE: 14px; FLOAT: left; PADDING-BOTTOM: 0px; PADDING-TOP: 25px; BORDER-BOTTOM: #cfcfd0 1px dashed; HEIGHT: 22px
}
#dis_content .top_header3 {
CLEAR: both; PADDING-RIGHT: 0px; BORDER-TOP: #cfcfd0 1px dashed; PADDING-LEFT: 5px; FONT-WEIGHT: bolder; FONT-SIZE: 14px; FLOAT: left; PADDING-BOTTOM: 0px; PADDING-TOP: 25px; BORDER-BOTTOM: #cfcfd0 1px dashed; HEIGHT: 22px
}
#dis_content .top_header IMG {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#dis_content .top_header2 IMG {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#dis_content .top_header3 IMG {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#dis_content .rule {
CLEAR: both; PADDING-RIGHT: 0px; BORDER-TOP: #cfcfd0 1px dashed; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px; PADDING-TOP: 0px
}
#dis_content .top_header {
MARGIN: 0px 0px 10px; WIDTH: 647px
}
#dis_content .top_header2 {
MARGIN: 0px 0px 5px; WIDTH: 180px
}
#dis_content .top_header3 {
MARGIN: 0px 0px 10px; WIDTH: 180px; HEIGHT: 22px
}
#dis_content .top_header4 {
MARGIN: 0px 0px 5px; WIDTH: 180px; HEIGHT: 17px
}
#dis_content .three_col {
FLOAT: left
}
#dis_content .two_col {
FLOAT: left
}

[D_Blackwell]

I would start by doing a lot of clean up in the CSS before even thinking about working the problem. I'm seeing pretty much the same rendering in Firefox, Opera, and IE, so am not clear on what the salient question is, or should be. Those questions may not be one and the same.

Without looking too too closely, the rendering is pretty close to the same in all three; everything there, and left aligned.

First, clean up the CSS.

For example:

IMG {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}

can be cleaned up to:

img {
margin: 0; padding: 0; border: none;
}

Each instance of {margin: 0px 0px 0px 0px;} can be shorthanded to {margin: 0;}

Sorry for including such a large chunk of code, only I wanted to give as much info as possible if any of you know a solution.

It will be a lot easier to help after you've tidied up the CSS, and stripped out the irrelevant portions. Strip out the CSS right down to the problem itself. Looks like you've worked to do that with the HTML, but the CSS can (and must) be cleaned up and cut down. I don't think that you're ready to work the problem yet. Clean up the CSS, and then present a cleaner version that illustrates the problem.

Sorry to sound harsh, but cleaning up the CSS is without question the first priority IMO. Then strip it down to the problem. After that, the solution will probably be easy.

Note: Try to establish a consistent order. This will help you to quickly troubleshoot your own code. For example:

#example {
margin: 0; padding: 1em 2em; border: .2em solid #000; color: #900;
}

Get in the habit of using the same order in your declarations; i.e., if you use margin, padding, border, color when declaring one <div>, then use that same ordering system for ALL. It's a lot more work for you to declare margin first in one declaration, third in another, and scatter it about in yet another with margin-top: color; margin-bottom: etc.

[Captain_Pin]

Thanks very much for the reply. I shall follow your advice on the css cleanup and get back to you if the problem still persists...