help! cell padding inconsistency- Firefox vs. IE7

Hello all,
am very frustrated because I can't get a simple table to display the same way in both browsers. It displays the way I want it to in Firefox but not in IE7 (Windows XP).

1) not sure if my doctype is correct- this is just a plain vanilla html page, so I used
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

2) I have tried to put cell padding=0, margin=0 on the table and the table cells in both the style sheet and the html document. No combination has worked so that IE7 will display the table row without the slight padding at the bottom of the row.

I have added a border so that you can clearly see that the bottom of the rounded red corners do not touch the bottom of the row.

I've even set the width and height of the table cells to those of the graphic but no luck. (I've checked the graphic, there is no white border around it).

3) I can't get the center td's contents (a 1px by 1px graphic that I've stretched to 300 px) to align to the top in IE7.

Any help is appreciated, thank you!

Here's the page ...

Here is my html page's code:

Expand|Select|Wrap|Line Numbers

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

<head>

<title>Foreclosure Prevention USA home page

</title>
 
<style>

h1 {color: #ff0000; font-size: 26px; font-family: arial;}
 
table {

border-collapse: collapse; 

padding: 0px;

margin: 0px;

}
 
tr {

padding: 0px;

margin: 0px;

}
 
td {

  padding: 0px;

  margin: 0px;

  }
 
td.cellTopAlign {vertical-align: top;}

td.cellBottomAlign {vertical-align: bottom;}
 
</style>
 
</head>
 
<body>

<h1>Foreclosure Prevention USA home page

</h1>
 
<table border="1" cellpadding="0" cellspacing="0">

<tr height="65px">

<td class="cellTopAlign"><img src="top_left_rounded_corner.jpg" width="65px" height="65px"/>

</td>

<td class="cellTopAlign"><img src="pixel.jpg" width="300px" height="1px"/>

</td>

<td class="cellTopAlign"><img src="top_right_rounded_corner.jpg"width="65px" height="65px"/>

</td>

</tr>
 
</table>

</body>

</html>

Aug 3 '07 #1

Subscribe Post Reply

16058

drhowarddrfine

7,435

Expert 4TB

Your doctype is fine. All new pages should always use the strict doctype.
But you should never use tables for layout.

Validate for your list of 31 html errors. The 'alt' errors can be ignored for now.

Another problem you'll have is with that geocities page. The garbage they put at the top will throw IE into quirks mode. That's not the problem with your table right now, though.

Aug 3 '07 #2

Koelner

Hello drhowarddrfine!

You are absolutely right- I scrolled through the 31 errors and almost all of them are from garbage code that geocities inserted.

The only reason I ftp'd the page out to geocities is because I do not yet have a web hosting service. I just needed a way for you guys to be able to look at this page.

If you copy and paste my code into an html document and view it locally on your computer, I'd be curious how it looks for you. I found that when looking at it on Geocities in Firefox, the table displays the way I intend (graphics are all lined up, and no white space at the bottom of the rounded red corners). If I open the html page locally on my computer, it doesn't even display properly in Firefox, let alone IE7.

You recommend that I don't use tables for layout, but I'm just not sure what's the most efficient way to set up a containing "box" like this which will hold text. Should I make the entire box as a graphic and use layers to position text inside of it?

Thanks!

Your doctype is fine. All new pages should always use the strict doctype.
But you should never use tables for layout.

Validate for your list of 31 html errors. The 'alt' errors can be ignored for now.

Another problem you'll have is with that geocities page. The garbage they put at the top will throw IE into quirks mode. That's not the problem with your table right now, though.

Aug 6 '07 #3

drhowarddrfine

7,435

Expert 4TB

You recommend that I don't use tables for layout, but I'm just not sure what's the most efficient way to set up a containing "box" like this which will hold text.

Heading to the ball game. Threw this together. I'll be back.

Expand|Select|Wrap|Line Numbers

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

<head>

<title>Foreclosure Prevention USA home page

</title>
 
<style type="text/css">

*{margin:0;padding:0} 

h1 {color: #ff0000; font-size: 26px; font-family: arial;}
 
#left{

    width:65px;

     height:65px;
 
}

#middle{

    width:65px; height:1px; vertical-align:top;

}

#right{

    width:65px; height:65px

}

</style>
 
</head>
 
<body>

<h1>Foreclosure Prevention USA home page

