why extra space between two lines in IE? [Archive]

dukevn

07-13-2008, 02:23 PM

Hi folks,

I am playing around with css, and I want to control the font of text in a table. The 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Table with DIV and CSS</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<div class="leftnav">
<div id="main">
<a href="localhost">
<div class="element">
<img class="divright" src="a.jpg" alt="intro_thumnail" />
<p>
<span class="text1" >test1</span><br />
<span class="text2" >test2</span>
</p>
</div>
</a><a href="localhost">
<div class="element">
<img src="b.jpg" class="divright" width="50" height="50" alt="intro_thumnail" />
<p>test3, test 4 test 5</p>
</div></a>
</div>
</div>
</body>
</html>

and style.css

.leftnav {
float: left;
width: 400px;
}

.content {
margin-left: 400px;
}

.rightnav {
float: right;
width: 300px;
}

#main {
background-color: #ffffff;
border: 2px solid blue;
margin: 0 0 0 0;
width:60%;
}

.element {
background-color: red;
border: 2px solid blue;
margin: 0 0 0 0;
float: left;
width:99%;
}

.element:hover {
background-color: green;
}

div.element p {
margin-top: 0;
}

.divright {
float: left;
width: 100px;
margin: 0 0 0 0px;
background-color: #ddd;
padding: 2px;
border: 1px solid blue;
width:100px;
}

span.text1 {
font: 15px arial;
background-color: white;
margin-bottom:20px;
padding: 0px;
width:100%;

}

span.text2 {
font: 8px arial;
background-color: white;
margin: 0 0 0 0;
padding: 0px;
}

My question is about test1 and test2 (I put the red and white background for easily see the problem). In FF I see no gap or extra space between those to white spans, but in IE, there is a red space between them. Why is that? How can I eliminate that space?

Thanhks,

D.

Nile

07-13-2008, 10:13 PM

I believe you mean text1 and text2.
The reason why is because your giving margin-bottom to the text1 span. And I think for some reason in FF margin doesn't work for spans. Try this:

.leftnav
{
float: left;
width: 400px;
}
.content
{
margin-left: 400px;
}
.rightnav
{
float: right;
width: 300px;
}
#main
{
background-color: #ffffff;
border: 2px solid blue;
margin: 0 0 0 0;
width: 60%;
}
.element
{
background-color: red;
border: 2px solid blue;
float: left;
margin: 0 0 0 0;
width: 99%;
}
.element:hover
{
background-color: green;
}
div.element p
{
margin-top: 0;
}
.divright
{
background-color: #ddd;
border: 1px solid blue;
float: left;
margin: 0 0 0 0px;
padding: 2px;
width: 100px;
}
span.text1
{
background-color: white;
font: 15px arial;
margin-bottom: 0;
padding: 0px;
width: 100%;
}
span.text2
{
background-color: white;
font: 8px arial;
margin: 0 0 0 0;
padding: 0px;
}

jscheuer1

07-14-2008, 06:27 AM

Generally speaking, the default padding and margins for elements varies among browsers (and of course, among elements). So it is often a very good practice to start your stylesheet with:

* {
margin:0;
padding:0;
}

Then whatever elements, classes and/or uniquely id'ed elements and their various descendant elements (if any) you style, you can rest assured that they are otherwise starting with 0 padding and margins.

dukevn

07-14-2008, 01:56 PM

I believe you mean text1 and text2.

Yes Nile, those two spans.

The reason why is because your giving margin-bottom to the text1 span. And I think for some reason in FF margin doesn't work for spans. Try this:

.leftnav
{
float: left;
width: 400px;
}
.content
{
margin-left: 400px;
}
.rightnav
{
float: right;
width: 300px;
}
#main
{
background-color: #ffffff;
border: 2px solid blue;
margin: 0 0 0 0;
width: 60%;
}
.element
{
background-color: red;
border: 2px solid blue;
float: left;
margin: 0 0 0 0;
width: 99%;
}
.element:hover
{
background-color: green;
}
div.element p
{
margin-top: 0;
}
.divright
{
background-color: #ddd;
border: 1px solid blue;
float: left;
margin: 0 0 0 0px;
padding: 2px;
width: 100px;
}
span.text1
{
background-color: white;
font: 15px arial;
margin-bottom: 0;
padding: 0px;
width: 100%;
}
span.text2
{
background-color: white;
font: 8px arial;
margin: 0 0 0 0;
padding: 0px;
}

Nope, does not help at all. I put all margin to 0. See here: http://mangthugian.com/test/table.html. It is fine in FF, but there is a red space in IE (both 7 and 6).

I think BR tag causes the problem, but I tried to assign BR tag a class with height = 0 or line-height = 0 but still no help.

D.

dukevn

07-14-2008, 01:59 PM

Generally speaking, the default padding and margins for elements varies among browsers (and of course, among elements). So it is often a very good practice to start your stylesheet with:

* {
margin:0;
padding:0;
}

Then whatever elements, classes and/or uniquely id'ed elements and their various descendant elements (if any) you style, you can rest assured that they are otherwise starting with 0 padding and margins.

Yes, I know I should do that, but in the case I am adding some content to the already-there site, then adding that in the extra css will screw up the whole site.

Nile

07-14-2008, 02:07 PM

Alright, try giving your text some line-height (http://www.w3schools.com/css/pr_dim_line-height.asp)
Giving your code line-height may effect the pages appearance. Well, that is more then the span spacing. For any reason it may change other divs vertical align too. Then you will end up having to give those divs line-height. But thats not hard.
Good Luck!

jscheuer1

07-14-2008, 04:50 PM

This worked fine here in IE 6 & 7 and FF 3:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Table with DIV and CSS</title>
<style type="text/css">
.leftnav {
float: left;
width: 400px;
}

.content {
margin-left: 400px;
}

.rightnav {
float: right;
width: 300px;
}

#main {
background-color: #ffffff;
border: 2px solid blue;
margin: 0 0 0 0;
width:60%;
}

.element {
background-color: red;
border: 2px solid blue;
margin: 0 0 0 0;
float: left;
width:99%;
}

.element:hover {
background-color: green;
}

div.element p {
margin-top: 0;
}

.divright {
float: left;
width: 100px;
margin: 0 0 0 0px;
background-color: #ddd;
padding: 2px;
border: 1px solid blue;
width:100px;
}

span.text1 {
font: 15px arial;
background-color: white;
margin-bottom:20px;
padding: 0px;
width:100%;

}

span.text2 {
font: 8px arial;
background-color: white;
margin: 0 0 0 0;
padding: 0px;
vertical-align:top;
}
</style>
</head>

<body>
<div class="leftnav">
<div id="main">
<a href="localhost">
<div class="element">
<img class="divright" src="a.jpg" alt="intro_thumnail" />
<p>
<span class="text1" >test1</span><br />
<span class="text2" >test2</span>
</p>
</div>
</a><a href="localhost">
<div class="element">
<img src="b.jpg" class="divright" width="50" height="50" alt="intro_thumnail" />
<p>test3, test 4 test 5</p>
</div></a>
</div>
</div>
</body>
</html>

dukevn

07-14-2008, 06:07 PM

This worked fine here in IE 6 & 7 and FF 3:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Table with DIV and CSS</title>
<style type="text/css">
.leftnav {
float: left;
width: 400px;
}

.content {
margin-left: 400px;
}

.rightnav {
float: right;
width: 300px;
}

#main {
background-color: #ffffff;
border: 2px solid blue;
margin: 0 0 0 0;
width:60%;
}

.element {
background-color: red;
border: 2px solid blue;
margin: 0 0 0 0;
float: left;
width:99%;
}

.element:hover {
background-color: green;
}

div.element p {
margin-top: 0;
}

.divright {
float: left;
width: 100px;
margin: 0 0 0 0px;
background-color: #ddd;
padding: 2px;
border: 1px solid blue;
width:100px;
}

span.text1 {
font: 15px arial;
background-color: white;
margin-bottom:20px;
padding: 0px;
width:100%;

}

span.text2 {
font: 8px arial;
background-color: white;
margin: 0 0 0 0;
padding: 0px;
vertical-align:top;
}
</style>
</head>

<body>
<div class="leftnav">
<div id="main">
<a href="localhost">
<div class="element">
<img class="divright" src="a.jpg" alt="intro_thumnail" />
<p>
<span class="text1" >test1</span><br />
<span class="text2" >test2</span>
</p>
</div>
</a><a href="localhost">
<div class="element">
<img src="b.jpg" class="divright" width="50" height="50" alt="intro_thumnail" />
<p>test3, test 4 test 5</p>
</div></a>
</div>
</div>
</body>
</html>

Ah, it is vertical-alignment not the padding or margin or height? That is... unpredictable. How can you figure out such a solution? The two spans are identical in P tag, and the first one comes up top, why the second one does not? IE is very funny.

Another thing I do not understand, without vertical-align: top added, what value it was? Is it middle or bottom? In any case, it should locate in the middle or in the bottom, isnt it?

Anyway, thank you very much John.

jscheuer1

07-14-2008, 07:32 PM

The default for vertical-align is baseline. To tell you the truth, I hadn't realized all of the values that are available for this property, or the fact that it is particularly well suited to inline elements like (in their default display mode) span, a, input, and image, etc. I was more aware of its use in a table cell, as the close equivalent to the valign attribute.

I found this illuminating:

http://www.eskimo.com/~bloo/indexdot/css/properties/position/vertalign.htm

However, in this case, primarily (for me) because it states that this property is so apropos to inline elements. But I'm glad to also know of all the possible values for this property.