Member Avatar for Altairzq

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 because: n/a
  • 3 Contributors
  • 8 Replies
  • 176 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Altairzq
Member Avatar for peter_budo

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

Member Avatar for Altairzq

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 because: n/a
Member Avatar for ko ko

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" />
Member Avatar for Altairzq

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>
Member Avatar for ko ko

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.

Member Avatar for ko ko

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
Member Avatar for Altairzq

That worked thanks a lot! :)

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

Member Avatar for Altairzq

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, networking, learning, and sharing knowledge.