CSS - Unwanted Vertical Padding In Firefox, None In Ie.

(see attached)

CSS Snippet
Code:

	#contentBox{
		float:right;
		padding:0;
		margin:17px 15px 0 0;
		width:423px;
		/* overflow:hidden; */
		}
	#content{
		background:url(images/layout/content_bg.gif) top left;
		margin:0;
		padding:15px 15px 0 15px;
		width:393px;
		overflow:hidden;
		}
	* html #content {
		width: 423px;  /* for IE5 and IE6 in quirks mode */
		w\idth: 393px; /* for IE6 in standards mode */
		}
	#contentTop{
		background:url(images/layout/content_top.jpg) top left;
		padding:0;
		margin:0;
		width:423px;
		height:41px;
		overflow:hidden;
		}
	#contentTop h3{
		padding:15px 0 0 0;
		margin:0;
		font-family:Georgia, "Times New Roman", Times, serif;
		text-align:center;
		font-size:14px;
		color:#036;
		}
	#contentBottom{
		background:url(images/layout/content_bottom.gif) top left;
		padding:0;
		margin:0;
		text-indent:-15000px;
		width:423px;
		height:28px;
		overflow:hidden;
		}

HTML Snippet
Code:

	<div id="contentBox">
		<div id="contentTop"><h3>What Is The Shalom Foundation?</h3></div>
		<div id="content">
		<p>The Shalom Foundation is a non-profit 501(c) (3)
		  organization dedicated to providing financial support for under-privileged
		  children and their families in the United States, Central and South America.</p>
		<p> We are dedicated to providing basic educational
		  opportunities, home construction and repair for families at risk, essential
		  food and clothing needs and medical support and assistance for critical as
		  well as basic healthcare. </p>
		<p>The Shalom Foundation seeks funding through personal
		  donations, corporate contributions and special event fundraisers. Contributions
		  to The Shalom Foundation are 100% tax deductible.</p>
		<p>If anyone has material possessions and sees his brother
		  in need but has no pity on him, how can the love of God be in him? Dear children,
		  let us not love with words or tongue but with actions and in truth. 1 John
		  3:17-18</p>
		</div>
		<div id="contentBottom"></div>
	</div>

Now, why on earth are they different!?!?

Thanks in advance!

It seems that in Firefox, whenever I use the padding-left directive, it actually increases the size of the div by the amount I chose in padding-left. It doesn't do this in IE, all it does is pad the contents in, which is what I want. Is there any way to do this except for creating another div within that one that is padded-left...

Thanks in advance...

I'm working on a proof of concept, to be able to create a rounded edge button that will expand with the text on it. To do this I've been using a button tag with a span inside it, such as:

Code:

<form onsubmit="return doSomething()">
	<input type="text" name="textfield" /><br />
	<button type="submit"><span>Button Tag and a really long blah</span></button>
</form>

Unfortunately, IE and Firefox put some default padding on their buttons which is hard to get rid of. With some fiddling, I got this:

Code:

BUTTON {
	background:url(btn_right.jpg) no-repeat top right;
	padding: 0px;
	border: none;
	width: auto;
	overflow: visible;
}
BUTTON SPAN {
	background:url(btn_left.jpg) no-repeat top left;
	display: block;
	padding: 15px 25px 25px 20px;
	margin: 0px -3px;
	white-space: nowrap;
	position: relative;
	top: -1px; /* for Firefox */
}
* HTML BUTTON SPAN { margin: 0px; top: -2px;} /* for IE */

Looking at it in Opera 9, the same top: -1px that makes it work in Firefox is what breaks it in Opera. Past browser detection and serving different stylesheets, is there an easy way to make this work for both Opera and Firefox?

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?

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

Hi I'm having a problem with padding <a> tags in firefox

i have a div inside another div. I'm using the 2nd div as a button but it doesn't fit inside the containing div. The top and bottom stick out. Any clues?

here is my code:

Code:

<html>
<head>
<style type="text/css">
.mybox {
	border: 1px solid #000000;
}
.buttonbox{
	/*padding: 5px;*/
}
.buttonbox a{
	padding: 5px;
	background-color: #33F4FF;
	border: 1px solid #FF0000;
}
.buttonbox a:hover{
	background-color: #EBF4FF;
}
</style>
</head>
<body>
<div class="mybox">
<div class="buttonbox"><a href="asdfasfd">buttonbox</a></div>
</div>
</body>
</html>

Hello all.

This is a problem I am encountering on many placing:
when I put a width to an certain object (let's say 20px), and I want the text in the object to start and pixel 4px, I can use padding-left:4px;

This is no problem in Internet explorer, but Firefox seems to make this object 4px wider. Instead of keeping the object 20 pixels, it becomes 24 pixels.

Does anybody know how to get of this bug in Firefox?

Hey y'all.

I was hoping someone could help me with some minor margin/padding issues. At one point I knew how to fix this, but I can't for the life of me remember.

The site is www (dot) texasarmor (dot) com

I like the way the divs are spaced in IE but I don't know how to make IE and Firefox the same.

Please help...

Also, please if you could, any critiques? Suggestions?

Thanks very much.

-michael

I have a menu structure that I am trying to create with CSS. The features I want are the following: Variable width elements Resizable text from user Image at left of link I have an example page up he
URL

I've got it working with a table, but when I've tried with a unordered list, I start having problems.

Here's what is happenning: Firefox -- when I put padding on my anchor tags, the anchor elements expand outside of the list item elements. Firefox -- anchor elements don't expand to the full width of the list item element. Internet Explorer -- IE seems to only allow for fixed/percentage with list item elements. Is there a way to allow for variable width elements?
Thanks for the help!

--
Doug

Code:

-- HTML

<div id="Dashboard">
<table id="Overview">
<tr>
<td>Cost <span>$10,710</span></td>
<td>Visits <span>51,907</span></td>
<td>Cost / Visit <span>$0.21</span></td>
<td>Conv. Rate <span>1.3%</span></td>
<td>Cost / Conv. <span>16.11</span></td>
<td>Conversions <span>655</span></td>
<td class="Detail">>></td>
</tr>
</table>
</div>

-- CSS

/*  Dashboard */

#Dashboard {
	border: 1px solid #b5bfbf;
	padding: 2px;
}

/* Overview Table */

#Overview {
	width: 100%;
	border-collapse: collapse;
	height: 50px;
	background-image: url(../images/dashboard/overviewtable_bg.png);
	background-repeat: repeat-x;
}

#Overview td {
	padding-top: 8px;
	padding-left: 5px;
	border: 1px solid #b5bfbf;
	margin: 0;
}
#Overview td.Detail {
	width: 45px;
}
#Overview span {
	font-size: 20px;
	font-weight: bold;
	display: block;
	margin-top: 2px;
}

so there is a DIV with a 2px padding on the inside.

But when I check it in firefox, it isn't a 2px space between the outside DIV border and the border of the table. it is more like 1px space on top and left, 2px on bottom and right.

I could put another div inside with a border to achieve that 2px spacing, but that just seems extraneous.

I am not sure what the issue is?

edit:

screenshot:

http://ricebox.whiteazn.com/tabpadding.png

I've build a little nav that seems to work perfectly in IE, but is hated by FireFox. Specifically it seems like firefox is ignoring my margin and padding settings. Can anyone tell me what I'm doing wrong? Thank you.

Code:

<html>
<head>
	<title>Untitled</title>

<style type="text/css">  
  <!--
DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding: 0;}
.NavContainer {
	position:relative;
	padding:0em;
	width: 930px;
	height: 27px;
	margin:0em;
	background-image: url(images/nav/navBg.gif);
	background-repeat: no-repeat;
}
.NavLeftPad {
	position:relative;
	padding:0em;
	width: 87px;
	height: 27px;
	margin:0em;
	float:left;
	background-image: url(images/nav/spacer.gif);
	background-repeat: no-repeat;
}
.NavRightPad {
	position:relative;
	padding:0em;
	width: 87px;
	height: 27px;
	margin:0em;
	float:left;
	background-image: url(images/nav/spacer.gif);
	background-repeat: no-repeat;
}
.Nav2pxPad {
	position:relative;
	padding:0em;
	width: 2px;
	height: 26px;
	margin: 1px,0px,0px,0px;
	float:left;
	background-color:#54636D;
}
.NavLink {
  	font-size:12px;
  	color:#FFFFFF;
  	font-family:arial,helvetica,sans-serif;
  	text-decoration:none;
  	font-weight:normal;
  	line-height: normal;
}
.NavBlock {
	position:relative;
  	padding: 7px,3px,0px,0px;
  	height:26px;
  	margin: 1px,0px,0px,0px;
  	float:left;
  	background-color:#54636D;
	text-align: right;
}
.NavWhatIsDermalounge {width:126px;}
.NavOurTreatments {width:125px;}
.NavOurClinicians {width:115px;}
.NavLocations {width:92px;}
.NavTechnology {width:96px;}
.NavAboutUs {width:94px;}
.NavMakeover {width:96px;}
  -->
  </style>	

<script language="JavaScript">
// On/Over state color #E46804 orange
// Off state color #54636D nav-gray

