Space in tables problem

Get Started
1

When I open my page in Chrome and Firefox, I receive no problems. Only when I try to open in IE does this error happen. Any ideas on what could be causing this?

2

The image attached has not yet been approved so I can’t see it but, do you have at least 1 row at either top or bottom which spec’s all widths for each cell?

Open in IE8, hit f12, with the selection arrow in the dev tools to the left, twirl down until you’re on that row, or any row with widths. Then, choose the “Layout” tab to the right. As you click on a td tag in the code in the left pane, the Layout image will show you the actual width the cell is occupying.

Safari, Chrome and Firefox can ‘figure out’ what one means in many cases with tables, but IE needs the rock-solid code.

Make sure no images in any cell are actually wider than the cell they’re in has room for.

I have to code html emails weekly, sometimes daily, and when it comes to using tables, it’s best to make them rock solid… validate the html, check in IE to ensure widths are what you are specing.

3

Sorry, I should have just hot linked a pic. I didn’t know sitepoint had to verify pictures.

Here is an example picture: ImageShack® - Online Photo and Video Hosting

Here is my code for the box:

<table width="100%" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                         <td width="20" height="20" class="none">
                              <img src="images/roundtopleft.gif" height="20" width="20">
                         </td>
                         <td bgcolor="#E0E0E0" height="20" class="none">
						&nbsp;
                         </td>
                         <td width="20" height="20" class="none">
                              <img src="images/roundtopright.gif" height="20" width="20">
                         </td>
                    </tr>
                    <tr>
                         <td bgcolor="#E0E0E0" width="20" class="none">
						&nbsp;
                         </td>
                         <td bgcolor="#E0E0E0">
ALL CONTENT GOES IN THIS AREA.
</td>
                         <td bgcolor="#E0E0E0" width="20" class="none">
						&nbsp;
                         </td>
                    </tr>
                    <tr>
                         <td width="20" height="20" class="none">
                              <img src="images/roundbottomleft.gif" height="20" width="20">
                         </td>
                         <td bgcolor="#E0E0E0" height="20" class="none">
						&nbsp;
                         </td>
                         <td width="20" height="20" class="none">
                              <img src="images/roundbottomright.gif" height="20" width="20">
                         </td>
                    </tr>
               </table>
4

The problem is that you’re using a table where there’s absolutely no need to use a table and so you have loads of unnecessary markup that is confusing the issue, and combined with that you’ve got inline presentational information that should be extracted into a separate CSS file.

I’ve not got time now, but later on I’ll have a look at coming up with a better structure for it.

5

Thank you very much. I never thought to check IE because it looked fine in Firefox and Safari. Guess that backfired on me :slight_smile:

6

OK, so here goes.

The code you need for the form is pretty straightforward:

<form id="login">
<h2>User information</h2>
<div><label for="username">Username</label>
     <input id="username"></div>
<div><label for="password">Password</label>
     <input id="password" type="password"></div>
<div><input value="Login" type="submit">
     <a href="/register.htm">Register with us!</a></div>
<div><a href="/password.htm">Forgot your password?</a></div>
</form>

then you achieve the border with some very simple CSS:

form {background:#ccc; border-radius:2em; padding:1.5em; width:150px;}
form h2 {margin-top:0;}
form div {margin-bottom:0.5em;}

Obviously the styling will want a bit more work to get everything exactly as you want it, but that should give you enough to get started.

Of course, if you want to support Firefox 3.* you need to add -moz-border-radius:2em; as well.

If you want IE (up to and including 8) to get the rounded corners then you have to make it a whole load more complicated with extra <div>s and use sliding doors with graphics for the corners.

7

I will probably be moving to change my website to have squared corners in the future.

Thanks for the help though.

What does em stand for in CSS?

8

It stands for EM unit: Em (typography) - Wikipedia, the free encyclopedia within CSS it’s basically the same. The ‘em’ unit refers to the ‘font size’ of the element.

9

Even easier! Just get rid of the border-radius from the CSS and you’ve got it!