1px to short problem in firefox [Archive]

View Full Version : 1px to short problem in firefox

aaron118

06-21-2006, 01:52 PM

Here is what is should look like (http://img357.imageshack.us/img357/6646/good5iu.gif) (in IE and Opera) but this is what it looks like (http://img165.imageshack.us/img165/5157/bad0vb.gif) in firefox. As you can see the "Member Info" bar is 1px shorter than it should be. Here is my code:
<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>

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

JBelthoff

06-21-2006, 05:35 PM

What DocType are you using?

aaron118

06-21-2006, 05:50 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

JBelthoff

06-21-2006, 06:06 PM

I just copied and pasted your code to a web page and the code you pasted is nothing like the images you included in your original post.

I did add a closing braket to this:
.member-right {
float: right;
border: 0;
width: 71%;
text-align: left;

Secondly, it would not be the member-right and member-left as these are the outer wrappers and your images suggest that the H2, or there abouts, is the problem.

If you could paste the code that you used to generate those images it would certainly help.

:peace:

JBelthoff

06-21-2006, 06:48 PM

Just as a side note you might want to start with good - clean - HTML as well. You seem to be mixing HTML and CSS.

As and example your HTML could be stripped to be this.
<h1>Members Info</h1>
<h2>Welcome John Smith</h2>
<ul>
<li><a href="/customers/help.php">Help Page</a></li>
<li><a href="/customers/support.php">Contact Support</a></li>
<li><a href="/customers/order.php">Products</a></li>
<li><a href="/customers/email_edit.php">Change my email</a></li>
<li><a href="/customers/password_edit.php">Change my password</a></li>
<li><a href="/customers/logout.php">Logout</a></li>
</ul>

<form action="./password_proccess.php" method="post">
<h2>Change Your Password</h2>
<table>
<tr>
<th><label for="password_edit">Your new password:</label></th>
<td><input type="password" id="password_edit" name="password_edit" /></td>
</tr>
<tr>
<th><label for="password_edit2">Confirm your current password:</label></th>
<td><input type="password" id="password_edit2" name="password_edit2" /></td>
</tr>
<tr>
<th><label for="password_confirm">Confirm your current password:</label></th>
<td><input type="password" id="password_confirm" name="password_confirm" /></td>
</tr>
</table>
<p><input type="submit" value="Save Changes" /></p>
</form>

Then you can start to add div's for positioning and later css styling. I always find it easier to start from scratch.

Just my 2 pennies anyway...

:peace:

aaron118

06-21-2006, 07:08 PM

The code I posted is the code I am using? I just missed that closing bracket whilst pasting it on here.

JBelthoff

06-21-2006, 09:25 PM

The code I posted is the code I am using? I just missed that closing bracket whilst pasting it on here.

Hrmmmmm...

Because in your images your table cells are grey and that color is not found in either your HTML or CSS.

I will check again.

JBelthoff

06-21-2006, 09:41 PM

I checked again...

Sorry but the code you have pasted here does not produce the output that you have in your images.

See here:
.member-wrap {
width: 98%;
text-align: center;
}

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

This would cause your, improperly coded, bulleted list to be center justified. However in your images that text is clearly flush left. You have left something out of your sample code.

JBelthoff

06-21-2006, 10:41 PM

As far as your original post it looks to me like your table on the left is pushing the div out a little more in FF.

However, you should really clean up your code.

I did this quickly and it should get you started. It is based on the HTML I posted above.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Form Layout 1</title>
<script type="text/javascript"></script>
<style type="text/css" media="all">

#container
{
background-color: #eee;
width: 98%;
margin: 0 auto 0 auto;
}
#left
{
float: left;
width: 27%;
border: solid 1px #000;
}
#left h1
{
font: bold .94em Verdana, Arial, Sans-Serif;
text-align: center;
background-color: #175299;
color: #fff;
margin: 1px;
padding: 2px 0px 2px 0px;
}
#left h2
{
padding: 0px 0px 8px 4px;
font: bold .82em Verdana, Arial, Sans-Serif;
}
#left ul
{
font: .76em/1.2em Arial, Sans-Serif;
margin-left: 22px;
padding: 0;
}
#right
{
float: right;
width: 71%;
border: solid 1px #000;
}
#right h2
{
font: bold .94em Verdana, Arial, Sans-Serif;
text-align: center;
background-color: #175299;
color: #fff;
margin: 1px;
padding: 2px 0px 2px 0px;
}
#t-form
{
table-layout: fixed;
width: 99.55%;
margin: 0 auto 0 auto;
border-collapse: collapse;
}
#t-form td, #t-form th
{
border: solid 1px #fff;
height: 46px;
vertical-align: top;
padding-left: 4px;
font: .76em/1.2em Arial, Sans-Serif;
}
#t-form th
{
background-color: #ddd;
text-align: left;
font-weight: bold;
}
#t-form td
{
background-color: #ccc;
}
p
{
clear: both;
text-align: center;
padding: 12px 0px 12px 0px;
}
</style>
</head>
<body>

<div id="container">
<div id="left">
<h1>Members Info</h1>
<h2>Welcome John Smith</h2>
<ul>
<li><a href="/customers/help.php">Help Page</a></li>
<li><a href="/customers/support.php">Contact Support</a></li>
<li><a href="/customers/order.php">Products</a></li>
<li><a href="/customers/email_edit.php">Change my email</a></li>
<li><a href="/customers/password_edit.php">Change my password</a></li>
<li><a href="/customers/logout.php">Logout</a></li>
</ul>
</div>

<form action="./password_proccess.php" method="post">
<div id="right">
<h2>Change Your Password</h2>
<table id="t-form">
<tr>
<th><label for="password_edit">Your new password:</label></th>
<td><input type="password" id="password_edit" name="password_edit" /></td>
</tr>
<tr>
<th><label for="password_edit2">Confirm your current password:</label></th>
<td><input type="password" id="password_edit2" name="password_edit2" /></td>
</tr>
<tr>
<th><label for="password_confirm">Confirm your current password:</label></th>
<td><input type="password" id="password_confirm" name="password_confirm" /></td>
</tr>
</table>
</div>

<p><input type="submit" value="Save Changes" /></p>

</form>

</div>

</body>
</html>

:peace:

aaron118

06-22-2006, 11:40 AM

Thanks for the code but, how can I make the left table have an inner border of #FFF like the right table?

Thanks

JBelthoff

06-22-2006, 11:53 AM

First of all there is only 1 table. That is for the Change Your Password form.

Secondly, you should really do some reading up on XHTML with CSS because your questions present errors in your approach that with a little more knowledge you would not be asking them in that fashion.

Try Here:
http://www.alistapart.com/
http://www.csszengarden.com/

Or any of the other real CSS sites out there.

Last to answer your question. To make a border, wrap your element[s] in a div and give the div a CSS border. You can set all 4 borders at once or set each of them separately for various effects.

:peace:

aaron118

06-22-2006, 02:11 PM

I know there is only one table, I meant the members info section looked like a table.

aaron118

06-22-2006, 02:58 PM

Using you code, I just can't get my desired style using all divs and css. What is the problem with using a couple of little tables?