HTML and CSS RSS HTML and CSS RSS

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

Thread Solved

•
•
Join Date: Aug 2009
Posts: 35
Reputation: Altairzq is an unknown quantity at this point 
Solved Threads: 0
Altairzq Altairzq is offline Offline
Light Poster

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

 
0
  #1
17 Days Ago
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; 17 Days Ago at 5:41 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2004
Posts: 4,176
Reputation: peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of peter_budo has much to be proud of 
Solved Threads: 479
Moderator
Featured Poster
peter_budo's Avatar
peter_budo peter_budo is offline Offline
Code tags enforcer
 
0
  #2
17 Days Ago
The code is local to your machine so we would not be able to see the code till you post it...
Learn to see in another's calamity the ills which you should avoid.
Publilius Syrus
(~100 BC)
LJC - London Java Community, Graduate & Undergraduate Software Development Community, JAVAWUG (Java Web User Group), The London Android Group
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2009
Posts: 35
Reputation: Altairzq is an unknown quantity at this point 
Solved Threads: 0
Altairzq Altairzq is offline Offline
Light Poster
 
0
  #3
17 Days Ago
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; 17 Days Ago at 9:44 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 73
Reputation: Zero13 is an unknown quantity at this point 
Solved Threads: 10
Zero13 Zero13 is offline Offline
Junior Poster in Training
 
0
  #4
17 Days Ago
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" />
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2009
Posts: 35
Reputation: Altairzq is an unknown quantity at this point 
Solved Threads: 0
Altairzq Altairzq is offline Offline
Light Poster
 
0
  #5
16 Days Ago
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>
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 73
Reputation: Zero13 is an unknown quantity at this point 
Solved Threads: 10
Zero13 Zero13 is offline Offline
Junior Poster in Training
 
0
  #6
16 Days Ago
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 73
Reputation: Zero13 is an unknown quantity at this point 
Solved Threads: 10
Zero13 Zero13 is offline Offline
Junior Poster in Training
 
1
  #7
16 Days Ago
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2009
Posts: 35
Reputation: Altairzq is an unknown quantity at this point 
Solved Threads: 0
Altairzq Altairzq is offline Offline
Light Poster
 
0
  #8
16 Days Ago
That worked thanks a lot!

Still I'm curious, why the font-size was affecting that?
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2009
Posts: 35
Reputation: Altairzq is an unknown quantity at this point 
Solved Threads: 0
Altairzq Altairzq is offline Offline
Light Poster
 
0
  #9
15 Days Ago
Anyone has any clue?
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC