| | |
Odd google maps rendering in IE6/WinXP only
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
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.
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.
" Of all the things I've lost,
I miss my mind the most...."
Mark Twain
I miss my mind the most...."
Mark Twain
Ok, fooled around with the code. The problem lies only in IE 6 and only under certain circumstances.
If I use a wrapper - like
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
is rendered relatively normally...
I tried solving my problem with IE conditional comments, however no luck so far...
Any ideas?
If I use a wrapper - like
HTML and CSS Syntax (Toggle Plain Text)
<div class="wrapper"> <div id="googlemap"></div> </div>
However
HTML and CSS Syntax (Toggle Plain Text)
<div id="googlemap" class="whatever"></div>
I tried solving my problem with IE conditional comments, however no luck so far...
Any ideas?
" Of all the things I've lost,
I miss my mind the most...."
Mark Twain
I miss my mind the most...."
Mark Twain
Ok, got it right...not as it should look like, but at least it fits the windows now 
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...

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...
" Of all the things I've lost,
I miss my mind the most...."
Mark Twain
I miss my mind the most...."
Mark Twain
![]() |
Other Threads in the HTML and CSS Forum
- Previous Thread: Loading Drop down Menu From External File
- Next Thread: Vista sytl navbar. puzzled---help me!? please
Views: 877 | Replies: 4
| Thread Tools | Search this Thread |
Tag cloud for HTML and CSS
2002 appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity create css deleted design development displayimageinsteadofflash dreamweaver drupal emailmarketing epilepsy explorer firefox flash font fonts form format frontpage google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft missing mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. templates textcolor theme timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 wordpress xml xsl






