homepage Welcome to WebmasterWorld Guest from 54.81.170.186
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Css Form Shifting Out of Place
absolutely positioned form, minimized screen
jenyarubanova




msg:4423901
 12:03 am on Mar 2, 2012 (gmt 0)

Hi everyone! I am hoping someone can give me a solution to this issue I am having. I have developed a simple form to go on the index page with a simple Name, Email fields and a send button. The form has not launched yet and is in development. The form is located in my footer, which is relatively positioned and the form itself is positioned with absolute inside the footer. While everything else in the footer stays relatively perfect, the form is shifting down and down as the screen is being minimized and going on top of things on the bottom. This is only happening to the form itself and I cannot figure out if I am missing something. Here is the code:

<form>
Name: <input type="text" name="firstname"/>
Email: <input type="text" name="mail"/>
<input type="submit" value="send"/>
</form>

form{
position: absolute;
font-size:0.8em;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
letter-spacing: 0.15em;
left: 520px;
bottom: 120px;
white-space:nowrap;
}

input {
background-color:#FFF;
height:50%;
display:inline;

}

Some more information: The form is located in the right top side of the footer and as the screen is minimized, it slides down lower and lower until its almost halfway down my footer. Everything else in the footer stays in its place.
Am I missing a simple solution? Any help would be appreciated!

 

alt131




msg:4423938
 2:14 am on Mar 2, 2012 (gmt 0)

Hi jenyarubanova,

If the footer itself is getting "longer", this sounds like expected behaviour from an absolutely positioned element inside one that is relatively positioned. The form has been directed to position itself relative to the top left of footer so it will always be 520px from the left and 120px up from the bottom of footer.

Absolute elements are also "removed from the flow" which means they will be drawn as if the other elements aren't present. That means the form will be drawn at the specified left/bottom location, even if that means it is "on top" of other elements.

jenyarubanova




msg:4423955
 2:35 am on Mar 2, 2012 (gmt 0)

Hi, totally makes sense but what I am not getting is why are all the other elements stay positioned somewhat to where they are supposed to and not the form? And how would I go about fixing this problem? Thanks again!

alt131




msg:4424069
 10:16 am on Mar 2, 2012 (gmt 0)

Hi Jenya, are the other elements inside footer positioned? From your description I suspect not and if I am right, they are "in flow" so will adjust themselves so they are "positioned somewhat to where they are supposed to" as the viewport (and so footer) changes size.

However, as I said above, an absolutely positioned element has been "removed from the flow". If it is the only element out of the flow it will be the only element behaving differently.

To fix, remove the position:absolute and try using margins to achieve the layout you want instead.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved