ansaurus

Question

Tables looking good in Firefox but not IE

Answer 1

+2 A:

Consider the following block of your code:

<td valign="top" width="189" height="280" background="images/small_home_box.gif" style="background-repeat:no-repeat;padding-top:8px;">
      <table width="100%">
        <tr>
     <td align="left" colspan="2">
       <font style="font-size: 18px" color="#ffffff">Shows</h1><br />
     </td>
        </tr>
     <tr><td width='55' valign='top' style='padding-top:3px;'><font style='color:#ffffff;font-size:.7em;'>PASADENA<br /><br />Mar 17 2009 8:00P 
 Nabbs Creek Cafe Pasadena, Maryland <br /><br />Mar 19 2009 8:00P 
 thew barn with 86 the effort Carney, Maryland <br /><br />Mar 20 2009 8:00P 
 whiskey bar w/ b&b Hoboken, New Jersey <br /><br />Mar 21 2009 9:00P 
 Red House Tavern w/ Bond & bentley,Tsunami Rising! Baltimore, Maryland </font>
</td></tr>

You have parent td with width 189, but the child td with contents is large only 55. Thats' why your text go off.

Alekc 2009-03-20 13:30:24

AlekC: That worked great to get the text back in horizontally. Thank you so much.Now, there is still a huge gap between the header of the "boxes and the content. Can you help me with that?

2009-03-20 13:43:30

Answer 2

A:

this has to do with the fact that IE6 (what I looked at it with) does not support the min-width tag, which I noticed you've used, IE6 also counts margins and padding as width, so to speak.

Mr. Vile 2009-03-20 13:34:11

Answer 3

+1 A:

It really wouldn't be incredibly painful to create that layout using divisions instead of tables.

You'll still need to bear in mind the following though.

min-width is not supported in older versions of IE width in firefox is exclusive of borders and padding, in IE6 the border and padding are inside the width. Example - 100px box with 10px padding is 120px wide in FF and 100 wide in IE6.

<div style="width: 800px; height: 80px; margin: 5px auto; background-color: Aqua;">
    <h2>Mothership Records Banner</h2>
</div>
<div style="width: 800px; margin: 10px auto; clear: both;">
    <div style="width: 178px; margin-right: 35px; float: left; background-color: Aqua;">Current Releases</div>
    <div style="width: 374px; margin-right: 35px; float: left; background-color: Aqua;">Image Banner Thing</div>
    <div style="width: 178px; float: left; background-color: Aqua;">Shows</div>
</div>
<div style="width: 800px; margin: 10px auto; clear: both;">
    <div style="width: 178px; margin-right: 35px; float: left; background-color: Aqua;">Upcoming Releases</div>
    <div style="width: 374px; margin-right: 35px; float: left; background-color: Aqua;">Player</div>
    <div style="width: 178px; float: left; background-color: Aqua;">News</div>
</div>
<div style="width: 800px; margin: 10px auto; clear: both; background-color: Aqua;">
    Artists
</div>
<div style="width: 800px; margin: 10px auto; clear: both;">
    Copyright
</div>

Sohnee 2009-03-20 13:43:59

Answer 4

A:

You can force most browsers to render (pretty much) the same by declaring doctype strict before any HTML is output:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Doctype tells the browser what set of rules to follow when rendering the style of a page, and the strict mode doctype has the most similarity across broswers in my experience.

Quirksmode has a very good overview of doctypes, and their comparison charts are first rate.

I doubt this has anything to do with it, but you have broken html too. All your headers (Current Releases, Shows, News) in the boxes are wrapped in <font>Header</h1>.

2009-03-20 14:49:37

ansaurus

tags:

views:

answers:

Tables looking good in Firefox but not IE

related questions