IE7 problem

[daryltoogood]

I am looking for some CSS gurus to help me out with a cross browser issue.

 

I have created a form table that looks great in Firefox and IE8, but IE7 messes it all up for me!

 

I have attached some images below to show you what's going wrong.  I have blurred out the text as it contains personal details, however you should get the idea.

 

The table is a series of divs...

 

<div class="ud_public" id="ud_public">
                <div class="ud_public_title_abr" id="ud_public_title">Unit Abbreviation</div>
                <div class="ud_public_content_abr" id="ud_public_content">
                <?php echo($row_WADAunits['unit_abbrev']); ?></div>
                <div class="ud_public_title" id="ud_public_title">
                Area Coverage</div>
                <div class="ud_public_content" id="ud_public_content">
                <?php echo($row_WADAunits['unit_area']); ?></div>
                <div class="ud_public_title" id="ud_public_title">
                Address</div>
                <div class="ud_public_content" id="ud_public_content">
                <?php echo($row_WADAunits['unit_address1']); ?><br/>
                <?php echo($row_WADAunits['unit_address2']); ?><br/>
                <?php echo($row_WADAunits['unit_address_town']); ?><br/>
                <?php echo($row_WADAunits['unit_address_county']); ?><br/>
                <?php echo($row_WADAunits['unit_address_postcode']); ?><br/>	
                </div>
   				<div class="ud_public_title" id="ud_public_title">email</div>
                <div class="ud_public_content" id="ud_public_content">
                <?php echo($row_WADAunits['unit_email']); ?></div>
                <div class="ud_public_title" id="ud_public_title">Website</div>
                <div class="ud_public_content" id="ud_public_content">
			<?php echo($row_WADAunits['unit_url']); ?></div>
                <div class="ud_public_title" id="ud_public_title">email</div>
                <div class="ud_public_content" id="ud_public_content">
			<?php echo($row_WADAunits['unit_email']); ?></div>
                <div class="ud_public_title" id="ud_public_title">Callout Details</div>
                <div class="ud_public_content" id="ud_public_content">
			  <?php echo $row_WADAunits['unit_callout']; ?></div>
                </div>
                <div class="ud_lsdogs" id="ud_lsdogs">
                <div class="ud_lsdogs_header" id="ud_lsdogs_header">
                  <div align="center">Contact Details of Key Members</div>
                </div>
                <div class="ud_lsdogs_title_abr" id="ud_lsdogs_title">Chairman</div>
                <div class="ud_lsdogs_content_abr" id="ud_lsdogs_content"><?php echo($row_WADAunits['chair_name']); ?></div>
                                <div class="ud_lsdogs_title" id="ud_lsdogs_title">Telephone</div>
                <div class="ud_lsdogs_content" id="ud_lsdogs_content"><?php echo($row_WADAunits['chair_mobile']); ?></div>
                <div class="ud_lsdogs_title" id="ud_lsdogs_title">email</div>
                <div class="ud_lsdogs_content" id="ud_lsdogs_content"><?php echo $row_WADAunits['chair_email']; ?></div>
                                <div class="ud_lsdogs_title_abr" id="ud_lsdogs_title">Secretary</div>
                <div class="ud_lsdogs_content_abr" id="ud_lsdogs_content"><?php echo $row_WADAunits['sec_name']; ?></div>
                                <div class="ud_lsdogs_title" id="ud_lsdogs_title">Telephone</div>
                <div class="ud_lsdogs_content" id="ud_lsdogs_content"><?php echo $row_WADAunits['sec_mobile']; ?></div>
                <div class="ud_lsdogs_title" id="ud_lsdogs_title">email</div>
                <div class="ud_lsdogs_content" id="ud_lsdogs_content"><?php echo $row_WADAunits['sec_email']; ?></div>
                                <div class="ud_lsdogs_title_abr" id="ud_lsdogs_title">Treasurer</div>
                <div class="ud_lsdogs_content_abr" id="ud_lsdogs_content"><?php echo $row_WADAunits['tres_name']; ?></div>
                                <div class="ud_lsdogs_title" id="ud_lsdogs_title">Telephone</div>
                <div class="ud_lsdogs_content" id="ud_lsdogs_content"><?php echo $row_WADAunits['tres_mobile']; ?></div>
                <div class="ud_lsdogs_title" id="ud_lsdogs_title">email</div>
                <div class="ud_lsdogs_content" id="ud_lsdogs_content"><?php echo $row_WADAunits['tres_email']; ?></div>
                                <div class="ud_lsdogs_title_abr" id="ud_lsdogs_title">Training Officer</div>
                <div class="ud_lsdogs_content_abr" id="ud_lsdogs_content"><?php echo $row_WADAunits['train_name']; ?></div>
                                <div class="ud_lsdogs_title" id="ud_lsdogs_title">Telephone</div>
                <div class="ud_lsdogs_content" id="ud_lsdogs_content"><?php echo $row_WADAunits['train_mobile']; ?></div>
                <div class="ud_lsdogs_title" id="ud_lsdogs_title">email</div>
                <div class="ud_lsdogs_content" id="ud_lsdogs_content"><?php echo $row_WADAunits['train_email']; ?></div>
                                <div class="ud_lsdogs_title_abr" id="ud_lsdogs_title">LSDogs Rep</div>
                <div class="ud_lsdogs_content_abr" id="ud_lsdogs_content"><?php echo $row_WADAunits['rep_name']; ?></div>
                                <div class="ud_lsdogs_title" id="ud_lsdogs_title">Telephone	</div>
                <div class="ud_lsdogs_content" id="ud_lsdogs_content"><?php echo $row_WADAunits['rep_mobile']; ?></div>
                <div class="ud_lsdogs_title" id="ud_lsdogs_title">email</div>
                <div class="ud_lsdogs_content" id="ud_lsdogs_content"><?php echo $row_WADAunits['rep_email']; ?></div>
                </div>

 

And the CSS is as follows;

.ud_header {
font-family:Arial,Helvetica,sans-serif;
font-size:large;
font-weight:bold;
line-height:normal;
margin-left:auto;
margin-right:auto;
margin-top:45px;
width:800px;
}
.ud_public {
background-image:url("../../images/table_bg_200.png");
background-repeat:repeat-y;
border:thin solid #000000;
margin-left:auto;
margin-right:auto;
margin-top:30px;
width:460px;
}
.ud_public_title_abr {
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
font-weight:bold;
padding:3px;
width:200px;
}
.ud_public_content_abr  {
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
height:14px;
margin-left:220px;
padding:3px;
}

 

I would be grateful for any help!!

 

[attachment deleted by admin]

[JustLikeIcarus]

There are a couple of things which stand out when I look at this.

First you can not have elements with the same id attribute.  While this doesn't appear to be the cause of the issue you are having it will wreak havoc later especially if you add Javascript to the page.  id's are meant to be unique.

 

As for your spacing issue it looks as if this is an issue with the "margin:auto" rule descending into the container holding the text.  For a test try setting the margin to 0 for the div's which are having the issue. And see if the text corrects itself.  It appears you left some of the CSS out of the code you supplied so I am not 100% sure the above is correct.

 

Since this is technically tabular data you may be better off using tables however.  Let me know how it turns out.