WordPress.org

1. jeroen1973
   Member
   Posted 2 years ago #

   Hello,

   Can someone help me? I have been searching the forums and found many problems with Internet Explorer, but I couldn't find a solution for mine.

   This is my problem. Please have a look at this page in Internet Explorer 6 or 7:
   http://www.akershoek.com/wp/recent-photos/?pid=211#picture_nav
   You can see that the photo is aligned below the left menu. It looks ok in Safari and Firefox.

   I used to have the same problem with this page, where my thumbs where also below the left menu: http://www.akershoek.com/wp/recent-photos/
   I managed to solve this by putting the thumbs in a table. Unfortunately this solution doesn't work for a photo :-(

   As a photo gallery plugin I use ANIga 0.3 with Wordpress 2.0.4. If you need more information to be able to help me, please let me know.

   Thank you for any help you can provide to solve this problem. But please know that I am not very skilled with php and css. I have been able to solve most of my problems with trail-and-error, but I can't crack this on.

   Regards, Jeroen

2. samboll
   moderator
   Posted 2 years ago #

   http://www.akershoek.com/wp/recent-photos/:
   http://validator.w3.org/check?uri=http%3A%2F%2Fwww.akershoek.com%2Fwp%2Frecent-photos%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1

   http://www.akershoek.com/wp/recent-photos/?pid=211#picture_nav:
   http://validator.w3.org/check?uri=http%3A%2F%2Fwww.akershoek.com%2Fwp%2Frecent-photos%2F%3Fpid%3D211%23picture_nav&charset=%28detect+automatically%29&doctype=Inline&ss=1

   It could be as simple as fixing these errors.

3. jeroen1973
   Member
   Posted 2 years ago #

   Thanks for your tip. I will try to solve these first, and hopefully it will solve my initial problem also :-)

4. jeroen1973
   Member
   Posted 2 years ago #

   I have solved all the problems on the page that gives me problems, but this doesn't solve my internet explorer layout problem. Please see this page with Internet Explorer 6 or 7: http://www.akershoek.com/wp/recent-photos/?pid=211

   There was one validation error that I corrected that gave me a ugly page, so I put back in the original code. Here is the result of the validation:
   http://validator.w3.org/check?uri=http%3A%2F%2Fwww.akershoek.com%2Fwp%2Frecent-photos%2F%3Fpid%3D211%23picture_nav&charset=%28detect+automatically%29&doctype=Inline&ss=1
   (solving the error you see here doesn't affect the layout problem)

   Is there anyone who has an idea how to solve my problem? Thanks for you time!

5. jeroen1973
   Member
   Posted 2 years ago #

   Unfortunately I had to restore my page back to the original, because my slideshow did not work anymore :-(

6. Reggie98
   Member
   Posted 2 years ago #

   Changing the margin in your css line:

   #contentwide{border-left:1px solid #f0f0f0;line-height:1.6em;margin:0 0 5px 150px;padding:0 0 0 10px;}

   to 100px for the left margin, allows the image to move back to the top, but puts the margin for the comments into your side navigation.

   Thus it seems that Firefox is ignoring this left margin directive, but IE is interpreting it strictly.

   I'm not sure what the actual solution is. Your "leftside" has a "float:left", but you probably shouldn't be using the "margin-left" on "content" since it means that your divs are on top of each other.

   To test out changes on your local computer (rather than live website), get the page source on one photo page and save it as temp.htm, then get the two CSS files and save as temp1.css, temp2.css (to get CSS, just copy the full URL for the file into Firefox and it displays as text). Edit the temp.htm to use your two temp CSS files. Viewing temp.htm in IE allows you to edit it or the CSS files to experiment.

   You have some nice photos - I especially liked the three meerkats (if that's what they are). I could only find chipmonks around moraine lake

   Hope this helps

7. jeroen1973
   Member
   Posted 2 years ago #

   Hello Reggie,

   Thank you for your help! Though I changed the left margin to 149px, because 100px looked ugly like you said. I don't exactly understand how this works, but I am glad it did :-)

   Thanks also for your comment about my photos. Actually, they are not meerkats, but prairie dogs. You have also an interesting site, I will have a look at your photos too.

   Regards, Jeroen

8. jeroen1973
   Member
   Posted 2 years ago #

   I was too quick when I thought it was fixed. It is fixed for IE7, but IE6 is still having the same problem :(

   Any thought?

9. varkenshand
   Member
   Posted 2 years ago #

   Try to search for the IE double margin hack, seem to remember that adding a display: inline; somewhere could solve the margin problem.

10. jeroen1973
    Member
    Posted 2 years ago #

    Thanks for your suggestion varkenshand. I have tried your solution, but it didn't work. It messed up the layout of the page, maybe I am using it wrong I don't really know.

    I was just thinking, since more and more people will be switching from IE6 to IE7 (or to Firefox, if I can make a suggestion :) ) this won't be a problem for a very long time.

    But if someone does have a solution, I would be happy to hear it. Thanks!

Topic Closed

This topic has been closed to new replies.