944,039 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Why font-size is affecting the gap between divs in this example?
Ad:
Permalink
Nov 5th, 2009
0

Why font-size is affecting the gap between divs in this example?

Expand Post »
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
Last edited by Altairzq; Nov 5th, 2009 at 5:41 pm.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
Altairzq is offline Offline
52 posts
since Aug 2009
Permalink
Nov 5th, 2009
-1
Re: Why font-size is affecting the gap between divs in this example?
The code is local to your machine so we would not be able to see the code till you post it...
Moderator
Featured Poster
Reputation Points: 2786
Solved Threads: 874
Code tags enforcer
peter_budo is offline Offline
6,658 posts
since Dec 2004
Permalink
Nov 5th, 2009
0
Re: Why font-size is affecting the gap between divs in this example?
Ack, sorry about that here is the right link and the code:

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

HTML and CSS Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
  3. <head>
  4.  
  5. <style type="text/css">
  6. body {
  7. 	font-size:13px;
  8. }
  9. .enlinia {
  10. 	height:8px;
  11. 	width:13px;
  12. 	display:inline;
  13. }
  14. </style>
  15.  
  16. </head>
  17. <body>
  18. 	<div class="enlinia" <IMG SRC="../imatges/botoAmunt.png"></div>
  19. 	<div class="enlinia" <IMG SRC="../imatges/botoAvall.png"></div>
  20. 	<div class="enlinia" <IMG SRC="../imatges/botoEsborrar.png"></div>
  21. </body>
  22. </html>
Last edited by Altairzq; Nov 5th, 2009 at 9:44 pm.
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
Altairzq is offline Offline
52 posts
since Aug 2009
Permalink
Nov 6th, 2009
0
Re: Why font-size is affecting the gap between divs in this example?
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'.
HTML and CSS Syntax (Toggle Plain Text)
  1. <IMG SRC="../imatges/botoAmunt.png">
Must be
HTML and CSS Syntax (Toggle Plain Text)
  1. <img src="../imatges/botoAmunt.png" />
Reputation Points: 120
Solved Threads: 133
Practically a Master Poster
Zero13 is offline Offline
620 posts
since Jan 2009
Permalink
Nov 6th, 2009
0
Re: Why font-size is affecting the gap between divs in this example?
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.

HTML and CSS Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
  3. <head>
  4.  
  5. <style type="text/css">
  6. body {
  7. 	font-size:13px;
  8. }
  9. .enlinia {
  10. 	border:thin solid;
  11. 	height:8px;
  12. 	width:13px;
  13. 	display:inline;
  14. }
  15. </style>
  16.  
  17. </head>
  18. <body>
  19. 	<div class="enlinia"><img src="../imatges/botoAmunt.png" /></div>
  20. 	<div class="enlinia"><img src="../imatges/botoAvall.png" /></div>
  21. 	<div class="enlinia"><img src="../imatges/botoEsborrar.png" /></div>
  22. </body>
  23. </html>
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
Altairzq is offline Offline
52 posts
since Aug 2009
Permalink
Nov 6th, 2009
0
Re: Why font-size is affecting the gap between divs in this example?
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.
HTML and CSS Syntax (Toggle Plain Text)
  1. #
  2. .enlinia {
  3. border:thin solid;
  4. height:8px;
  5. width:13px;
  6. float: left
  7. }
This should work. Thanks for your response.
Reputation Points: 120
Solved Threads: 133
Practically a Master Poster
Zero13 is offline Offline
620 posts
since Jan 2009
Permalink
Nov 6th, 2009
1
Re: Why font-size is affecting the gap between divs in this example?
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.
HTML and CSS Syntax (Toggle Plain Text)
  1. #
  2. .enlinia {
  3. border:thin solid;
  4. height:8px;
  5. width:13px;
  6. float: left
  7. }
This should work. Thanks for your response.
Reputation Points: 120
Solved Threads: 133
Practically a Master Poster
Zero13 is offline Offline
620 posts
since Jan 2009
Permalink
Nov 6th, 2009
0
Re: Why font-size is affecting the gap between divs in this example?
That worked thanks a lot!

Still I'm curious, why the font-size was affecting that?
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
Altairzq is offline Offline
52 posts
since Aug 2009
Permalink
Nov 7th, 2009
0
Re: Why font-size is affecting the gap between divs in this example?
Anyone has any clue?
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
Altairzq is offline Offline
52 posts
since Aug 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: margin in css
Next Thread in HTML and CSS Forum Timeline: Shadow





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC