Problem with layout in Internet Explorer

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

https://www.akershoek.com/wp/recent-photos/?pid=211#picture_nav:
https://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.

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

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: https://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:
https://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!

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

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

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

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?

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

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!