Problem with webpage in IE6

[Andyfives]

I am a novice with css but have started developing a webpage none the less and have it working well in IE7, Firefix and Opera.. Problem is when I try this in IE6 I have some strange things happen.

It is meant to draw 4 boxes across the page which are all options of baggage for each passenger. It tells them the description of the option and also the price. ie. "Up to 15kg" 25 DKK.

What strange thing happens is that it writes this all in the option box I have set but the last character of the price.. in this case the letter "K" is repeated outside the box in the second radio box. If the currency is GBP it then writes out a P instead outside.

+---------------------+ +---------------------+
! o No checked-in     ! ! o Up to 15kg        !
!   Baggage           ! !                     !
!              0 DKK  ! !             25 DKK  !
!                     ! +---------------------+
+---------------------+ K

It is only on the second radio group. None of the others.. The only thing I think of whilst writing this is that the first box has detail that is 2 lines whereas the others only 1. But that shouldnt be the cause??

I do not think it is related to the radio being checked either. Does anyone know why this could be happening?

Firstly the html

		<div class="formline">
			<fieldset class="outerfieldsetname">
				<div class="break"></div>
				<fieldset class="paxdetail">
					1. ANDREW TEST<br>			
				</fieldset>
		<div class="break"></div>
		
				<label id='Lbl_1_1_1' class='bagLabel' for='CBBG1_1'>
				<input class='bagRadio' id='CBBG1_1' type='radio' name='PaxBaggage1_1' value="CBBG"   onclick="calcBaggageFee(this,1,1)"><span class="thetype">No checked-in Baggage</span><span class="break"></span><span class="theprice">0 DKK</span></label>

				<label id='Lbl_2_1_1' class='bagLabel' for='BULK1_1'>
				<input class='bagRadio' id='BULK1_1' type='radio' name='PaxBaggage1_1' value="BULK" checked='checked'  onclick="calcBaggageFee(this,1,1)"><span class="thetype">Up to 15 kg</span><span class="break"></span><span class="theprice">25 DKK</span></label>

				<label id='Lbl_3_1_1' class='bagLabel' for='XBAG1_1'>
				<input class='bagRadio' id='XBAG1_1' type='radio' name='PaxBaggage1_1' value="XBAG"   onclick="calcBaggageFee(this,1,1)"><span class="thetype">15 to 20 kg</span><span class="break"></span><span class="theprice">160 DKK</span></label>

				<label id='Lbl_4_1_1' class='bagLabel' for='FRAG1_1'>
				<input class='bagRadio' id='FRAG1_1' type='radio' name='PaxBaggage1_1' value="FRAG"   onclick="calcBaggageFee(this,1,1)"><span class="thetype">20 to 25 kg</span><span class="break"></span><span class="theprice">295 DKK</span></label>
	
				</fieldset>
		</div>

and the related css

.formline .outerfieldsetname .paxdetail
{
	border:1px solid #000000;
	float:left;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: left;
	text-indent: 10px;
	Font-size: 12px;
	font-weight: bold;
	border: 1px;
}


.formline .outerfieldsetname
{
	_margin-top: 15px;
	display: block;
	width: 700px;
	text-align: right;

}


.formline .outerfieldsetname .bagfieldset
{
	float: left;
	display: block;
	width: 300px;
	text-align: left;
}

.formline .outerfieldsetname .bagRadio
{
	border: none;
	background-color: transparent;
	float: left;
	display:block;
	width: 20px;
}

.formline .outerfieldsetname .bagLabelSelected
{
	padding: 3px;
	border:1px solid #e0e0e0;
	float: left;
	text_indent:20px;
	text-align: left;
	display: block;
	width: 22%;
	height: 45px;
	font-weight: 300;
	background-color: #fcecb2;
}

.formline .outerfieldsetname .bagLabel
{
	padding: 3px;
	border:1px solid #e0e0e0;
	float: left;
	text_indent:20px;
	text-align: left;
	display: block;
	width: 22%;
	height: 45px;
	font-weight: 200;
	font-size: 16px;
}


fieldset
{
	border: none;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.inner fieldset
{
	border: none;
	display: inline;
	margin: 0px 0px 0px 0px;
	padding: 5px 5px 5px 5px;
}

.outer fieldset
{
	width: 100%;
	border: none;
	display: block;
	margin: 0px 0px 0px 0px;
}


.leftDetail
{

	float: left;
	display: block;
	width: 80px;
	text-align: left;
	font-size: 10px;
	color:#000000;
	font-weight: 200;
	/* border:1px solid #e0e0e0; */

}

.marginTop
{
	margin-top:25;
}

.marginBottom
{
	margin-bottom:100;
}

.thetype
{
	/* border:1px solid #e0e0e0; */ 
	width: 100px;
	height:	25px;
	float:left;
}


.theprice
{
	/* border:1px solid #e0e0e0; */ 
	color: #535252;
	
	float:right;
	
}

Please help! This is driving me a little crazy...

 

[BillyRayPreachersSon]

Sounds like the old "IE6 duplicate character bug". See here for more information and a fix:

http://www.positioniseverything.net/explorer/dup-characters.html

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Andyfives]

That looks interesting thanks. I will check that out and get back to you when I have had the chance to test it out.

 

[monksnake]

There's actually 2 IE6 bugs going on here.

One is the duplicate character bug, that can be fixed by removing all your <span class="break"></span>.

The other one is the fact that floated items in IE6 take up space, where they really shouldn't. A "floated" element should do exactly that, float. Instead the <span> that contains the "No checked-in baggage" is pushing the "0DKK" span over, whereas in the other browswers the right floated <span>s are floating over the left floated <span>s. I'm going to look into this cause I can't yet find a way to fix this in IE6, other than using forbidden methods. I'm sure others on here already have ways to fix this.

<.

 

[Andyfives]

Thank you both.

I solved at least the duplicate K problem by applying another span break command at the end of the row..

				<label id='Lbl_3_1_1' class='bagLabel' for='BW21_1'>
				<input class='bagRadio' id='BW21_1' type='radio' name='PaxBaggage1_1' value="BW2"   onclick="calcBaggageFee(this,1,1)"><span class="thetype">+10 kg</span><span class="break"></span><span class="theprice">360 DKK</span><span class="break"></span></label>

Thanks again for your help. I will watch out for the other points you highlighted too.

Andy