SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2008
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE problem (gallery)

    Hi,

    My gallery doesn't look right in IE and i can't figure out why? can anyone who is expert in this filed have a look at it and tell me how this can be solved.

    http://www.ivyhomes.co.uk/ivyhomes/gallery.php

    Thanks,
    Yizi
    The quieter you become the more you are able to hear

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When sitting things side by side, you have to make sure the maths adds up for the total width, especially in IE6. At the moment, the only reason the thumbs sit next to the main image is due to the <li>s being floated so that the height of the <ul> is zero, and it actually sits above the main image - in IE, the <ul> will surround the <li>s and as the <ul> is not floated the main image cannot sit nest to it.

    Fix is to float the <ul> left and make it a fraction narrower, and make the main image container narrow enough to fit. An overflow setting on this container will ensure it doesn't slide behind the float and the auto side margins can be zeroed :
    Code:
    .galleria {
    	list-style:none;
    	width:190px;
    	float: left;
    }
    
    .galleria_container {
    	margin: 0 0 60px;
    	height: 438px;
    	width: 520px;
    	overflow: hidden;
    }

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2008
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    When sitting things side by side, you have to make sure the maths adds up for the total width, especially in IE6. At the moment, the only reason the thumbs sit next to the main image is due to the <li>s being floated so that the height of the <ul> is zero, and it actually sits above the main image - in IE, the <ul> will surround the <li>s and as the <ul> is not floated the main image cannot sit nest to it.

    Fix is to float the <ul> left and make it a fraction narrower, and make the main image container narrow enough to fit. An overflow setting on this container will ensure it doesn't slide behind the float and the auto side margins can be zeroed :
    Code:
    .galleria {
    	list-style:none;
    	width:190px;
    	float: left;
    }
    
    .galleria_container {
    	margin: 0 0 60px;
    	height: 438px;
    	width: 520px;
    	overflow: hidden;
    }
    OK i understand what you say and changed the code to what you gave me, what i dont understand is that how i can make the <ul> narrow, you mean by adding a?
    Code:
    .galleria ul { width: xxx;}
    if thats not the case how else, and at the moment the width of the pictures are 500px, how small you should think i need to make them to fit properly?

    Thanks,
    Yizi
    The quieter you become the more you are able to hear

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The .galleria class is the <ul> - it was originally 200px and I narrowed it to 190px to allow enough room for the larger image.

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2008
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh right so all i have to do now is to narrow the image down right?
    The quieter you become the more you are able to hear

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No images need to be changed at all - the images are 500px wide and the .galleria_container is 520px wide.

  7. #7
    SitePoint Zealot
    Join Date
    Jan 2008
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well that won't work because if the container is 250px and images are 500px we only get left with 20px and the size of <ul> is 200px as you said... am i right?
    The quieter you become the more you are able to hear

  8. #8
    SitePoint Zealot
    Join Date
    Jan 2008
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think i kind of got confused, i have a look at it again and i let you know.
    The quieter you become the more you are able to hear

  9. #9
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, .galleria_container only contains the large image. The list is outside this, contained within #gallery. #gallery is 760px wide - .galleria I changed to 190px wide and .galleria_container I changed to 520px wide, which leaves a 50px wide margin on the right hand side.

  10. #10
    SitePoint Zealot
    Join Date
    Jan 2008
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK i got what you mean now, im very sorry, but this should solve our problem but i made the changes and i still have the problem.
    The quieter you become the more you are able to hear

  11. #11
    SitePoint Zealot
    Join Date
    Jan 2008
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have doubled check it looks fine in Firefox but not in IE, neither chrome.
    The quieter you become the more you are able to hear

  12. #12
    SitePoint Zealot
    Join Date
    Jan 2008
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK i just learned to new things today, one to calculate the width etc and the other one to clear the catch so i can see the changes, the problem is fixed, thanks so much!
    The quieter you become the more you are able to hear


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
  •