SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Zealot Silverado's Avatar
    Join Date
    Feb 2008
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with IE6 bug!

    Hi all,

    I am new to the whole world of CSS. I am astonished of the IE bugs and all the frustration you put up with. Incredible! You deserve a medal for this!

    At any rate, if you could help I would greatly appreciate it! Here is the problem: The page in question is uploaded to a site I am working on: www.ameliosolar.com and if you go to the Projects page and open it in IE6 you will see the problems. 1. The borders on the bottom of the pictures are larger then they should be. 2. The "description band" is off the picture in pictures 2 and 3. I wonder why 1 is right? All other browsers work fine. You figure! Please help, thanks in advance!

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome to SitePoint Silverado

    Add this two rules to your css:
    Code CSS:
    #textbox p {
        left: 0;
    }
    #textbox img {
        display: block
    }

    The first rule is to tell where the paragraph should go. Browsers can get confused when absolute left pos is not set.

    The second rule is for an IE bug, IE does not place an inline image on bottom of text-line.
    Happy ADD/ADHD with Asperger's

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Erik, you might be better off giving the image vertical-align: bottom; instead of display: block; that way inlined images (such as smilies) can still be used (somethinh I had been neglecting for a LONG time until the other day).

  4. #4
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Erik, you might be better off giving the image vertical-align: bottom; instead of display: block; that way inlined images (such as smilies) can still be used (somethinh I had been neglecting for a LONG time until the other day).
    Holy cow, that's the best piece of advice I've heard recently. And something I never even thought of!

    *writes down in notebook*

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Erik, you might be better off giving the image vertical-align: bottom; instead of display: block; that way inlined images (such as smilies) can still be used (somethinh I had been neglecting for a LONG time until the other day).
    Thanks! Then could a general rule be?:
    Code CSS:
    img {
    display: block
    }
    p img {
    display: inline;
    vertical-align: bottom
    }

    "...until the other day."

    If I only were days behind.
    Happy ADD/ADHD with Asperger's

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd just go ahaead and put the vertical alignment on the image element itself and just be done with it.

  7. #7
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    I'd just go ahaead and put the vertical alignment on the image element itself and just be done with it.
    I try to remember that as the general rule.
    Happy ADD/ADHD with Asperger's

  8. #8
    SitePoint Zealot Silverado's Avatar
    Join Date
    Feb 2008
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Thanks guys!

    Erik and Dan thanks very much for the help! I tried both suggestions, as I am a newbie at this, and I am happy to report both solutions work, as expected. I am not sure if I understand the virtue of one over the other, however. Maybe someone could shed some light on it if you have time - thanks.

    Also, if I may ask something else. If you go back to the website www.ameliosolar.com and look on IE6, you will notice there is a small gap between the banner and the navigation. Of course this gap is not there on any other browser - which is a good thing. I asked many people about this but no one could fix it. Do you guys have an idea? Thanks!

  9. #9
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apply the same img-rule on the banner image.

    An image is default an inline element, it creates a text-line to sit on. IE places the image above line-bottom, and the line is pushed down. Vertical-align controls the image place on the text-line. Set to bottom, the line is not pushed down.

    If the image display is changed to block, it does not create a text-line. But if there were a text-line for it, it would break under the text-line. (A smily should not.)
    Happy ADD/ADHD with Asperger's

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Set the vertical align property on the image to bottom.

    In fact, it'd be a good idea to do this for all images. Here's the style rule I use in all my stylesheets now:

    Code:
    img {
    	border: 0;			/* this squashes a Firefox bug */
    	vertical-align: bottom;		/* this squashes an IE bug */
    }

  11. #11
    SitePoint Zealot Silverado's Avatar
    Join Date
    Feb 2008
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan and Erik,

    I tried to add the

    #banner: {
    margin-top: 50px;
    vertical-align: bottom;
    }

    line to my banner div in my style.css but it did not work. I have a suspicion that there could be margins somewhere in the nav bar? I looked but I cannot find it. I am not sure but I do not think there is anything in the banner. Could you take a look? Thanks!

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to put it on the image itself, not the container it's in.

  13. #13
    SitePoint Zealot Silverado's Avatar
    Join Date
    Feb 2008
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan, I am confused. I have the img in the div called banner. So I just go to my external css and put:

    #banner img {
    vertical-align: bottom;
    }

    Is that the way to do it? Sorry but I am still new Thanks.

  14. #14
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that's right. Then the image is placed on it's line-bottom.
    Happy ADD/ADHD with Asperger's

  15. #15
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Either that or just use the style rule I suggested earlier and avoid having to do it each time you need to deal with an image issue.

  16. #16
    SitePoint Zealot Silverado's Avatar
    Join Date
    Feb 2008
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan,

    Thanks a lot, it worked like a charm! Awesome! You just made my day! I will just use it on all images like you said. Thanks! Thanks! Thanks!

  17. #17
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by silverado
    I am astonished of the IE bugs and all the frustration you put up with.
    Yes there are a number of browser inconsistencies to deal worth but a lot of the time problems are just a misunderstanding of the way that things really work

    Your problems above were not really bugs but just the way that things are interpreted as already nicely explained by Dan and Erik.

  19. #19
    SitePoint Zealot Silverado's Avatar
    Join Date
    Feb 2008
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes it is true what you said. I think lots of times we (newbies) do not quite understand/get what is going on because these issues are a bit more complex then they seem on the outset. But thanks to you Gurus out there, maybe you can instill some order in at least how to look at things the right way and of course solve some of the problems. I am thankful for that. Every little bit helps to learn and to get better. I am sure I will be back for more help - probably very soon. Until then, even the posts are helpful. But then again, I think weather it is a bug or not - I am not an MS fan - but I think it would be nice if they (MS) would adhere to the standards so things would not get mocked up as they do. When things work in all browsers except in IE, I would venture to say there is a problem in IE. Granted, I could be wrong, I am just at the beginning of this process - but I am eager and willing to learn. Thanks, this is a great forum, I am excited about css and all that goes on in design, my goal is be able to design some websites like Zen Garden. And so it is!

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Yes, don't get me wrong there are many IE bugs to contend with but it's just that a lot of times its not a bug but just the way things are supposed to be.

    There are differences between browsers (such as default margin and padding on elements) but this is not a bug just because the browsers are not the same. They both follow the specs which allow for various defaults to be applied and its the job of the designer to control these.

    However, I agree that for a beginner its hard to know what is a bug and what isn't so the effect is the same either way

    There's a steep learning curve to start with but once you understand the basics and issues like "haslayout" and "floats" and "box models", then you are well on your way.

  21. #21
    SitePoint Zealot Silverado's Avatar
    Join Date
    Feb 2008
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, I agree. At least I hope I will learn this some day so I can easily do some pretty neat designs. That would be cool!

    By the way, is there somewhere a collection of rules on the differences in browsers or is it basically just a learn by experience business?


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
  •