Rounded corners gedrag bij position: absolute
Ik zit met een vervelend probleempje. In Firefox werkt dit goed, maar in Safari & Chrome niet.
Voor een of andere reden verdwijnen mijn rounded corners in Safari & Chrome.
Iemand een idee hoe dit komt of hoe je dit kan oplossen?
HTML structuur
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="portfolioItem">
<div class="info">
<h2>The Three Little Pigs - Siri Proxy</h2>
<p>This project is an open source Siri Proxy server which can be used to bring Siri to other unsupported iOs devices.
It's available for free Github. The proxy itself is written in Ruby and was made by a friend of my, @JimmyKane, based on the work from @plamoni.
What I did? The website interface to manage the keys, clients, bans, server info etc.</p>
<hr />
<ul>
<li>Web development</li>
<li>Web design</li>
<li>Database design</li>
</ul>
</div>
<div class="images">
<img src="/uploads/nature.png" alt="Nature" />
</div>
</div>
<div class="info">
<h2>The Three Little Pigs - Siri Proxy</h2>
<p>This project is an open source Siri Proxy server which can be used to bring Siri to other unsupported iOs devices.
It's available for free Github. The proxy itself is written in Ruby and was made by a friend of my, @JimmyKane, based on the work from @plamoni.
What I did? The website interface to manage the keys, clients, bans, server info etc.</p>
<hr />
<ul>
<li>Web development</li>
<li>Web design</li>
<li>Database design</li>
</ul>
</div>
<div class="images">
<img src="/uploads/nature.png" alt="Nature" />
</div>
</div>
CSS
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#portfolioItems div.portfolioItem {
border: 1px solid #DFDFDF;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
box-shadow: 0 0 10px #EEE;
margin: 10px;
overflow: hidden;
position: relative;
height: 328px;
}
#portfolioItems div.portfolioItem div.images {
position: absolute;
left: 0;
}
#portfolioItems div.portfolioItem div.info {
width: 355px;
padding: 15px 25px;
font-size: 0.9em;
text-shadow: 1px 1px 0 #FFF;
background: #FAFAFA;
position: absolute;
right: 0;
z-index: 1;
}
border: 1px solid #DFDFDF;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
box-shadow: 0 0 10px #EEE;
margin: 10px;
overflow: hidden;
position: relative;
height: 328px;
}
#portfolioItems div.portfolioItem div.images {
position: absolute;
left: 0;
}
#portfolioItems div.portfolioItem div.info {
width: 355px;
padding: 15px 25px;
font-size: 0.9em;
text-shadow: 1px 1px 0 #FFF;
background: #FAFAFA;
position: absolute;
right: 0;
z-index: 1;
}
Live vb: http://shurl.be/ZiQG
Screenshot Firefox (zoals het zou moeten werken): http://shurl.be/agzW
Screenshot Chrome (fout): http://shurl.be/H1mf
Gewijzigd op 27/06/2012 09:39:27 door Wouter De Schuyter
je doet #idpakken en vervolgens een Div.class dubbelop?
waarom niet gewoon alleen #id
verder zou dit
Code (php)
1
2
3
2
3
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
gewoon moeten werken. heb je toevallig ergens een reset erachter o.i.d? waarbij de radius weer op 0 gezet wordt?
ps je linkje werkt niet.
Quote:
je doet #idpakken en vervolgens een Div.class dubbelop?
Naast het feit dat ik deze zin niet volledig begrijp is dit helemaal niet krom. Een id kan maar op 1 element zitten en dus hoef je niet div#myId te doen, maar een class kan op meerdere elementen zitten en dus is het verstandig wel div.myClass te doen.
PS: Ik kan dit verkeerd begrijpen.
Wouter, het werkt wel alleen je begrijpt niet dat het werkt...
De box krijgt mooie ronde hoeken. Alleen de afbeelding niet.
@Wouter J: Neen hoor in Chrome werkt het niet, de div krijgt ook geen ronde hoeken (even kleur veranderd zodat het duidelijker wordt) -> http://shurl.be/wuy0
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
#portfolioItems div.portfolioItem div.images {
position: absolute;
left: 0;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-left-radius: 15px;
}
position: absolute;
left: 0;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-left-radius: 15px;
}
Gewijzigd op 27/06/2012 11:38:48 door Q S
—
Iemand anders die ook niet op die live versie kan buiten Reshad?
Wouter DS op 27/06/2012 11:48:02:
@Q S: Dat kan een oplossing zijn maar dat lijkt mij zo slordig?
—
Iemand anders die ook niet op die live versie kan buiten Reshad?
—
Iemand anders die ook niet op die live versie kan buiten Reshad?
Ik kom ook niet op de live link.
Kortom: plaats het of echt online of de relevante code in een gestripte voorbeeld op sites als jsfiddle of cssdesk.
Edit:
Ik heb geprobeerd het voorbeeld na te maken en hetzelfde effect te krijgen, maar volgens mij ligt het echt wel aan die afbeelding. Voorbeeldje: http://cssdesk.com/yhMfn
Gewijzigd op 27/06/2012 17:02:41 door Wouter J