By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,408 Members | 1,796 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,408 IT Pros & Developers. It's quick & easy.

help! cell padding inconsistency- Firefox vs. IE7

P: 2
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
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2.  
  3. <html lang="en">
  4. <head>
  5. <title>Foreclosure Prevention USA home page
  6. </title>
  7.  
  8. <style>
  9. h1 {color: #ff0000; font-size: 26px; font-family: arial;}
  10.  
  11.  
  12. table {
  13. border-collapse: collapse; 
  14. padding: 0px;
  15. margin: 0px;
  16. }
  17.  
  18. tr {
  19. padding: 0px;
  20. margin: 0px;
  21. }
  22.  
  23. td {
  24.   padding: 0px;
  25.   margin: 0px;
  26.   }
  27.  
  28. td.cellTopAlign {vertical-align: top;}
  29. td.cellBottomAlign {vertical-align: bottom;}
  30.  
  31. </style>
  32.  
  33. </head>
  34.  
  35.  
  36. <body>
  37. <h1>Foreclosure Prevention USA home page
  38. </h1>
  39.  
  40. <table border="1" cellpadding="0" cellspacing="0">
  41. <tr height="65px">
  42. <td class="cellTopAlign"><img src="top_left_rounded_corner.jpg" width="65px" height="65px"/>
  43. </td>
  44. <td class="cellTopAlign"><img src="pixel.jpg" width="300px" height="1px"/>
  45. </td>
  46. <td class="cellTopAlign"><img src="top_right_rounded_corner.jpg"width="65px" height="65px"/>
  47. </td>
  48. </tr>
  49.  
  50.  
  51. </table>
  52. </body>
  53. </html>
  54.  
Aug 3 '07 #1
Share this Question
Share on Google+
12 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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

P: 2
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
Expert 5K+
P: 7,435
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
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2.  
  3. <html lang="en">
  4. <head>
  5. <title>Foreclosure Prevention USA home page
  6. </title>
  7.  
  8. <style type="text/css">
  9. *{margin:0;padding:0} 
  10. h1 {color: #ff0000; font-size: 26px; font-family: arial;}
  11.  
  12. #left{
  13.     width:65px;
  14.      height:65px;
  15.  
  16. }
  17. #middle{
  18.     width:65px; height:1px; vertical-align:top;
  19. }
  20. #right{
  21.     width:65px; height:65px
  22. }
  23. </style>
  24.  
  25. </head>
  26.  
  27.  
  28. <body>
  29. <h1>Foreclosure Prevention USA home page
  30. </h1>
  31.  
  32. <img id="left" src="top_left_rounded_corner.jpg">
  33. <img id="middle" src="pixel.jpg" >
  34. <img id="right" src="top_right_rounded_corner.jpg" >
  35.  
  36. </body>
  37. </html>
  38.  
Aug 6 '07 #4

P: 6
Hello Koelner,

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

Sunny1957
Aug 27 '08 #5

RedSon
Expert 5K+
P: 5,000
Hi Sunny,

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

Thanks!
Aug 27 '08 #6

P: 6
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
Expert 5K+
P: 5,000
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

Expert 100+
P: 397
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

P: 6
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

Expert 100+
P: 397
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

Expert 100+
P: 397
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
  1. #container {width: 800px; border: 1px solid red/*add for test purpose*/;}
  2. #navigation { width: 177px; }
  3. #content {width: 623px;}
  4.  
4/ And delete all these CSS selectors as they are not needed for your page:
Expand|Select|Wrap|Line Numbers
  1. a{display:block;color: #006;padding:10px}
  2. div#header{position:relative}
  3. div#header h1{height:80px;line-height:80px;margin:0;
  4. padding-left:10px;background: #EEE;color: #79B30B}
  5. div#header a{position:absolute;right:0;top:23px}
  6.  
5/ And delete this line from the header in the markup:
Expand|Select|Wrap|Line Numbers
  1. <h1>Header</h1><a href="http://blog.html.it/layoutgala/layout34.zip">download this layout</a>
  2.  
6/ Are you with me so far? If so, now add your title image in the header like this;
Expand|Select|Wrap|Line Numbers
  1. <div id="header">
  2. <img src="http://geocities.com/l_friedrich/images/header.jpg" width="800" height="59" alt="Lisa Giacone" />
  3. </div>
  4.  
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
  1. <div id="rap">
  2. <img src="http://geocities.com/l_friedrich/images/graphic_design_menu_off.jpg" width="153" height="25" alt="Graphic Design" /> 
  3. <img src="http://geocities.com/l_friedrich/images/translation_menu_off.jpg" width="188" height="25" alt="Translation Services" /> 
  4. <img src="http://geocities.com/l_friedrich/images/header_menu_spacer.jpg" width="459" height="25" alt="" />
  5. </div>
  6.  
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
  1. #rap img {float: left;}
  2. img {display: block;}
  3.  
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
  1. #container{background:  url(geo/left_vert_bar.jpg) no-repeat 0 84px; border: 1px solid red;width:800px;margin:0 auto;text-align: left;}
  2.  
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

P: 6
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

Post your reply

Sign in to post your reply or Sign up for a free account.