Jump to content

Looks different in IE and Other browser (2)


Recommended Posts

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>

Edited by Illasera
Link to post
Share on other sites

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.

Link to post
Share on other sites

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">

Link to post
Share on other sites
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. Edited by Illasera
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...