</h1>
 
<img id="left" src="top_left_rounded_corner.jpg">

<img id="middle" src="pixel.jpg" >

<img id="right" src="top_right_rounded_corner.jpg" >
 
</body>

</html>

Aug 6 '07 #4

Sunny1957

Hello Koelner,

I think the solution for your problem you can find on my page
[DELETED]

Sunny1957

Aug 27 '08 #5

RedSon

5,000

Expert 4TB

Hi Sunny,

This is an English only site. Please be sure to provide links to English language sites.

Thanks!

Aug 27 '08 #6

Sunny1957

Hello Redson,
I'm very sorry for my link to my German page. I now have corrected it. The only German words are directory and file names. I hope this is for now ok.
picture in a table without slight padding at the bottom of the row
best regards
Uwe

Aug 27 '08 #7

RedSon

5,000

Expert 4TB

Hello Redson,
I'm very sorry for my link to my German page. I now have corrected it. The only German words are directory and file names. I hope this is for now ok.
picture in a table without slight padding at the bottom of the row
best regards
Uwe

Thanks for the update!

Nice description!

Aug 27 '08 #8

David Laakso

397

Expert 256MB

You did not ask how you might do the entire layout without using a table. This strikes me as strange, since you have no tabular data whatsoever. Nevertheless, it is your call. But, If your call might include the possibility of a ditching the 1990s table layout you are striving for in favor of producing a contemporary tableless CSS layout, let me know. I will try to help to help...

Aug 28 '08 #9

Sunny1957

You did not ask how

This is a misunderstood, because I wouldn't ask something. My post should be the solution for question 2)

No combination has worked so that IE7 will display the table row without the slight padding at the bottom of the row.

of the thread opener Koelner. And also it should be the answer of question 3).

