|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
April 29th, 2004, 07:05 PM
|
|||
|
|||
|
<TD> + CSS "padding" causes overlap in IE?
Due to CSS2 cross-browser issues, I am still using tables for layout, but at the same time trying to move as much layout to stylesheets as possible.
One thing I have noticed in Internet Explorer 6 is when I use a <td> within a table that has no cellpadding, cellspacing, or border, if I use a box inside that tag that uses CSS "padding" or "margin", the content appears to be either overlapping other boxes or simply being cut off instead of wrapping. ex: Code:
<table> <tr> <td style="padding: 25px;margin-bottom:10px"> some content here </td> </tr> </table> or this, has same behavior: Code:
<table>
<tr>
<td>
<div style="padding: 25px;margin-bottom:10px">
some content here
</div>
</td>
</tr>
</table>
Depending on what boxes I have around that table and the width of the browser window, the content is sometimes overlapped over other boxes or simply cut off. How can I get the <td> to grow based on the content inside with respect to the padding or margins I set via CSS?
|
|
#2
April 30th, 2004, 02:36 AM
|
|||
|
|||
|
Tried it in Mozilla and Opera - the problem does not seem to affect either of these browsers. I also noticed that in IE, if I change from margin to padding or change from doing a margin on all 4 sides to only two sides, different parts of the text will get cut off. Any ideas?
|
|
#3
April 30th, 2004, 03:10 AM
|
||||
|
||||
|
IE6 seems to be very buggy with padding inside divs. I have had lots of problems with this sort of thing. I have ended up having to add IE6 specific code in some of my pages so that padding effect is the same in different browsers. I use external CSS, then implement specific IE6 code staight after using
Code:
<!-- protect other browsers from IE6's quirks --> <!--[if IE 6]> <style type="text/css"> /* specific IE6 padding stuff */ </style> <![endif]--> Pain in the *ss I know, but that was the only work-around I could find for my solution. Hope it gives you a bit of an insight.
__________________
Cheers, Jamie # mdb4u | The mobile movie database | Please help to test and promote # skiFFie | Home of the 'accessibility module' for Drupal # Jamie Burns [me] Accessibility Module [drupal] # guidelines | search | wap resources | not getting help | fold to cure __________________ Let the might of your compassion arise to bring a quick end to the flowing stream of the blood and tears ..... Please hear my anguished words of truth.  __________________
|
|
#5
April 30th, 2004, 01:53 PM
|
||||
|
||||
|
it is called conditional comments,
not that i like it that much, but its a easy way serve secific css to msie. more about these comments. http://msdn.microsoft.com/workshop/...comment_ovw.asp http://www.quirksmode.org/css/condcom.html http://www.virtuelvis.com/archives/158.html
|
|
#6
April 30th, 2004, 02:24 PM
|
||||
|
||||
|
My actual example was in my normal (working Mozilla / Opera / IE5) I had certain divs that had padding as follows:
Code:
#content {
width: 67%;
float: left;
margin: 1px;
padding: 1% 2%;
}
Code:
<!-- protect other browsers from IE6's quirks -->
<!--[if IE 6]>
<style type="text/css">
#content {
padding: 0;
}
</style>
<![endif]-->
PS: Thanks Akh for the links
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > <TD> + CSS "padding" causes overlap in IE? |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
