IE 7 float:right is creating a blank line above the float right div

StackOverflow https://stackoverflow.com/questions/20484874

Pergunta

I have a simple HTML page, which works fine in IE 8 and greater, but in IE 7, the right section is getting wrapped by a line. How can I prevent this in IE 7? I tried clear:both and display:inline solutions but both didn't work.

IE 7 is Causing Float:Right to Wrap

My HTML code is:

<!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 id="Head1">
<meta http-equiv='X-UA-Compatible' content='IE=7,chrome=1' />
<title>Sample Page
</title>
<style type="text/css">
    .error
    {
        color: Red;
        font-family: Arial;
        font-size: small;
    }

    .feedback
    {
        color: Red;
        font-weight: bold;
        font-size: large;
    }

    .inprocess
    {
        background-color: lightyellow;
    }

    .inerror
    {
        background-color: #FFE2E6;
    }

    .success
    {
        background-color: #EFFFD5;
    }
</style>
</head>
<body>
<div id="headerDiv" style="width: 100%; min-width: 900px; margin-bottom: 15px;">

    <span style="font-size: small; font-weight: bold; color: gray">Welcome back, </span>
    <label class="strong" for="logout" style="color: Navy; font-size: small; font-weight: bold; font-family: Sans-Serif">
        XYZ

    </label>
    ,&nbsp;
        <label class="strong" for="logout" style="color: Navy; font-size: small; font-weight: bold; font-family: Sans-Serif">
            ABCD
        </label>
    &nbsp;&nbsp;
        <a href="javascript:closeWP();" id="logout"
            title="Log Out" style="text-align: right">Log Out</a>
    &nbsp;&nbsp; <span id="adminHintLabel" >
        <div style='margin: 5px 0px 14px 0px; float: right; font-family: arial; font-size: small;'>
            (For record with error, double click on the row to view error message.)
                <div style='height: 14px; width: 14px; float: left; background-color: lightyellow; margin-right: 4px; border: 1px solid black;'></div>
            <div style='float: left; padding-right: 14px;'>Being Processed</div>
            <div style='height: 14px; width: 14px; float: left; background-color: #FFE2E6; margin-right: 4px; border: 1px solid black;'></div>
            <div style='float: left; padding-right: 14px;'>Record has Error/s</div>
            <div style='height: 14px; width: 14px; float: left; background-color: #EFFFD5; margin-right: 4px; border: 1px solid black;'></div>
            <div style='float: left; padding-right: 14px;'>Promoted</div>
        </div>
    </span>
 </div>
</body>
</html>

Expected Display needs to be like this: Expected Display of this Page

Foi útil?

Solução

IE7 is difficult to work with at the best of times, but it's made harder when you're dealing with inline CSS (it's hard to read) and with things like <div> inside <span>, even if it is HTML5. Sometimes you used single quotes ' and sometimes double ". Just use double. <div class="classname">.

Anyway, I think there's a few things you'll need to do:

First, you have <span id="adminHintLabel" > that wraps the <div> you want floated right. But the span itself isn't floated right. Remove the span container, it's excess.

Second, you'll need to float the stuff on the left, left, which means placing a container around them, like this:

<div style="float: left;"><!-- New Container -->
  <span style="font-size: small; font-weight: bold; color: gray">Welcome back, </span>
  <label class="strong" for="logout" style="color: Navy; font-size: small; font-weight: bold; font-family: Sans-Serif">XYZ</label>
    ,&nbsp;
  <label class="strong" for="logout" style="color: Navy; font-size: small; font-weight: bold; font-family: Sans-Serif">ABCD</label>
  &nbsp;&nbsp;
  <a href="javascript:closeWP();" id="logout" title="Log Out" style="text-align: right">Log Out</a>
  &nbsp;&nbsp;
</div>

Finally, in the right floating content you have added the text first and then the floated elements, but you want the text to display last. Add a container to the text, place it last in the order, and float it left like the rest:

<div style="margin: 5px 0px 14px 0px; float: right; font-family: arial; font-size: small;">
    <div style="height: 14px; width: 14px; float: left; background-color: lightyellow; margin-right: 4px; border: 1px solid black;"></div>
    <div style="float: left; padding-right: 14px;">Being Processed</div>
    <div style="height: 14px; width: 14px; float: left; background-color: #FFE2E6; margin-right: 4px; border: 1px solid black;"></div>
    <div style="float: left; padding-right: 14px;">Record has Error/s</div>
    <div style="height: 14px; width: 14px; float: left; background-color: #EFFFD5; margin-right: 4px; border: 1px solid black;"></div>
    <div style="float: left; padding-right: 14px;">Promoted</div>
    <!-- Add container to text and place at bottom -->
    <div style="float: left;">(For record with error, double click on the row to view error message.)</div>
</div>

Here it is all together, and tested on IE7 native.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top