IE6/7 and older FF span alignment problem

If you compare this page in modern browsers vs IE6/7 you will see the word details is pushed down and missing the right passing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
        /* RESET */
        /* ----------------------------------------- */
        
        /* Global reset */
        /* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
        *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
        table { border-collapse:collapse; border-spacing:0 }
        fieldset, img { border:0 }
        address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
        ol, ul, li { list-style:none }
        caption, th { text-align:left }
        h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
        q:before, q:after { content:''}
        
        /* Global reset-RESET */
        /* The below restores some sensible defaults */
        strong { font-weight:bold }
        em { font-style:italic }
        a img { border:none } /* Gets rid of IE's blue borders */
        
        /*My Styles*/
		#table-container {width:600px;margin-top:100px;background-color:#666}
        
        .odd {background-color:#F96}
        .even {background-color:#FC6}
        
		.header {padding:0 10px;}
        
        .group {padding-bottom:3px}
		
		.details {float:right;cursor:pointer;}
</style>
</head>

<body>
        <div id='table-container'>
                <div class='group'>
                        <div class='even header'>
                                <span>Mr. Plow</span>
                                <span class='details'>Details</span>
                        </div>

                </div>
                <div class='group'>
                        <div class='even header'>
                                <span>Plow King</span>
                                <span class='details'>Details</span>
                        </div>

                </div>
        </div>
</body>
</html>

Open in new window

LVL 16
JF0Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LZ1Commented:
Old IE 6/7 doesn't allow floated elements to sit beside non-floated elements.  Therefore put the floated elements first in the source code.
Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
        /* RESET */
        /* ----------------------------------------- */
        
        /* Global reset */
        /* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
        *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
        table { border-collapse:collapse; border-spacing:0 }
        fieldset, img { border:0 }
        address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
        ol, ul, li { list-style:none }
        caption, th { text-align:left }
        h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
        q:before, q:after { content:''}
        
        /* Global reset-RESET */
        /* The below restores some sensible defaults */
        strong { font-weight:bold }
        em { font-style:italic }
        a img { border:none } /* Gets rid of IE's blue borders */
        
        /*My Styles*/
		#table-container {width:600px;margin-top:100px;background-color:#666}
        
        .odd {background-color:#F96}
        .even {background-color:#FC6}
        
		.header {padding:0 10px;}
        
        .group {padding-bottom:3px}
		
		.details {
	float:right;
	cursor:pointer;
	display: inline;
}
</style>
</head>

<body>
<div id='table-container'>
                <div class='group'>
                        <div class='even header'>
                                <span class='details'>Details</span>                                
                                <span>Mr. Plow</span>

                        </div>

                </div>
<div class='group'>
                        <div class='even header'>
                                 <span class='details'>Details</span>
                                 <span>Plow King</span>
                               
                        </div>

        </div>
  </div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
JF0Author Commented:
how silly.

thank you!
0
LZ1Commented:
No problem.  Just a quark with the older browsers.  I'm usually very adminent about not supporting IE 6, but this also applies to 7.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.