CSS/Google Maps issue with Internet Explorer

Fenster

Howyeh,

I'm developing a website for a sandwich store chain and have run into an issue with the store location application which I've put together for the website. In every browser except IE the information bubbles in Google Maps open at the correct width and height, but in IE6 and 7 they expand to take up the full page's width. Here's two illustrative screenshots:

Firefox, Safari, Opera, etc.

Internet Explorer 6/7

And here is the relevant CSS:

/* Google Maps */

#map {
border: 1px solid #979797; 
background-color: #e5e3df; 
width: 658px; height: 450px; 
margin: auto; 
margin-top: 2em; 
margin-bottom: 2em
}

#store {  
	background: url('/jj/images/med.jpg') no-repeat left center;
	margin: 1px auto;
	padding: 1px;
	width: 300px;
	height: 65px;
	/* Internet Explorer fix */
	_width: 300px; /* IE Hack */
}

#store p {
	float: left;
	padding: 0 0 0 100px;
	font-size:1.3em;
}

#store * {
	margin: 0;
	padding: 0;
	text-decoration: none;
	color: #000;
}

#store a {
	color: #477b91;
	font-weight: bold;
}

In honesty I'm fairly new to CSS scripting and I'm completely unsure whether there's something I need to include or exclude.

EDIT: I've checked my own code and have run it through the validator.

CuLT

First guess would be the 100px padding. Try removing it.

Fenster

That wouldn't work, unfortunately. The padding keep the text to one side of the logo image and removing that ruins all of the formatting.

deegs

can i see it live?

deegs

oh right i see it.

EDIT:

Gotta spilt now but your div store looks good in both its the "area" behind that is causing probs.

I also wouldnt use any hacks, most CSS errors are easily remidied / avoided without hacks.

Fenster

I resolved this myself by altering the first element as follows:

.store {  
	background: url('/jj/images/med.jpg') no-repeat left center;
	margin: 1px auto;
	padding: 1px;
	width: 300px;
	float: left;
	height: 75px;
}