PDA

View Full Version : padding don't react in firefox



yub
Dec 22nd, 2008, 07:01 PM
I am a begginner with css and a bit stuck with a problem:
I built a basic page and am still working on the look of it.
In ie6 it looks great, however in firefox, there are spacing problems.
To me it looks like that firefox doesn't react to the padding I am setting to divs.
How can I solve it to not have divs getting to close to each other?
(I am not working with absolute positioning- if that makes any difference...)

Thank you in advance!
yub

Excavator
Dec 22nd, 2008, 07:07 PM
Hello yub,
Good for you for not using absolute positioning! It seems most beginners start out that way, I think DW steers beginners toward using them and shouldn't.

Anyway, there could be many reasons that FF is not reflect changes in padding. We'd really need to see your code. Post it here inside [code ] [ /code] tags

flynch01
Dec 22nd, 2008, 07:07 PM
Firefox and IE apply padding in a different way depending on where the div is positioned. More importantly do you have an example we could see? It's hard to fix a problem you don't know.

yub
Dec 22nd, 2008, 07:20 PM
Wow, that was fast!

Here the html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>99 Copywriters</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="gradient">
<div id="wrap">
<div id="outside_container">
<div id="container">
<div id="header"><img src="images/home_logo2.jpg" width="238" height="116" border="0" usemap="#Map" id="logo">
<map name="Map">
<area shape="rect" coords="10,4,239,109" href="#">
</map>
<p><a href="#" class="grey_link"> login or register </a></p>
</div>

<div id="content">
<div id="quote">
<p>
x”<br>
<a href="#" class="red_link">link</a>
</p><hr> </div>
<div class="launch">
<a href="#"><img src="images/launch_img.jpg" width="300" height="75" border="0"></a>
<table width="299" cellpadding="5" cellspacing="0">
<tr>
<td colspan="2"><h1>Title</h1></td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td width="77" bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
</table>
<a href="#" class="red_link">x</a>
</div>
<div class="find">
<a href="#"><img src="images/find_img.jpg" width="300" height="75" border="0"></a>
<table width="300" cellpadding="5" cellspacing="0" >
<tr>
<td colspan="2"><h2>Title</h2></td>
</tr>
<tr class="rowcolor">
<td>Dx</td>
</tr>
<tr>
<td>x</td>
</tr>
<tr class="rowcolor">
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<tr class="rowcolor">
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<tr class="rowcolor">
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<tr class="rowcolor">
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<tr class="rowcolor">
<td>x</td>
</tr>
</table>
<a href="#" class="green_link">x</a>
</div>
</div>
</div>
</div>
<div id="footer">
<p id="footer_text">
x<br>
x <br>
<a href="#">About Us</a> | <a href="#">Press</a> | <a href="#">Blog</a> | <a href="#">Help</a> | <a href="#">Copyright/IP</a> | <a href="#">Privacy</a><br> </p></div>
</div>
</div>
</body>
</html>


Here the css that goes with it:


