?
Solved

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

Posted on 2007-10-10
8
Medium Priority
?
4,323 Views
Last Modified: 2010-05-18
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.
0
Comment
Question by:smacca
8 Comments
 
LVL 30

Expert Comment

by:VirusMinus
ID: 20054296
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
 
LVL 3

Assisted Solution

by:frindo
frindo earned 150 total points
ID: 20054321
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
 
LVL 16

Assisted Solution

by:LeeKowalkowski
LeeKowalkowski earned 150 total points
ID: 20055133
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:smacca
ID: 20055440
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
 
LVL 16

Expert Comment

by:LeeKowalkowski
ID: 20055520
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
 
LVL 16

Expert Comment

by:LeeKowalkowski
ID: 20055535
I think the other browsers were honouring your min-width and max-width properties, which IE6 doesn't recognize.

--
Lee
0
 
LVL 1

Accepted Solution

by:
Bruno43 earned 1200 total points
ID: 20056375
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
 
LVL 3

Expert Comment

by:frindo
ID: 20063314
@smacca

But it did work in IE6 when I set it to 120px instead of 100px.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Ready to get certified? Check out some courses that help you prepare for third-party exams.
No other job is as rewarding and demanding as building an iPhone app is. It is not really in the hands of the developer for the success of an iPhone app. Many factors operate jointly for every iOS application's success in the market.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

579 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question