How to get past padding in Firefox

@manyamileAug 16.2007

Hi,

I have a few divs that have background pictures.
I want to center some text in these 120×120 divs.

In IE I easily do this with padding – but in Firefox it doesn’t work.
text-align:”center” doesn’t work either.

How can I solve this?

Does “margin” work in FF? Should I try to include the text in another container and use margin on that?

Thanks

to post a comment

CSS

6 Comments(s) _↴

@CentauriAug 16.2007 — #No quote marks required - [COLOR="Blue"]text-align: center[/COLOR] should work fine. General rule - if it works in IE but not FF, then there is an error in your code and IE is happening to display that error as you intended.

@WebJoelAug 16.2007 — #<!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=iso-8859-1" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title></title>

<style type="text/css">

* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

p {font-size: 100.1%; line-height:1.0em; margin:16px 0 12px 0;}

html, body {min-height:100%; height:101%; padding-bottom:25px;

font:x-small Arial, Verdana, sans-serif;

voice-family: ""}"";voice-family:inherit;

font-size:small;/*for IE 5.5 */}

html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */

font-size: small; voice-family: ""}"";

voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, helvetica, serif; background-color:none;

font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}

h1{font-size: 1.93em;}

h2{font-size: 1.72em;}

h3{font-size: 1.52em;}

h4{font-size: 1.42em;}

h5{font-size: 1.32em;}

h6{font-size: 1.21em;}

</style>

<style>

</style>

<script type="text/javascript">

</script>

<link rel="shortcut icon" href="favicon.ico">

</head>

<body>

<div style="width:420px; height:auto; text-align:center; background-image:url(imageName.jpg); padding:15px 6px; border:1px solid silver; margin:10px auto;">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.

Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,

volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac

dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.

Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla

mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum

metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor

lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan

turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.

Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium

quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar

purus, vel hendrerit ipsum tellus at ante.</p>

</div>

<div style="width:320px; height:auto; text-align:center; background-image:url(imageName.jpg); padding:15px 6px; border:1px solid silver; margin:10px auto;">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.

Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,

volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac

dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.

Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla

mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum

metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor

lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan

turpis at erat.</p>

</div>

<div style="width:220px; height:auto; text-align:center; background-image:url(imageName.jpg); padding:15px 6px; border:1px solid silver; margin:10px auto;">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.

Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium

quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar

purus, vel hendrerit ipsum tellus at ante.</p>

</div>

</body>

</html>[/QUOTE] "120px" wide is a bit narrow for text (centered or otherwise) but it's your call.

A valid !doctype required (any !doctype will suffice, else IE is in 'quirks mode' and this won't work!), a WIDTH on the container (div), and margin:[I]foo[/I] auto; whereby "foo" is the margin-top, and "auto" is the left-right "centering" effect (which [U]requires[/U] the valid !doctype to function).

I did three varied-widths DIVs here, centered, with "centered text", padding on the container DIVs, and provision for the background-image.

@manyamileauthorAug 16.2007 — #The newest problem is that once I put in a doctype the javascript in the body section does not work anymore in FF.

Not all of it just this part:

[B]for (i=0;i<12;i++){

sir="d"+i;

document.getElementById(sir).style.left=document.body.clientWidth/2+raza*Math.cos(pi*(i+9)/6)-60;

document.getElementById(sir).style.top=document.body.clientHeight/2+raza*Math.sin(pi*(i+9)/6)-60;}

document.getElementById("centru").style.left=document.body.clientWidth/2-110;

document.getElementById("centru").style.top=document.body.clientHeight/2-26;

document.getElementById("buton").style.left=document.body.clientWidth/2-76;

document.getElementById("buton").style.top=document.body.clientHeight/2-26;

document.getElementById("read").style.left=document.body.clientWidth/2-100;

document.getElementById("read").style.top=document.body.clientHeight/2-75;

}[/B]

I thought that maybe I'm not using "document.body.clientHeight" appropriately - because I can't resize the page after loading it - but even if I replace it with a number it still doesn't work.

Should I declare the math library anywhere? It works fine for Math.random() also called from body.

Please help me some more - because I'm at a loss.

(And I had felt so close to finishing...)

Thanks

@slaughtersAug 16.2007 — #No quote marks required - [COLOR="Blue"]text-align: center[/COLOR] should work fine. General rule - if it works in IE but not FF, then there is an error in your code and IE is happening to display that error as you intended.[/QUOTE]Ummm... FF has plenty of bugs all on it's own.

- There now - I feel that my post was just as useful to manyamile as yours was ?

P.S. - manyamile - How are you calling the JavaScript? Is it called as a function from a body onload event or is it just run by itself? You generally need to wait until the page has finished building itself before manipulating DOM objects.

@manyamileauthorAug 17.2007 — #Thank you to everybody who answered.

Everybody had some kind of useful advice to offer.

WebJoel's code was very helpful but not for this particular code, I used it in other places. From now I will start with it so I don't run into this kind of problem again.

But now I still need to understand why this is not working in FF.

My math skills are somewhat better than my programming skills so my code might seem pretty tedious to a true programmer. Anyway here it is:

<html>

<head>

<title></title>

<link rel="stylesheet" type="text/css"href="socotit.css">

<link rel="stylesheet" type="text/css"href="arbore.css">

<script src="arbore.js">

</script>

<script type="text/javascript">

var loc0=new Array();

var loc1=new Array();

var loc2=new Array();

var loc3=new Array();

var theend=0;

var timp=0;

var contor=0;

function masurator(){

var st=""

timp=timp+1;

st="ban"+timp;

document.getElementById(st).src="banana2.jpg"

if (timp<16 ){

setTimeout('masurator()', 2000);

}else{

if (theend==0){

document.getElementById("buton").style.visibility="visible"

}

document.getElementById("centru").style.visibility="hidden"

theend=1;

}

}

function joc(){

document.getElementById("read").style.visibility="hidden"

masurator()

}

function generate(){

var nr1=0

var nr2=0

var nr3=0

var st=0

var sol=0

nr1=Math.round(Math.random()*19+1)

nr2=Math.round(Math.random()*19+1)

nr3=Math.round(Math.random())

if (nr3==1){

document.getElementById("centru").innerHTML=nr1+" + " +nr2 ;

sol=nr1+nr2

}else{

if (nr1>nr2){

document.getElementById("centru").innerHTML=nr1+" - " +nr2 ;

sol=nr1-nr2

}else{

document.getElementById("centru").innerHTML=nr2+" - " +nr1 ;

sol=nr2-nr1

}

}

for (i=0;i<12;i++){

if (loc0[i]==1){

loc3[i]=Math.floor(Math.random()*40);

while(loc3[i]==sol){

loc3[i]=Math.floor(Math.random()*40);

}

}

}

loc3[loc1[contor]]=sol;

for(i=1;i<11;i++){

st="d"+i

if (loc0[i]==1){

document.getElementById(st).innerHTML=loc3[i]

}

}

}

function alternante(){

var st=""

st="z"+loc2[contor];

document.getElementById(st).style.filter="blendTrans(duration=4)";

document.getElementById(st).filters.blendTrans.Apply();

document.getElementById(st).style.height=85;

document.getElementById(st).style.width=85;

document.getElementById(st).src = "family/monkey"+loc2[contor]+".gif"

document.getElementById(st).filters.blendTrans.Play();

}

function membri(){

var st=""

var i2=0

for (i=0;i<11;i++){

loc0[i]=0;

loc2[i]=0;

}

for (i=0;i<11;i++){

i2=Math.round(Math.random()*10)

while (loc0[i2]==1){

i2=Math.round(Math.random()*10)

}

loc0[i2]=1

loc2[i]=i2+1

}

}

function pozitii(){

var st=""

var i1=0

var chg=0;

for (i=0;i<12;i++){

loc0[i]=0;

loc1[i]=0;

}

for (i=0;i<12;i++){

i1=Math.round(Math.random()*11)

while (loc0[i1]==1){

i1=Math.round(Math.random()*11)

}

loc0[i1]=1

loc1[i]=i1

if (i1==0){

chg=i;

}

}

loc1[chg]=loc1[11];

loc1[11]=0;

}

 function placing(param){
   var st=""
   var st2=0
   if (theend==0){
   if (loc1[contor]==param.substr(1)){
   st2=contor+1
   st="z"+loc2[contor]
   document.getElementById(st).src = "family/base.gif"

 if (contor<11){
   generate()
  }else{
  document.getElementById("buton").style.visibility="visible"
  document.getElementById("centru").style.visibility="hidden"
   }

}

}

</script>

</head>

<body id="tot" bgcolor="green">

<table id="timpban" border="3">

<tr><td class="ceas" ><img src="banana1.jpg" id="ban1"></td><td class="ceas"><img

src="banana1.jpg" id="ban2"></td><td class="ceas"><img src="banana1.jpg"

id="ban3"></td><td class="ceas"><img src="banana1.jpg" id="ban4"></td><tr>

<tr><td class="ceas"><img src="banana1.jpg" id="ban5"></td><td class="ceas"><img

src="banana1.jpg" id="ban6"></td><td class="ceas"><img src="banana1.jpg"

id="ban7"></td><td class="ceas"><img src="banana1.jpg" id="ban8"></td><tr>

<tr><td class="ceas"><img src="banana1.jpg" id="ban9"></td><td class="ceas"><img

src="banana1.jpg" id="ban10"></td><td class="ceas"><img src="banana1.jpg"

id="ban11"></td><td class="ceas"><img src="banana1.jpg" id="ban12"></td><tr>

<tr><td class="ceas"><img src="banana1.jpg" id="ban13"></td><td class="ceas"><img

src="banana1.jpg" id="ban14"></td><td><img src="banana1.jpg"

class="ceas"id="ban15"></td><td class="ceas"><img src="banana1.jpg"

id="ban16"></td><tr>

</table>

<img src="family/arbore3.jpg" id="back">

<div id="centru"></div>

<div id="all">

<div id="d0"></div>

<div id="d1" class="ring1" onclick="placing('d1')"></div>

<div id="d2" class="ring1" onclick="placing('d2')"></div>

<div id="d3" class="ring1" onclick="placing('d3')"></div>

<div id="d4" class="ring1" onclick="placing('d4')"></div>

<div id="d5" class="ring1" onclick="placing('d5')"></div>

<div id="d6" class="ring1" onclick="placing('d6')"></div>

<div id="d7" class="ring1" onclick="placing('d7')"></div>

<div id="d8" class="ring1" onclick="placing('d8')"></div>

<div id="d9" class="ring1" onclick="placing('d9')"></div>

<div id="d10" class="ring1" onclick="placing('d10')"></div>

<div id="d11" class="ring1" onclick="placing('d11')">?</div>

<img src="zero.gif" id="z0">

<img src="zero.gif" id="z1" class="ring">

<img src="zero.gif" id="z2" class="ring">

<img src="zero.gif" id="z3" class="ring">

<img src="zero.gif" id="z4" class="ring">

<img src="zero.gif" id="z5" class="ring">

<img src="zero.gif" id="z6" class="ring">

<img src="zero.gif" id="z7" class="ring">

<img src="zero.gif" id="z8" class="ring">

<img src="zero.gif" id="z9" class="ring">

<img src="zero.gif" id="z10" class="ring">

<img src="zero.gif" id="z11" class="ring">

</div>

<img src="mybutton.jpg" id="buton" onclick="arbore()" />

<div id="read">

<table border="0" cellspacing="0" cellpadding="0">

<tr><td class="td1" rowspan="2" colspan="2"><img src="family/colt1.gif"></td><td

class="td2"><img src="family/bar2.gif"></td><td class="td1" rowspan="2"

colspan="2"><img src="family/colt2.gif"></td></tr>

<tr><td class="td5"></td></tr>

<tr><td class="td3"><img src="family/bar4.gif"></td><td class="td4"></td><td

class="td5"><b>Descopera rudele maimuticii Coco care il ajuta cu tema la

aritmetica</b></td><td class="td4"></td><td class="td3"><img

src="family/bar3.gif"></td></tr>

<tr><td class="td1" rowspan="2" colspan="2"><img src="family/colt3.gif"></td><td

class="td5" align="center"><input type="submit" value="Start" onclick="joc()"/></td><td

class="td1" rowspan="2" colspan="2"><img src="family/colt4.gif"></td></tr>

<tr><td class="td2"><img src="family/bar1.gif"></td></tr>

</table>

</div>

<script type="text/javascript">

var sir=0;

var pi=3.14159

var raza=250;

for (i=0;i<12;i++){

sir="d"+i;

document.getElementById(sir).style.left=document.body.clientWidth/2+raza*Math.cos(pi*(i+9)

/6)-60;

document.getElementById(sir).style.top=document.body.clientHeight/2+raza*Math.sin(pi*(i+9)

/6)-60;

}

document.getElementById("centru").style.left=document.body.clientWidth/2-110;

document.getElementById("centru").style.top=document.body.clientHeight/2-26;

document.getElementById("buton").style.left=document.body.clientWidth/2-76;

document.getElementById("buton").style.top=document.body.clientHeight/2-26;

document.getElementById("read").style.left=document.body.clientWidth/2-100;

document.getElementById("read").style.top=document.body.clientHeight/2-75;

membri()

pozitii()

generate()

</script>

</body>

</html>

@slaughtersAug 17.2007 — #Take all of this code:

[CODE]<script type="text/javascript">
 var sir=0;
 var pi=3.14159
 var raza=250;
 for (i=0;i<12;i++){
 sir="d"+i;
 document.getElementById(sir).style.left=document.body.clientWidth/2+raza*Math.cos(pi*(i+9)
 
 /6)-60;
 document.getElementById(sir).style.top=document.body.clientHeight/2+raza*Math.sin(pi*(i+9)
 
 /6)-60;
 }
 document.getElementById("centru").style.left=document.body.clientWidth/2-110;
 document.getElementById("centru").style.top=document.body.clientHeight/2-26;
 document.getElementById("buton").style.left=document.body.clientWidth/2-76;
 document.getElementById("buton").style.top=document.body.clientHeight/2-26;
 document.getElementById("read").style.left=document.body.clientWidth/2-100;
 document.getElementById("read").style.top=document.body.clientHeight/2-75;
 membri()
 pozitii()
 generate()
 </script>[/CODE]

Put it in a function. Move it to the top and call it from the BODY tag with an ONLOAD="" event

[CODE]<script type="text/javascript">
 
 function DoIt () {
 
 var sir=0;
 var pi=3.14159;
 var raza=250;
 for (i=0;i<12;i++){
 sir="d"+i;
 document.getElementById(sir).style.left=document.body.clientWidth/2+raza*Math.cos(pi*(i+9)/6)-60;
 document.getElementById(sir).style.top=document.body.clientHeight/2+raza*Math.sin(pi*(i+9)/6)-60;
 }
 document.getElementById("centru").style.left=document.body.clientWidth/2-110;
 document.getElementById("centru").style.top=document.body.clientHeight/2-26;
 document.getElementById("buton").style.left=document.body.clientWidth/2-76;
 document.getElementById("buton").style.top=document.body.clientHeight/2-26;
 document.getElementById("read").style.left=document.body.clientWidth/2-100;
 document.getElementById("read").style.top=document.body.clientHeight/2-75; 
 membri();
 pozitii();
 generate();
 
 }
 </script>[/CODE]

[CODE]
 <body id="tot" bgcolor="green" onload="DoIt();">
 .
 .
 .[/code]

At least this way you will be assured that all the elements in the documents body have been created prior to trying to access them.

Also in #CSS _↴

Cant get responsive design CSS to snap into place Uses for CSS flash on layers problem in safari and moz on mac

Success!

Help @manyamile spread the word by sharing this article on Twitter...

Tweet This

How to get past padding in Firefox

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