Tutorial :CSS/HTML problem in IE - how to fix?


I'm working on this page here:


It looks fine in firefox, chrome, opera and IE8
But when I turn on the "compatibility view" in IE8, the menu images go below the text.

Another problem which happens only in this view is in this page:

The thumbnails go too far left outside the view.

Anyone know how can I fix this? I have very little experience with this sort of stuff.


.ngg-album {      position: relative;  }  .ngg-albumimage   img {      position: absolute;      left: 0;      top: 0;  }  .ngg-albumimage {      display: inline;  }


Congratulations on the W3C-valid HTML! (I checked just to make sure)

Since it looks like the div#header is always going to be 50px tall and always at (0,0) inside of the div#wrapper, and the div.sidebar always at (0,50), why not do this:

div#wrapper {      position: relative;  }    div#wrapper div#header {      position: absolute;      height: 50px;      top: 0px;      left: 0px;  }    div#wrapper div.sidebar {      position: absolute:      top: 50px;      left: 0px;  }  


On a second look on your page I thought a trick a friend of mine uses might be of help:

* {padding: 0; margin: 0;}

This usually helps solving common IE compatibility issues connected with the default values of margin and padding there.


It looks like this is a good case of "double margin"

Basically what you need to do for "compatible view" is to set display to inline on elements that are floated and have margin.

.ngg-albumtitle {      float: right;      display: inline;  }  


you can used..

.sidebar ul { margin:0px; padding:0px;

} .sidebar li { float: right; display: inline-block; margin:1px; padding:0px 4px'



Thanks Ptiwari.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »