css help

[esthera]

I am trying to use css more instead of tables and I need some advice.

Normally when i cut up a design i would put in tables.. now i am trying css...
I am basically putting each image in it's own line -- the problem is there is space between the lines. -- I treid getting rid of it by putting it in a div with the class of np which is set to margin:0; padding 0; but that didn't help.
any advice? Am i going about it the right way?

<div class=np>
<span>
<img src="images/2_1.jpg" width="426" height="71" border="0"></span><span><img src="images/2-2.jpg" width="284" height="71" border="0"></span>
</div>
<div class=np>
<span>
<img src="images/3_1.jpg" width="284" height="55" border="0"></span><span><img src="images/3-2.jpg" width="434" height="55" border="0"></span>

</div>

[blain]

Do you have a jpg of the whole site you can post?

[Lerura]

the problem is that you use <span>'s as container for your images.
<span> is only for text formatting, much like the old <font> tag

[esthera]

so what is the suggested way?

I took out the span and it did the same thing.

It's basicaly so far just 4 images -- 2 on a line cut out next to each other and i want no spacing between the lines...
If I am not doing it right please guide me as to the right way. As I said before normally i would use a table with no padding and that worked but i'm trying to stay away from tables after suggestions on this forum.

Thansk!

[esthera]

I took out the span but still have the space between teh 2 div's

<div class=np>

<img src="images/2_1.jpg" width="426" height="71" border="0"><a href=freequote.asp><img src="images/2-2.jpg" width="284" height="71" border="0"></a>
</div>
<div class=np>

<img src="images/3_1.jpg" width="284" height="55" border="0"><img src="images/3-2.jpg" width="434" height="55" border="0">

</div>

I put on the div np padding:0 margin:0
I can't fix with alignment as I will want the image under it to also have no spacing in between -- how do I get to squeeze them together?

[drhowarddrfine]

You will never remove something by putting a div in there so don't do that. Don't use spans either. Try display:block and set margins to 0 on the images.

[Tricia]

and if that doesnt work, try formatting your code such that there are no carriage returns or spaces between your open and closing divs and the image, like so:

<div class=np><img src="images/2_1.jpg" width="426" height="71" border="0"><a href=freequote.asp><img src="images/2-2.jpg" width="284" height="71" border="0"></a></div>
<div class=np><img src="images/3_1.jpg" width="284" height="55" border="0"><img src="images/3-2.jpg" width="434" height="55" border="0"></div>

don't ask me why it works, i just know it does :p

[mark87]

^ Yup that's an IE bug. If the div only contains an image/s then you should place it all on one line.

[esthera]

so how would you suggest rewriting it with removing the div's --

I have 3 lines of images with 2 images on each line -- for the second line there is white space in the middle so i floated one left and one right.
How would you suggest rewriting it?

[esthera]

tell me would it be better for me to cut up the header as one big image and put it as a background with text and links in the appropriate places?
What's the better way to do it?