Hello all, I realize I need to do my homework on CSS and have been reading as much as I can lately, but there are still concepts new to me. My problem is that I created a webpage that has one table, with 2 table rows (stacked). One for my menu and one for the main page that will later have a flash document. I had to add a CSS style on the second table row because I only wanted that background image on that ONE row, not the entire table and that was the only way I could get it to work. I have tried the border collapse and other CSS styles to create a seamless connection between the two cells/rows (not sure what they are exactly called). BUt I think there is a discrepancy between my CSS mixed with HTML attributes. The table shows up seamless in IE7, and there is a white line between the two in Firefox. From my previous research I've concluded that different browsers have rules for tables, etc. I'm just unsure about how to implement the correct CSS rule to override the problem with Firefox. BTW, I am using dreamweaver cs3 (I am a graphic designer! Very new to web stuff). Please help! Here is the 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>Amanda M. Bruce - Graphic Designer</title> <style type="text/css"> <!-- table, table tr, table tr td { border:none; border-collapse: collapse; } --> </style> <div align="center"> <table width="0" height="598" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bgcolor="212d3d"> <td width="800" height="85"><img src="new backgrounds and images/topbanner_wmenu.jpg" alt="Title" width="800" height="85" /></td> </tr> <tr style="background: url(welcome.jpg) no-repeat 0 0;"> <td height="492"> </td> </tr> </table> </div> --- Here is how it displays correctly in IE7: And here is the line I am talking about that appears in Firefox: Please help! Thank you in advance
Hi yesyoucant ! I have an option for your that is try to change the border color of the picture as shown below and test it <img src="new backgrounds and images/topbanner_wmenu.jpg" alt="Title" width="800" height="85" style="border: 1 solid #212D3D" /> Do not hesitated for further contact.
It looks like you missed <tr> open tag before "...<td width="800"..." Also I recommend you to use "border: 0px" in css instead of "border: none"
Why are you using tables when you want to learn CSS? Tables are never to be used to layout a page. In addition, you use HTML display attributes but that's what CSS if for. But I digress. Never, ever, ever use IE as a reference for how things should work. IE7 is 10 years behind web standards and wrong in much of its implementation. If it works in IE but not FF then you wrote it wrong and you are only looking at your bugs. Do you happen to have this online with a link to it?