Jump to content


Photo

1px to short problem in firefox?


  • Please log in to reply
No replies to this topic

#1 aaron118

aaron118
  • Members
  • PipPipPip
  • Advanced Member
  • 30 posts

Posted 23 June 2006 - 12:39 AM

Here is what is should look [a href=\"http://img357.imageshack.us/img357/6646/good5iu.gif\" target=\"_blank\"]like[/a] (in IE and Opera) but this is what it [a href=\"http://img165.imageshack.us/img165/5157/bad0vb.gif\" target=\"_blank\"]looks like[/a] in firefox. As you can see the "Member Info" bar is 1px shorter than it should be. Here is my code:
[!--html--][div class=\'htmltop\']HTML[/div][div class=\'htmlmain\'][!--html1--]<center><img alt='' src='/images/customer-area.gif' />
<form action='./password_proccess.php' method='post'>
<div class='member-wrap'>
<div class='member-left'>
<div class='table-top-wrap'><div class='table-top'><h2>Members Info</h2></div></div>
<table class='main-table-members' cellpadding='0' cellspacing='1'>
<tr>
<td class='column1' width='100%'><b>Welcome John Smith</b><br /><br />
• <a href='/customers/help.php'>Help Page</a><br />
• <a href='/customers/support.php'>Contact Support</a><br />
• <a href='/customers/order.php'>Products</a><br />
• <a href='/customers/email_edit.php'>Change my email</a><br />
• <a href='/customers/password_edit.php'>Change my password</a><br />
• <a href='/customers/logout.php'>Logout</a></td>
</tr>
</table>
</div>
<div class='member-right'>
<div class='table-top-wrap'><div class='table-top'><h2>Change Your Password</h2></div></div>
<table class='main-table-members' cellpadding='0' cellspacing='1'>
<tr>
<td class='column1' width='50%' valign='top'><b>Your new password:</b></td>
<td class='column2' width='50%' valign='top'><input type='password' name='password_edit' /></td>
</tr>
<tr>
<td class='column1' width='50%' valign='top'><b>Confirm your current password:</b></td>
<td class='column2' width='50%' valign='top'><input type='password' name='password_edit2' /></td>
</tr>
<tr>
<td class='column1' width='50%' valign='top'><b>Confirm your current password:</b></td>
<td class='column2' width='50%' valign='top'><input type='password' name='password_confirm' /></td>
</tr>
</table>
</div>
</div>
<div class="clear-div"><br /><br /><br /></div>
<input type="submit" value="Save Changes" />
</form>
</center>[!--html2--][/div][!--html3--]

CSS used:
.member-wrap {
    width: 98%;
    text-align: center;
}

.member-left {
    float: left;
    width: 28%;
    /*height: 100%;*/
    text-align: center;
}

.member-right {
    float: right;
    border: 0;
    width: 71%;
    text-align: left;
}

.main-table-members { 
    margin: 0;
    padding: 0;
    width: 100%;
    height: 200px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    border-top: 0;
}

.table-top-wrap { 
    margin: 0;
    padding: 0;
    border: 1px solid #000000;
    border-bottom: 0;
}

.table-top { 
    margin: 0;
    padding: 0;
    height: 25px;
    background: #175299 url("/images/top_bg.gif");
    color: #FFFFFF;
    font-size: 1em;
    text-align: center;
    border: 1px solid #FFFFFF;
    border-bottom: 0;
}

.table-top h2 {
    padding-top: 4px;
    color: #FFFFFF;
    font-size: 1em;
}

.clear-div {
    font-size:1px;
    overflow:hidden;
    clear:both;
}


I know the problem is caused by the widths in member-right and member-left.

Thanks




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users