Connecting Tech Pros Worldwide Forums | Help | Site Map

textbox alignment problem

aamirghanchi@gmail.com
Guest
 
Posts: n/a
#1: Nov 28 '06
Hi,

I am hoping if there is a kludge in IE6 to make the textbox align with
the top label. It aligns perfectly fine in Opera and in
Netscape/Firefox to some extent.

Thanks.

<style>
.top-label {
background-color:blue;
color:white;
width:100%;
font-weight:bold;
text-align:center;
}

.field {
float:left;
margin-left:5px;
padding:0px;
}
</style>

<div class="field" style="width:75px;">
<div class="top-label">From Date</div>
<input name="FromDate" type="text" style="width:100%;">
</div>

Jukka K. Korpela
Guest
 
Posts: n/a
#2: Nov 29 '06

re: textbox alignment problem


Scripsit aamirghanchi@gmail.com:
Quote:
I am hoping if there is a kludge in IE6 to make the textbox align with
the top label.
Do you want a kludge, or do you want a solution? And what is the problem?
"Aligning with" something isn't a very exact description.
Quote:
<style>
You should post a URL, not snippets of code, and you should use valid
markup.
Quote:
<div class="field" style="width:75px;">
<div class="top-label">From Date</div>
<input name="FromDate" type="text" style="width:100%;">
</div>
You should start from constructing logical, semantic markup. And valid
markup - you're even missing a closing </divtag here.

To associate a text with a field, use <labelmarkup.

Do not set widths in pixels - for all that you can know, 75 pixels might not
be enough even for the word "From".

Always set a width for an <inputbox in HTML. You don't want to accept
unknown browser defaults in situations where your CSS code gets ignored. So
use size="...", in addition to any eventual width setting in CSS.

If the input field is for what its name and label suggest, it's width should
be set to something that reflects the length of expected input. I hope your
form explains somewhere what the expected date format is. Generally, setting
size="..." in <inputwithout CSS settings is suitable for data that is
expected to be of fixed length, since HTML has a _more logical_ approach
here (allowing the width to be set in characters).

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

aamirghanchi@gmail.com
Guest
 
Posts: n/a
#3: Nov 29 '06

re: textbox alignment problem


Jukka,

here is the link:
http://ca.geocities.com/aamirghanchi/test.htm

and here are the answers to your questions
-I asked for a kludge, because I know there is no solution as it is IE6
specific problem.
-You will understand what I mean by alignment once you lookup the link.
-If you carefully look at the code snippet I previously posted, I am
not missing any </divtag.
-I did use the LABEL tag in the actual code. Just so that I could
emphasize that this is about frmatting and not about content
description, I have used div tags for labelling.
-This code is targetted for an intranet app therefore I am aware of the
user screen settings as well as the browser (hence IE6). I have
checked the pixel width and the text fits very well in it for all
commonly used screen resolutions and IE6 view>textsize menu selection

Thanks for your good advice and I tend to stick to them when coding for
the general web.

Jukka K. Korpela wrote:
Quote:
Scripsit aamirghanchi@gmail.com:
>
Quote:
I am hoping if there is a kludge in IE6 to make the textbox align with
the top label.
>
Do you want a kludge, or do you want a solution? And what is the problem?
"Aligning with" something isn't a very exact description.
>
Quote:
<style>
>
You should post a URL, not snippets of code, and you should use valid
markup.
>
Quote:
<div class="field" style="width:75px;">
<div class="top-label">From Date</div>
<input name="FromDate" type="text" style="width:100%;">
</div>
>
You should start from constructing logical, semantic markup. And valid
markup - you're even missing a closing </divtag here.
>
To associate a text with a field, use <labelmarkup.
>
Do not set widths in pixels - for all that you can know, 75 pixels might not
be enough even for the word "From".
>
Always set a width for an <inputbox in HTML. You don't want to accept
unknown browser defaults in situations where your CSS code gets ignored. So
use size="...", in addition to any eventual width setting in CSS.
>
If the input field is for what its name and label suggest, it's width should
be set to something that reflects the length of expected input. I hope your
form explains somewhere what the expected date format is. Generally, setting
size="..." in <inputwithout CSS settings is suitable for data that is
expected to be of fixed length, since HTML has a _more logical_ approach
here (allowing the width to be set in characters).
>
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
Jukka K. Korpela
Guest
 
Posts: n/a
#4: Dec 3 '06

re: textbox alignment problem


Scripsit aamirghanchi@gmail.com:
Quote:
Jukka,
>
here is the link:
Please learn how to post to Usenet. See
http://www.cs.tut.fi/~jkorpela/usenet/dont.html

When you have wasted time by not telling the real problem and the real URL
at the start and by upside-down fullquoting, your odds of getting free help
have greatly been reduced.
Quote:
-This code is targetted for an intranet app
So it was off-topic in any comp.infosystems.www group anyway.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

aamirghanchi@yahoo.com
Guest
 
Posts: n/a
#5: Dec 4 '06

re: textbox alignment problem


Jukka, thanks for your help ... whatever it was.

I was able to fix the alignment problem by setting left margin and
width of the label tag as follows:
<label class="top-label" for="FromDate" style="width:105%;
margin-left:5px;">
Quote:
>From Date
</label>
Quote:
So it was off-topic in any comp.infosystems.www group anyway.
This usenet group is listed under stylesheet fora on the w3 site:
http://www.w3.org/Style/CSS/learning#fora


Jukka K. Korpela wrote:
Quote:
Scripsit aamirghanchi@gmail.com:
>
Quote:
Jukka,

here is the link:
>
Please learn how to post to Usenet. See
http://www.cs.tut.fi/~jkorpela/usenet/dont.html
>
When you have wasted time by not telling the real problem and the real URL
at the start and by upside-down fullquoting, your odds of getting free help
have greatly been reduced.
>
Quote:
-This code is targetted for an intranet app
>
So it was off-topic in any comp.infosystems.www group anyway.
>
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
Closed Thread