css "padding" attribute malfunction [Archive]

Click to See Complete Forum and Search --> : css "padding" attribute malfunction

dfrieber

09-08-2005, 01:25 PM

Hi all,

It seems like whenever i assign an image a class, and in that class i define the padding (in any direction) a value, it seems to work only in safari. When i view my work in Internet Explorer, it appears as though i set the padding to 0, or i never even defined it.

Is there another attribute in CSS like "padding" that works across all browsers, or is this a problem that all web developers face?

Thanks very much

-dan

CompGeek01

09-09-2005, 01:02 AM

Do you have a live website with an example? Or some code? Call me lazy, but it's easy for me to figure such things out when I don't have to recreate a situation :). I'm sure we can get your padding working.

dfrieber

09-09-2005, 03:14 PM

yea sure..

on this page (http://www.accentsbydesign.net/frieber/photos.html), focus on the dotted line underneath "Photos" - specifically the space underneath between the dotted line and the picture.

The css for the dotted line image is:

padding-top: 8px;
padding-bottom: 8px;

view the page in different browsers, and youll notice that the space appears in safari and firefox, but not in internet explorer.

thanks for the help!

-dan

ScaryBinary

09-11-2005, 09:10 PM

I'm 99.999% sure this is another case where Internet Explorer just fails to properly support the CSS. I've noticed this myself, and I've seen reports on the web for versions earlier than 6.x. I doubt Microsoft fixed it for 6.x, though, as they continue to concentrate on adding stupid, harddrive-filling features instead of fixing their bugs. But I digress.

My first suggestion would be to apply the padding/margins to the heading text (e.g., "Photos") instead of the image (a sub-suggestion would be to use the heading tags like h1, h2, etc. instead of the "font" tag you're currently using).

Another option would be not to use an image at all, but apply a dotted bottom border to your headings (or paragraphs, as applicable). This is probably really a better option, since it saves the overhead of downloading an image. Here's an example:
<html>
<head>
<title>Sample</title>
<style type="text/css">

</style>

</head>
<body>
<h1>Photos</h1>
<p>Some photos. But check out that dotted line under my header!</p>
</body>
</html>

A third, more hack-ish approach would be to just include the spacing you want in the image itself.

If all you're looking for is a dotted line, then I'd go with the CSS/HTML example I attached above. Tweak as you see fit.

ScaryBinary

09-12-2005, 08:48 AM

One more thing you can try would be to use a "margin" instead of "padding". Since you don't have a border on your image, they will work similarly. I'm not sure if Internet Explorer will recognize "margin" for images, though, if it ignores "padding". Something to try.

phil drury

09-13-2005, 11:46 AM

you could also try putting it in a div and putting a border on the bottom of the div.

or you could make a div e.g '#wrapper' then add another style called
'#wrapper IMG'

any styles added to '#wrapper IMG' will be applied to any images inside your '#wrapper' Div, this seems to work better than just applying a class though if you are using the float element your image needs to be the first entry inside your div other wise the float element will not work correctly.

hope it helps, if you want i will post an exemple if you need it!!!

aint micro$$$oft explorer great!!!!!!!!!!!