CODEWITHSUNDEEP
htmlcssinternet-explorerhtml-table
user1408440
user1408440

Reputation: 217

Table width not working in only IE

I've got a table that has a width of 161px and a height of 374px, and it works great in Firefox but the width and height aren't working in Internet Explorer. Here's the URL: http://nonudot.io-web.com/demo.

<div class="BottomBorderBoxes">
<table width="200" cellspacing="0" cellpadding="0" border="0" style="font-size:13px;">
<tbody>
    <tr>
        <td>
        <h2>Concern Area 1</h2>
        </td>
    </tr>
    <tr>
        <td>Describe Location<br>
        (Please Use Street Names)<br>
        <br>
        <div class="EditingFormControlNestedControl">
            <input type="text" class="TextBoxField" id="ctl00_plcMain_CMSEditableRegion2_BizFormControl1_Bizform1_ctl00_Area1_StreetName" maxlength="300" name="ctl00$plcMain$CMSEditableRegion2$BizFormControl1$Bizform1$ctl00$Area1_StreetName">
        </div></td>
    </tr>
    <tr>
        <td><br>
        City<br>
        <div class="EditingFormControlNestedControl">
            <input type="text" class="TextBoxField" id="ctl00_plcMain_CMSEditableRegion2_BizFormControl1_Bizform1_ctl00_Area1_City" maxlength="300" name="ctl00$plcMain$CMSEditableRegion2$BizFormControl1$Bizform1$ctl00$Area1_City">
        </div></td>
    </tr>
    <tr>
        <td><br>
        Type of Issue<br>
        <div class="EditingFormControlNestedControl">
            <select class="DropDownField" id="ctl00_plcMain_CMSEditableRegion2_BizFormControl1_Bizform1_ctl00_Area1_Issue" name="ctl00$plcMain$CMSEditableRegion2$BizFormControl1$Bizform1$ctl00$Area1_Issue">
                <option value="1">Needs curb cut or existing curb cut needs improvement</option>
                <option value="2">Needs wheelchair ramp or existing ramp needs improvement</option>
                <option value="3">Crosswalk improvements needed</option>
                <option value="4">Uneven surface</option>
                <option value="5">Other (please indicate below)</option>

            </select>
        </div>&nbsp;<br>
        <div class="EditingFormControlNestedControl">
            <input type="text" class="TextBoxField" id="ctl00_plcMain_CMSEditableRegion2_BizFormControl1_Bizform1_ctl00_Area1_IssueComment" maxlength="300" name="ctl00$plcMain$CMSEditableRegion2$BizFormControl1$Bizform1$ctl00$Area1_IssueComment">
        </div></td>
    </tr>
    <tr>
        <td><br>
        Addtional Input<br>
        <div class="EditingFormControlNestedControl">
            <textarea class="TextAreaField" id="ctl00_plcMain_CMSEditableRegion2_BizFormControl1_Bizform1_ctl00_Area1_AddInput" cols="20" rows="2" name="ctl00$plcMain$CMSEditableRegion2$BizFormControl1$Bizform1$ctl00$Area1_AddInput"></textarea>
        </div><br>
        &nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
</tbody>

 

Here's my CSS

.BottomBorderBoxes {
border: 1px solid black;
float: left;
height: 374px;
margin-right: 5px;
margin-top: 10px;
padding: 7px;
width: 161px;}

Upvotes: 0

Views: 8827

Answers (4)

saluce
saluce

Reputation: 13360

Fixing the DOCTYPE will fix the issue, but you need to look again at your dropdown box, as it will extend beyond the bounds of the table and the div because items are longer than the container is wide.

http://jsfiddle.net/y2dGZ/1/

Upvotes: 1

Spudley
Spudley

Reputation: 168685

Your problem is that you haven't specified a DOCTYPE.

Without a doctype, IE will always drop into Quirks mode. Quirks mode causes all kinds of rendering glitches. To fix this problem, simply add a valid doctype to the top of the page, before the <html> tag.

If you're not sure which doctype to use, use the HTML5 doctype - it's as simple as this:

<!DOCTYPE html>

Hope that helps.

Upvotes: 4

Joel Etherton
Joel Etherton

Reputation: 37533

You've specified in the html attributes of the table that its width is 200px. My guess is that this is generating the problem. Also, you haven't specified what to do with the overflow if the table exceeds the width/height settings specified in CSS so the browser is just relying on what it is told to do which, by default for a table, is to expand beyond the limits specified. Try setting overflow: hidden on the css to limit it.

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

Add a <!DOCTYPE html> to your page. Otherwise you're designing for IE 5.5.

Upvotes: 1

Related Questions