CODEWITHSUNDEEP
htmlcssinternet-explorerfirefox
Eric1978
Eric1978

Reputation: 83

Table difference in height of about 2 pixels visible in Firefox and IE9

I am having a layout problem with Mozilla/IE. I made two tables, for a form. With float/left right they are showed next to each other, and that works fine. Now only the problem is:The right table is about two pixels higher in IE9 than in firefox. What can be the problem?

In the bottom of my CSS, you can see that i put the tables in two different classes apart from the existing table / td configuration.

Thanks and greetings, Eric

My CSS:

       body {font-family: Century Gothic, Arial; text-align:center; margin: 0 auto; background-color: #CCCCCC;}

table {display:table; margin:0px 0; padding:0; border:1px solid #000000; font-size:100%;}
tr {display:table-row;}
th, td {display: table-cell; border:0px solid #000000; margin:0; padding:5px; vertical-align:top; text-align:left;}
th {background:#E7ECFD; text-align:center; color:#192666; font-weight:bold;}

hr { border: 0; color: #000000; background-color: #000000; height: 1px; width: 100%; text-align: left;} 

a {color: #0B0080;}
a:hover {color: #ffffff;}

img {border:0;}

#header {font-size: 60px;color: #333333;}

#menu {width:1000px; padding-top:10px; padding-bottom:10px; text-align:left; margin-top:10px; margin-bottom:10px; }
#menu_left {text-align:left; float:left; font-weight: bold;}
#menu_right {text-align:right; font-size:75%;}

#content {width: 1000px; margin: 20px auto 0px auto; text-align:center;}

#main { float: left; height:650px; width:1000px; background-color: #CCCCCC; font-size: 14px; color: #000000; text-align:left;}

.sidebar {width:300px; height: 600px; float: right; background-color: #CCCCCC; font-size: 18px; color: #000000; margin-top:10px; padding-top:20px;}

.footer {font-size: 14px; color:#333333; text-align:center;}

table.table_register {  border:1px solid #000000; padding:10px; float:left; width:50%; font-size:100%;
border-top-left-radius: 15px; border-bottom-left-radius: 15px; border-right:0px;
-moz-border-radius: 15px 0px 0px 15px;
-webkit-border-radius: 15px 0px 0px 15px;}

table.table_register2 { border:1px solid #000000; padding:10px; float:right; width:50%; font-size:100%;
border-top-right-radius: 15px; border-bottom-right-radius: 15px;
-moz-border-radius: 0px 15px 15px 0px;
-webkit-border-radius: 0px 15px 15px 0px;}

td.submit {display: table-cell; border:0px solid #000000; margin:0; padding:10px; 
 text-align:right; vertical-align:top; }

tr.test { height: 182px;}

my header:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="http://localhost/webwinkel/assets/css/style.css">

</head>
<body>

<div id="content">

    <div id="header">
    </div>

    <div id="menu">

        <div id="menu_left">
            <a href="http://localhost/webwinkel/public/index">Home</a> |  
            <a href="http://localhost/webwinkel/public/games">Games</a> | 
            <a href="http://localhost/webwinkel/public/movies">Movies</a>
        </div>  
        <div id="menu_right">   
            {if !isset($smarty.session.logged_in)}      
            <a href="http://localhost/webwinkel/public/member/login">Login</a> |
            <a href="http://localhost/webwinkel/public/member/register">Registratie</a>
            {/if}

            {if isset($smarty.session.logged_in)}
            Welkom {$smarty.session.name}! <a href = http://Localhost/webwinkel/public/member/logout>Uitloggen</a>
            {/if}           
        </div> 
    </div>

    <hr>

    <div id="main">

And my form:

<form action="" method="post">
<table class="table_register">
    <tr>
        <td colspan="2"><strong>Persoonlijke gegevens</strong><br>
        Velden met een * zijn verplicht.
        </td>
    </tr>
    <tr>  
        <td>Titel:</td>
        <td><input type="radio" name="title" value="m">Dhr.
            <input type="radio" name="title" value="f">Mevr. *
        </td>
    </tr>
    <tr>
        <td>Voornaam:</td>
        <td><input type="text" name="name"> *</td>
    </tr>
    <tr>    
        <td>Tussenvoegsel</td>
        <td><input type="text" name="name_connection"></td>
    </tr>
    <tr>
        <td>Achternaam:</td>
        <td><input type="text" name="surname"> *</td>
    </tr>
    <tr>
        <td>Postcode:</td>
        <td><input type="text" name="postal_code"> *</td>
    </tr>
    <tr>
        <td>Straatnaam</td>
        <td><input type="text" name="street"> *</td>
    </tr>
    <tr>
        <td>Huisnummer:</td>
        <td><input type="text" name="house_number"> *</td>
    </tr>  
    <tr>
        <td>Woonplaats:</td>
        <td><input type="text" name="city"> *</td>
    </tr>
    <tr>
        <td>Telefoonnummer:</td>
        <td><input type="text" name="phone_home"> *</td>
    </tr>
    <tr>
        <td>Telefoon mobiel:</td>
        <td><input type="text" name="phone_mobile"> *</td>
    </tr>
    <tr height="30">
        <td colspan="2">&nbsp;</td>
    </tr>
</table>

<table class="table_register2">
    <tr>
        <td colspan="2"><strong>inloggegevens</strong> <br>
        Uw e-mailadres en wachtwoord heeft u nodig om toegang te krijgen tot uw gegevens. 
        Tevens zullen we u via dit e-mailadres op de hoogte houden van de status van uw bestellingen. 
        </td>
    </tr>
    <tr>
        <td>E-mailadres:</td> 
        <td><input type="text" name="email"></td> 
    </tr>
    <tr>
        <td>Wachtwoord:</td> 
        <td><input type="password" name="password"></td> 
    </tr>
    <tr>
        <td>Wachtwoord herhalen:</td> 
        <td><input type="password" name="retype_password"></td>
    </tr>
    <tr class="test">
        <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td class="submit"><input type="submit" name="register" value="Verzenden"></td> 
    </tr>
</table>
</form>

and footer:

    </div>

    <div class="sidebar">
    </div>

<div class="footer">

&copy;2012 by Eric Versteeg.
</div>

</div>
</body>
</html>

Upvotes: 0

Views: 1562

Answers (2)

Victoria Ruiz
Victoria Ruiz

Reputation: 5013

Sorry I didn't check back in during the weekend. Were you able to fix it? I tried the code and each browser sets a different height for your TRs. Why don't you try setting the heights yourself? It's a lot of work tho... If I were you, I'd switch to a table-less design. It's a good practice and DIVs are much easier to handle when you need things to be pixel-perfect. If all you're trying to do is get both tables to be the same height, using 478px as the height for both will fix it for Chrome and IE, FF should work too.

Upvotes: 0

Victoria Ruiz
Victoria Ruiz

Reputation: 5013

To begin with, the 2 browsers have different internal stylesheets for default elements. You should begin by applying a CSS reset. Here's a couple of options for you: http://www.cssreset.com/

Also, make sure you have a valid doctype. If that doesn't help we can look deeper in your code.

Upvotes: 1

Related Questions