ansaurus

Question

html <input> element ignores CSS left+right properties?

Answer 1

+1 A:

It's not ignoring left or top, you'll see it does position 10px out. What's happening is that the right and the bottom are not being respected. Form elements are treated a little bit specially in layout engines, it's entirely possible FF/IE consider the width/maxlength of the input more important, I haven't really looked into why that might be.

It's a bit of a strange thing to do though. Perhaps what you'd be better off doing is looking at <textarea> which is designed to provide a large text input, which you can push to 100% dimensions by applying width: 100%; height: 100%; and take care of the 10px margin on a container div.

WFM:

<html>
<head>
 <style>
 body
 {
  margin: 0px;
 }
 div
 {
  position: absolute; margin: 2%; width: 96%; height: 96%;
 }
 textarea
 {
  position: absolute; width: 100%; height: 100%; 
 }
 </style>
</head>
<body>
 <div>
  <textarea></textarea>
 </div>
</body>

annakata 2009-01-16 13:02:44

Actually textarea has the same behavior. I need both inputs and textareas in a pretty complex layout. I've reduced the problem to this simple scenario; if I can make this work, then the more complex layout should also work.

Gabi 2009-01-16 13:10:44

I think you'd do better to post more complete html/css then, but see my edit.

annakata 2009-01-16 13:18:00

I got it. I tried your idea with inputs and it also works. Basically if I put dummy divs around my inputs, I can set the inputs to 100% width and height and then I just position the divs. Thanks.

Gabi 2009-01-16 13:24:08

width: 100% and height: 100% should be added to the body and the html elements too.

John_ 2009-01-16 13:25:10

Answer 2

+1 A:

You can Use a Wrapper DIV

        <html> 
            <head> 
                    <style><!-- 
                #wrapper { 
                    position: absolute; 
                    left: 10px; 
                    right: 10px; 
                    top: 10px; 
                    bottom: 10px; 
                } 
                #someid { 
                  /*  position:relative;  EDIT: see comments*/
                    height:100%; 
                    width:100% 
                }
    --></style>
                </head>
            <body>
              <div id="wrapper">
              <input type="text" id="someid" value="something"/>
              </div>
           </body>
       </html>

Luis Melgratti 2009-01-16 13:24:18

Yep. Just realized that.

Gabi 2009-01-16 13:25:10

Wrarper? Do you mean wrapper?

SpoonMeiser 2009-01-16 13:31:32

Also, is the position:relative actually necessary on the input? I don't think position is inherited.

SpoonMeiser 2009-01-16 13:32:41

@SpoonMeiser. thank you. (English is not my mother tong). You where also correct about position.

Luis Melgratti 2009-01-16 13:37:29

Answer 3

+1 A:

http://reference.sitepoint.com/css/bottom say, regarding internet explorer (<= 6)

don’t support the specification of both the position and the dimensions of an absolutely positioned element using top, right, bottom, and left together; they’ll use the last vertical and horizontal position specified, and need the dimensions to be specified using width and height

Eineki 2009-01-16 13:27:20

Answer 4

A:

The way it looks in Safari is not how it should display. Because you didn't specify a height value, the input will default to the size of the last inherited font size.

The right and bottom positioning will also be ignored because you're trying to set the top and left margins at the same time. Looks like they take precedence in this case.

If you need to use the input field and have it display inside the entire width and height of the browser window at the time it is seen, you need to redo the CSS like this:

body{
    margin:10px;
}

#someid{
    display:block;
    margin:0 auto;
    width:100%;
    height:100%;
}

This will stretch the input field to as high and wide as the user has their browser window. It will also have a margin around each side of 10 pixels from the browser window.

If you have to have a margin, then set that in the body style or a wrapper DIV around the input field.

random 2009-07-25 07:51:26

ansaurus

tags:

views:

answers:

html <input> element ignores CSS left+right properties?

related questions