Why does a table have larger borders in IE than FireFox
I have a table that displays pictures in each td element. The page is essentially a gallery.
In Firefox, there is a SMALL(5px) margin (or padding?) around each picture inside the td element. No matter how many pictures in the table the margin never changes. All that is great & what I want.
In IE, there is a LARGE(40px) margin (or padding?) around each picture inside the td element. When there are more pictures in the table the margin/padding is greater. This is not what I want
In both scenarios, each picture is the same size about (100px by 100px) which is what I want.
How can I make sure that IE does not have these weird margins around each picture? And just maintain the constant 5px margin around each picture?
My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kaz Early Learning Centre - Local Childcare - Dolans Bay NSW</title>
<style type="text/css" media="all">
</style>
</head>
<body>
<div id="gallery" align="center">
<table align="center">
<tr> </tr>
<tr>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0215_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0215_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_2262_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_2262_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0223_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0223_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
</tr>
<tr>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0196_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0196_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0223_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0223_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
开发者_开发技巧 <td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0220_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0220_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
</tr>
<tr>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0196_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0196_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0223_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0223_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0220_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0220_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
</tr>
<tr>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0196_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0196_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0223_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0223_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0220_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0220_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
</tr>
<tr>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0220_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0220_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0196_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0196_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
</tr>
</table>
</div>
</body>
</html>
Different browsers use different defaults for the settings although I wouldn't have expected it to be that different. You could try using a global reset file for your CSS settings. You can find examples here.
try getting rid of the expressions if you're viewing in ie 7+ this explains that they got rid of expression support in favor of actually fixing their crappy css handling
Different browsers have different defaults for these things. If you want to control padding, borders, etc, either specify them in the table definition, or use CSS
<style>
.my_table {
padding: 0px;
margin: 0px;
border: 0px;
}
</style>
<table class="my_table">
There are a couple of things going on in your code:
You should probably use a CSS reset like this one: http://developer.yahoo.com/yui/3/cssreset/ . This will reset all browsers to use the same CSS settings fox box model (padding/margin/etc) to a standard value. Each browser can default these differently - even between versions of browser.
Why are you using CSS expressions and in-line CSS? You could achieve the same with Javascript and it's more cross-browser compliant. Your inline CSS will also be difficult to override since it's in the style attribute of the tag.
- #1 should solve your problem. #2 is just best practices.
You can also use normalize.css. It works like a reset css.
You can find it here: http://necolas.github.com/normalize.css/
Hope that helps!
Hard to tell what is happening without seeing your CSS.
However, if you want to control the padding/margins for your table, you should first reset everything in the table.
So, give the table an ID or class name <table class="imagesTable">
Then reset the CSS as follows in your stylesheet:
table.imagesTable tr td, table.imagesTable tr td a, table.imagesTable tr td a img {
padding:0;
margin:0;
border:0;
}
This targets the all three elements in the table cell. You may also want to reset the trs, but that is probably not necessary.
You may need to add !important to your style rule in order to override some other styles that might be applied.
Once done, you can add back some nice padding to the td
table.imagesTable tr td {
padding:5px;
}
加载中,请稍侯......
精彩评论