Odd paddings/margins with images in ad_navbar_below [Archive]

kevinmanphp2

06-06-2008, 03:39 PM

I want to place 5 square graphics in the 'ad_navbar_below' template, so that they are inline and are butted up against each other (in other words, no padding or margins).

So in my 'ad_navbar_below' template, I have the following:

<div>
<img src="http://www.mysite.com/square1.gif" />
<img src="http://www.mysite.com/square2.gif" />
<img src="http://www.mysite.com/square2.gif" />
<img src="http://www.mysite.com/square2.gif" />
<img src="http://www.mysite.com/square2.gif" />
</div>

This works to display the images inline under the navbar, but there is about a 5-6 pixel right-padding on each of the images... essentially spacing them out 5 to 6 pixels from each other. Since I want them to touch each other, this is not working for me.

I have tried setting each <img> tag's style to have margin: 0px and padding: 0px with no luck... ex:

<img src="http://www.mysite.com/square1.gif" style="padding: 0px; margin: 0px;" />

This has no effect on getting rid of the gaps between the square images.

Anyone know what could be causing this? I'm using my Web Developer Toolbar in Firefox to highlight the Element Information to see what those extra gaps belong too... but they aren't being picked up by that either.

Looking for any guidance or help.. thanks so much.

Attitude5ire

06-08-2008, 07:19 PM

Can you post a working example of this, there might be div properties interfering somewhere. But the code you wrote should pretty much stick everything together.

p.s use proper img code for validation <img src="" alt="" border="" />

Deepdog009

06-10-2008, 05:11 AM

I want to place 5 square graphics in the 'ad_navbar_below' template, so that they are inline and are butted up against each other (in other words, no padding or margins).

So in my 'ad_navbar_below' template, I have the following:

<div>
<img src="http://www.mysite.com/square1.gif" />
<img src="http://www.mysite.com/square2.gif" />
<img src="http://www.mysite.com/square2.gif" />
<img src="http://www.mysite.com/square2.gif" />
<img src="http://www.mysite.com/square2.gif" />
</div>

This works to display the images inline under the navbar, but there is about a 5-6 pixel right-padding on each of the images... essentially spacing them out 5 to 6 pixels from each other. Since I want them to touch each other, this is not working for me.

I have tried setting each <img> tag's style to have margin: 0px and padding: 0px with no luck... ex:

<img src="http://www.mysite.com/square1.gif" style="padding: 0px; margin: 0px;" />

This has no effect on getting rid of the gaps between the square images.

Anyone know what could be causing this? I'm using my Web Developer Toolbar in Firefox to highlight the Element Information to see what those extra gaps belong too... but they aren't being picked up by that either.

Looking for any guidance or help.. thanks so much.

***********************************************

kevinmanphp2,,,
Use a bit of CSS to do the trick...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS display Inline</title>
<style>
img {display: inline;
float:left;
}
</style>
</head>

<body>
<div>
<img src="http://www.mysite.com/square1.gif" />
<img src="
http://www.mysite.com/square2.gif" />
<img src="http://www.mysite.com/square2.gif" />
<img src="http://www.mysite.com/square2.gif" />
<img src="http://www.mysite.com/square2.gif" />
</div>
</body>
</html>

Add this to your header area of template or Html file...>>>

<style>
img {display: inline;
float:left;
}
</style>

Good Luck 2 Ya!!!