Hi all,
I'm having a problem with Internet Explorer (6) and XHTML/CSS. The page layout screws up, when I put a <table> tag within a <div> tag.
Here is an example of a page with my simple layout and *without* table tags, and how it should look like:
<!-- m --><a class="postlink" href="http://www.barons.de/users/~cck/somepage.html">http://www.barons.de/users/~cck/somepage.html</a><!-- m -->
And when I put some lines of simple table tags inside the center column, it will look like this:
<!-- m --><a class="postlink" href="http://www.barons.de/users/~cck/withtable.html">http://www.barons.de/users/~cck/withtable.html</a><!-- m -->
(In mozilla (firefox 0.8) it looks just fine. )
Can someone give me some help on this?
Thanks in advance!Internet Explorer (all versions PC and Mac) do a crappy job of calcutating table widths placed inside DIVs. The bottom line is you can't very often use width="100%." The solution is to:
1. Leave the width attribute out completely, or specify the width in CSS as auto.
2. Give IE a width it likes. In the case of your example, it liked 99.6% and the margin/empty space disappeared. Then use the html>body #id { width: 100%;} hack for standards compliant browsers.
3. Sometimes, and I stress sometimes position: relative; in CSS takes care of the problem. Sometimes...
I'm having a problem with Internet Explorer (6) and XHTML/CSS. The page layout screws up, when I put a <table> tag within a <div> tag.
Here is an example of a page with my simple layout and *without* table tags, and how it should look like:
<!-- m --><a class="postlink" href="http://www.barons.de/users/~cck/somepage.html">http://www.barons.de/users/~cck/somepage.html</a><!-- m -->
And when I put some lines of simple table tags inside the center column, it will look like this:
<!-- m --><a class="postlink" href="http://www.barons.de/users/~cck/withtable.html">http://www.barons.de/users/~cck/withtable.html</a><!-- m -->
(In mozilla (firefox 0.8) it looks just fine. )
Can someone give me some help on this?
Thanks in advance!Internet Explorer (all versions PC and Mac) do a crappy job of calcutating table widths placed inside DIVs. The bottom line is you can't very often use width="100%." The solution is to:
1. Leave the width attribute out completely, or specify the width in CSS as auto.
2. Give IE a width it likes. In the case of your example, it liked 99.6% and the margin/empty space disappeared. Then use the html>body #id { width: 100%;} hack for standards compliant browsers.
3. Sometimes, and I stress sometimes position: relative; in CSS takes care of the problem. Sometimes...