IE6 + below background image problem

[chrismassey]

Hello,

I have been hunting for a solution to my problem, although this seems to be a well known issue, I am unable to find a solution that works.

I am using a background image for a logo in the top left hand corner of a website, however it is not been displayed in IE6 and below.

The website:

http://medical-course.co.uk

Browser shots:

http://browsershots.org/http://medical-course.co.uk/

CSS for background image:

#outer_top_left{
	position: absolute;
	top: 10px; right: 600px; bottom: 10px; left: 10px;
	border: 4px solid #008080;
	background:url('../Images/Logo.jpg') no-repeat center center;
}

Could someone please point me in the right direction on how I can fix this issue. Thanks alot,

Chris

 

[traingamer]

It has no height (and no content) - I'm surprised your logo shows up in any browser.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[chrismassey]

Thanks for your reply.

Can you explain why you need a height and a width, surely the top, right, bottom, left will automatically generate its height and width. This would also help the logo somewhat be liquid as if I changed the width of the entire outer div (wrapper) then #outer_top_left would adjust accordingly (which
it wouldn't if it had a pre-set width.

Thanks

Chris

 

[Vragabond]

It's just because of that. All other browsers use top/bottom, left/right pairs to calculate the size of the element, but IE6 does not. While this is quite annoying, it really does not matter in your circumstance.

Why do you need an absolutely positioned element to put your logo in anyway? Just flush it to the left and vertical centre of #outer_top_left-right-outer and you'll be fine.



___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]