WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > [SOLVED] Form aligned differently between browsers

Reply
  Thread Tools Display Modes
Old 2nd May 11, 10:10 PM   #1
LillyB1983
WLC Member
 
Join Date: Dec 2010
Posts: 5
Default Form aligned differently between browsers

Can someone please shed some light on my alignment issues I’m having between Safari/Firefox.
Visit: FORM
Notice my form is aligned in safari but not firefox…
I’m sure it has something to do with the absolute positioning but I need these to look the same across all browsers.

Any help is greatly appreciated!
Thanks
LillyB1983 is offline   Reply With Quote
Old 2nd May 11, 10:55 PM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Form aligned differently between browsers

Then do NOT use absolute positioning.

Use the document flow rather than trying to force things into position.
chrishirst is offline   Reply With Quote
Old 2nd May 11, 11:09 PM   #3
LillyB1983
WLC Member
 
Join Date: Dec 2010
Posts: 5
Default Re: Form aligned differently between browsers

Once I remove the absolute positioning the form gets relocated underneath my content. I don't know a way to position the div on top of my content like I can do with absolute positioning.

Would you mind elaborating?

Really appreciate your input.
LillyB1983 is offline   Reply With Quote
Old 3rd May 11, 12:01 AM   #4
LillyB1983
WLC Member
 
Join Date: Dec 2010
Posts: 5
Default Re: Form aligned differently between browsers

Ah I changed the divs position to relative and then used top/left parameters to put it in place. Seems to have worked.
LillyB1983 is offline   Reply With Quote
Old 3rd May 11, 09:59 AM   #5
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Form aligned differently between browsers

To elaborate.

It is the z-index (stacking order) that determines whether positioned elements appear to be above or below other elements.
Position absolute removes the element out of the document flow so it's position is not affected by other elements nor does it have any effect on the positioning of other elements.
Absolute positioning - When to use it and when not to
Relative positioning leaves the element in the document flow but allows the content area of the the element to be positioned away from it's "static" location. like this.

The document flow is your friend, don't fight it and learn the layout of W3c box model and floats.
Just remember if a CSS layout seems impossible to get right, you're probably doing something wrong.
chrishirst is offline   Reply With Quote
Old 3rd May 11, 10:45 PM   #6
LillyB1983
WLC Member
 
Join Date: Dec 2010
Posts: 5
Default Re: Form aligned differently between browsers

HUGE HELP CHRIS!! Thanks for all your resources. Exactly the light I was looking for.
LillyB1983 is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:37 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyright© 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.