IMG align problem

[mrtopher]

I'm having an issue with a CSS based site that I'm developing.

It displays fine in IE however in FF there is a space between the gradient at the top of the content container and I can't figure out why.

You can view the site here:

http://68.178.174.23/

Any help you could give would be appreciated!!

[Paul O'B]

Hi,

Try making the image display:block.

e.g.

#content img {display:block}

You may need to set a class on the specific image as the above will target all images in the context.

[lostseed]

PaulOB is back and making his mark haha, every post, every post!!

[mrtopher]

Thanks for the idea Paul O'B but it didn't work. I tried it with the img align attribute and without and it doesn’t seem to make a difference.

I'm stumped; any other ideas?

[Paul O'B]

I tried it with the img align attribute

Don't use the img align attribute as that only confuses things further.

Your link is not working so I can't check what you've done. The code I offered worked yesterday when I tried it so you may have changed something since I posted.

Fix the link and I'll take another look

[mrtopher]

The server was down for a little while, but everything should be back up and running.

[Paul O'B]

Thanks for the idea Paul O'B but it didn't work

I don't believe you

I've just done it again and it works fine. I seem to have to say everything twice thess days

Also make sure you close the gaps between your images and the surrounding div tags otherwise they will be inserted as spaces in the layout.

e.g.

#content img {display:block}

<div id="page">
 <div id="header"><img src="http://68.178.174.23/images/header.gif" alt="Texas Weight Management Program" ></div>
 <div id="nav"><img src="http://68.178.174.23/images/buttons/btn_home.gif" alt="Home" align="top"><img src="http://68.178.174.23/images/buttons/..._candidate.gif" alt="Are you a candidate?" align="top"><img src="http://68.178.174.23/images/buttons/...nt_options.gif" alt="Treatment Options" align="top"><img src="http://68.178.174.23/images/buttons/btn_our_program.gif" alt="Our Program" align="top"><img src="http://68.178.174.23/images/buttons/...nd_surgery.gif" alt="Beyond Surgery" align="top"><img src="http://68.178.174.23/images/buttons/...ng_started.gif" alt="Getting Started" align="top"><img src="http://68.178.174.23/images/buttons/btn_about_us.gif" alt="About Us" align="top"><img src="http://68.178.174.23/images/buttons/btn_seminars.gif" alt="Seminars" align="top"></div>
 <div id="content"><img src="http://68.178.174.23/images/content_top.gif" align="top"><img src="http://68.178.174.23/images/content_top_shadow.gif" class="shadow_display">
  <div id="content_left"><img src="http://68.178.174.23/images/callout_bmi_calculator.gif" alt="BMI Calculator" align="top"><img src="http://68.178.174.23/images/callout_...g_seminars.gif" alt="Upcoming Seminars" align="top"><img src="http://68.178.174.23/images/callout_..._candidate.gif" alt="Are you a candidate?" align="top"></div>

etc......

If its still not working then make the changes I said and upload the code and prove me wrong

(Or you may be talking about something completely different to me of course )

[mrtopher]

Oops, my bad. I didn't know you meant for both of the top images to have the block styling. Things look good now.

One other thing, I'm trying to put watermark images behind all the content on the index and content pages (on the bottom right hand corner of the content area) but am having difficulty deciding the best way to do that. I have done it right now by just putting another div inside the main content div and giving it a BG but as you can see in IE, that doesn't work so well. Any ideas on how to fix this problem? Or would you know of a better way to accomplish this effect other than creating another div just for this purpose?

http://68.178.174.23
http://68.178.174.23/content.html

[Paul O'B]

Hi,

Unless you have any other spare elements to use then you will have no choice but to add an extra element for the extra image.

You can line ie up by removing the margin-right 8px and then just offset the image position instead.

#index_watermark {
  background: url(../images/index_watermark.gif) 99% 100% no-repeat;
}

I think thats as close as makes no difference

[mrtopher]

Perfect!! Thank you very much.