1

I'm working on this page here:

http://noasimon.co.il/

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:
http://noasimon.co.il/exhibition2010

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.

shoosh
  • 76,898
  • 55
  • 205
  • 325

5 Answers5

1
.ngg-album {
    position: relative;
}
.ngg-albumimage 
img {
    position: absolute;
    left: 0;
    top: 0;
}
.ngg-albumimage {
    display: inline;
}
reisio
  • 3,242
  • 1
  • 23
  • 17
  • works, with just one fixe - instead of `left:0` it should be `right:250px`. Thank you! – shoosh Jul 01 '10 at 15:21
  • In which IE(s)? You realize your ie.css is going to all version of IE, right? – reisio Jul 01 '10 at 15:51
  • When the screen is too narrow, on IE8 the image again goes below the text, on IE7 the text gets hidden by the image. You can check it out yourself in the site. also, there is no ie.css in this page. – shoosh Jul 01 '10 at 16:06
  • I'll take a look, but there _is_ an ie.css included on every page I can find on the site. – reisio Jul 01 '10 at 17:45
  • You're right, my mistake. I'd appreciate any further help with this. The problem now is when I resize the window to be very narrow. – shoosh Jul 01 '10 at 21:10
0

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;
}
amphetamachine
  • 27,620
  • 12
  • 60
  • 72
0

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.

vlood
  • 927
  • 6
  • 16
  • Did you add this line on the top of the CSS file? Just curious whether it would make a difference... – vlood Jul 02 '10 at 06:31
0

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;
}
peirix
  • 36,512
  • 23
  • 96
  • 126
0

you can used..

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

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

font-size:..;

}

Thanks Ptiwari.

Prashant
  • 15
  • 2