map not rendering properly

I am trying to add a google map onto a plain page, and use the page as a plugin into my framework.

I am having 2 problems...

If I open up the plugin page directly, it loads up fine, but if I use it as a plugin on my test site, the tools are not rendered properly in the window and a grey box appears under the bubble.

Also, in FF, (okay in IE8 and chrome) the map window appears to the right and off the page.

here's a link..

plugin page find.php

embedded page find_us.php

username and password, both 'webassist'

thanks for looking

the issue with the address bubble is caused by the following style in your style sheet, it is overriding the google styles for the info window.

img, embed, object, video {
max-width: 100%;
}

the problem with firefox showing the map off the the side is caused by the float left attribute in the logo style.
.logo {
float: left;
width: 100%;
}

Thanks for finding the problem so quickly Jason.

I really appreciate your help.

Trouble I have is I get a layout which seems to work, and when it starts to break down, I find it difficult to debug.

Even using Firebug and Chrome, I couldn't find the issue.

It seems that most of my issues are css related, perhaps because I relied too much on css sculptor when first starting out.

If anyone can recommend a good css course or books/ materials, I would be interested

Thanks

what i do for finding these issues is to use Fire Bug in Fire Fox.

In fire bug, my strategy is to go to the CSS Tab, and from the drop down list, select the main sites CSS File.

I then select the first selector name and hit the delete key, then the tab key, this removes that first selector, and tabs to the next one. I keep deleting and tabbing through the style sheet and checking the page layout to see if the problem i am trying to target still exists or not.

once I delete a selector and tab to the next one, and the problem goes away, i make not of the selector name. now i know to investigate the selector before it.

Refresh the page and go back into the css file to locate the problem selector, and this time, disable individual styles in that selector to narrow the issue down.

First step is destructive troubleshooting, keep removing classes and pair away the layout till you find the culprit. keep removing bits of the haystack till you find the needle.

great tip Jason.

I will put the problematic settings back in the css file and adopt your approach.

Thanks again