Displays normally in Opera, IE but not firefoz ?

  • This is an odd one.

    It displays normally in Opera and IE but not in Firefox ?

    Anyone got any clues or a better way to do it. Esentially it is a css table with a bkg image and several other inline elements.

    https://www.australianracinggreyhound.com/australian-greyhound-racing/test

    css :

    /************************************************
*	Box Draws 							*
************************************************/

#race {
	color: #FFFFFF;
	font-size: 11px;
	font-family: Arial, Tahoma, Verdana;
	font-weight: bold;
	text-transfom: capitalize;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	}

.box1 {
	color: #FFFFFF;
	font-size: 11px;
	font-family: Arial, Tahoma, Verdana;
	font-weight: bold;
	text-transfom: capitalize;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 5px;
	background: #FFFFFF url(images/box1.png) no-repeat top left;
	display: block;
	}

.dogname {
	color: #000000;
	font-size: 11px;
	font-family: Arial, Tahoma, Verdana;
	font-weight: bold;
	text-transfom: capitalize;
	float: left;
	margin: 0px 0px 0px 30px;
	padding: 0px 0px 0px 0px;
	display: inline;
	position: absolute;
	}

.grade {
	color: #000000;
	font-size: 11px;
	font-family: Arial, Tahoma, Verdana;
	float: left;
	margin: 0px 0px 0px 150px;
	padding: 0px 0px 0px 0px;
	display: inline;
	position: absolute;
	}

.placings {
	color: #000000;
	font-size: 11px;
	font-family: Arial, Tahoma, Verdana;
	float: left;
	margin: 0px 0px 0px 200px;
	padding: 0px 0px 0px 0px;
	display: inline;
	position: absolute;
	}

.besttime {
	color: #000000;
	font-size: 11px;
	font-family: Arial, Tahoma, Verdana;
	float: left;
	margin: 0px 0px 0px 250px;
	padding: 0px 0px 0px 0px;
	display: inline;
	position: absolute;
	}

.lasttime {
	color: #000000;
	font-size: 11px;
	font-family: Arial, Tahoma, Verdana;
	float: left;
	margin: 0px 0px 0px 300px;
	padding: 0px 0px 0px 0px;
	display: inline;
	position: absolute;
	}

.trainer {
	color: #000000;
	font-size: 11px;
	font-family: Arial, Tahoma, Verdana;
	float: left;
	margin: 0px 0px 0px 350px;
	padding: 0px 0px 0px 0px;
	display: inline;
	position: absolute;
	}

    content :

    this is a test
<div class="race">
<p><span class="box1">1<span class="dogname">This is sixteenp</span><span class="grade">Grade</span><span class="placings">01376</span><span class="besttime">30.11</span><span class="lasttime">30.09</span><span class="trainer">Jimmy Knimbnuts jnr.</span></span></p>
</div>
this is a test

Viewing 4 replies - 1 through 4 (of 4 total)

  • how about describing what normally is??? Ive looked at that in ie7 and ff 2.0.11 and see little difference.

    —

    On second look.. youre talking about the text in the red box.

    OK, in Firefox 2.0.12 or whatever the latest build is and Camino (I’m on a Mac), which is based on Gecko, I see the problem, the text is below the bar rather than inside it.

    In Safari and Firefox 3 beta 3, it displays inside the bar. So while I don’t know WHY the CSS issue exists (but can confirm it does), it has been fixed in Firefox 3.

    —

    The only thing I can think is that perhaps the float needs to be better defined. Hmm, let me play with this.

    —-

    Edit 2:

    It’s something with the span classes. If you simply type the text after <span class= box1">, then it’ll show up inside the box, albeit not at the exact places you can specify with the separate span tag.

    My CSS knowledge with the fallacies of Gecko 1.5 isn’t advanced enough to know what needs to be defined for Gecko to act the way that everything else acts.

    Thread Starter ozpoker

    (@ozpoker)

    Thx

    I’ll keep playing with it.

    Maybe I’ll have to define the bkg image in the div and then use multiple divs for each race although that was what I was trying to avoid.

    Thread Starter ozpoker

    (@ozpoker)

    Nah – tried this multiple ways – can’t get it to work properly.

    Anyone got any ideas or is not not worht worrying about if it only affects a small group of browsers ?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Displays normally in Opera, IE but not firefoz ?’ is closed to new replies.