471,870 Members | 1,590 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,870 software developers and data experts.

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

Jul 21 '05 #1
8 17003
st******@gmail.com wrote:
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/


<!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>
Jul 21 '05 #2
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

Jul 21 '05 #3
ManChild wrote:
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


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.
Jul 21 '05 #4
Checked out a few -- the same crap no matter what one I use.

Jul 21 '05 #5
ManChild wrote:
Checked out a few -- the same crap no matter what one I use.

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>
Jul 21 '05 #6
ManChild wrote:
Checked out a few -- the same crap no matter what one I use.


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>
Jul 21 '05 #7
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

Jul 21 '05 #8
*is not browser specific*

Jul 21 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Michael Fork | last post: by
4 posts views Thread by Alex Meier | last post: by
reply views Thread by DAnne | last post: by
1 post views Thread by chr.aleksander | last post: by
reply views Thread by Derty | last post: by
34 posts views Thread by aljamala | last post: by
aboka
reply views Thread by aboka | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.