var theNavState = 'NavWhatIsDermalounge';
apAddLoadEvent(NavInit);
function apAddLoadEvent(aponfunc) {
  var apoldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = aponfunc;
  } else {
    window.onload = function() {
      apoldonload();
      aponfunc();
    }
  }
}
function NavInit(){
	if (theNavState != '') {
		document.getElementById(theNavState).style.backgroundColor = "#E46804";
	}
}
function NavRollOver(theElement){
document.getElementById(theElement).style.backgroundColor = "#E46804";
}
function NavRollBack(theElement){
	if (theElement != theNavState) {
		document.getElementById(theElement).style.backgroundColor = "#54636D";
	} else {
		document.getElementById(theElement).style.backgroundColor = "#E46804";
	}
}
</script>
  
</head>
<body>

<div id="NavContainer" class="NavContainer">
	<div id="NavLeftPad" class="NavLeftPad"></div>
	<div id="NavWhatIsDermalounge" class="NavBlock NavWhatIsDermalounge"><a href="what_is.html" onMouseOver="NavRollOver('NavWhatIsDermalounge');" onMouseOut="NavRollBack('NavWhatIsDermalounge');" class="NavLink">What is dermalounge</a></div>
	<div id="Nav2pxPad" class="Nav2pxPad"></div>
	<div id="NavOurTreatments" class="NavBlock NavOurTreatments"><a href="treatments.html" onMouseOver="NavRollOver('NavOurTreatments');" onMouseOut="NavRollBack('NavOurTreatments');" class="NavLink">Our treatments</a></div>
	<div id="Nav2pxPad" class="Nav2pxPad"></div>
	<div id="NavOurClinicians" class="NavBlock NavOurClinicians"><a href="clinicians.html" onMouseOver="NavRollOver('NavOurClinicians');" onMouseOut="NavRollBack('NavOurClinicians');" class="NavLink">Our clinicians</a></div>
	<div id="Nav2pxPad" class="Nav2pxPad"></div>
	<div id="NavLocations" class="NavBlock NavLocations"><a href="locations.html" onMouseOver="NavRollOver('NavLocations');" onMouseOut="NavRollBack('NavLocations');" class="NavLink">Locations</a></div>
	<div id="Nav2pxPad" class="Nav2pxPad"></div>
	<div id="NavTechnology" class="NavBlock NavTechnology"><a href="technology.html" onMouseOver="NavRollOver('NavTechnology');" onMouseOut="NavRollBack('NavTechnology');" class="NavLink">Technology</a></div>
	<div id="Nav2pxPad" class="Nav2pxPad"></div>
	<div id="NavAboutUs" class="NavBlock NavAboutUs"><a href="about.html" onMouseOver="NavRollOver('NavAboutUs');" onMouseOut="NavRollBack('NavAboutUs');" class="NavLink">About us</a></div>
	<div id="Nav2pxPad" class="Nav2pxPad"></div>
	<div id="NavMakeover" class="NavBlock NavMakeover"><a href="makeover.html" onMouseOver="NavRollOver('NavMakeover');" onMouseOut="NavRollBack('NavMakeover');" class="NavLink">Makeover</a></div>
	<div id="NavRightPad" class="NavRightPad"></div>
</div>

</body>
</html>

I am currently having to deal with a mystery padding at the bottom of each of my im_container tags... everything is set to 0px, and oddly enough... it looks GREAT in IE (ugghh... i can't believe i just said that)... it doesnt however look good in firefox... whats up... here is the XHTML followed by the CSS..

Code:

<div class="im_left">
	<div class="im_container">
		<div class="im_logo"><img src="/images/im_icq.gif" alt="Contact Via ICQ" /></div>
		<div class="im_info">
			164149536
		</div>
		<div class="clear"></div>
	</div>
	<div class="im_container">
		<div class="im_logo"><img src="/images/im_aim.gif" alt="Contact Via AIM" /></div>
		<div class="im_info">
			Incomplete Gamer
		</div>
		<div class="clear"></div>
	</div>
</div>

Code:

.im_left {float:left; width:270px;}		
	.im_container {
	margin:0 0 0 30px !important;
	border:1px solid #900;
	}
		.im_container a:link,
		.im_container a:visited,
		.im_container a:active,
		.im_container a:hover {color:#FFF;}
		.im_logo {
		margin:0px 0 0 0;
		float:left;
		width:30px; margin:0px; padding:0px;
		}
			.im_logo img {border:0px; margin:0px; padding:0px;}
		.im_info {
		font-size:12px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		margin:0 0 0 5px;
		text-align:justify;
		width:200px;
		float:left;
		}
			.im_title {
			text-align:center;
			font-weight:bold;
			}

I have added a percentage padding to some cells of my website (I'm really obliged to use tables and cells for that part of my website, so please do not suggest replacing the cells to DIVs as a solution). For some odd reason, the percentage padding shows just fine with Opera or Internet Explorer, but does not work at all in Firefox. Here is my CSS (and in dark red bold, the percentage padding concerned):

Quote:
html, body {
margin: 0px;
padding: 0px;
background-color: #ffffff;
font-family: verdana, tahoma, serif;
font-size: 11px;
color: #000000;
}
a:link, a:visited {
text-decoration: none;
color: #ff0000;
}
a:active, a:hover {
text-decoration: underline;
color: #ff0000;
}
form {
margin: 0px;
}
img {
border: 0px;
}
table {
border-collapse: collapse;
}
#top {
background: url(../images/top.jpg);
height: 100px;
}
#bar {
background: url(../images/bar.jpg);
font-weight: bold;
color: #ffffff;
height: 26px;
width: 100%;
}
#bar1 {
position: absolute;
top: 100px;
left: 0px;
background: url(../images/bar1.jpg);
height: 26px;
width: 4px;
}
#bar2 {
position: absolute;
top: 100px;
right: 0px;
background: url(../images/bar2.jpg);
height: 26px;
width: 4px;
}
.bar4 {
font-family: verdana, tahoma, serif;
font-weight: normal;
font-size: 10px;
width: 200px;
}
.bar5 {
font-family: verdana, tahoma, serif;
font-weight: normal;
font-size: 10px;
height: 18px;
}
a.nav:link, a.nav:visited {
text-decoration: none;
color: #ffffff;
}
a.nav:active, a.nav:hover {
text-decoration: underline;
color: #ffffff;
}
img.top {
height: 100px;
width: 395px;
}
td.bar1 {
padding-left: 6%;
}
td.bar2 {
padding-right: 6%;
}
td.bar3 {
padding-left: 1.4%;
}
And here is the HTML (in bold again the place concerned):

