CSS - Problem In Ie With Padding And Span

I've quickly created a small website for a friend of mine and it's the first time I've used <div> and <span> tags. It probably shows , because now it's a mixture of all kinds of layout methods. But anyway, it works fine in IE (what a lovely tolerant browser) but it messes up in Firefox.
Have a look he www.duikeninegypte.nl

The block text in the left column in the middel shows up fine in IE but is moved to the right in Firefox. Both pieces of text are defined in another file, so here it concerns the left part (_HOMEDUUR) and the middle part (_HOMEBODY). Why does it work in IE but not in Firefox?

Cheers for any feedback!
Gurt

PHP Code:
echo " <center><div id=\"backholder\" style=\"position: relative; height: 576px; width: 720px;\"> ";
// background image
echo " <IMG SRC=\"images/homeback.jpg\" style=\"position:absolute; left:0; top:0;\" border=\"0\" title=\"\"> ";
//start navigation menu
echo " <IMG SRC=\"images/nav-home-sel.gif\" style=\"position:absolute; left:5; top:10;\" border=\"0\" title=\"\"> ";
echo " <a href=\"inhoud.php\"><IMG SRC=\"images/nav-inhoud-def.gif\" style=\"position:absolute; left:5; top:70;\" border=\"0\" title=\"\"></a> ";
echo " <a href=\"bestel.php\"><IMG SRC=\"images/nav-bestel-def.gif\" style=\"position:absolute; left:5; top:130;\" border=\"0\" title=\"\"></a> ";
// end navigation

// left panel
echo " <span style=\"position: absolute; left: 20; top: 190;\"> ";
echo " <table width=\"200\" border=\"0\"><tr><td width=\"100%\"><font color=\"#ffffff\">"._HOMEDUUR."</font></td></tr></table> ";
echo " </span> ";

// body panel
echo " <span style=\"position: absolute; left: 235px; top: 90px;\"> ";
echo " <table width=\"480\" border=\"0\"><tr><td width=\"100%\">"._HOMEBODY."<br><br>"._HOMECREDITS."</td></tr></table> ";
echo " </span> ";

echo " </div></center> "; 

I have an alignment issue that is driving me crazy. For whatever reason, the text that I have in a <span> field is dropping too far down for the last line. Here is a screenshot of the relevant text:

Yada yada

For whatever reason I can't keep the final "Yada" from dropping farther down. It is in the following <td> field:

Code:

<td style="height: 200px; width: 150px; vertical-align: top; padding-top: 10px">

And the class for the span has the following characteristics:

Code:

.announcement_body
{
color: black;
font-size: x-small;
}

I can't see what would cause this. I've already tried adjusting the height of the <td> field without any luck. I did get consistent spacing when I added the characteristics "vertical-align: middle", but that made the distance between every line too large.

Any idea what I'm missing here?

Stephen

Hi, first of all i'm a bit new to this, but not a Compleet noob. pls be kind

Ok, so my issue is i have a type of image gallery made with spans.
I have the span tags enclosed by the <a href> tag. Spans are floating.
The reason for this is that I want to have the border change colors on hover,
wherever the pointer might be located in the span.

It works great in firefox and IE8, but i just discovered this morning, much to my dismay,
that it doesn't work in IE7 or below. of course it was the person i'm making the web
page for that pointed this out, go figure. The problem is that eventhough IE shows
that it is a link, when clicking on the image, nothing happens. text works find,
the area around image and text works fine, just not the image.

I tried searching google for a couple hours and could not find a fix that didn't involve
javascript. I'm trying to avoid JS as much as possible, and so far all has gone well.
Ok down to the nitty gritty.

I stripped down the html so that it just shows one of the spans, so if you drop the code
into notepad and save as htm you can play with it. css link is complete to my hosted css file.

honestly im not sure why im using that doc-type, i don't completely unerstand the mechanics,
i just thought for no sound reason at all that it would be better than html doc type.
xhtml 1.0 validates and css validates as 2.1.

Code:

<?xml version="1.1" encoding="utf-8"?>
<!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" xml:lang="en">
<head>
<title>Bella Luna Gifts for the Soul - Wands</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.bellalunagifts.net/main.css" />
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;}
#menu ul {text-align:left;}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;} 
#menu a, #menu h2 {
font: bold 12px/16px arial, "lucida console", sans-serif; padding: 3px 2px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-container">

<div id="content">
<a href="http://www.bellalunagifts.net/rose_quartz_healing_wand.htm">
<span class="thumbnailleft"><img class="image" src="products/tn/rose_quartz_healing_wand.gif"
alt="Rose Quartz Healing Wand" width="150" /><br/><br/>Rose Quartz Healing Wand<br /></span></a>
</div>

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

If you just wanna glance at the css affecting the span and image, here it is.

Code:

.thumbnail {
 float: left;
 width: 150px;
 height: 210px;
 margin: 0 20px 15px 0px;
 padding: 5px;
 text-align: center;
 border-style: ridge;
 border-color: #3333FF;
 text-decoration:none;
}

a {text-decoration: none;color: #000000;}
a:link .image {border-style: none;}
a:active .image {border-style: none;}
a:hover .thumbnailleft {
 border-color: #00CCFF;}
a:hover .thumbnail {
 border-color: #00CCFF;}
a:visited {text-decoration: none;color: #000000;}
a:visited .image {border-style: none;}

and i dont know why my docs are .htm instead of html.....long time ago i had a reason
that may or may not have been valid but i should probably change to .html, yeah?

well the link to the page im working on is

http://www.bellalunagifts.net/wands.htm

this is the last immediate piece of foundation code that i need to figure out to start rolling
out the rest of the website. this is the first time i've posted for help, i really do try to
figure out stuff on my own, but am ready to throw my head through the screen right now.

and hell, if i'm goin about this in a silly way, pls tell me. i always welcome criticism.

any help would be much much appreciated. i'm gonna keep trying to figure this out, but
i'm hoping that one of you already knows what i'm doing wrong. i know my css code is probably
redundant in places, but for now i'm just working on getting things to work.
thx in advance for any reply.

The line "between" the columns is actually a background image in the second column.

I'd like to reduce the area between the top of the text and the top of the div (so the text is about even with the line).

I've tried setting the padding to 0, but that has no effect.

Any ideas?



Code:

#inner_wrap_2_col {
margin:0 auto;
width:690px;
}
#news_col_left {
float:left;
width:345px;
color: #330;
line-height: 1.5em;
	
padding: 0;	
}
#news_col_right {
float:right;
width:345px;
color: #330;
line-height: 1.5em;
background:url("./images/news_bg.gif");
background-repeat: repeat-y;
}

Admin Page

Okay, on that page the left side navigation menu I setup a table along with some DIV tags with CSS to put a little border around each division of the page. For some reason the padding around the header for each box is rather large when I view it in internet explorer. I set the padding to 1px on the header div and the nav div. The odd thing is in dreamweaver's preview window everything looks fine except for a spilt between each div tag. Am I missing something?

Here is part of my CSS code:
/*Admin Page*/
H1 {font-size:20px;
text-align:center;
text-indent: .1em;
font-weight:bold;
font-family:Garamond;
letter-spacing: .1em
}
H2 {font-size:18px;
text-align:center;
text-indent: .1em;
font-weight:bold;
font-family:Garamond;
letter-spacing: .3em
}
.admin-nav{
font-size:14px;
font-weight:400;
font-family:Arial;
border:1px solid black;
padding: 10px;
background-color:#CCCCCC
}
.admin-nav-header{
border:1px solid black;
padding: 1px;
background-color:#CCCCCC
}

Im running IE6 and its on an Intranet so for the moment Im only keen on getting it to work in IE5/6.

I have got the following HTML and CSS.

When I remove the CSS 'display: block; padding-bottom: 0px;' the links list views fine, but when I include it, the list spaces right out and I can't control the level of padding. Its really weird.. Im pretty sure this is where the error is but Im not exactly sure what it is.. I have not had problems in the past implementing a display type of BLOCK before, so not sure what is doing it now... Any ideas would be great...

Can post the whole template and assets if that helps...

Code:

<ul><li class="mainNav"><a href="about.htm" onMouseOver="MM_showMenu(window.mm_menu_1111120312_5,180,160,null,'navigation1');" onMouseOut="MM_startTimeout();">About Us</a></li>
<li class="mainNav"><a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1015140727_0,170,170,null,'navigation1');">Our Programs</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020105028_0,170,185,null,'navigation1');">Managing our People</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020115125_0,170,195,null,'navigation1');">Managing our Money</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();"
onMouseOver="MM_showMenu(window.mm_menu_1020121338_4,170,220,null,'navigation1');">Supporting our Business</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020121623_3,170,235,null,'navigation1');">Ministerial and Parliamentary</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020121709_2,170,255,null,'navigation1');">IT Systems & Support</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020121752_1,170,275,null,'navigation1');">Staff New & Events</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020121857_0,170,290,null,'navigation1');">Staff & Territory Offices</a></li>
</ul>

##############
CSS
li.mainNav {
	list-style: url('../images/common/navarrow.gif');
	margin-bottom: 5px;
	font-size : .80em;
	
}
li.mainNav a:link {
	display: block;
	padding-bottom: 0px;
	color: #283164;
	text-decoration: none;
}
li.mainNav a:visited{
	display: block;
	padding-bottom: 0px;	
	text-decoration: none;	
}
li.mainNav a:hover {
	display: block;
	padding-bottom: 0px;
	text-decoration: underline;
}
li.mainNav a:active {
	display: block;
	padding-bottom: 0px;
	text-decoration: underline;
}

I'm using the following code. I'd like the DIV that surounds the up / down images to more tightly wrap the images (there is too much space between the top and bottom border and the images). I'm having trouble understanding how to accomplish this.
Code:

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

<html>
<head>
	<title>Untitled</title>
	<style>
	.nav_box {	
		width: 95%;
		padding: 1px 1px 1px 2px;
		margin-top: 10px;
		margin-bottom: 10px;
		border: 1px solid #003366;
		background-color: #eef7ff;
		text-align : left;	
	}	
	</style>
</head>

<body>

<div class="nav_box">
	<img ... />
	<img ... />
	&nbsp;Row Zero
</div>	

</body>
</html>

Hello friends

I try to put padding and borders in a image with the follow code :
img {
border: 1px solid #666666;
padding: 3px;
}

It works with the firefox and opera but not with IE ...

Why?

Thanks

Heyhey

Probably a very simple solution to this, but I just can't find it.

Nesting DIVs and adding padding to the parent, so I can position the DIV within.

I'm subtracting the amount of padding I am using from the width and height so that everything else around it will fit ok.


Works fine in all browsers, apart from IE 5.5, which ignores the padding (thus making the div too small because of the subtracting of width and height from the parent DIV).


Sample code:

#holdera
{
background:url(images/header_banner_a.png) no-repeat;
width:80px;
height:57px;
padding-top:25px;
padding-left:80px;
float:left;
}

#buttona
{
width:62px;
height:27px;
}


I could use margins on the inner DIV instead, but that brings up a problem with Netscape. The DIV positions shift because of no padding on the parent.


Real pain, anybody have any suggestions?

Cheers

Hello. I have a horizontal nav bar with a background color. When I add left padding it does do that but adds that amount of space onto the right side of the div so it's sticking out of my layout. What am I doing wrong?

Here is my code:

Code:

body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #C0BFAB;
	background-position: 195px 140px;
	margin-left: auto;
	margin-right: auto;
	width:800px;
}

#header {
	position: absolute; 
	margin-left: 140px; 
	margin-top: 5px; 
	width: 790px; 
	height: 173px; 
	z-index: 2;
	background-image:url(images/header.gif)
}

#topnav  {
	position: absolute;
	margin-left: 140px;
	margin-top: 178px;
	width: 790px;
	height: 17px;
	padding-left: 2em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color:#C0BFAB;
	background-color:#786350;
	z-index: 31;
}

#main {
	position: absolute; 
	margin-left: 140px; 
	margin-top: 195px; 
	width: 790px; 
	height: 606px; 
	z-index: 3;
}

#footline {
	position: absolute;
	margin-left: 140px;
	margin-top: 802px;
	width: 790px;
	height: 13px;
	background-color:#786350;
	z-index: 18;
}

#footer {
	position: absolute;
	margin-left: 140px;
	margin-top: 815px;
	width: 790px;
	height: 34px;
	z-index: 19;
	background-image: url(images/footer.gif);
	top: 0px;
}

#bottomnav  {
	position: absolute;
	margin-left: 140px;
	margin-top: 815px;
	width: 790px;
	height: 13px;
	padding-right: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color:#786350;
	text-align: right;
	z-index: 32;
}

.binkwaffle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	background-image: url(images/Aric-Smiling-gradient-BG.gif);
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
}

.style1 {
	font-family: Georgia, "Times New Roman", Times, serif; 
	background-color: #FFFFFF; 
	background-image: url(images/Aric-Smiling-gradient-BG.gif); 
	background-repeat: no-repeat; 
	margin-left: auto; 
	margin-right: auto; 
	font-size: 14px; 
}

Code:

<HTML>
<HEAD>
<TITLE>binkwaffle</TITLE>

<style type="text/css">
<!--
@import url(binkwaffle_test.css);
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</HEAD>
<BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

<div id="header"></div>
<div id="main" class="binkwaffle"></div>
<div id="footline"></div>
<div id="footer"></div>
<div id="topnav">home cards faq about contact</div>
<div id="bottomnav">home cards faq about contact</div>


	
	
	

</BODY>
</HTML>

Also the centering doesn't seem to be working.

Thanks for the help.

on my site http://www.fasttracksites.com/ i have the right column set to a width that has my padding subtracted from it so that it will sit off of the left border, and off of the right side, the overall div for the center of the page is 800px and everything is based off of this, the file containing my css is http://www.fasttracksites.com/stylesheets/main.css

The problem is that even though the padding is set, the right column still sits on the borders, if anyone can help me fix this, i would greatly appreciate it

I've written a menu in css and I want to show the user what page they are on by having a little block of colour next to the link that they are on. This link should explain it better:

http://www.midwivesonline.com/test.html

at least it will do in everything but IE6 on windows where it stretches out too far to the right.

The problem lies in the css:

http://www.midwivesonline.com/styles/test.css

In particular:

.currentpagep {
padding-right: 155px;
border-right: 5px solid #85306B;
}

If I set the padding-right to just 5px then it's perfect in IE6 but screwed up everywhere else. From the tests I've done I don't think that it's a doctype issue - but then again not sure what the solution is...

I'd really appreciate any help on this,

Cheers,

Tim

Hi,

I am finishing up my site and I have decided to add to footer image to each page but when I attempt to add it on a page that has padding whether it be after the text with padding or not the image is detached by approx the padding size from the bottom.

I have been toying around for hours but with no success.
I have also been reading some of the tutorials given to me by the members here which have helped greatly but I am stumped.

The image in question is Code:

<img src="images/footer.jpg" alt="For more information, please visit the FAQs or the forum." name="footer" id="footer" />

If you need me to upload the pics I can do that (website down atm hence the code instead of a url)
(With how great you guys are, I can nearly guarantee that It will only require an extra line added to the css)

Code:

<!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" >  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <link rel="stylesheet" type="text/css" href="./index.css" media="all" />  <link rel="shortcut icon" href="http://torquesro.info/favicon.ico" />  <meta name="verify-v1" content="RhiSLQkMtmAKlbQN7TUe1DnWYD/Mxl0ROy7UiZlDGCU=" />  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  <title>TorqueSRO - FAQ</title>  <meta name="description" content="We offer tools for Silkroad Online in order to provide advanced functions, automate game options and deliver new functionality."/>  <meta name="keywords" content="Silkroad, Silkroad Online, Torque, TorqueSRO, tClientless, silkroad clientless, silkroad walkthrough, silkroad tools, Mmorpg, silk, sr33, cheat, hack, sro"/>  <meta name="copyright" content="Copyright TorqueSRO - 2009"/>  <meta name="author" content="UrbanGrafix"/>  <meta name="Distribution" content="Global"/>  <meta name="Rating" content="General"/>  <!--[if IE]>  <style type="text/css" media="all">.borderitem {border-style:solid;}</style>  <![endif]-->  </head>  <body>  <div id="container">  <div id="main">  <a href="/index.html"><img src="images/HomeButton.jpg" id="HomeButton"  alt="TorqueSRO" /></a>  <a href="/tclientless.html"><img src="images/clientless.jpg" id="clientless"  alt="tClientless" /></a>  <a href="/faq.html"><img src="images/FaqButton.jpg" id="FaqButton"  alt="FAQs" /></a>  <a href="/videos.html"><img src="images/VideosButton.jpg" id="Links"  alt="Videos" /></a>  <a href="/forum"><img src="images/ForumButton.jpg" id="AboutButton"  alt="Forum" /></a>  </div>    <div id="ad">  </div>    <div id="main1">  <img src="images/mainlogo.jpg"  alt="TorqueSRO" name="Domi2" id="Domi2" /><img src="images/Main2ndBannerSRO.jpg"  alt="" name="Main2ndBanner" id="Main2ndBanner" /></div>      <div id="Content">  <div id="ContentMain">  <p style="text-align: left"><a href="#a">Q. I’m getting an error when  I run tClientless, it says the side-by-side configuration is incorrect.</a></p>  <p style="text-align: left"><a href="#b">Q. How do I login multiple  accounts?</a></p>  <p style="text-align: left"><a href="#c">Q. tClientless crashed! Why  did this happen?</a></p>  <p style="text-align: left"><a href="#d">Q. How can I make a  character a master for every character logged in through tClientless?</a></p>  <p style="text-align: left"><a href="#e">Q. I want to delete an  alias, how can I do that?</a></p>  <p style="text-align: left"><a href="#f">Q. tClientless says the  authentication failed and/or cannot connect to the server.</a></p>  <p style="text-align: left"><a href="#g">Q. I missed out on the BETA,  will I be able to use tClientless?</a></p>  <p style="text-align: left">&nbsp;</p>  <p style="text-align: left">&nbsp;</p>  <p style="text-align: left">&nbsp;</p>  <p style="text-align: left">&nbsp;</p>  <p style="text-align: left">&nbsp;</p>    <p style="text-align: left"><strong><a name="a" id="a"></a>Q. I’m getting an error when  I run tClientless, it says the side-by-side configuration is incorrect.</strong><br />    A.  Download and install this: <a href="http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf&displaylang=en">http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf&displaylang=en</a> </p>      <p style="text-align: left"><br />    <strong><a name="b" id="b"></a>Q. How do I login multiple  accounts?</strong><br />    A.  Simply type the account information and hit login again, tClientless will  handle everything.</p>      <p style="text-align: left"><br />    <strong><a name="c" id="c"></a>Q. tClientless crashed! Why  did this happen?</strong><br />    A.  Well, first you should note that tClientless is only in the BETA (development)  stages. The reason it crashed it likely due to incorrect parsing, send the  “lastpacket.txt” file to bot90210 so that I can fix this issue.</p>      <p style="text-align: left"><br />    <strong><a name="d" id="d"></a>Q. How can I make a  character a master for every character logged in through tClientless?</strong><br />    A.  Go to File->Master Manager and enter the character’s name. They will be  saved as a global master and will be able to use master commands for every  character.</p>      <p style="text-align: left"><br />    <strong><a name="e" id="e"></a>Q. I want to delete an  alias, how can I do that?</strong><br />    A.  Go to File->Alias Manager and delete the alias entry.</p>      <p style="text-align: left"><br />    <strong><a name="f" id="f"></a>Q. tClientless says the  authentication failed and/or cannot connect to the server.</strong><br />    A.  This could happen for various reasons, the most common are that our server is  experiencing issues or you are not registered with the BETA test.</p>      <p style="text-align: left"><br />    <strong><a name="g" id="g"></a>Q. I missed out on the BETA,  will I be able to use tClientless?</strong> <br />    A. Possibly.  We’ve limited the users that can join the BETA because we don’t want to  overload the server, if the server can handle 300 users comfortably then you  will increase the limit. We’ve made tClientless connect to our servers because  we’re sick of people posting it elsewhere.</p>  </div>  <img src="images/footer.jpg" alt="For more information, please visit the FAQs or the forum." name="footer" id="footer" />  </div>        <form action="http://www.google.com/cse" id="cse-search-box" target="_blank">  <div align="right">    <input type="hidden" name="cx" value="partner-pub-4151060843783741:adaty3-25z5" />    <input type="hidden" name="ie" value="ISO-8859-1" />    <input type="text" name="q" size="20" />    <input type="submit" name="sa" value="Search" />  </div></form><script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>    <a href="http://validator.w3.org/check?uri=referer"><img          src="http://www.w3.org/Icons/valid-xhtml10-blue"          alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>  <a href="http://jigsaw.w3.org/css-validator/check/referer">      <img style="border:0;width:88px;height:31px"          src="http://jigsaw.w3.org/css-validator/images/vcss-blue"          alt="Valid CSS!" /></a>      </div>  <script type="text/javascript">  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));  </script>  <script type="text/javascript">  try {  var pageTracker = _gat._getTracker("UA-10605650-1");  pageTracker._trackPageview();  } catch(err) {}</script>  <!-- Piwik -->  <script type="text/javascript">  var pkBaseURL = (("https:" == document.location.protocol) ? "https://torquesro.info/piwik/" : "http://torquesro.info/piwik/");  document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));  </script>  <script type="text/javascript">  try {  var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1);  piwikTracker.trackPageView();  piwikTracker.enableLinkTracking();  } catch( err ) {}  </script><noscript><p><img src="http://torquesro.info/piwik/piwik.php?idsite=1" style="border:0" alt=""/></p></noscript>  <!-- End Piwik Tag -->  </body>  </html>  

