Malsup corner verwijderd ook stukje uit background
Wellicht heeft iemand een oplossing of dit ooit ook al eens gezien...
Ik maak gebruik van Malsup Simple Corner Rounding. Hij werkt prima echter heb ik een klein probleem.
Ik heb de body een kleur grijs gegeven. In de body zit een div (outer) welke 2 divs heeft (header en content). De content heeft een background-image.
De content heeft een div (menu). Dus:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<html>
<head></head>
<body>
<div id='outer'>
<div id='header'></div>
<div id='content'>
<div id='menu'></div>
</div>
</div>
</body>
</html>
<head></head>
<body>
<div id='outer'>
<div id='header'></div>
<div id='content'>
<div id='menu'></div>
</div>
</div>
</body>
</html>
De div menu geeft ik een rounding. Daarop zie ik plots dat de background image van outer dat zelfde hoekje ook eruit heeft en ik dus wel een ronde hoek heb,maar dat de foto dus stukjes mist van de ronde hoekjes.
Voor men die het nog niet snapt: stel ik heb een 3 blokjes op elkaar. (achter:rood, midden:geel, voor:blauw) ik snij van de bovenste blokje (blauw de helft af, dan hoor ik gewoon geel te zien. echter zie ik rood.
Weet iemand een oplossing voor dit probleem?
Ik neem aan dat je HTML code slechts een voorbeeld is? Want het mist nog een doctype (<!doctype html>) en in HTML gebruiken we dubbele quotes (") (hoeft niet, is wel de richtlijn).
Als ik die jQuery corner plugin gebruik krijg ik wel het juiste resultaat: jsFiddle
Dus het moet ergens anders aan liggen. Kun je misschien een online linkje geven?
Daarnaast kan je tegenwoordig ook gewoon CSS3 border-radius gebruiken. Werkt in IE9 en alle andere browsers.