471,603 Members | 1,581 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,603 software developers and data experts.

CSS positioning cross-browser (well IE, FF)

I've got html page with has a fixed height - there are five buttons on
the page. The page has a fixed, known height - but the width can
change. The five buttons should be arranged on the page as follows
(all buttons should always be 3px from the top):

"button1" - left edge always 3px from left side of the page
"button2" - left edge always be 5px to the left of "button 1:"
"button3" - buttons three and four should float (relatively) in the
middle of the page
"button4" - left edge always be 5px to the left of "button 3:
"button5" - right edge always 3px from right side of page

Button2 could float to the left of button1 - but I'd like to know how
to get it fixed to the right of button1 by 5px.
A key requirment is that buttons 3,4 are seperated by 5px and appear
to float together (not ever overlap)...
I've tried the following CSS - it works in IE but in FF the buttons
tops (buttons 3,4) don't align.
Anyone have any suggestions:

..Button1 {
position: absolute;
left: 3px;
top: 3px;
}
..Button2 {
position: absolute;
top: 3px;
margin-left: 10%; /* HOW DO I GET THIS BUTTON TO BE 5x FROM
Button1? */
}
..Button3 {
position: relative;
top: 3px;
margin-left: 43.5%; /* HOW DO I GET Button3,4 TO FLOAT
TOGETHER */
} /* AND STAY TOP ALIGNED AT
5px? */
..Button4 {
position:relative;
top: 3px;
}
..Button5 {
position: absolute;
right: 3px;
top: 3px;
}

Nov 2 '07 #1
0 2419

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by |{evin | last post: by
17 posts views Thread by Mark Rae | last post: by
2 posts views Thread by Eric Caron | last post: by
2 posts views Thread by Tai | last post: by
2 posts views Thread by Questman | last post: by
15 posts views Thread by CMM | last post: by
7 posts views Thread by =?iso-8859-1?q?Jesper_R=F8nn-Jensen?= | last post: by
10 posts views Thread by Christopher Nelson | last post: by
4 posts views Thread by celoftis | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by CCCYYYY | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.