Home  |  About  | Last |  Submit  |  Contact
AllQuests.com



Previous Question:  Slicing Coding  Web Page DesignNext Question:  best resolution  Web Page Design
Question Spacing problem with tables for Internet Explorer ( SitePoint Forums Web Page Design )
Updated: 2009-01-05 02:15:02 (3)
Spacing problem with tables for Internet Explorer

Hi
I made this site www.rickrocks.de/literatur/main.htm
It will be a template for a small CMS i'm programming
for my school class. The main problem i have is on the
left in the navigation area, the Internet Explorer leaves
a small space to the end of the table, and i have simply
no idea why its doing it. Firefox is working fine, btw
I wish to get rid of this problem without having to recode
the whole page. The same problem occurs on www.bta-studios.com
in the navigation menu, but the IE leaves only a 1 pixel high
space between images, so i didn't really care, but on the
new site its very eyecatching and i cant leave it this way.
Hope you guys can help me.
Btw., hi, this is my first post

Greetings, dft

Answers: Spacing problem with tables for Internet Explorer ( SitePoint Forums Web Page Design )
Spacing problem with tables for Internet Explorer

Hi, it seems your table structure is bad for ie.
try to use this code:

<html>
<head>
<title>Literaturkurs 2004/05 am St. Michael Gymnasium</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body background="grafiken/bg.gif">
<div align="center">

<table width="851" cellspacing="0" cellpadding="0">
<tr height="200">
<td width="851"> <img src="grafiken/header.jpg" width="851" height="200" align="top" border="0">
</td>
</tr>
<tr height="42">
<td width="851"> </td>
</tr>
<tr height="100%">
<td width="851">
<!--Tabelle f?r das Men? anfangen-->
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img align="top" width="200" height="108" border="0" src="grafiken/menu_head.gif"></td>
</tr>
<tr>
<td background="grafiken/menu_top_back.gif">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;<a href="termine.php"></a><a href="index.php">Home</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<a href="termine.php">Termine</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<a href="kursliste.php">Kursliste</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<a href="forum.php">Forum</a>
</td>
</tr>
<tr>
<td><img src="grafiken/menu_mid.gif" border="0" width="200" height="99" align="top"></td>
</tr>
<tr>
<td background="grafiken/menu_top_back.gif">
<form method="POST" action="login.php">
<img src="grafiken/menu_spacer1.gif" align="top" width="55" height="1">Namebr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
<input type="text" class="input" name="name">
<br>
<img src="grafiken/menu_spacer1.gif" align="top" width="55" height="1">Passwortbr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
<input type="password" class="input" name="pwd">
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
<input type="submit" value="Login" class="input" name="pwd">
</form></td>
</tr>
<tr>
<td><img src="grafiken/menu_mid_bottom.gif" align="top" width="200" height="6" border="0"></td>
</tr>
</table></td>
<td width="50"> </td>
<td width="601">
<!--Tabelle f?r den Inhalt-->
<table>
</table></td>
</tr>
<tr height="100%">
<td width="851"><img src="grafiken/footer.gif" align="top" width="851" height="5" border="0"></td>
<td width="50"></td>
<td width="601"></td>
</tr>
<!--Footer-->
</table>
</div>
</body>
</html>

rkteachout

Spacing problem with tables for Internet Explorer

What's with all the &nbsp;'s???

Just use some css to pad text boxes in if you need to. (I suggest you bang some <label>s in as well to improve your usability)

Code:
 <td background="grafiken/menu_top_back.gif" style="padding: 5px 5px 5px 55px;"> 
                 <form method="POST" action="login.php">
 <label for="name">Name:</label><br />
 <input type="text" class="input" name="name" id="name" /><br />
 <label for="pwd">Passwort:</label><br />
 <input type="password" class="input" name="pwd" id="pwd" /><br />
 <input type="submit" value="Login" class="input" name="pwd" />
                 </form></td>
Now your code is tidier, lighter and more likely to work in different browsers/scenarios (did you try enlarging your text in the browser - it threw the form out of proportion)

Hope that helps!

Si

Spacing problem with tables for Internet Explorer

thanks for the answers, first of all.
i just didn't know how to get rid of the &nbsp; but i couldn't think of one.
i'll try to use css somehow.
@rkteachout, i will try your code tomorrow, because now it's just too late
(11:38 pm, but if i do anything with code now, i wont stop until 5 am, when the sun rises )
i'll post then again, or give you a pn or something
greetings, dft

dft

Previous Question:  Slicing Coding  SitePoint Forums  Web Page DesignNext Question:  best resolution  SitePoint Forums  Web Page Design

- Source: Spacing problem with tables for Internet Explorer SitePoint Forums Web Page Design
- Previous Question: Slicing Coding SitePoint Forums Web Page Design
- Next Question: best resolution SitePoint Forums Web Page Design