SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 and webkit-border-radius selector

    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 webkit-border-radius selector is in use:

    Firefox 3 / Chrome / Safari etc


    IE7



    The html
    Code HTML4Strict:
    										<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:

    Code 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

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    Hi, something else must be going on since IE7 should ignore that.

    Can you post a link where this is at?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •