Ghost top margin in ie7

HTML & CSS
1

Take a look at this please
It looks fine in all browsers except IE7 (and maybe IE6, but I don’t have that one installed right now). IE8 is fine.

“Fine” means: the image and the text below form one white rectangle, without any black line between them.

In IE7, there is a ‘ghost’ top margin on the first p in the “comment” class div. I checked it out with Firebug lite, and it gives all the correct values, but it also shows that this black line is part of the first p. Since the p has a white background, and no padding or margins, it should be all white (like it is in all other browsers).

If I use float:left instead of position:relative on the “comment” div, that black line disappears, but the box doesn’t expand to the width of the image anymore.

Any solution? :injured:

By the way, the original page contains a lot more data, so don’t wonder why I have all those empty divs inside empty divs :wink:

2

.comment doesn’t have Layout. When you float: left, you’re giving the box Layout.
Solution: either a hidden “zoom: 1” comment somewhere, or trigger out in the open by giving .comment a width.

Note: why two separate p’s for a single sentence?
Request Parts.
By email.

Instead of
Request parts by email.
?

Or just a test with multiple p’s?

3

Thanks poes :smiley:
The double p was a leftover from one of the many tests I did trying to resolve this issue.

4

However keep in mind that any top margins you DO add after a float, IE will püx0r:

in case that situation comes up too.

5

I would do the caption like this and avoid the problem.


<ul>
  <li><a href="#"><img src="http://www.galleons.it/sptest/images/wp491fe4cd_0f.jpg" alt="Request for parts by email" /></a><[B]span>Request Parts<br>By email</span><[/B]/li>
 </ul>



.box li span{
    display:block;
    text-align:center;
    font-style: italic;
    color: red;
    font-size: 160%;
    background-color: white;
    font-weight: 700;
    padding:10px 0 10px;
    line-height:1.4;

}

Otherwise to reduce that gap in IE would mean applying widths to the list and to the comment and probably floating them also.

6

We aren’t seeing all the content though. We don’t know the true page structure.

7

True :slight_smile:

But the answer will still be the same for IE :wink:

8

Paul, that doesn’t seem to work for IE7, IE8 and Opera (see the link in my OP)? Or am I missing something?

If I add clear:both to the span it works fine for all but IE7, and that’s what I had in the first place, so that’s clearly not a good solution.

9

Hi,

I didn’t notice that you had floated the anchor and put a margin on it so the span needs to be inside the anchor which would make more sense anyway as the text and image become one link which is good.


.box li a{text-decoration:none}
.box li span {
    display:block;
    text-align:center;
    font-style: italic;
    color: red;
    font-size: 160%;
    background-color: white;
    font-weight: 700;
    padding:10px 0 10px;
    line-height:1.4;
}



<ul>
                        <li><a href="#"><img src="http://www.galleons.it/sptest/images/wp491fe4cd_0f.jpg" alt="Request for parts by email" /><span>Request Parts<br>
                            By email</span></a></li>
                    </ul>

If you don’t want the text to be an image then you would need to float the list and remove the margin from the anchor and apply it to the list.

Edit:

Hmm… Ie6 and 8 are now ok but IE7 is wrong - Give me a minute to look :slight_smile:

10

<span> css line-height: 1.4 makes the bad stuff happen, if I understand correctly :).

11

Ok IE7 is being awkward in that structure and you would need to do something like this:


.box ul a {
    margin: 0 3px 0 0;
    float: left;
    background-color: white;
    margin:0 0 3px;
    text-align:center;
}
.box ul a.first {
    margin: 0;
}
.box li {
    display:inline;
}
.box li a {
    text-decoration:none
}
.box li span {
    clear:both;
    display:block;
    text-align:center;
    font-style: italic;
    color: red;
    font-size: 160%;
    font-weight: 700;
    padding:10px 0 10px;
    line-height:1.4;
    min-height:0;
}

Full code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Welcome</title>
<meta name="Description" lang="en" content="DESCRIPTION">
<meta name="Keywords" lang="en" content="KEYWORDS">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="Distribution" content="global">
<meta name="robots" content="index, follow">
<meta name="robots" content="noodp, noydir">
<link rel="stylesheet" href="css/master.css" type="text/css" media="all">
<style type="text/css">
/* -----------------------------------
Site:       
CSS author: 
Updated:    Date here
Updated by: Date here
----------------------------------- */