/* CSS Document */
body, html {margin:0px;padding:0px;text-align:left;font-family: "trebuchet MS", Verdana, Arial, sans-serif;
font-size: 11px; color:#000000; font-weight:bolder;}
body { min-width:750px;}
#gradient {margin:0 auto; background-color:FFFFFF; background-image:url(images/green_strip.jpg); background-position:top; background-repeat:repeat-x;}
#wrap { margin:0 auto; width:800px;background-color:#ECE9D8;background-image:url(images/main_bg.jpg); background-position:center; background-repeat:repeat-y;}
#outside_container{ width:800px; min-height:600px;}
#container{}
/* Header*/
#header{ margin:0 auto; width: 724px; height: 163px; background-image:url(images/header_bg2.jpg); background-position: right top; background-repeat:no-repeat; padding:0px;}
#header p{
position:absolute;
top:123px;
padding-right:0px;
padding-bottom:0px;
margin:0 auto;
text-align:right;
left: 534px;
width: 150px;
}
/*Logo & Quote*/
#quote{margin:0 auto; text-align:center; padding-bottom: 30px;}
#quote p {padding-bottom: 15px;}
#logo{display:block; float:left; clear:right; padding-top:15px; padding-left:10px; padding-right:5px;}
#logo a{text-decoration:none;}
a.grey_link {text-align:right; text-decoration:none;}
a.grey_link:link { color:#838383;}
a.grey_link:visited { color:#838383;}
a.grey_link:hover { color:#000000;}
a.grey_link:active { color:#838383;}
/* Content*/
#content{ margin: auto; margin-bottom:50px; width: 650px; visibility: visible; padding-top:5px; padding-bottom: 10px;}
#content table { border-collapse: collapse;}
.find { float:right; width:300px;margin:0; padding:0;}
.launch { float:left; width:300px; margin:0; padding:0;}
.launch img{margin-bottom:2px; padding:0;}
.find img{margin-bottom:2px; padding:0;}
.launch table td {border-color: #7D194B; border-style:solid; border-width:thin; }
.find table td { border-color: #006D7B; border-style:solid; border-width:thin; }
.launch a {text-align:right;}
.find a {text-align:right;}
a.red_link:link { color:#7D194B;}
a.red_link:visited { color:#7D194B;}
a.red_link:hover { color:#000000;}
a.red_link:active { color:#7D194B;}
a.red_link2 {text-decoration:none;}
a.red_link2:link { color:#000000;}
a.red_link2:visited { color:#000000;}
a.red_link2:hover { color:#7D194B;}
a.red_link2:active { color:#000000;}
a.green_link {text-align:right;}
a.green_link:link { color:#006D7B;}
a.green_link:visited { color:#006D7B;}
a.green_link:hover { color:#000000;}
a.green_link:active { color:#006D7B;}
.rowcolor { background: #DEDCDC; }
h1{color:#7D194B; font-variant:small-caps; font-size:12px; font-family: "trebuchet MS", Verdana, Arial, sans-serif; margin: 0px 0px 0px 0px;}
h2 {color:#006D7B; font-variant:small-caps; font-size:12px; font-family: "trebuchet MS", Verdana, Arial, sans-serif; font-weight:bold; margin: 0px 0px 0px 0px;}
/* Footer*/
#footer{ margin: 0 auto; margin-top: 20px;width: 800px; height:45px; background-image:url(images/footer_b_bg.jpg); background-position:center; background-repeat:repeat-y; font-size:10px; line-height:14px; clear:both; border-top-color:#791949; border-top-style:solid; border-top-width:thin;}
#footer_text{ color:#FFFFFF; font-weight:bold;}
#footer p { margin: 0px auto; display:block; text-align:center;}
#footer a { color:#FFFFFF; text-decoration:none;}
#footer a:hover { color:#FF99CC; }


Hope that helps you to help me further...

drhowarddrfine
Dec 22nd, 2008, 07:30 PM
In ie6 it looks great, however in firefox, there are spacing problems.That's like saying my 1970 Buick doesn't run like my 2008 Ferrari. :)

To me it looks like that firefox doesn't react to the padding I am setting to divs.Please give an example. IE has significant problems with floats. Firefox does not.

yub
Dec 22nd, 2008, 07:39 PM
I hear...
Sorry about that...

Do you need more than the files I had put up to help me further?

jerry62704
Dec 22nd, 2008, 07:42 PM
You can edit your prior post. The " " in the code tags needs to be removed.

Your DOCTYPE could be:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

(The html tag will need this with the right DOCTYPE.)

I don't know if the original source was formatted in that way, but look at this and see if it isn't easier to follow:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>99 Copywriters</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="gradient">
<div id="wrap">
<div id="outside_container">
<div id="container">
<div id="header">
<img src="images/home_logo2.jpg" width="238" height="116" border="0" usemap="#Map" id="logo">
<map name="Map">
<area shape="rect" coords="10,4,239,109" href="#">
</map>
<p><a href="#" class="grey_link"> login or register </a></p>
</div>

<div id="content">
<div id="quote">
<p>
x”<br>
<a href="#" class="red_link">link</a>
</p>
<hr>
</div>

<div class="launch">
<a href="#"><img src="images/launch_img.jpg" width="300" height="75" border="0"></a>
<table width="299" cellpadding="5" cellspacing="0">
<tr>
<td colspan="2">
<h1>Title</h1></td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td width="77" bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
</table>

<a href="#" class="red_link">x</a>
</div>

<div class="find">
<a href="#"><img src="images/find_img.jpg" width="300" height="75" border="0"></a>
<table width="300" cellpadding="5" cellspacing="0" >
<tr>
<td colspan="2"><h2>Title</h2></td>
</tr>
<tr class="rowcolor">
<td>Dx</td>
</tr>
<tr>
<td>x</td>
</tr>
<tr class="rowcolor">
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<tr class="rowcolor">
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<tr class="rowcolor">
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<tr class="rowcolor">
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<tr class="rowcolor">
<td>x</td>
</tr>
</table>

<a href="#" class="green_link">x</a>
</div>
</div>
</div>
</div>
<div id="footer">
<p id="footer_text">
x<br>
x <br>
<a href="#">About Us</a> | <a href="#">Press</a> | <a href="#">Blog</a> | <a href="#">Help</a> | <a href="#">Copyright/IP</a> | <a href="#">Privacy</a><br>
</p>
</div>
</div>
</div>
</body>
</html>

You are using tables so you should include the other table tags needed for accessibility. Or use css to do the positioning of the page (which is the preferred way).

Excavator
Dec 22nd, 2008, 08:22 PM
It looks like your tables are riding up over the bottom of your #container div.
You need to clear your floats, #launch and #find. Read about clearing here. (http://www.quirksmode.org/css/clearing.html)
I've consolodated everything here, just for debugging, and added bg colors to #quote and #content just to show what it's doing.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>99 Copywriters</title>
<style type="text/css">
body, html {
min-width:750px;
text-align:left;
font: bolder 11px "trebuchet MS", Verdana, Arial, sans-serif;
color: #000;
}
* { /*eliminates all default margin and padding*/
margin:0px;
padding:0px;
border: none;
}
#gradient {
margin:0 auto;
background: #fff url(images/green_strip.jpg) top repeat-x;
/*background-color:FFFFFF; color needs #*/
}
#wrap {
margin:0 auto;
width:800px;
background:#ECE9D8 url(images/main_bg.jpg) center repeat-y;
}
#outside_container{ width:800px; min-height:600px;}
#container{}
/* Header*/
#header{
margin:0 auto;
width: 724px; height: 163px;
background:url(images/header_bg2.jpg) right top no-repeat;
}
#header p{
position:absolute;
top:123px;
padding-right:0px;
padding-bottom:0px;
margin:0 auto;
text-align:right;
left: 534px;
width: 150px;
}
/*Logo & Quote*/
#quote{
background: #ccc;
margin:0 auto;
text-align:center;
padding-bottom: 30px;
}
#quote p {padding-bottom: 15px;}
#logo{display:block; float:left; clear:right; padding-top:15px; padding-left:10px; padding-right:5px;}
#logo a{text-decoration:none;}body, html {margin:0px;padding:0px;text-align:left;font-family: "trebuchet MS", Verdana, Arial, sans-serif;
font-size: 11px; color:#000000; font-weight:bolder;}
body { min-width:750px;}
#gradient {margin:0 auto; background-color:FFFFFF; background-image:url(images/green_strip.jpg); background-position:top; background-repeat:repeat-x;}
#wrap { margin:0 auto; width:800px;background-color:#ECE9D8;background-image:url(images/main_bg.jpg); background-position:center; background-repeat:repeat-y;}
#outside_container{ width:800px; min-height:600px;}
#container{}
/* Header*/
#header{ margin:0 auto; width: 724px; height: 163px; background-image:url(images/header_bg2.jpg); background-position: right top; background-repeat:no-repeat; padding:0px;}
#header p{
position:absolute;
top:123px;
padding-right:0px;
padding-bottom:0px;
margin:0 auto;
text-align:right;
left: 534px;
width: 150px;
}
/*Logo & Quote*/
#quote{margin:0 auto; text-align:center; padding-bottom: 30px;}
#quote p {padding-bottom: 15px;}
#logo{display:block; float:left; clear:right; padding-top:15px; padding-left:10px; padding-right:5px;}
#logo a{text-decoration:none;}
a.grey_link {text-align:right; text-decoration:none;}
a.grey_link:link { color:#838383;}
a.grey_link:visited { color:#838383;}
a.grey_link:hover { color:#000000;}
a.grey_link:active { color:#838383;}
/* Content*/
#content{
overflow: auto; /*to clear your floats*/
background: #ff00ff;
margin: 0 auto 50px auto;
width: 650px;
padding: 5px 0 10px 0;
}
#content table { border-collapse: collapse;}
.find { float:right; width:300px;margin:0; padding:0;}
.launch { float:left; width:300px; margin:0; padding:0;}
.launch img{margin-bottom:2px; padding:0;}
.find img{margin-bottom:2px; padding:0;}
.launch table td {border-color: #7D194B; border-style:solid; border-width:thin; }
.find table td { border-color: #006D7B; border-style:solid; border-width:thin; }
.launch a {text-align:right;}
.find a {text-align:right;}
a.red_link:link { color:#7D194B;}
a.red_link:visited { color:#7D194B;}
a.red_link:hover { color:#000000;}
a.red_link:active { color:#7D194B;}
a.red_link2 {text-decoration:none;}
a.red_link2:link { color:#000000;}
a.red_link2:visited { color:#000000;}
a.red_link2:hover { color:#7D194B;}
a.red_link2:active { color:#000000;}
a.green_link {text-align:right;}
a.green_link:link { color:#006D7B;}
a.green_link:visited { color:#006D7B;}
a.green_link:hover { color:#000000;}
a.green_link:active { color:#006D7B;}
.rowcolor { background: #DEDCDC; }
h1{color:#7D194B; font-variant:small-caps; font-size:12px; font-family: "trebuchet MS", Verdana, Arial, sans-serif; margin: 0px 0px 0px 0px;}
h2 {color:#006D7B; font-variant:small-caps; font-size:12px; font-family: "trebuchet MS", Verdana, Arial, sans-serif; font-weight:bold; margin: 0px 0px 0px 0px;}
/* Footer*/
#footer{ margin: 0 auto; margin-top: 20px;width: 800px; height:45px; background-image:url(images/footer_b_bg.jpg); background-position:center; background-repeat:repeat-y; font-size:10px; line-height:14px; clear:both; border-top-color:#791949; border-top-style:solid; border-top-width:thin;}
#footer_text{ color:#FFFFFF; font-weight:bold;}
#footer p { margin: 0px auto; display:block; text-align:center;}
#footer a { color:#FFFFFF; text-decoration:none;}
#footer a:hover { color:#FF99CC; }
</style>
</head>

<body>
<div id="gradient">
<div id="wrap">
<div id="outside_container">
<div id="container">
<div id="header">
<img src="images/home_logo2.jpg" width="238" height="116" border="0" usemap="#Map" id="logo">
<map name="Map">
<area shape="rect" coords="10,4,239,109" href="#">
</map>
<p><a href="#" class="grey_link"> login or register </a></p>
</div>

<div id="content">
<div id="quote">
<p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
x<br>
<a href="#" class="red_link">link</a>
</p>
<hr>
</div>

<div class="launch">
<a href="#"><img src="images/launch_img.jpg" width="300" height="75" border="0"></a>
<table width="299" cellpadding="5" cellspacing="0">
<tr>
<td colspan="2">
<h1>Title</h1></td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td width="77" bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
<tr>
<td width="203"><a href="#" class="red_link2">y</a></td>
<td bgcolor="#DEDCDC">$200</td>
</tr>
</table>

<a href="#" class="red_link">x</a>
<!--end launch--></div>

<div class="find">
<a href="#"><img src="images/find_img.jpg" width="300" height="75" border="0"></a>
<table width="300" cellpadding="5" cellspacing="0" >
<tr>
<td colspan="2"><h2>Title</h2></td>
</tr>
<tr class="rowcolor">
<td>Dx</td>
</tr>
<tr>
<td>x</td>
</tr>
<tr class="rowcolor">
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<tr class="rowcolor">
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<tr class="rowcolor">
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<tr class="rowcolor">
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<tr class="rowcolor">
<td>x</td>
</tr>
</table>

<a href="#" class="green_link">x</a>
<!--end find--></div>
<!--end content--></div>
<!--end container--></div>
<!--end outside_container--></div>
<div id="footer">
<p id="footer_text">
x<br>
x <br>
<a href="#">About Us</a> | <a href="#">Press</a> | <a href="#">Blog</a> | <a href="#">Help</a> | <a href="#">Copyright/IP</a> | <a href="#">Privacy</a><br>
</p>
</div>
<!--end wrap--></div>
<!--end gradient--></div>
</body>
</html>


The one I found that won't add bottom padding is #quote. I'm not sure why. In the above example I added some text to it just to see what happens.

I indented your code as well, like jerry did, but I always like to add a comment next to the closing tag so it's obvious what it does.

Excavator
Dec 22nd, 2008, 08:28 PM
Once you have the floats cleared and a bg color on #quote, try this:

background: #ccc;
margin:0 auto;
text-align:center;
padding: 10px 10px 1000px 10px;
}

Then try this

background: #ccc;
margin:0 auto;
text-align:center;
padding: 100px 10px 1000px 10px;
}

Padding and margin written that way go clockwise - top,right,bottom,left.

The margin works for top, right and left... just not bottom.

I still don't know why.

yub
Dec 29th, 2008, 07:21 PM
First of all, thank you for working on my code!
I went over it.
Thank you for the tip about the padding and margin.
Is it correct, that when you want the same amount for all sides, you just put one amount into the padding tag?
For some reason however, I can't get the find and launch table to get padding.
I might add it to the wrong place.
That's where I added it to:



.find table{padding:10px;}
.launch table{padding:10px;}


I do have another question within my code.
I don't think it is however might be related to my original question.
The red and green link don't right align, although it says the following in the code:
.launch a {text-align:right;}
.find a {text-align:right;}

Is that connected to the floating problem?
Thank you in advance!

Excavator
Dec 29th, 2008, 08:15 PM
Is it correct, that when you want the same amount for all sides, you just put one amount into the padding tag?

margin: 2px; would be the same as margin-top:2px;margin-right:2px;margin-bottom:2px;margin-left:2px;

margin: 0 auto; is the same as margin-top:0;margin-right:auto;margin-bottom:0;margin-left:auto;


--Do you have a link you can give us? Would be easier to see it live than rebuilding it local.

yub
Dec 30th, 2008, 10:59 AM
Click here (http://www.yudkoprogramming.com/yb/page3.htm)to see the page uploaded.

Hope that get you further...