Image Slices and CSS

[WhiteDragon]

I would like to know how come I'm getting a space between my slices when they are all placed within a <div> I don't have any border on the style for that <div> yet I'm getting a gap.

[MrLeN]

You are probably using IE, and therefore the image has a gap.

to fix it add:


<img src="something.gif" style="display: block" />


Or,

You can put it in your stylesheet:


.yourclass img {
display: block;
}

[WhiteDragon]

That screwed up the order of the images {display: block;} got another solution?

[MrLeN]

I don't see how that can screw anything up.

How did you use the code?

[WhiteDragon]

#idname img {display: block;}
Instead of the image slices in order with the problem of the space there on the page like a unorganized jigsaw puzzle?!?!

[MrLeN]

Yes but it all depends where you have id="idname" and how it's used.

[Fang]

#divID img {float:left;}

[Victorinox]

A possible cause is space between the img elements in the markup -being on separate lines for example.

<img src="pic1.jpg" />
<img src="pic2.jpg" />

Butt them all together on a single line, like this:

<img src="pic1.jpg" /><img src="pic2.jpg" />

If the space is still there then you'll need to share the complete markup for the page and all CSS for the page or - better still - provide a link to the page in question.

[MrLeN]

Yea please provide the exact code you are using. HTML and CSS, and if possible just show the page of the site. Such things are very easy to fix and someone will be able to help you in 2 seconds if they know exactly what the problem is. I was just assuming that you were referring to the gap that shows up underneath images in ie, but for all I know -- that's not even what you're talking about. So just show the whole problem, code and all and it can be fixed in seconds.

[WhiteDragon]

Alright, next post will have the link
http://www.thecreativesheep.ca/site/imagepage3.html
I realize that the image is overlapping the other elements this will be fixed, I just want to get the gap and the jigsaw puzzle with my slices fixed.

[Victorinox]

Please provide an image showing how your design is intended to look.

Then we can judge how best to achieve what you're aiming for.

[WhiteDragon]

Alright, I have attached an image of what it should look like obviously what it looks like now on the page is wrong.

[Victorinox]

Thanks for the pic but what we need to know is how the graphic and your page content are intended to work together. The whole design concept.

For example, should the main white rounded corner area sit entirely underneath the graphic, be overlapped at the top but not the sides, start below the top of the graphic?

Why did you choose to slice the image?

I don't think we're going to progress without a pic of the whole design - and some structural changes are likely to be necessary in the markup.

[Fang]

Looks like a single background image would have been more suitable.

[Victorinox]

Looks like a single background image would have been more suitable.

Yup.

WhiteDragon: I see you've now started this topic on the CSS-D list, with no links to your page or useful code.

You'll find things go easier there (and everywhere) if you take the time and responsibility to always provide comprehensive details in your first post. Otherwise the helpful people who respond will be frittering their precious time guessing and querying your intentions.

Regard the time you spend thinking out your initial post and making examples available as an investment.

There's not a silver bullet for every problem and sometimes the weapon itself needs to be cleaned or even rebored. Assume from the start that your problem needs explaining in detail and you'll get higher grade help. Supply peanuts and furry primates may respond (and maybe yank your arm off if you stand too close!)

I hope this doesn't come across to you like finger-wagging-teacher-speak. I'm simply offering advice that will help both you and those who want to help you.