Fri, 2004-04-30 13:59
This problem applies to all the pages on this particular site, but this page is the best example:
http://ab-twtc2004001.ginger.assanka.com/wheretogo/map
Note that the third row of the map grid is offset from the rest by about 3px, almost certainly because the nav column on the left is pushing the rest of the content slightly to the right.
This is very odd, because the content is inside a containing div, and turning a background colour on for that div shows that the extra space is occuring inside it as extraneous padding.
The appropriate (I hope) CSS is:
#pagecontainer {
width: 750px;
border-left: 1px solid rgb(8,81,115);
border-right: 1px solid rgb(8,81,115);
background: white url('/lib/img/pagebg.gif') repeat-y;
text-align: left;
margin: 0px auto;
}
.nav {
float: left;
display: inline;
width: 147px;
margin: 0;
padding: 0;
}
#content {
margin-left: 163px;
margin-right: 10px;
padding-left: 2px;
}
The other problem you'll notice in MSIE 6 is that the various images that load as CSS backgrounds (i.e. almost all of them) flicker as you move your mouse over them. This looks a bit unprofessional - any ideas?
Regards,
Andrew
Fri, 2004-04-30 16:59
#1
extra padding and hover issue in MSIE
Golly
I have never seen such a perfect example of the IE bug called the 3 pixel jog. Well done 
www.positioniseverything.net/explorer/threepxtest.html
should put you arights.
Trevor
Beware the MS bug, it'll bite ya.
Fri, 2004-04-30 17:21
#2
extra padding and hover issue in MSIE
Well, I try. 
Thanks for that. By fixing that problem I seem to have created a peekaboo bug *sigh*, but I've come across that chap before so I think I can deal with it.
On the subject of the flickering navigation, I found several resources, but am not having much luck with 'double buffering' or fiddling with the background-* properties. I did manage to prevent the header image from flickering, by using only background-image (none of the other background-* properties) and applying the background to the parent element as well. I don't think I'm going to be able to work within those restrictions for the navigation though.
I'll keep prodding it. Meanwhile, any suggestions gratefully received.
Andrew
Fri, 2004-04-30 17:29
#3
extra padding and hover issue in MSIE
Hi
IE Flickering rollovers: there is only one way to avoid this. The initial image must be loaded as an image in the html (in an <img> tag) and the rollover in the css as a hidden div over the div that was first showing.
If you have both images as css backgrounds and switch between them on rollover, IE will flicker:
http://www.pmob.co.uk/temp/cssrollover4.htm
Trevor