By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,340 Members | 1,625 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,340 IT Pros & Developers. It's quick & easy.

<img> tag within <a>: css behaviour and background

mickey0
100+
P: 142
Hello,
I'm trying to put these images in line without any spaces surround. I wrote this piece of code and I'd like to understand why that code has that behaviour. Why the the <img> is not within the <a> element??
Any good links to this point will be very appreciated. Thanks.
http://www.2shared.com/photo/sMP1mE2I/followus.html

Expand|Select|Wrap|Line Numbers
  1. #followus {
  2.     clear: left;    
  3.     float: right;
  4.     width: 300px;
  5.     background: pink;
  6.     padding: 10px; margin:10px;
  7.     border: Dashed 2px;     
  8. }
  9. #followus img {    
  10.     border: Solid 2px;     
  11.     padding: 5px;
  12.     margin: 10px;
  13. }
  14.  
  15.  
  16. #followus img:hover {
  17.     border: Solid 2px yellow; 
  18. }
  19.  
  20. #followus a {
  21.         /* display:inline */
  22.     width: 70px;    
  23.     border: Solid 2px yellow;                 
  24. }
  25. #followus a:hover {        
  26.         background: black;        
  27. }
  28.  
Expand|Select|Wrap|Line Numbers
  1. <div id="followus">
  2.  <a....> <img ..... /> </a>
  3.  <a....> <img ..... /> </a>
  4. </div>    
  5.  
Nov 20 '11 #1
Share this Question
Share on Google+
1 Reply


zorgi
Expert 100+
P: 431
Anchor tag is inline element. Width or height don't work on inline elements. Try setting:

Expand|Select|Wrap|Line Numbers
  1. #followus a {
  2. .
  3. .
  4. .
  5. display: block;
  6. float: left;
  7. }
However I would probably remove all styling on anchor tag and just play with padding on images.
Nov 21 '11 #2

Post your reply

Sign in to post your reply or Sign up for a free account.