CODEWITHSUNDEEP
phphtmlcss
Sam Gabriel
Sam Gabriel

Reputation: 327

Firefox adding padding to first image in multiple images, although all images have same styling and size

Hey guys, I have this piece of code:

while($uno=mysql_fetch_assoc($results)) {
    echo '<div class="wcapt"><a class="neutral" href="../images.php?id=' . $uno['id'] . '"><img class="pad" src="'. $uno['thumbs'].'" border="0" /></a><br/><center><p>'.$uno['name'].'</p></center></div>';
}

And all the images I link to have exactly the same size. Here's the Mainstyles.css

div.wcapt
{
    border: 1px solid green;
    float: left;
    padding: 0;
    margin: 3px;
    font: 11px/1.4em Arial, sans-serif;
    color: gray; 
    }
img.pad
{
    padding: 5px;
    }
a.neutral
 {
    display: inline;
    font-weight: normal;
    text-transform: none;
    background-color: transparent;
    color: white;
    text-decoration: none;
    }

The problem is that Firefox adds some extra padding to the first image, and only the first image. And this is really annoying. Here's a screenshot of the page: alt text

Upvotes: 0

Views: 212

Answers (3)

Sam Gabriel
Sam Gabriel

Reputation: 327

I used Firebug and figured out the problem, thanks guys, and I had to answer my question since the answer was in the comments and I can't accept comment answers.

Upvotes: 0

pleasedontbelong
pleasedontbelong

Reputation: 20102

that's why it's recommended to use a "reset" css... so you wont have this type of inconsistencies between browsers.

Try using a reset css and if the problem remains then it's not the browsers fault =)

Good luck

Upvotes: 1

user466764
user466764

Reputation: 1176

have you tried targetting the selector more explicitly using..

div.wcapt img {
  padding: 5px;
}

You could then remove the .pad class completely

Try adding a pseudo selector more information here http://www.w3schools.com/CSS/css_pseudo_classes.asp Note you need to set the doctype to do this

div.wcapt img:first-child {
padding: 2px;
}

Upvotes: 0

Related Questions