Elements not displaying correctly in IE
I am trying to display a form in IE, but for some reason, the layout is broken as you can see from the picture. I have tried various fixes inc, clears, display:block options, but still the layout breaks. If this was in FF, I could use firebug to trace where it is breaking but IE has no such debug tool, hence the post. I would be grateful if someone could show me my error. Thanks
开发者_如何学JAVA.adduserform label
{
display:block;
width:130px;
float:left;
font-weight:normal;
font-size:12px;
padding: 4px 0 0 40px;
z-index:1000;
clear:both;
line-height: 20px;
}
.adduserform select
{
width: 130px;
float:left
font-family:Calibri, Arial, Helvetica, sans-serif;
font-size:12px;
outline:none;
margin-top: 5px;
clear:both;
}
<div id="coname">
<div id="AUSR_address"></div>
<dl>
<dt>
<label for="AUSR_name" class="opt">Full Name:</label>
</dt>
<dd>
<input id="AUSR_name" name="AUSR_name" type="text" size="32" maxlength="128" value = "" />
</dd>
</dl>
</div>
+++SOLUTION+++
div#coname {
clear:both;
}
IE has developer toolbar. If you press F12 it should bring it up and should help you find your issue. You can also use it to view your pages in different IE version modes.
I would start out by making sure you have a doctype at the top like so:
<!DOCTYPE html>
Without specifying a doctype, IE reverts to quirks mode and things can get a little ugly. An example above is for HTML5, but there are quite a few more. For a full list of possible doctypes, refer here: http://www.w3.org/QA/2002/04/valid-dtd-list.html
Ironically, there is a website called http://www.quirksmode.org/ which keeps track of various compatibility issues across browsers. Might find it helpful in the near future.
IE Developer Toolbar
- Newer Versions (press F12)
- Older Versions (go here and download)
Firebug Lite
Many of the features in FF's firebug can be extended to other browsers using this bookmarklet
Do you have an online version of this page that we could actually see? There could be many reasons, which could be width-related to something messed up with the block model.
加载中,请稍侯......
精彩评论