Problems with table width in IE

I have the following style:

..content {position: absolute; right: 10px; left: 170px; top: 135px;
padding-left: 0px;
color: #15447c;}

..content table {width: 100%; background: BLUE; color: WHITE;}

The table in Firefox is set to 100% of the content class. In IE it is
set to 100% of the browser window and causes ugly scroll bars to appear
all over the place. I created the simple example page below to see if
it was something in my own page (very complex css and html) or
something isolated.

http://www.dubyadubyadubyadotcom.com/gah/

Can somebody please help me out - how do I set a table to 100% here and
have it work in IE? At the moment everything is smashed together in
the table in my actual app because I cant set the width and it really
looks bad. I have basically converted the app from a non-complient
HTML to a CSS//Standards drive dealio and this is the only table on the
site however one that cannot be replaced (thats out of my hands). What
do I do here?

J

starritt@gmail.com wrote:[color=blue]
> I have the following style:
>
> .content {position: absolute; right: 10px; left: 170px; top: 135px;
> padding-left: 0px;
> color: #15447c;}
>
> .content table {width: 100%; background: BLUE; color: WHITE;}
>
>
> The table in Firefox is set to 100% of the content class. In IE it is
> set to 100% of the browser window and causes ugly scroll bars to appear
> all over the place. I created the simple example page below to see if
> it was something in my own page (very complex css and html) or
> something isolated.
>
> http://www.dubyadubyadubyadotcom.com/gah/
>[/color]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/loose.dtd">

a new doctype ?

and somewhere you are missing a </div>

I added the </div> tried with the original doctype as well as the one I
currentyl have with identical results. My HTML and CSS Validate
............

I am at a total loss

ManChild wrote:
[color=blue]
> I added the </div> tried with the original doctype as well as the one I
> currentyl have with identical results. My HTML and CSS Validate
> ...........
>
> I am at a total loss
>[/color]

use a correct doctype

http://www.w3.org/QA/2002/04/valid-dtd-list.html

for instance:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

or:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

better not mix them.

Checked out a few -- the same crap no matter what one I use.

ManChild wrote:
[color=blue]
> Checked out a few -- the same crap no matter what one I use.
>[/color]

dont know if the absolute positioning is relevant, but if not you could
use somthing like:

<div style="margin: 0px 20px 0px 170px;">
<table style="width: 100%; background: green; color: WHITE;">
<tr>
<td>
Content Content Content Content Content Content Content Content
Content Content Content Content Content Content Content Content Content
Content Content Content Content Content Content Content Content Content
Content Content Content Content Content Content Content Content Content
Content Content Content Content Content Content Content Content Content
Content Content Content Content Content Content Content Content Content
Content Content Content Content Content Content Content Content Content
Content Content Content Content
</td>
</tr>
</table>
</div>

ManChild wrote:
[color=blue]
> Checked out a few -- the same crap no matter what one I use.[/color]

How about this:

<style type="text/css">
body{
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
..content {
position: absolute;
right: 10px;
left: 170px;
top: 135px;
padding: 0;
margin: 0;
border: 0;
color: #15447c;
text-align: left;
}
..content table {
left: 0;
top: 0;
background: BLUE;
color: WHITE;
padding: 0;
margin: 0;
border: 0;
}
..content a:link {color: #15447c; text-decoration: underline;}
..content a:visited {color: #15447c; text-decoration: underline;}
..content a:hover {color: #ff99cc; text-decoration: underline;}
..content a:active {color: #15447c; text-decoration: underline;}
</style>

Awesome -- thank you sir.

I must admit it is not something I was likely to have ever come up with
myself but it does work, and it is browser specific.

Gotta say this CSS stuff has actually made my life more difficult, it
was all fun till I loaded my first pages in IE and other browsers :D

*is not browser specific*

Problems with table width in IE

re: Problems with table width in IE

re: Problems with table width in IE

re: Problems with table width in IE

re: Problems with table width in IE

re: Problems with table width in IE

re: Problems with table width in IE

re: Problems with table width in IE

re: Problems with table width in IE

Similar topics

More