#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    13
    Rep Power
    0

    Trouble displaying images in FF, works great in Safari


    Hi!
    I am making an online store for a very important client of mine. I build a shopping sub-list which floats to the left of the main page... and it looks BEAUTIFUL in Safari. But the images are not displaying correctly in Firefox.

    I was hoping somebody could help me. Also, could somebody tell me how it looks on IE? I have a mac, and my client is probably using IE... so I can't see how it looks


    Anyway, the site is.... blocked



    and the CSS

    #shoppinglist1 li {
    float:right;
    list-style: none;
    display:block; }

    #shoppinglist1 a{
    width:100px;
    height:20px;
    text-decoration:none;
    background-image:url(images/shoppingmenu-bgsmall.gif);
    background-repeat: repeat;
    background-position: center center; }

    #shoppinglist1 a:hover {
    width:100px;
    height:20px;
    text-decoration:none;
    background-image: url(images/shoppingmenu-hover.gif);
    background-position: center center;
    }

    #shoppinglist1 a:active {
    width:100px;
    height:20px;
    text-decoration:none;
    background-image: url(images/shoppingmenu-active.gif);
    background-position: center center;
    }

    and the HTML

    <div id="shoppinglist">
    <img src="images/shoppingmenu_top.gif" style="margin: -15px auto;"/>
    <ul id="shoppinglist1">
    <li><a href="#"><img src="images/shoppingmenu_03.gif" align="center" border="0"/></a></li>
    <li><a href="#"><img src="images/shoppingmenu_04.gif" align="center" border="0"/></a></li>
    <li><a href="#"><img src="images/shoppingmenu_05.gif" align="center" border="0"/></a></li>
    <li><a href="#"><img src="images/shoppingmenu_06.gif" align="center" border="0"/></a></li>
    <li><a href="#"><img src="images/shoppingmenu_07.gif" align="center" border="0"/></a></li>
    <li><a href="#"><img src="images/shoppingmenu_08.gif" align="center" border="0"/></a></li>
    <li><a href="#"><img src="images/shoppingmenu_09.gif" align="center" border="0"/></a></li>
    <li><a href="#"><img src="images/shoppingmenu_10.gif" align="center" border="0"/></a></li>
    <li><a href="#"><img src="images/shoppingmenu_11.gif" align="center" border="0"/></a></li>
    <li><a href="#"><img src="images/shoppingmenu_12.gif" align="center" border="0"/></a></li>
    <li><a href="#"><img src="images/shoppingmenu_13.gif" align="center" border="0"/></a></li>
    <li><a href="#"><img src="images/shoppingmenu_14.gif" align="center" border="0"/></a></li>

    </ul>
    <img src="images/shoppingmenu_bottom.gif" />
    </div>
    Thank you so much for your help!
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    310
    Rep Power
    166
    Try posting a link like so:

    www .google .com
    Quality European Web Hosting - LDHosting.com
    High Quality, Low Cost Web Hosting Services
    www.ldhosting.com
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    13
    Rep Power
    0

    Talking


    Originally Posted by LDHosting
    Try posting a link like so:

    www .google .com
    ok thanks!

    www pinktanpopodesigns com /babyconcept3/ shopping-problem .html
  6. #4
  7. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Start with the errors

    Always validate your code as the first step in debugging.
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    13
    Rep Power
    0

    ok :D


    OK...I did it ...

    Originally Posted by EricReese
    Always validate your code as the first step in debugging.
  10. #6
  11. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Did you really validate your code? It still shows 64 errors and 85 warnings for me.

    Also, just do you know, IE is in quirksmode. You have an XML declaration before the doctype which is throwing it into quirksmode. IE doesn't support XHTML, that's why. You're coding using /> to close your tags, (XHTML) but your doctype doesn't support it. (Those are only warnings)
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    13
    Rep Power
    0
    Originally Posted by EricReese
    Did you really validate your code? It still shows 64 errors and 85 warnings for me.

    Also, just do you know, IE is in quirksmode. You have an XML declaration before the doctype which is throwing it into quirksmode. IE doesn't support XHTML, that's why. You're coding using /> to close your tags, (XHTML) but your doctype doesn't support it. (Those are only warnings)
    I uploaded a new version, and apparently i missed some of the xhtml tags. It also says that some of the commands are in caps, when in fact they are not. that is strange... The form commands work with my clients site now, and I don't want to change them yet...


    I don't see how any of this might be creating the spacing in my menu though...
  14. #8
  15. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Where are the images supposed to be displayed? I'm viewing in Safari 4 Beta on Vista, and the pages look the same to me.
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    13
    Rep Power
    0
    Originally Posted by EricReese
    Where are the images supposed to be displayed? I'm viewing in Safari 4 Beta on Vista, and the pages look the same to me.
    Thanks again for your help...

    I am concerned about the menu on the left hand side, with the different product categories. I am getting a smooth menu in Safari on my mac, but spaces in firefox. I think it is getting crammed somewhere.

    the text images is 25 px high by 100 px long


    and the <ul > size is also 25 px by 100 px. I tried to make this bigger in the CSS

    I wish all browsers would display the same thing

    the article you pointed out to me about IE8 was very interesting... and a headache for us designers.
    but thanks again for all your help. That debugging website was very useful. I really want to make sure my designs for my clients are up to the standards.
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    13
    Rep Power
    0

    Solved!!!


    I think I solved the problem!!!

    What I thing was happening was that the images and the CSS boundaries were overlapping, causing there to be be strange space in firefox. Safari didn't seem to mind...

    So what I did was add an inline (style="vertical-align:middle") to all of my image files on the list. This made the menu look beautiful in firefox, opera as well as safari. I will have my friend check IE for me later.

    thanks for all the help here.
  20. #11
  21. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    You could use Browsershots.org to test your site in a variety of browsers, without waiting for a different OS for IE testing.

    Besides, I believe Windows XP is the best OS to perform web design anyway. It has almost every browser. A shame that Vista doesn't have IE8.
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Posts
    13
    Rep Power
    0
    Originally Posted by EricReese
    You could use Browsershots.org to test your site in a variety of browsers, without waiting for a different OS for IE testing.

    Besides, I believe Windows XP is the best OS to perform web design anyway. It has almost every browser. A shame that Vista doesn't have IE8.

    Thank you again for your help. that site is very useful!!

IMN logo majestic logo threadwatch logo seochat tools logo