CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

CSS Image Padding

Discuss CSS Image Padding in the CSS Help forum on Dev Shed.
CSS Image Padding Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old February 5th, 2004, 02:23 AM
desorden desorden is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2001
Posts: 12 desorden User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 m 49 sec
Reputation Power: 0
Angry CSS Image Padding
I'm trying to renew my website using css.
i have a list with images inside. something like

<ul>
<li><img ... /></li>
<li><img .../></li>
</ul>

my style definition looks like
img {
margin:0px;
padding:0px;
}

ul {
margin:0px;
padding:0px;
}

li {
margin:0px;
padding:0px;
}

i don't want any pixels between two items (images), but i cannot find the way to do that. i always get some pixels between them...
anyone can help me? thanks!
Reply With Quote
  #2  
Old February 5th, 2004, 02:48 AM
jabba_29's Avatar
jabba_29 jabba_29 is offline
Back in HEL
Click here for more information.
  
Join Date: Feb 2002
Location: Finland
Posts: 8,913 jabba_29 User rank is General 11st Grade (Above 100000 Reputation Level)jabba_29 User rank is General 11st Grade (Above 100000 Reputation Level)jabba_29 User rank is General 11st Grade (Above 100000 Reputation Level)jabba_29 User rank is General 11st Grade (Above 100000 Reputation Level)jabba_29 User rank is General 11st Grade (Above 100000 Reputation Level)jabba_29 User rank is General 11st Grade (Above 100000 Reputation Level)jabba_29 User rank is General 11st Grade (Above 100000 Reputation Level)jabba_29 User rank is General 11st Grade (Above 100000 Reputation Level)jabba_29 User rank is General 11st Grade (Above 100000 Reputation Level)jabba_29 User rank is General 11st Grade (Above 100000 Reputation Level)jabba_29 User rank is General 11st Grade (Above 100000 Reputation Level)jabba_29 User rank is General 11st Grade (Above 100000 Reputation Level)jabba_29 User rank is General 11st Grade (Above 100000 Reputation Level)jabba_29 User rank is General 11st Grade (Above 100000 Reputation Level)jabba_29 User rank is General 11st Grade (Above 100000 Reputation Level)jabba_29 User rank is General 11st Grade (Above 100000 Reputation Level)  Folding Points: 57777 Folding Title: Beginner FolderFolding Points: 57777 Folding Title: Beginner FolderFolding Points: 57777 Folding Title: Beginner Folder
Time spent in forums: 3 Months 4 Weeks 1 Day 13 h 20 m 49 sec
Reputation Power: 1693
Send a message via ICQ to jabba_29 Send a message via AIM to jabba_29 Send a message via MSN to jabba_29 Send a message via Yahoo to jabba_29 Send a message via Google Talk to jabba_29 Send a message via Skype to jabba_29
Facebook
Code:
<style type="text/css">
<!--
img {
margin:0px;
padding:0px;
vertical-align: top;
}
ul {
list-style-type: none;
margin:0px;
padding:0px;
}
li {
margin:0px;
padding:0px;
}
-->
</style>
I think this should do it (I change the alignment of the image). HTH.
__________________
Cheers,

Jamie

# mdb4u | mobile movie database] | Please help to test and promote
# skiFFie | Home of the 'accessibility module' for Drupal
# Jamie Burns [me] Accessibility Module [drupal]
# guidelines | search | wap resources | not getting help | fold to cure

__________________

Let the might of your compassion arise to bring a quick end
to the flowing stream of the blood and tears .....
Please hear my anguished words of truth.


__________________
Reply With Quote
  #3  
Old February 5th, 2004, 08:13 AM
desorden desorden is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2001
Posts: 12 desorden User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 m 49 sec
Reputation Power: 0
still don't work. it seems that <li> height is bigger than img height. i put a example in my site in order you can make a idea what i'm saying. the heigth of both images is 8px...

have a look at http://www.desorden.net/prueba.html
Reply With Quote
  #4  
Old February 5th, 2004, 08:17 AM
OCB OCB is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2003
Location: Lyon, France
Posts: 49 OCB User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
Make sure the line-height property in the css is the height of your images e.g.

line-height:8px;

or

font:300 8px/8px verdana !important;

that should squash the extra space..

Cha'mone OCB
Reply With Quote
  #5  
Old February 5th, 2004, 09:28 AM
desorden desorden is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2001
Posts: 12 desorden User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 m 49 sec
Reputation Power: 0
thanks ocb. i got it working now in netscape 7.0 and mozilla firebird, but still i have a extra pixel in the bottom of the images...
any workaround to eliminate them?
Reply With Quote
  #6  
Old February 5th, 2004, 09:37 AM
desorden desorden is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2001
Posts: 12 desorden User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 m 49 sec
Reputation Power: 0
sorry, what i wanted to say, is that i have an extra pixel on the bottom of the images, but only in internet explorer 6.0.
Reply With Quote
  #7  
Old February 5th, 2004, 10:31 AM
OCB OCB is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2003
Location: Lyon, France
Posts: 49 OCB User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
Try to display:inline the li, this *might* just fix the problem.

But hey, it's IE6 - the only real solution is to start trying crazy things in the css until you find and squash the problem..

actually, is the space between images being caused by a space between the li tag and the image tag?

e.g.<li> <img...
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > CSS Image Padding

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 6 hosted by Hostway. 
Stay green...Green IT