Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

width of elements in a form with CSS - INFO, not problem

Status
Not open for further replies.
jez

jez

Programmer
Apr 24, 2001
370
VN
Hi everyone,

I have found that when setting
width:350px;

for a select list element and for a text input box right below it, the text box is only the same width as the select list if i set it with
width:345px;

This is the same in FF and IE7 .. where are my 5 pixels going?
 
Sort by date Sort by votes
Dan is right - pixel perfection is an illution.

Didn't try this, but give it a swing: Try adding
Code: 
padding : 0;
to your select style to see if that renders any difference. Sometimes is does. May not in this case though.
 
Upvote 0 Downvote
Oh i appreciate that, what i am pointing to here is that the behaviour is the same in IE and FF.
What is different is that a style of 350px on a select will be different length than when you put a style of 350px on a text input.
 
Upvote 0 Downvote
Jez,

The difference in width seems to be caused by how browsers renders the drop-down arrow. This you have no control over.

However, this will keep the illution (only tested in FF2 & IE6):
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
  <title>SELECT &amp; INPUT | Equal Box Width</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <style>
    .myBox {
      width : 350px;
      border : solid 1px #c0c0c0;
      overflow-x : hidden;
    }
    .mySelect {
      width : 100%;
      border : solid 1px #ffffff;
    }
    .myInput {
      width : 100%;
      border-style : none;
      padding : 0px;
      border : solid 1px #ffffff;
    }
  </style>
</head>
<body>
  <form action="#" method="post">
    <div class="myBox">
      <select class="mySelect">
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
      </select>
    </div>
    <div class="myBox">
      <input class="myInput">
    </div>
  <form>
</body>
</html>

... although with a difference in width - rendered 2px wider in FF/IE7 than in IE6.

If you can live with that, I believe this could be what you're looking for? Give it a try :)

PS. The [tt]overflow-x : hidden;[/tt] is the trick in this example ...
 
Upvote 0 Downvote
Hmm, yes that is interesting, i've give it try. I think that what we are talking about here is the approach to applying CSS. Rather than try and control the form elements, let them inherit their width.
I think that maybe approaching CSS in that way could make for shorter style sheets, but maybe not cope with indecisive clients ;-)

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
319
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
398
spamjim
spamjim
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
656
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
338
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
268
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top