• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 332
  • Last Modified:

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

0
JF0
Asked:
JF0
  • 2
1 Solution
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now