Width of attribute

**lala** · 03-28-2007, 12:04 PM

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** · 03-28-2007, 02:18 PM

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** · 03-28-2007, 03:37 PM

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/c...tml-files.html

**lala** · 03-28-2007, 06:38 PM

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** · 03-28-2007, 06:47 PM

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?

**lala** · 03-28-2007, 06:54 PM

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** · 03-28-2007, 07:23 PM

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?

**lala** · 03-28-2007, 09:10 PM

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** · 03-28-2007, 09:20 PM

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 Code:

<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** · 03-29-2007, 01:00 AM

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.

Webmaster SEO Tools, Resources, Web Hosting, Discussion Forums

Thread: Width of attribute

LinkBack

Thread Tools

Display

Width of attribute

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions