IE7 and webkit-border-radius selector

HTML & CSS
1

Hey dudes,

I am using a jquery based auto complete script on my site, which works great. Css is used to style it, and every works perfect accecpt IE7 seems to collapse the container when the [B]webkit-border-radius[/B] selector is in use:

Firefox 3 / Chrome / Safari etc

IE7

The html


										<input id="speciesinput" type="text" size="20" name="species" value="" style="margin-left:0px;display:none;" onkeyup='lookup(this.value);' onblur='fill();' />
													<!-- Species Input Auto-fill -->
													<div class='suggestionsBox' id='suggestions' style='display:none;top:23px;left:150px;'>	
														<img src='css/images/upArrow.png' style='position: absolute;top: -10px;left:15px;' />
														<div class='suggestionList' id='autoSuggestionsList'>
														   &nbsp;
														</div>
													</div>

The CSS:

/* Suggestion Box styles */
.suggestionsBox {
	position: absolute;
	top:147px;
	left:665px;
	margin: 10px 0px 0px 0px;
	width: 200px;
	background-color: #61734d;
	border: 2px solid #ffffff;	
	color: #fff;
	z-index:5;
	display:inline;
	-moz-border-radius: 7px;  
    -webkit-border-radius: 7px;
}

.suggestionList {
	margin: 0px;
	padding: 0px;
	font-size:10pt; 
}

.suggestionList li {
	
	margin: 0px 0px 3px 0px;
	padding: 3px;
	cursor: pointer;
	list-style:none;
	text-align: left !important;
}

.suggestionList li:hover {
	background-color: #ff0000;
}

I could just remove the line -webkit-border-radius: 7px; but then it wont be rounded in newer browsers etc. The really strang thing is I have this same dropdown menu on another part of the site, and IE7 ignores it fine… but on the example image given above it looks like IE7 is tring to round the edges!

If anyone has any idea how to solve this, much appreciated of course :slight_smile:

2

If it really is the webkit line (gosh it really shouldn’t be, vendor extensions are ignored by other browsers) then you could try moving them to a separate declaration:
.suggestionsBox {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}

(might as well add in the real border-radius in case Opera or someone gets on board)

I’ve never seen IE7 try to round corners before… but if there’s a set height on that box, you could also see what IE7 does with a min-height: whatever statement.

3

Hi, something else must be going on since IE7 should ignore that.

Can you post a link where this is at? :slight_smile: