Forum Moderators: not2easy
Because of limited time I gave up setting up a three column design using divs that fits my needs. Now I reckognized a problem in my simple table design as well as Safari (and of course IE 5) interprets the padding different.
<snip>
Only if there's no width applied to the center column in Safari the padding is not added to the width of the left and right column. Also note that I use
table-layout:fixed;It works if I give the center column a width, too, but because of the dynamic CMS that I'm using, I need the width of this column to be automatic (the right column is optional).
It works the way I expected it in FireFox, Opera and IE6. If it were only IE5 I would apply a hack but also Safari? Is there a CSS-Hack for Safari? Of course I'd prefer to fix this without a hack. Any ideas?
[edited by: engine at 9:53 am (utc) on July 3, 2006]
[edit reason] See TOS [webmasterworld.com] [/edit]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"><head>
<title>Standarts SF_log</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head><body>
<table style="table-layout:fixed; width:600px;" border=1>
<tr>
<td style="width:100px; Xoverflow:hidden; padding:20px;">,aghiu guih io[hu bijbv; gu;vh jvgtcghb vhkgcljghlv tgckvghlv</td>
<td style="padding:20px;">ihiu gpiugiu gug luj.fjlyf vhtkk bugnyjf bnlgfit fny fb dnt jyfbk khfnkybd yfn
fnkt fn tbdtky fnf h btxh tkck fntb thn dn tfcnitkyfbncngk jncbt bc int cybt</td>
<td style="width:100px; Xoverflow:hidden; padding:20px;">lkjjknygmhmjlhmulngnmikgn.mhnu gnjgmkgh nlngkumg
nmhng jnfjlkumgngin gnl;il </td>
</tr>
</table></body>
</html>
[edited by: SuzyUK at 12:01 pm (utc) on July 11, 2006]
[edit reason]
[1][edit reason] fixed formatting [/edit] [/edit][/1]
The "box in a box" trick should do it for IE's Box Model, with the advantage that it works for everyone else too.. nest a div inside the table cells and give the padding to it not the table cell
<style type="text/css" media="screen">
table {
table-layout: fixed;
width: 600px;
}td {
padding: 0;
}.col {
width: 140px;
overflow-x: hidden;
}.pad {padding: 20px;}
</style></head>
<body>
<table border="1" cellspacing="0">
<tr>
<td class="col"><div class="pad">aghiu guih io[hu bijbv; gu;vh jvgtcghb vhkgcljghlv tgckvghlv</div></td>
<td><div class="pad">ihiu gpiugiu gug luj.fjlyf vhtkk bugnyjf bnlgfit fny fb dnt jyfbk khfnkybd yfn fnkt fn tbdtky fnf h btxh tkck fntb thn dn tfcnitkyfbncngk jncbt bc int cybt</div></td>
<td class="col"><div class="pad">lkjjknygmhmjlhmulngnmikgn.mhnu gnjgmkgh nlngkumg nmhng jnfjlkumgngin gnl;il</div></td>
</tr>
</table>