@media screen {
/* -----------------------------------
    simple reset
    ----------------------------------- */
    
    html, body, ul, ol, li, form, fieldset, legend {
    margin: 0;
    padding: 0;
}
fieldset, img {
    border: 0;
}
legend {
    color: #000;
}
input, textarea, select, button {
    font-size: 110%;
    line-height: 1.1;
    font-family: helvetica, arial, sans-serif;
}
button {
    width: auto;
    overflow: visible;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    vertical-align: top;
    font-weight: normal;
}
ul li {
    list-style: none;
}
abbr, acronym {
    border-bottom: .1em dotted;
    cursor: help;
}
sup {
    vertical-align: text-top;
}
sub {
    vertical-align: text-bottom;
}
pre, code {
    font-family: "Courier New", monospace, serif;
    font-size: 100%;
    line-height: 1.2;
}
/* -----------------------------------
    elements
    ----------------------------------- */
    
    body {
    color: #fff;
    background: #000;
    font: 90%/1 Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    color: #c40000;
}
h1 {
    font-size: 200%;
}
h2 {
    font-size: 180%;
}
h3 {
    font-size: 160%;
}
h4 {
    font-size: 140%;
}
h5 {
    font-size: 120%;
}
h6 {
    font-size: 100%;
}
p {
    margin: 0 0 1.5em;
    line-height: 1.4;
}
a:link {
    color: #0f3163;
}
a:visited {
    color: #04214b;
}
a:focus {
    color: #000;
    outline: thin dotted;
}
a:hover {
    color: #000;
}
a:active {
    color: red;
}
/* -----------------------------------
    layout
    ----------------------------------- */
    
    .container {
    width: 1100px;
    margin: 0 auto;
}
.content-container {
    clear: both;
    padding: 20px 0 0;
}
.content {
    float: left;
}
/* -----------------------------------
    header
    ----------------------------------- */
    
    .header {
    float: left;
    width: 1100px;
    position: relative;
    padding: 20px 0 0;
}
h1 {
    margin: 0;
    padding: 0 0 20px;
}
h1 img {
    display: block;
}
/* -----------------------------------
    footer
    ----------------------------------- */
    
    .footer {
    position: relative;
    clear: both;
    margin: 0 0 20px;
    padding: 20px 0;
    font-size: 90%;
}
.footer li {
    display: inline;
    margin: 0 15px 0 0;
}
.footer a:link, .footer a:visited {
    color: #fff;
}
/* -----------------------------------
    box
    ----------------------------------- */
.box {
    margin: 0 0 15px;
    clear: both;
}
.group {
    float: left;
}
.group ul {
    clear: both;
}
.box .group {
    margin: 0 0 15px;
}
.box h2, .box h3, .box h4, .box h5, .box h6 {
    margin: 0 0 .3em;
}
.box h2 {
    font-size: 145%;
    color: white;
    font-style: italic;
    font-weight: 700;
    float: left;
}
.box h3 {
    font-size: 125%;
}
.box h4 {
    font-size: 115%;
}
.box h5 {
    font-size: 105%;
}
.box h6 {
    font-size: 100%;
}
.box img {
    display: block;
}
.comment {
    position: relative;
    clear: both;
    margin: 0 3px 0 0;
    width: 180px;
}
.box p {
    font-style: italic;
    color: red;
    font-size: 160%;
    text-align: center;
    background-color: white;
    font-weight: 700;
    margin: 0;
}
.box ul a {
    margin: 0 3px 0 0;
    float: left;
    background-color: white;
    margin:0 0 3px;
    text-align:center;
}
.box ul a.first {
    margin: 0;
}
.box li {
    display:inline;
}
.box li a {
    text-decoration:none
}
.box li span {
    clear:both;
    display:block;
    text-align:center;
    font-style: italic;
    color: red;
    font-size: 160%;
    font-weight: 700;
    padding:10px 0 10px;
    line-height:1.4;
    min-height:0;
}
/* -----------------------------------
    classes
    ----------------------------------- */
    
    .structural {
    position: absolute;
    left: -500em;
}
</style>
</head>
<body>
<div class="container">
    <div class="header"> </div>
    <div class="content-container">
        <div class="content">
            <div class="box">
                <div class="group">
                    <ul>
                        <li><a href="#"><img src="http://www.galleons.it/sptest/images/wp491fe4cd_0f.jpg" alt="Request for parts by email" /><span>Request Parts<br>
                            By email</span></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="footer"> </div>
</div>
</body>
</html>
12

I think that you may be right that it was the original trigger.:slight_smile: I added haslayout to the span and hopefully it will work properly now.

13

Thanks a lot guys! I’ll have to study a bit to understand it all.

One last question: I noticed this before, and it is happening again with this solution: in IE7 the span inside the <a> tag makes the mouse cursor loose its hand shape, although the span is part of the link and clickable. Any idea why?

14

Add cursor: pointer to the span - It’s an old ie bug :slight_smile:

15

Of course, I should’ve know…
Thanks again :slight_smile: