Odd google maps rendering in IE6/WinXP only

[Rhyan]

Hi folks,

It has been some time since my last visit. This time I come looking for help...

I have coded a page that contains a google map next to an address location. Basicly the map shows where the address is situated.
I have used a centered div with fixed width as a holder, and I have floated 2 other divs in it - left navigation column, and right content column. Both fixed widths.
All content represents pretty much the same way in all browsers, except for the contacts page.
The google map displays correctly nested into the right content column on all browsers, however, in IE6 on winxp it floats far far away on the right, without considering the fixed widths of all containers.

My first guess was that, as I have img tags floated right, the whole map goes the same way, as an img.
Source code displayed several levels of divs, where img comes like 5th nested object...so, definitely that was not the cause.Also removed img float to make 100% sure.

My second guess is that google code is not correctly interpreted by IE, as google have some inline styles definition saying height/width=100% for the first containing div...
Maybe this is why IE stretches the page to fit 100% tall/width of the whole window area, and sends the map on the right side, instead of filling the fixed container to 100%.

here is a link to the page itself...any ideas will be appreciated.

http://www.abc-varna.com/bg/contacts/

Note - Chrome, Opera, Safari(Win), Mozilla, Flock render the page ok. IE 6 is the only one(again) ruining the whole thing...
Regards.

[jbennet]

IE6 just has terrible standards compliance

[Rhyan]

Yes, almost got used to it, but this one really surprised me.
Any ideas anyway what may be the cause?
Do you see something wrong with my code?
I am out of ideas in which direction should I look now...

[Rhyan]

Ok, fooled around with the code. The problem lies only in IE 6 and only under certain circumstances.

If I use a wrapper - like

<div class="wrapper">
  <div id="googlemap"></div>
</div>

where the wrapper is floated, IE renders google-map in an unusual way, that is - it takes 100% screen size as reqired dimension for the googlemap element and the whole page is ruined.

However

<div id="googlemap" class="whatever"></div>

is rendered relatively normally...

I tried solving my problem with IE conditional comments, however no luck so far...
Any ideas?

[Rhyan]

Ok, got it right...not as it should look like, but at least it fits the windows now :D

If you're interested how, go check the code on the page for details, however in short I did it like this.
1. Conditional css property in the head section of the document that works for IE 6 only and hides the element that all other browsers must see.
2. Conditional html in the body that is valid for IE6 only. This html preceeds the normal code that all other browser should read, so it is displayed normally.

And that's it...
The only problems I could not solve are the padding/margin problems, as usual, but I don't really have the nerves to deal with it for the time being...