Width of attribute

lala56 · Mar 28, 2007

Taking the advice I got in another UK Webmaster forum I designed a beautiful form

Everything lines up so neatly (thanks to CSS), that it is almost too good to be true...

I just cannot make the the <SELECT>-drop-down the same size as text input and textareas. All width are controlled by CSS. I have been told that for some reason browser shorten <SELECT> by 4 pixel and should just add them, which I tried. It looks very good in Firefox, but is then too long for IE and Netscape. I really want to have it perfect and cannot see any light at the end of the tunnel

Is there someone who rescues the poor shipwrecked lala? I would be grateful for the rest of my days

lala

inactive_jumpenjuhosaphat · Mar 28, 2007

You could use a hack
You could set up your select css for IE first

select
{
rules for the select tag that IE needs to follow
}

then for firefox, use the below:

html>body select
{
rules for firefox to follow
}

Hope that helps.

ForumJoiner · Mar 28, 2007

The advice above is based on the fact that certain versions of IE don't understand some CSS instructions, therefore will ignore them. This may not be true in the future (for instance, IE 7 understands more than IE6).

Let me ask you this: if you find a site that offers you the winning numbers for the next week's draw, would you care if that site looks perfect in any browser? In other words, if the visitor has time to notice 1 px left or right, then you should work more of the content of the site.

What do you think about the post below?
http://forums.ukwebmasterworld.com/css-forums/4521-how-test-your-css-html-files.html

lala56 · Mar 28, 2007

Thank you two for your assistance

ForumJoiner I read your article and understand your point of view. Still, in this particular case, it really needs to be perfect.

I will try jumpenjuhosaphat's suggestion and hope it solves some of my problems...

lala

ForumJoiner · Mar 28, 2007

Needs to be perfect in which browser? Which ones you intend to test? I strongly suggest if you have in mind IE, to test in both IE 6 and IE 7.

If the code is not secret, could you please post the sequence here?

lala56 · Mar 28, 2007

Just tried the hack, thanks again. Unfortunately, it made it look horrible in Opera...

I really want to make it work. It is a website of a friend and I really want to make a huge effort.

The code is :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<HTML>

<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>4 Living Furniture</TITLE>
<STYLE type="text/css">
#main_form {margin:0; padding:0;}
input, textarea {width: 200px;}
select {width: 200px;}
#tickbox, #submit, #reset {width: auto;}
table {border:0; color:#999999; font-family:Arial; font-size:14px;}
</STYLE>
</HEAD>

<BODY>
<TABLE>
<TR>
<TD>
<FORM id="main_form" name="main_form" method="post" action=''still open">
<TABLE>
<TR>
<TD height="25" colspan="5">
<P>Are you an interior retailer or designer?<BR>
<FONT style="font-size:10px">Fill in your details to receive your catalogue and price list.</FONT></P>
<P>Are you a consumer looking for a 4 Living stockist?<BR>
<FONT style="font-size:10px">Fill in your details and we´ll point you
to a stockist near you!</FONT></P>
</TD>
</TR>
<TR>
<TD height="25" colspan="5"> </TD>
</TR>
<TR valign="top" align="left">
<TD width="130px" height="25"><LABEL for="firstname">First name:</LABEL></TD>
<TD width="200px"><INPUT type=text name="firstname" id="firstname" maxlength="300" tabindex="1"></TD>
<TD width="50px"> </TD>
<TD width="150px"><LABEL for="address1">Address line 1:</LABEL></TD>
<TD width="200px"><INPUT type=text name="address1" id="address1" maxlength="300" tabindex="7"></TD>
</TR>
<TR valign="top" align="left">
<TD height="25"><LABEL for="lastname">Last name:</LABEL></TD>
<TD><INPUT type="text" name="lastname" id="lastname" maxlength="300" tabindex="2"></TD>
<TD> </TD>
<TD><LABEL for="address2">Address line 2:</LABEL></TD>
<TD><INPUT type="text" name="address2" id="address2" maxlength="300" tabindex="8"></TD>
</TR>
<TR valign="top" align="left">
<TD height="25"><LABEL for="companyname">Company Name:</LABEL></TD>
<TD><INPUT type="text" name="companyname" id="companyname" maxlength="300" tabindex="3"></TD>
<TD> </TD>
<TD><LABEL for="city">Town/City:</LABEL></TD>
<TD><INPUT type="text" name="city" id="city" maxlength="300" tabindex="9"></TD>
</TR>
<TR valign="top" align="left">
<TD height="25"><LABEL for="email">E-mail:</LABEL></TD>
<TD><INPUT type="text" name="email" id="email" maxlength="300" tabindex="4"></TD>
<TD> </TD>
<TD><LABEL for="state">County:</LABEL></TD>
<TD><INPUT type="text" name="state" id="state" maxlength="300" tabindex="10"></TD>
</TR>
<TR valign="top" align="left">
<TD height="25"><LABEL for="custentity2">Mobile number:</LABEL></TD>
<TD><INPUT type="text" name="custentity2" id="custentity2" maxlength="300" tabindex="5"></TD>
<TD> </TD>
<TD><LABEL for="zipcode">Postcode:</LABEL></TD>
<TD><INPUT type="text" name="zipcode" id="zipcode" maxlength="300" tabindex="11"></TD>
</TR>
<TR valign="top" align="left">
<TD height="25"><LABEL for="category_fs">I am a...</LABEL></TD>
<TD align="right">
<SELECT name="category" id="category_fs" tabindex="6">
<OPTION value=" " selected></OPTION>
<OPTION value="9" >Consumer looking for stockist</OPTION>
<OPTION value="3" >Interior Designer</OPTION>
<OPTION value="8" >Restaurant, Hotel, Office</OPTION>
<OPTION value="4" >Retailer, multiple outlets</OPTION>
<OPTION value="1" >Retailer, one outlet</OPTION>
<OPTION value="7" >Retailer, online and catalogue</OPTION>
</SELECT> </TD>
<TD> </TD>
<TD><LABEL for="country">Country (if not UK):</LABEL></TD>
<TD><INPUT type="text" name="country" id="country" maxlength="300" tabindex="12"></TD>
</TR>
<TR>
<TD height="25" colspan="5"> </TD>
</TR>
<TR valign="top" align="left">
<TD><LABEL for="comments">Comments</LABEL></TD>
<TD align="right"><TEXTAREA name="comments" rows="4" cols="200" id="comments" tabindex="13"></TEXTAREA></TD>
<TD> </TD>
<TD colspan="2"><LABEL for="unsubscribe_fs">Unsubscribe from updates?</LABEL><INPUT type="checkbox" name="unsubscribe" value="T" id="unsubscribe_fs" tabindex="14">
<BR ><FONT style="font-size:10px">Tick if you do not want to stay up-to-date with occasional news and offers</FONT><BR /></TD>
</TR>
<TR>
<TD height="25" colspan="5"> </TD>
</TR>
<TR valign="top" align="left">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD align="right"><INPUT name="submit" type="submit" value="Submit" id="submit" tabindex="15">
<INPUT name="reset" type="reset" value="Reset" id="reset" tabindex="16"></TD>
</TR>
</TABLE>
</FORM>
</TD>
</TR>
</TABLE>
</BODY>

</HTML>

Please let me know if I could change sth to make it work better...

lala

ForumJoiner · Mar 28, 2007

You use a mixed CSS/HTML code. Looking at your page I understand that accessibility is not important for the page you design. That is, a lot of dimensions are set in stone.

I'll offer you a quick solution, tested in IE 6, FireFox and Opera. If you like it, I'll tell what program to use to quickly make more.

Code:

<FORM name=LayoutForm method=POST action="" enctype="text/plain">
<select name="D1" size="1" style="position:absolute;left:85px;top:73px;width:216px;font-family:MS Shell Dlg;z-index:3">
</select>
<INPUT type="text" style="position:absolute;left:85px;top:51px;width:216px;z-index:4" size="27" name="T1" value="">
</FORM>

I attached 3 pictures, one for each browser's output. (from left to right: IE 6, FireFox, Opera). Looks pretty much the same, isn't it?

lala56 · Mar 28, 2007

Looks pretty good. Its just that when I copy it into the body section of a simple HTML file and check it in each browser I have to same problem if not worse...

lala

ForumJoiner · Mar 28, 2007

That's interesting. Here is the complete source I've tried again in all 3 browsers. All look the same. Could you please post some screenshots of what you see on you try the source below (just that source, with nothing added in the first step)?

HTML:

<html>
 <head>
 </head>
 <body>
  <FORM name=LayoutForm method=POST action="" enctype="text/plain">
   <select name="D1" size="1" style="position:absolute;left:85px;top:73px;width:216px;font-family:MS Shell Dlg;z-index:3">
   </select>
   <INPUT type="text" style="position:absolute;left:85px;top:51px;width:216px;z-index:4" size="27" name="T1" value="">
  </FORM>
 </body>
</html>

I really want to make a huge effort

If you like how it looks in the pictures, then I'll recommend to try BlueVoda. It's a freeware program, which will ruin your desire for hard work

, by making things simple.

inactive_jumpenjuhosaphat · Mar 28, 2007

If it looks the same, then maybe your browser has the old HTLM cached. Try hitting your refresh button in each browser to see if that makes any difference.

ForumJoiner · Mar 29, 2007

jumpenjuhosaphat said:
If it looks the same, then maybe your browser has the old HTLM cached. Try hitting your refresh button in each browser to see if that makes any difference.

I'm not sure if this message is for me or for lala. If it's for me, I did even more then refreshing: I copied the code into a new file, loaded the new file in all 3 browsers - the code look the same in all 3. "The same" - the full HTML code looks identical to the "form" code and "the same" one to another, like in the pictures I posted.

inactive_jumpenjuhosaphat · Mar 29, 2007

Sorry, I should have specified....That was for lala.

Sometimes when I make changes to a website, I'll have to refresh it twice for the changes to take effect. Especially when images were changed but the name remained the same.

lala56 · Mar 29, 2007

Can see your example pretty well, but wonder how that would fit into my CSS information? For positioning I worked with tables and used the following CSS information in the head:

<STYLE type="text/css">
#main_form {margin:0; padding:0;}
input, textarea {width: 200px;}
select {width: 200px;}
#tickbox, #submit, #reset {width: auto;}
table {border:0; color:#999999; font-family:Arial; font-size:14px;}
</STYLE>

Tried to take your code, but to leave the positioning out:

<STYLE type="text/css">
#main_form {margin:0; padding:0;}
input, textarea {width:216px;z-index:4" size="27" name="T1" value="";}
select {width:216px;font-family:MS Shell Dlg;z-index:3;}
#tickbox, #submit, #reset {width: auto;}
table {border:0; color:#999999; font-family:Arial; font-size:14px;}
</STYLE>

Does not work. If I just use your code in a new file that works pretty well...

lala

ForumJoiner · Mar 29, 2007

My advice is to import your page in BlueVoda software and to continue from there. Because you use fixed dimensions, this software can greatly simplify your work in this particular case.

lala56 · Mar 30, 2007

Cheers

lala

The Most Active and Friendliest
Affiliate Marketing Community Online!

Width of attribute

lala56

New Member

inactive_jumpenjuhosaphat

Facilitator

ForumJoiner

New Member

lala56

New Member

ForumJoiner

New Member

lala56

New Member

ForumJoiner

New Member

lala56

New Member

ForumJoiner

New Member

inactive_jumpenjuhosaphat

Facilitator

ForumJoiner

New Member

inactive_jumpenjuhosaphat

Facilitator

lala56

New Member

ForumJoiner

New Member

lala56

New Member

Similar threads

The Most Active and Friendliest Affiliate Marketing Community Online!

Width of attribute

New Member

Facilitator

New Member

New Member

New Member

New Member

New Member

New Member

New Member

Facilitator

New Member

Facilitator

New Member

New Member

New Member

Similar threads

The Most Active and Friendliest
Affiliate Marketing Community Online!