Why is IE not adhering to my column widths?
Posted
by
Trent
on Stack Overflow
See other posts from Stack Overflow
or by Trent
Published on 2012-09-11T16:19:04Z
Indexed on
2012/09/12
3:38 UTC
Read the original article
Hit count: 162
This has been driving my crazy trying to solve
Code: http://pastebin.com/rqyw35jG
First of all, I'm rendering in standards mode. I have a table in IE, with width=100%, and all columns in the table with specified widths except the last column. The intended behaviour is for IE to size the final column so it stretches to the page. This more or less works. However;
Certain conditions seem to break the table widths and cause IE to go and size the table however it pleases.
- The table contains a row which is merged across all columns AND
- This merged row contains enough text to fill the whole cell AND
- Enough text is entered into one of the cells whose column had unspecified width, causing the text to wrap.
When this 3 conditions occur, all the columns move slightly. The text still wraps and you wouldn't normally notice that the columns are the wrong size unless you measure them, or compare the page to a version without wrapped text.
Is this even supposed to happen in standards mode?
Code:
<%@ Page Language="VB" %>
<%@ Import Namespace="Microsoft.SharePoint.Client" %>
<%@ Import namespace="System.Data" %>
<%@ Import Namespace="System.Data.SQLClient" %>
<script runat="server">
Protected Sub Page_Load(sender As Object, e As System.EventArgs)
End Sub
</script>
<%
%>
<!DOCTYPE html />
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<table style="width:100%;">
<tr>
<td style="width:500px;">egqwgw gqgqwgqg qwgqgqg qgwgqgqg qwgqgg</td>
<td style="width:500px;">gqgqwgqg gqwgqgqgq gqgqgqg qgg</td>
<td>If too much text is entered into this column, the column sizes will begin to change. wehwehweh hwehwh whhwhwh hwehwhwh</td>
</tr>
<tr>
<td>a gqwgqwg gqgqw </td><td>gqgqgqg gqgqg</td><td></td>
</tr>
<tr>
<td colspan="3">Columns only move if text on this line is filling out the whole width of the page. gqwgqwggqg qgqgqwgqg qgqwgqgqg gqgwqgqg gqgqgqgqg qgqgqgqg gqgggqg
qgwgqgqg gqgqgqwgwg qgqwgqgqgq gqgwgwgqg gqgwgq gqwgwgqgqwg qgwgqgqgqwg
qwgqwgqgqg qgwgqgqqg gqwgqwgqwgwqg gqgwgqgwg qwgqwgqgqgq qwgqgqgqg gwqgqgqg
qggqwgqg qggwqgqg
</td>
</tr>
</table>
</body>
</html>
© Stack Overflow or respective owner
