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

Recommended Answers

All 8 Replies

The code is local to your machine so we would not be able to see the code till you post it...

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>

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" />

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>

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.

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.

commented: Thanks for your help +0

That worked thanks a lot! :)

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

Anyone has any clue?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.