LABEL width not working in CSS for Internet Explorer Version 6.xx

Hi,

I have been struggling with this for a while now.

HOW DO YOU FIX THE WIDTH OF AN HTML LABEL IN IE6x?

The problem I am having is that the CSS width set for a LABEL in Internet Explorer 6.x does not work.
You can see the site at:

   http://www.straightswap.com.au/myaccount/register.aspx

IT IS ONLY IN INTERNET EXPLORER 6.x that I am having problems.
All other browsers and version seem to handle it ok.

You can retrieve the css stylesheet from:

  http://www.straightswap.com.au/includes/stylesheet/form.css

All the styles for labels are set in the above stylesheet.

WOULD LOVE ANY HELP WITH THIS AS CLIENT IS NOT HAPPY ABOUT IT.
I have advised client it must be a bug unique to IE6.x as all other browsers use it but he uses IE6.x and wants it fixed for this - he will upgrade when he knows it is fixed - typical!

All help appreciated - will award points for input.
smaccaAsked:
Who is Participating?
 
Bruno43Commented:
label {
  float:left;
  width:120px;
  text-align:right;
  font-weight:bold;
  margin-right:10px;
  }
input{text-align:left;}

If IE were a car, it would have been recalled years ago.
0
 
VirusMinusCommented:
to give the label a width, it needs a display:block

so style="display:block;width:100px" will work for the width

also for best cross browser compatibility you should be using the strict DOCTYPE at the top of your HTML
0
 
frindoCommented:
Actually, I just mirrored my own version of the files and found that changing the width from "100px" to "120px" fixed the problem.

VirusMinus' solution did not work on my test.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
LeeKowalkowskiCommented:
Doing display:block will make the labels go on their own line, you can use inline-block.

In IE, if you say the width is 100px and the content is wider (and cannot wrap), IE will stretch the container, unless you say otherwise with overflow (which will look rubbish having scrolling labels), or if you specify a clip rectangle (which will also look rubbish).  Other browsers will have the content bleed outside the boundary of the container (which also looks rubbish).

Whenever I've had to lay out a form like yours, I float my labels.

--
Lee
0
 
smaccaAuthor Commented:
Thanks all but no cigar still - I will still award points regardless.

As mentioned, display:block will make labels appear on their own line.
I will try and use "inline-block" but I am pretty confident I have already given this a go.

The main problem is that it works fine in all the other browsers, it is just IE v6.xx.
Any experts there that can help.

Thanks all for your comments.
Steve

0
 
LeeKowalkowskiCommented:
Could it be anything to do with your Confirm Password label being the only one with a hard-coded style attribute, saying width:100px?

When this is removed, it looks fine to me.  The stylesheet (form.css) has labels at 120px by default.

--
Lee
0
 
LeeKowalkowskiCommented:
I think the other browsers were honouring your min-width and max-width properties, which IE6 doesn't recognize.

--
Lee
0
 
frindoCommented:
@smacca

But it did work in IE6 when I set it to 120px instead of 100px.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.