IE vs. Firefox: Help Please!

[skien]

Hi- I'm having an issue with my text being knocked down a few spaces in Firefox. My text needs to display within an image and works great in IE. But for some reason, Firefox seems to be adding a few extra breaks, or top padding, or something, and then it pushes it out the bottom of the box (with a big gap at the top). If I fix it to work with Firefox, it doesn't work in IE and the text is over the top of the image. Please help!

Here is my code for the image/text:

<td class="MiddleTable" style="background-image: url(http://melroseintl.com/abbott/images/industrial_bg.gif); height: 415px; valign: top;">
<br>
<br>
<br>
<h2><div style="font-size: 19pt;">Industrial</div></h2>
<span class="class1">We are proud to offer a wide selection of brand name products and services to the industrial, manufacturing and service-oriented businesses. Click here to learn more about the Industrial product lines we carry along with custom services offered to fit your day to day operational needs.
</span></td>

--------CSS--------

.MiddleTable {
PADDING-RIGHT: 35px;
PADDING-LEFT: 35px;
FONT-SIZE: 12pt;
VERTICAL-ALIGN: text-top;
WIDTH: 240px;
BORDER-TOP-STYLE: none;
PADDING-TOP: 10px;
BACKGROUND-REPEAT: no-repeat;
FONT-FAMILY: Arial Narrow, Arial, Sans-Serif;
BORDER-RIGHT-STYLE: none;
BORDER-LEFT-STYLE: none;
TEXT-ALIGN: left;
BORDER-BOTTOM-STYLE: none
}


Note: This shows <br> in the html code and padding in the css....I've went back and forth with both, only one, only the other, with no luck.

Thanks for any help!

 

[PixelPusher]

First off I advise you use the right tag for the job. A heading tag is used for a heading. A division tag is used to divide the page in one way or another (yes it can and most often will contain text but that is not its sole purpose) This is the purpose of a paragraph tag. Line breaks are designed to, well break a line of text. It is bad practice to use them as a spacing element. That is the purpose of margins/padding and positioning. That being said, lets clean the code up first.

I would write the code as follows:

<td class="middle" valign="top">
   <h2>Industrial</h2>
   <p>We are proud to offer a wide selection of brand name products and services to the industrial, manufacturing and service-oriented businesses. Click here to learn more about the Industrial product lines we carry along with custom services offered to fit your day to day operational needs.</p>
</td>

table td.middle {
padding:10px 35px 0;
font:normal 12pt  Arial Narrow, Arial, Sans-Serif;
width:240px;
height:415px;
background:transparent url(http://melroseintl.com/abbott/images...trial_bg.gif) no-repeat;
vertical-align: text-top;
text-align: left;
border: none;
}
table td.middle h2 {
font-size:19pt;
}
table td.middle p {
enter "class1" style here
}

Where is this page with the content above? Almost all your pages are full of images with text in them (not actual text). From a web crawler stand point you don't have any content other than images.

 

[skien]

Thanks for your help on this. I have made the suggested changes, but am now having an issue with adjusting the top padding. I have 3 middle tables across the page, just like the one I posted previously. I made the change to all 3, and renamed them appropriately. However, the 3rd table needs to have more padding on top, and when I change the css padding on that, it changes the padding on the first two, but not on the last one.... Here's my code and css:

table td.industrial {
padding: 50px 25px 0;
font:normal 12pt Arial Narrow, Arial, Sans-Serif;
width:240px;
height:415px;
background:transparent url(http://melroseintl.com/Abbott/Images/industrial_bg.gif) no-repeat;
vertical-align: text-top;
text-align: left;
border: none;
}

table td.automotive {
padding: 50px 25px 0;
font:normal 12pt Arial Narrow, Arial, Sans-Serif;
width:240px;
height:415px;
background:transparent url(http://melroseintl.com/Abbott/Images/automotive_bg.gif) no-repeat;
vertical-align: text-top;
text-align: left;
border: none;
}
table td.catalog {
padding: 50px 15px 0;
font:normal 12pt Arial Narrow, Arial, Sans-Serif;
width:240px;
height:415px;
background:transparent url(http://melroseintl.com/Abbott/Images/catalog_bg.gif) no-repeat;
vertical-align: text-top;
text-align: left;
border: none;
}

--

<td class="industrial" valign="top">
<h2>Industrial</h2>
<p>We are proud to offer a wide selection of brand name products and services to the industrial, manufacturing and service-oriented businesses. Click here to learn more about the Industrial product lines we carry along with custom services offered to fit your day to day operational needs.</p>
</td>

<td class="automotive" valign="top">
<h2>Industrial</h2>
<p>We are proud to offer a wide selection of brand name products and services to the industrial, manufacturing and service-oriented businesses. Click here to learn more about the Industrial product lines we carry along with custom services offered to fit your day to day operational needs.</p>
</td>

<td class="catalog" valign="top">
<p>We've added a new feature to our website! You can now shop Abbott Supply online for all your Industrial Tooling and Supply needs. Click on the catalog to start shopping today!</p>
</td>

--

Also, this page is not contained on the melroseintl.com website. I am creating a new site, just using the melroseintl.com site to host the files during the creation. (BTW- I don't do the melroseintl.com site, it is done by a designer who uses all images.... I create within Adobe GoLive and use standard HTML editing

Thanks for your help!