0

As you can see in this test, if you change the font-size in the body section to 0px, it's the only way to bring the divs containing the images together. Could anyone see a solution to this? I can't set the fonts to 0px in the website, and can't understand why is this happening.

I'm testing with Firefox but same is happening in Safari. Haven't tried IE, but it's not really important because I will be using the web only in FF and Safari.

http://localhost/america/editora/test.html

Edited by Altairzq: n/a

3
Contributors
8
Replies
9
Views
7 Years
Discussion Span
Last Post by Altairzq
0

Ack, sorry about that here is the right link and the code:

http://www.lloparts.com/america/editora/test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>

<style type="text/css">
body {
	font-size:13px;
}
.enlinia {
	height:8px;
	width:13px;
	display:inline;
}
</style>
    
</head>
<body>
	<div class="enlinia" <IMG SRC="../imatges/botoAmunt.png"></div>
	<div class="enlinia" <IMG SRC="../imatges/botoAvall.png"></div>
	<div class="enlinia" <IMG SRC="../imatges/botoEsborrar.png"></div>
</body>
</html>

Edited by Altairzq: n/a

0

Need '>' to your div open tag. And XHTML is case-sensitive and all tags and attributes must be lowercase, and non-close tags need forward slash such as 'img', 'br' or 'hr'.

<IMG SRC="../imatges/botoAmunt.png">

Must be

<img src="../imatges/botoAmunt.png" />
0

Thank you Zero13 I fixed and uploaded the code following your directions but the divs still have the gap. I added a border so it can be seen more clearly.

The gap only goes away changing the font-size in the body section to 0px, but this is something I can't do.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>

<style type="text/css">
body {
	font-size:13px;
}
.enlinia {
	border:thin solid;
	height:8px;
	width:13px;
	display:inline;
}
</style>
    
</head>
<body>
	<div class="enlinia"><img src="../imatges/botoAmunt.png" /></div>
	<div class="enlinia"><img src="../imatges/botoAvall.png" /></div>
	<div class="enlinia"><img src="../imatges/botoEsborrar.png" /></div>
</body>
</html>
0

The problem is the 'inline' property to your div. I can't explain clearly but changing block element to inline wrap some white space around them. Try to float them appear next to each.

#
.enlinia {
border:thin solid;
height:8px;
width:13px;
float: left
}

This should work. Thanks for your response.

1

The problem is the 'inline' property to your div. I can't explain clearly but changing block element to inline wrap some white space around them. Try to float them appear next to each.

#
.enlinia {
border:thin solid;
height:8px;
width:13px;
float: left
}

This should work. Thanks for your response.

Votes + Comments
Thanks for your help
0

That worked thanks a lot! :)

Still I'm curious, why the font-size was affecting that?

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.