Looks different in IE and Other browser (2)

Illasera · April 21, 2010

Hey all and good day,My problem is that when i work on my web-page, I have different results in IE8 and all other browsers (FF, Chrome, safari)Believe it or not, The IE8 has the desire effects that i want.The problem is that i use for my table border a custom made images to be used "as a border"but they seems to have "height space" in between them.Both CSS and (X)html strict code are both 100% valid(no errors at all)The desired display : Desired DisplayAnd Firefox/chrome/safari display (bad display - There are height spaces in between the borders, The left column image doesn`t match the height size as the right column allthough they are the same size.)Safari bad displayCSS relevent code (Valid) :

body{	width:1024px;	margin:0px auto;	background-color:#ffffff;}fieldset,img { 	border:0px;}.full_table_style{	border-spacing:0px;	border-collapse:collapse;	border:0px;}.full_table_style tr{	padding:0px;	border:0px;}.full_table_style td{	padding:0px;	border:0px;}

Relevent code - Unicode, (X)html strict (Valid) (Some parts are cutted out, not relevent for my problem).

<!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"><head> <title>???</title><link rel="shortcut icon" href="http://www.mersch.co.il/templates/professional/1/main/en/gfx/favicon.ico" type="image/x-icon" /><link rel="stylesheet" type="text/css" href="http://www.mersch.co.il//var/176/420664-design2.css" /></head> <body> <!-- Top border --> <table class="full_table_style" style="width:1024px; height:7px;"><tr><td valign="top" style="width:10px; height:7px;"><img alt="" src="http://www.mersch.co.il/templates/professional/176/main/he/gfx/bg_left_top.gif" style="width:10px; height:7px;" /></td><td valign="top" style="width:1004px; height:7px;"><img alt="" src="http://www.mersch.co.il/templates/professional/176/main/he/gfx/bg_top.gif" style="width:1004px; height:7px;" /></td><td valign="top" style="width:10px; height:7px;"><img alt="" src="http://www.mersch.co.il/templates/professional/176/main/he/gfx/bg_right_top.gif" style="width:10px; height:7px;" /></td></tr></table> <!-- Left & middle & right table border --> <table class="full_table_style" style="width:1024px; height:630px;"><!-- left border --><tr><td valign="top" style="width:10px; height:630px;"><img alt="" src="http://www.mersch.co.il/templates/professional/176/main/he/gfx/bg_left.gif" style="width:10px; height:630px;" /></td><!-- Middle context --><!-- Left column --><td valign="top" style="width:704px; height:580px; padding:20px"><div style="width:100%; height:100%;"><img alt="Mersch 2010" src="http://www.mersch.co.il/var/176/64918-Front_Page_01.jpg" style="width:100%; height:580px;" /></div></td><!-- Right colomn --><td valign="top" style="width:300px; height:580px; padding:20px;"><div style="width:100%; height:100%;"></div></td><!-- Right border --><td valign="top" style="width:10px; height:630px;"><img alt="" src="http://www.mersch.co.il/templates/professional/176/main/he/gfx/bg_right.gif" style="width:10px; height:630px;" /></td></tr></table> <!-- Subtable #1 --> <!-- Left border --><table class="full_table_style" style="width:1024px; height:25px;"><tr><td valign="top" style="width:10px; height:25px;"><img alt="" src="http://www.mersch.co.il/templates/professional/176/main/he/gfx/bg_left.gif" style="width:10px; height:25px;" /></td><!-- Middle context --><td class="sub_menu_one" style="width:1004px; height:25px; background-color:#A8996E; padding-left:25px; text-align:left;"><span><a href="http://www.mersch.co.il/aproducts%20list/">???</a></span><span><a href="http://www.mersch.co.il/Wineries/">???</a></span><span><a href="http://www.mersch.co.il/Events/">???</a></span><span><a href="http://www.mersch.co.il/Articles/">???</a></span><span><a href="http://www.mersch.co.il/Editorial/">???</a></span><span><a href="http://www.mersch.co.il//Restaurants.and.WineShops">???</a></span></td><!-- Right border--><td valign="top" style="width:10px; height:25px;"><img alt="" src="http://www.mersch.co.il/templates/professional/176/main/he/gfx/bg_right.gif" style="width:10px; height:25px;" /></td></tr></table> <!-- Table whitespace height 2 pixels --> <table class="full_table_style" style="width:1024px; height:2px;"><tr><td valign="top" style="width:10px; height:2px;"><img alt="" src="http://www.mersch.co.il/templates/professional/176/main/he/gfx/bg_left.gif" style="width:10px; height:2px;" /></td><td style="width:1004px; height:2px;"></td><td valign="top" style="width:10px; height:2px;"><img alt="" src="http://www.mersch.co.il/templates/professional/176/main/he/gfx/bg_right.gif" style="width:10px; height:2px;" /></td></tr></table> <!-- Subtable #2 --> <!-- Left border --><table class="full_table_style" style="width:1024px; height:60px;"><tr><td valign="top" style="width:10px; height:60px;"><img alt="" src="http://www.mersch.co.il/templates/professional/176/main/he/gfx/bg_left.gif" style="width:10px; height:60px;" /></td><!-- Middle context --><td style="width:1024px; height:60px; background-color:#636365;"><a href="http://www.mersch.co.il"><img alt="Mersch Official Logo 2007-2010" src="http://www.mersch.co.il/templates/professional/176/main/he/gfx/logo.gif" style="width:170px; height:60px; float:left; padding-left:25px;" /></a></td><!-- Right border --><td valign="top" style="width:10px; height:60px;"><img alt="" src="http://www.mersch.co.il/templates/professional/176/main/he/gfx/bg_right.gif" style="width:10px; height:60px;" /></td></tr></table> <!-- Table end border (bottom) --> <table class="full_table_style" style="width:1024px; height:7px;"><tr><td valign="top" style="width:10px; height:7px;"><img alt="" src="http://www.mersch.co.il/templates/professional/176/main/he/gfx/bg_left_niz.gif" style="width:10px; height:7px;" /></td><td valign="top" style="width:1004px; height:7px;"><img alt="" src="http://www.mersch.co.il/templates/professional/176/main/he/gfx/bg_niz.gif" style="width:1004px; height:7px;" /></td><td valign="top" style="width:10px; height:7px;"><img alt="" src="http://www.mersch.co.il/templates/professional/176/main/he/gfx/bg_right_niz.gif" style="width:10px; height:7px;" /></td></tr></table>  </body> </html>

thescientist · April 21, 2010

I'd say you'll never really get away from this problem if you use tables for your layout. Its not just enough to learn HTML, you should really fully comprehend the benefits of CSS. It will get you away from you using tables for layout, and writing all those in-line styles.

dsonesuk · April 21, 2010

If you really want to stick with using tables, try zeroing the cellspacing and cellpadding within the table, also adding border-collapse also helps in some cases to remove extra spacing.<table style="width: 1024px; height: 7px; border-collapse: collapse;" class="full_table_style" cellpadding="0" cellspacing="0">

Illasera · April 21, 2010

I'd say you'll never really get away from this problem if you use tables for your layout. Its not just enough to learn HTML, you should really fully comprehend the benefits of CSS. It will get you away from you using tables for layout, and writing all those in-line styles.

Thanks mate, What did you have in mind that can replace it and solve my issue?I can`t think of anything beside tables, maybe divisions?

If you really want to stick with using tables, try zeroing the cellspacing and cellpadding within the table, also adding border-collapse also helps in some cases to remove extra spacing.<table style="width: 1024px; height: 7px; border-collapse: collapse;" class="full_table_style" cellpadding="0" cellspacing="0">

cellspacing and cellpadding is no longer valid in (X)html strict,Thanks Mate x2 : Am using border-spacing:0px; margin:0px; padding:0px; and yep, boder-collapse on collapse.

Sign In

Looks different in IE and Other browser (2)

Recommended Posts

Illasera

Link to comment

Share on other sites

thescientist

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Illasera

Link to comment

Share on other sites

Archived

Browse

Activity