Internet explorer 7 display bugs

<style type="text/css">
#form23 { width: 400px;  margin: 0 auto; }
#left-side { width: 200px; float: left; }
#right-side { width: 200px; float: right;}
#form input,select { margin-bottom: 10px; }
</style>
<div id='form23'>
 <form name='yourformname' action=''>
 <div id='right-side'>
  <input type='checkbox' name='example' value='delivery' />Delivery<br />
  <input type='checkbox' name='example' value='eat-in' />Eat-in<br />
  <input type='checkbox' name='example' value='wifi' />Wi-Fi<br />
  <input type='checkbox' name='example' value='buffet' />Buffet<br />
  <input type='checkbox' name='example' value='tv' />Tv<br />
  <input type='checkbox' name='example' value='parking' />Parking<br />
  <input type='checkbox' name='example' value='catering' />Catering<br />
  <input type='checkbox' name='example' value='take-out' />Take Out
 </div>
 <div id='left-side'>
  Name: <br />
  <input type='text' name='name' /><br />
  Zip Code: <br />
  <input type='text' name='zipcode' /><br />
  County: <br />
  <select name='county'>
   <option value='Bronx'>Bronx</option>
  </select><br />
  Type of Food: <br />
  <select name='food-type'>
   <option value='spanish'>Spanish Food</option>
  </select> 
 </div>
</div>

HTML:

 

What is your question?

 

sorry I thought I have posted some question

I have this form and it's CSS style above, it displays in the center in firefox but in other browsers it won't can you help me to display in the center for all the browsers?

 

It is centered in all the modern browsers. Are you talking about IE? I don't have that available right now to test.

 

some how it is not being centered i think I should have a code that is avoiding that to happen. it is just Internet 7

I have safari and it display in the center...

 

I am having some issues in IE7 displaying the code below looks like:



CSS

.abajo {  width: 1000px; height:360px; position:relative;  top:160px; left:100px; }
.abajo fieldset{
margin: 1.5em 20px 0 20px;  
padding: 0;
float:left;

}

.abajo fieldset legend {  
margin-left: 1em;  
color: #000000;  
font-weight: bold;  
}  
.abajo fieldset ol {  
padding: 1em 1em 0 1em;  
list-style: none;
width:340px;  
} 
  
 
.abajo fieldset li {  
padding-bottom: 1em;  
}
.abajo fieldset label {
text-align:right;
float: left;    
width: 10em;    
margin-right: 1em;    
text-align: right; } 

.abajo .primero .tercero ol{  
padding: 0.8em 1em 0 5em;  
list-style: none;
width:200px; ; 
}
.tercero {  width:200px; height:224px; }
.primero {width:850px; height:360px; background-image:url(../images/fieldsetfront2.gif); }

Code (markup):

<form class="abajo" action=""> 
<fieldset class="primero">
<legend>Search For a store</legend> <fieldset class="tercero" style="border-color:#FFFFFF" >
<legend>Services</legend> 
<ol>
<li>
  <input type="checkbox" name="example" value="delivery" />Delivery<br />
  <input type="checkbox" name="example" value="eat-in" />Eat-in<br />
  <input type="checkbox" name="example" value="wifi" />Wi-Fi<br />
  <input type="checkbox" name="example" value="buffet" />Buffet<br />
  <input type="checkbox" name="example" value="tv" />Tv<br />
  <input type="checkbox" name="example" value="parking" />Parking<br />
  <input type="checkbox" name="example" value="catering" />Catering<br />
  <input type="checkbox" name="example" value="take-out" />Take Out
</li></ol>
</fieldset> 
</fieldset>
</form>

Code (markup):

What's happening here is that the top boder of the fieldset services is overlapping the right boder and goes across it. pluse the input check boxes and it's text are overlapping the right fieldset boder.

some help please.

 

I think the problem is that you have two legend tags, one opening fieldset tag and two closing fieldset tag, you only need one legend and one fieldset, so either remove the extra fieldset and legend or add another opening fieldset tag

 

the problem was here

[
.abajo .primero .tercero ol{  
padding: 0.8em 1em 0 2em;  
list-style: none;
width:100px; ; 
}/CODE]

I had 

[CODE]padding: 0.8em 1em 0 5em;

Code (markup):

5em and it was making the boxes to overlap

and another thing was the width

I had at 200px and then I lowered it to 100px then it fixed it.

thank you for you help it gave me an idea.