I can't get the center td's contents (a 1px by 1px graphic that I've stretched to 300 px) to align to the top in IE7.

In both cases, all to do is: remove the eol before </TD>

you have no tabular data whatsoever.

That's not correct. Ok it's a very small table, only 1 cell, and the data is no text, only a picture.
If you open my page and the right "table" ( produced by sample code ) in example 1 is identical to the left "table" ( hard coded picture ) in example 2 then you do not use IE7.
Otherwise you use perhaps Firefox 3.0.1. Other browsers/versions not testet.

Aug 28 '08 #10

David Laakso

397

Expert 256MB

Sunny1957, my reply was pointed to (or rather, I should have made it clear that it was pointed to) the OP. I must admit that I never really looked at your page other than a very momentary and cursory glance (my bad). And simply was asking the OP if an alternative tabless solution was of interest. Nevertheless, thank you for the clarification, and valid suggestions you made in reference to resolving the OPs issues...

Aug 28 '08 #11

David Laakso

397

Expert 256MB

Koelner,
Thanks for your private message indicating you want to try a tableless layout.
No need to re-invent the wheel. How about starting with a base layout known to work cross-browser? This layout will do [1].

1/ delete the #extra division from the markup and CSS-- not needed for what you are doing.
2/ adjust the column widths to match your layout:

Expand|Select|Wrap|Line Numbers

 
#container {width: 800px; border: 1px solid red/*add for test purpose*/;}

#navigation { width: 177px; }

#content {width: 623px;}

4/ And delete all these CSS selectors as they are not needed for your page:

Expand|Select|Wrap|Line Numbers

 
a{display:block;color: #006;padding:10px}

div#header{position:relative}

div#header h1{height:80px;line-height:80px;margin:0;

padding-left:10px;background: #EEE;color: #79B30B}

div#header a{position:absolute;right:0;top:23px}

5/ And delete this line from the header in the markup:

Expand|Select|Wrap|Line Numbers

 
<h1>Header</h1><a href="http://blog.html.it/layoutgala/layout34.zip">download this layout</a>

6/ Are you with me so far? If so, now add your title image in the header like this;

Expand|Select|Wrap|Line Numbers

 
<div id="header">

<img src="http://geocities.com/l_friedrich/images/header.jpg" width="800" height="59" alt="Lisa Giacone" />

</div>

7/ Add a division called #rap immediately below the close </div> of the header, and immediately above <div id="wrapper">. It will enclose your 3 25px height images in it like this:

Expand|Select|Wrap|Line Numbers

 
<div id="rap">

<img src="http://geocities.com/l_friedrich/images/graphic_design_menu_off.jpg" width="153" height="25" alt="Graphic Design" /> 

<img src="http://geocities.com/l_friedrich/images/translation_menu_off.jpg" width="188" height="25" alt="Translation Services" /> 

<img src="http://geocities.com/l_friedrich/images/header_menu_spacer.jpg" width="459" height="25" alt="" />

</div>

8/ Still with me?
Add these selectors to the CSS to make the 3 image in #rap adjacent to each other; and, to close the gaps left for font descenders:

Expand|Select|Wrap|Line Numbers

 
#rap img {float: left;}

img {display: block;}

8/ Bear with me... we're almost there (provided I've not messed up).
The brown like color rounded corner image can be set as a background image on #container in the CSS-- positioned left and 84 px from the top (59px + 25px = 84px) like this-- use your image path, not mine..:

Expand|Select|Wrap|Line Numbers

 
#container{background:  url(geo/left_vert_bar.jpg) no-repeat 0 84px; border: 1px solid red;width:800px;margin:0 auto;text-align: left;}

9/ Code to compliant browsers (Opera, Safari, & FF); with frequent check-backs to the IEs (IE/6 & IE/7).
10/ Confused? Bewildered? Stuck? Write the forum-- myself or someone else on the forum will be more than happy to lend a hand...

[1]
Two Column Fixed (number 34)
[2]
Helpful resources:
CSS 2.1 Specs
http://www.w3.org/TR/CSS21/
w3c markup and validation services
http://www.google.com/search?client=opera&rls=en&q=w3c&sourceid=opera&ie =utf-8&oe=utf-8
And our good friend Google is quite good at answering questions...

Aug 28 '08 #12

Sunny1957

Confused? Bewildered? Stuck?

Yes, I am! Is this really the answer to the original question

help! cell padding inconsistency- Firefox vs. IE7

I think no. It's nice that Koelner wrote you a private message, but why do you answer here? In the guide you wrote

1/ delete the #extra division from

But I can't find where I have to do this! Neither on the original linked page, nor in this thread!

Aug 28 '08 #13

Similar topics

SELECT query help - Zero padding

by: Rowland | last post by:

Hi, I've got a field that stores numeric values, representing a tracking number. I've also got a stored procedure that will extract this field and return it to a client. However, I would like to...

Microsoft SQL Server

Table column widths vs. Cell padding

by: Steve Sabljak | last post by:

I seem to having a little trouble getting a table to display correctly in both msie and firefox. I want to set the table and column widths in pixels, and have some cell padding too. The table...

HTML / CSS

set gridview horizontal cell padding?

by: Dabbler | last post by:

I need more space between my columns but increasing cellpadding increases vertical spacing and the gridview flows below "the fold". Is there some way to increase only horizontal padding? I tried...

ASP.NET

Problems with <ul> margin/padding in Firefox

by: Alan Silver | last post by:

Hello, In my (seemingly) endless quest to understand CSS, I have yet another problem. Please look at http://www.kidsinaction.org.uk/ph/x.html in Opera, where you will see it how I expected. If...

HTML / CSS

Vertical alignment of table cell contents in FireFox

by: Andy Mabbett | last post by:

Please can someone remind me of the most elegant fix for the way Firefox fails to vertically align cell content by default? For example, the second event on: ...

HTML / CSS

need help solving IE6 and Firefox display inconsistency

by: Jessica M | last post by:

I am having the following problem http://jessica.ourprofile.net/ are being rendered differently on Firefox and IE6 (PC). I have outline the div culprits in red to help with debugging....

HTML / CSS

IE ate my cell padding in CSS

by: Paradox | last post by:

For some reason my cell padding isn't working in IE. It works beautifully in Firefox but IE just seems to ignore it. .maintable { width: 800px; padding: 8px 8px 0px 8px; height:...

HTML / CSS

Cell Padding and Spacing

by: shapper | last post by:

Hello, How can I define the cell padding and cell spacing of a table using a CSS class? Thanks, Miguel

HTML / CSS

cell's offsetHeight not equal to cell's height?? firefox & IE

by: laszlokenez | last post by:

Tested in IE7 and FF2. I have 2 frames, 2 similar tables in them, similar CSS. (I have 1px cellpadding, and 1px border aroud the cells. From one frame I read the offsetHeight of a cell...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing