Jump to content

It looks different in FireFox


zeidhaddadin

Recommended Posts

Hi all,I'm trying to make a page in STRICT XHTML using css and tables, As you all know that in tables we should not assign width and hight in the table data directely (As in non-strict html type) .. You should use css to do it for you like for example: .td1 {width: 700px; height : 25px; } ..Anyways, When I use this way (CSS) and I open the page using Internet explorer .. I see it perfect as I want.BUTWhen I open it in Firefox it looks really different I mean there is a lot more space between each row (As if 25px in IE is smaller than 25px In FF).Can someone please tell me how to make it look the same in both browsers.Thanks very much,zeid

Link to comment
Share on other sites

we need to see the html and css, please, and someone will assist you. Until we have the code, we are only guessing.And for the record, FF probably has it right... Code for Firefox and Hack for IE, with very few exceptions. And use Opera to confirm it. :)

Link to comment
Share on other sites

Ok for example:HTML:

<body><table cellpadding="0" cellspacing="1" border="0"><tr><td class="td1"><p class="p2"><a href="INDEX.aspx">HOME</a></p></td><td class="td1"><p class="p2">SERVICES</p></td><td class="td1"><p class="p2"><a href="CONTACT.aspx">CONTACT US</a></p></td><td class="td2"> </td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td class="td3"><p class="p2">These are our services:</p></td></tr><tr><td class="td3"><p class="p2">1- blahblah</p></td></tr></table></body>

CSS File:p {font-family : Verdana;font-size : 12px;}.p1 {font-size : 11px;text-align : center;}.p2 {text-align : center;}table {margin : auto;}.td1 {background-image : url("images/bg1.gif");width : 110px;height : 35px;text-align : center;}.td2 {background-image : url("images/bg1.gif");width : 300px;height : 35px;}.td3 {width : 630px;height : 25px;}

Link to comment
Share on other sites

Ok here is the whole html code (note: I'm using Google adsense):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>zeid1</title><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link type="text/css" rel="stylesheet" href="Style.css" /></head><body><p class="p2"><br /><script type="text/javascript"><!-- google_ad_client = "pub-7031347571081761";google_ad_width = 728;google_ad_height = 90;google_ad_format = "728x90_as";google_ad_type = "text";google_ad_channel = "";google_color_border = "006699";google_color_bg = "FFFFFF";google_color_link = "0000FF";google_color_text = "000000";google_color_url = "008000";//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></p><table cellpadding="0" cellspacing="1" border="0"><tr><td class="td1"><p class="p2"><a href="INDEX.aspx">HOME</a></p></td><td class="td1"><p class="p2"><a href="SERVICES.aspx">SERVICES</a></p></td><td class="td1"><p class="p2"><a href="CONTACT.aspx">CONTACT US</a></p></td><td class="td2"> </td></tr></table><p class="p1"><br /><br /></p><p class="p1">© 2007, zeid1</p></body></html>

And the Stylesheet the same.

Link to comment
Share on other sites

Sorry That one was not the problem.. For example look If I used two tables .. You will see a more space in firefox.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>zeid1</title><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link type="text/css" rel="stylesheet" href="Style.css" /></head><body><p class="p2"><br /><script type="text/javascript"><!-- google_ad_client = "pub-7031347571081761";google_ad_width = 728;google_ad_height = 90;google_ad_format = "728x90_as";google_ad_type = "text";google_ad_channel = "";google_color_border = "006699";google_color_bg = "FFFFFF";google_color_link = "0000FF";google_color_text = "000000";google_color_url = "008000";//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></p><table cellpadding="0" cellspacing="1" border="0"><tr><td class="td1"><p class="p2"><a href="INDEX.aspx">HOME</a></p></td><td class="td1"><p class="p2"><a href="SERVICES.aspx">SERVICES</a></p></td><td class="td1"><p class="p2"><a href="CONTACT.aspx">CONTACT US</a></p></td><td class="td2"> </td></tr></table><table cellpadding="0" cellspacing="0" border="0"><tr><td class="td3"><p class="p2">Welcome</p></td></tr><tr><td class="td3"><p class="p2">To my website</p></td></tr></table></body></html>

Link to comment
Share on other sites

You know what, I figured that the problem is from the DTD .. When I removed it from the page and Opened it in Internet Explorer 6 ---> the tables moved to the left of the page .. But when I used in FireFox it was perfect.So can you please help me fix this and still use the Strict XHTML data type.Thanks very much

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...