Quote:
<?$page='';?><?include'body/head.txt';?>

<div id="top">
<img src="images/top1.jpg" class="top" alt=""/></div><div id="bar1"></div><div id="bar2"></div>


<table id="bar">
<tr>
<td class="bar1">
<a href="index.php" class="nav">Index</a> | <a
href="forums.php" class="nav">Forums</a>
</td><td align="right" class="bar2"><form method="get" action="http://www.google.com/custom">
<table>
<tr>
<td><input type="hidden" name="domains" value="xander6669.com"/></td>
<td><input type="radio" name="sitesearch" value="" checked="checked"/></td><td>Le Web</td>
<td class="bar3"><input type="radio" name="sitesearch" value="xander6669.com"/></td><td>A Labrie.com</td>
<td class="bar3"><input type="text" class="bar4" name="q" maxlength="200"/></td>
<td class="bar3"><input type="submit" class="bar5" value="Rechercher"/></td>
</tr>
</table>
</form></td>
</tr>
</table>

</body></html>
So, anyone knows what the problem is? If you want to view how this thing looks like in Opera/IE/Firefox, just go the http://xander6669.com/.

Thanks for any help.

Hi there,

I'm trying to display paragraph with a table embedded in there inline. I hope the table can behave like a big letter in the paragraph, with the line aligned in the center of the table. For example, if I want to make "1/2" to a vertical "1 <hr/> 2", I
would put it in a table and change the "display" property as follows:

Code:

<p> This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph.

I HAVE <table style="display:inline;vertical-align:middle"> <tr> <td> 1 <hr /> 2 </td> </tr> </table>  PIZZA.

This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. 

This works perfectly for me on IE, but on Firefox only the "inline" property works, and the "vertical-align" property doesn't (i.e., the table and the line text are aligned at the bottom still).

Did I do something wrong? Or is this a Firefox bug?

Thanks

Hi and thanks in advance for any of your help.

I need a single colum with several rows, all of which but one have a fixed height. The remaining row/cell should fill the remaining space.

I have achieved this in IE6/7/8 with the style "height:100%" attribute but Firefox lets the page scroll of the bottom of the screen. I want the table to be fully visible at all times but with the felxible row/cell collapsing to fit the screen.

Code is below with screenshot attached of what I expect to happen (as in IE).

Code:

<html style="height:100%;">
<body style="height:100%; margin:0;">
<table style="height:100%; width:250px;">
	<tr><td style="vertical-align:top; background-color:#eee;">row 1<br />fixed height, some navigation links</td></tr>
	<tr><td style="height:100%;"><div style="vertical-align:top; height:100%; background-color:#ccc; overflow:auto;">text<br />text<br />text<br />text<br />text<br />text<br />text</div></td></tr>
	<tr><td style="vertical-align:top; background-color:#eee;">row 3<br />fixed height again, some navigation links</td></tr>
	<tr><td style="vertical-align:top; background-color:#eee;">row 4<br />fixed height again, some navigation links</td></tr>
	<tr><td style="vertical-align:top; background-color:#eee;">row 5<br />fixed height again, some navigation links</td></tr>
</table>
</body>
</html>

Thanks again for any help or pointers as to where I have gone wrong.