SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot mrtopher's Avatar
    Join Date
    Mar 2004
    Location
    VA
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IMG align problem

    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!!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try making the image display:block.

    e.g.
    Code:
    #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.

  3. #3
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PaulOB is back and making his mark haha, every post, every post!!

  4. #4
    SitePoint Zealot mrtopher's Avatar
    Join Date
    Mar 2004
    Location
    VA
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  6. #6
    SitePoint Zealot mrtopher's Avatar
    Join Date
    Mar 2004
    Location
    VA
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The server was down for a little while, but everything should be back up and running.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    #content img {display:block}
    
    Code:
    <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 )

  8. #8
    SitePoint Zealot mrtopher's Avatar
    Join Date
    Mar 2004
    Location
    VA
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    #index_watermark {
      background: url(../images/index_watermark.gif) 99% 100% no-repeat;
    }
    I think thats as close as makes no difference

  10. #10
    SitePoint Zealot mrtopher's Avatar
    Join Date
    Mar 2004
    Location
    VA
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect!! Thank you very much.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •