SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Some problems with IEs

    Hi I am finishing off this site http://bit.ly/mlSg7C but am having some IE problems which I'd like to find a solution for.

    For reference the version that is working correctly can be seen on Firefox or Chrome.

    IE8:
    There are 3 boxes on the home page with rotating food images. Within each of these boxes there is a linked image (weddings, corporate, outside catering). There is a gold line a bit further down which should not be there. How can I remove it?

    A bit further down on the right there is an image of a cake, but there appears to be two images overlaying each other. I would like to remove the misplaced one. The same problem also happens during the transition of the venues box.

    Finally links in gold have an underline which is too close to the text, I would like to push that underline further down.

    IE7:

    Same problem as in IE8 with the overlaying images.

    Any help appreciated. Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by drtanz View Post
    There is a gold line a bit further down which should not be there. How can I remove it?
    I don't see any gold line in IE8 that isn't in FF. Could post a screen shot?

    A bit further down on the right there is an image of a cake, but there appears to be two images overlaying each other.
    Weird, but it may be caused by the filter you have on there. Try removing it.

    Finally links in gold have an underline which is too close to the text, I would like to push that underline further down.
    That's the default underline style for this font, so I don't think you can do anything about that.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've uploaded a screenshot of IE8 showing the problem here:

    ImageShack® - Online Photo and Video Hosting

    AS regards to the underlines I wonder why they are so ugly on this particular browser version when they look fine in other versions.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    The line under those pictures is coming from here:

    Code:
    .ie8 .boxes .wrap div a { 
    	text-decoration: none;
    	border-bottom: 1px solid #a08f63;
    }

  5. #5
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I also found a small problem with the dropdowns in Chrome on Mac, there is a small grey part appearing which doesn't show on Chrome on Windows.

    I am including a screenshot of the Mac version:

    ImageShack® - Online Photo and Video Hosting

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by drtanz View Post
    a small problem with the dropdowns in Chrome on Mac
    Not for me. Using version 12.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Not for me. Using version 12.
    Looks ok to me also.

  8. #8
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only problem remaining is the image overlays issue, cant really find a solution to that.

  9. #9
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the url to view the site: bit.ly/k5G2J0

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Looks like you are running into the jquery opacity bug mentioned in this thread.

    Try the solutions mentioned in the thread such as giving the image IE a background colour to match the background but you of course then lose the transparency.

    Funnily enough I only see a problem in IE8 using ietester where you get a black flash as the image animates. In my IE8 (real version) I don;t see a problem.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Looks like you already had the answer to this in another thread also.

  12. #12
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not referring to the transition issue though, it's for static images when there is an overlaid second image appearing in IE8, on IETester and on real IE8.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Can you post a screenshot - I'm not sure what I'm looking for?

  14. #14
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here you go,

    I can see the problem showing up on IE9

    http://imageshack.us/photo/my-images/7/overlays.png/

  15. #15
    SitePoint Member
    Join Date
    May 2008
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    The problem seams to come from script.js line 100:
    Code:
    document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";

  16. #16
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, if I take that off however I will have blackened images during png transitions :S

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It's probably because the filter image is applied to the background to the img tag but as you are adding 3px padding to images then the image is scaled to fit the width and height and thus the overlap.

    Try removing the padding from #container img{} and see if that cures the problem. If it does cure the problem then make the 3px space with margins or padding on a parent instead.

  18. #18
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks will try that, also on this page I have a scrollbar in the textbox when I view it on IE9, can I remove that vertical scrollbar?

    Link

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by drtanz View Post
    Thanks will try that, also on this page I have a scrollbar in the textbox when I view it on IE9, can I remove that vertical scrollbar?

    Link
    Try adding overflow:auto to the textarea.


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
  •