asked on

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

ASKER CERTIFIED SOLUTION

LZ1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

JF0

ASKER

how silly.

thank you!

LZ1

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.