SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    May 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I need some help please :)

    My website displays all my image sliders properly in Google-Chrome & Mozilla-Firefox but in IE it pushes the mages down and creates a black bar at the top and also doesn't display the image box properly. I'm sure this is an easy fix for some of you masters out there and I'd be much obliged for help!
    Thanks,
    Starkaise9

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Welcome to the forums

    We cannot help you unless you provide a link to the page where you are having this issue, or enough code that we can reproduce this issue for ourselves.

  3. #3
    SitePoint Member
    Join Date
    May 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The website is stadiumpros.com
    The image sliders at the top of the homepage and at the top of the /bleachers page and so on display properly in Google Chrome and Mozilla Firefox and Safari, however in IE the homepage slider doesn't display properly and the /bleachers page the images are pushed down with a black line at the top oddly, below is the code two posts 1st half and second half:

    Edit:


    I have trimmed the posts down starkaise, we can get the javascript from the link!
    Spike
    Last edited by spikeZ; May 19, 2013 at 14:00.

  4. #4
    SitePoint Member
    Join Date
    May 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    I would call that a CSS problem that the page seems to be having. Let's see if someone can help you with that.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

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

    Try adding the following CSS:
    Code:
    .ws_images li{
    vertical-align:top;
    }
    It should cure the gap you mention.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    I was looking at this page to reproduce your issue: http://stadiumpros.com/grandstands/

    Paul's solution will work excellently, but it might also be noted that on this page, the line which is causing IE to freak out is this:

    HTML Code:
    <li><img src="../images/anfslot3.jpg" alt="Angle Frame Grandstand Addition" title="Angle Frame Grandstand Addition" id="wows1_2"/>Little Rock, AR, USA</li>
    The file's extension is actually JPG (upper case).

    If you change your code to reflect this, then the black line will also go away:

    HTML Code:
    <li><img src="../images/anfslot3.JPG" alt="Angle Frame Grandstand Addition" title="Angle Frame Grandstand Addition" id="wows1_2"/>Little Rock, AR, USA</li>

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Pullo View Post

    The file's extension is actually JPG (upper case).
    Well spotted

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Thanks!

    I spent ages tearing my hair out over a very similar issue a while back and it was a real face-palm moment when I realized why things were working.
    It's really weird though, that it was just IE that had a problem with this, as normally it's such a standards compliant browser ...

  10. #10
    SitePoint Member
    Join Date
    May 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I fixed the JPG to jpg, but still can't get the IE issue fixed, driving me insane, perhaps I can email the files to you Pullo and let you look them over?
    Starkaise9

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by starkaise9 View Post
    I fixed the JPG to jpg
    Make sure to try Paul's suggestion in post #6, as the JPG thing wasn't intended as the whole solution.

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Also, it would help if you could let us know which page you are having the issue with, which version of IE you are using, as well as the details of the problem.
    I have just looked at this page in IE9 and IE10 and it works as expected.

  13. #13
    SitePoint Member
    Join Date
    May 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is viewing with IE 8, the homepage top slide
    www.stadiumpros.com isn't displaying the image slider borders properly "the white border" & the images don't slide as smooth as with Chrome, Firefox & Safari.
    And on this page www.stadiumpros.com/bleachers the black stripe is still at the top AND the border isnt displaying properly. Are you saying in IE 9 & IE 10 both the homepage and /bleachers page are displaying properly? " I loathe IE" lol !

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

    If you are talking about the white rounded image border added to ws_shadow and produced with this image:

    http://www.stadiumpros.com/images/bg.png

    Then the problem is that you have used background-size to make that image stretch to fit the slider image but IE8 has no support for background size so just shows the image at its normal size. You will either need to make the image the exact size to fit - assuming the slides are all the same size or perhaps use conditional comments and hide that image for ie8 and under.

    the black stripe is still at the top
    Adding the code I gave in my first post will fix that issue (as mentioned four times now)



    Code:
    .ws_images li{
    vertical-align:top;
    }


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
  •