3 replies [Last post]
trib
Offline
Regular
London, UK
Last seen: 15 years 18 weeks ago
London, UK
Joined: 2004-03-12
Posts: 11
Points: 0

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

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 37 weeks 1 day ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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 Laughing out loud

www.positioniseverything.net/explorer/threepxtest.html

should put you arights.

Trevor
Beware the MS bug, it'll bite ya.

trib
Offline
Regular
London, UK
Last seen: 15 years 18 weeks ago
London, UK
Joined: 2004-03-12
Posts: 11
Points: 0

extra padding and hover issue in MSIE

Well, I try. Cool

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

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 37 weeks 1 day ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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