Code:

html, body {  	margin:0;  	padding:0;  }    body {  	background-image: url(images/bglong209.png) ;  	background-repeat: repeat-x;      text-align:center;  	padding:0px;  }  .p {  	margin:0px;  	padding:0px;  	font-size: inherit;  	font-family: inherit;  	font-weight: inherit;  	text-align: inherit;  	color: inherit;  	line-height: inherit;  	vertical-align: top;  }  #container {  	width:654px;  	margin:0px auto;  	top: 0;  }  #ad {  	  }  p {  	padding-top:0px;  	margin-top:0px;  	color: #000;  	background-color: #FFF;  }  img {  	border:0px;  }  .AbsWrap {  	position: relative;  	left: 0;  }  .rowWrap {  	width: 100%;  }  .clearfloat {  	clear:both;  	height:0px;  }  #main {  	width:654px;      margin:0px auto;  	border: 0px none #f0f0f0;  	top:0;  }  #main1 {  	width:654px;      border: 0px none #f0f0f0;  	margin:0px auto;  		  }  #main2 {  	width:654px;      border: 0px none #f0f0f0;  	margin:0px auto;  }  #Content {  	background:#fff;  	clear:both;  	width: 654px;  	font-family: Arial, Helvetica, sans-serif;  	font-size:10px;  }  #ContentMain {  	padding-left: 10px;  	padding-right: 10px;  	padding-top: 20px;  	margin:0px auto;  	border: 0px none #f0f0f0;  	}    #HomeButton {  	margin:0px auto;  	margin-top:0px;  	width:163px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #clientless {  	margin-left:0px;  	margin-top:0px;  	width:164px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #FaqButton {  	margin-left:0px;  	margin-top:0px;  	width:101px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Links {  	margin-left:0px;  	margin-top:0px;  	width:99px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #AboutButton {  	margin-left:0px;  	margin-top:0px;  	width:127px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Domi {  	margin-left:0px;  	margin-top:59px;  	width:320px;  	height:272px;  	margin-bottom:0px;  	float:left;  	display:inline;  	font-size: 9px;  }  #Domi1 {  	margin-left:0px;  	margin-top:59px;  	width:334px;  	height:272px;  	margin-bottom:0px;  	float:left;  	display:inline;  	font-size: 9px;  }  #Domi2 {  	margin-left:0px;  	margin-top:59px;  	width:654px;  	height:271px;  	margin-bottom:0px;  	float:left;  	display:inline;  	font-size: 9px;  }  #tClientlessBanner {  	margin-left:0px;  	margin-top:59px;  	width:333px;  	height:192px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #MainBlueBanner1 {  	margin-left:0px;  	margin-top:0px;  	width:59px;  	height:83px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #colwrap3 {  	float:left;  	width:273px;  	margin-top:0px;  	margin-left:0px;  }  #DownloadButton {  	margin-left:0px;  	margin-top:0px;  	width:47px;  	height:48px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #colwrap5 {  	float:left;  	width:226px;  	margin-top:0px;  	margin-left:0px;  	border: 0px solid #f0f0f0;    }  #Downloadlatestversionbanner {  	margin-left:0px;  	margin-top:0px;  	width:226px;  	height:25px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #colwrap7 {  	float:left;  	width:89px;  	margin-top:0px;  	margin-left:0px;  	border: 0px solid #f0f0f0;    }  #BlueTinyBanner {  	margin-left:0px;  	margin-top:0px;  	width:7px;  	height:11px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Bluelongbanner3 {  	margin-left:0px;  	margin-top:0px;  	width:89px;  	height:11px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Bluelongbanner2 {  	margin-left:0px;  	margin-top:0px;  	width:137px;  	height:23px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #MainBlueBanner2Long {  	margin-left:0px;  	margin-top:0px;  	width:274px;  	height:35px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Main2ndBanner {  	margin-left:0px;  	margin-top:0px;  	width:654px;  	height:87px;  	margin-bottom:0px;  	float:left;  	display:inline;  }  #interface {  	margin-left:0px;  	margin-top:0px;  	width:654px;  	height:615px;  	margin-bottom:0px;  	float:left;  	display:inline;  }  #footer {  	margin-left:0px;  	margin-top:0px;  	width:655px;  	height:93px;  	margin-bottom:0px;  	float:left;  	display:inline;  }  #Version {  	font-size:9px;  	color: #FFF;  	font-weight: bold;  	font-variant: small-caps;  	background-color: #416F7C;  	font-family: Verdana;  	text-align: left;  }  #container #Content #ContentMain p a font {  	color: #0000FF;  }  

CSS pisses me off.

Just about every new class I implement, I have to debug it for either IE or Firefox. I can't figure this one out, anybody wanna help?

In Firefox, when I use padding on the #inner-box instance, the container overflows. It should only extend to the end of the white line. It works fine in IE.

http://www.rhizaowns.com/holly/index.php

This is my HTML code:
Code:

<div id="ManagerFastMenu" style="padding:5px;margin:0px;border-width:1px;border-color:#2D3B72;border-style:solid;background-color:#FFF;">
<!-- Buuton --><a href="/Editor.asp" class="SiteB">Edit here</a><!-- Buuton -->
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!-- Buuton --><a href="/index.asp" class="SiteB">Edit</a><!-- Buuton -->
</div>

This is my CSS code:
Code:

.SiteB,
a.SiteB,
a.SiteB:visited
{
	border-width:1px;
	border-color:#cccccc;
	border-style:solid;
	background-color:#2D3B72;
	display: inline;
	padding-top:10px;
	padding-right:10px;
	padding-left:10px;
	padding-bottom:10px;
	font-family: arial;
	font-size: 11px;
	font-weight: normal;
	color: #FFFFFF;
	white-space: nowrap;
	cursor:pointer;
	text-decoration: none;
}
a.SiteB:hover,
a.SiteB:focus,
a.SiteB:active
{
	border-color:#000000;
	background-color:#6280F6;
	text-decoration: none;
}

Somehow Firefox don't recognize this too:
Code:

 
padding-right:10px;
padding-left:10px;

Why?