Hey!

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
    <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>


CSS
#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;
}


Live vb: http://shurl.be/ZiQG
Screenshot Firefox (zoals het zou moeten werken): http://shurl.be/agzW
Screenshot Chrome (fout): http://shurl.be/H1mf
ik snap de opbouw van je css niet echt helemaal..

je doet #idpakken en vervolgens een Div.class dubbelop?

waarom niet gewoon alleen #id

verder zou dit


-webkit-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.
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.
@Reshad: #portfolioItems is de container waar meerdere div.portfolioItem in zitten.. Verder staat dat er zoals je wel kan zien.. En het linkje zou moeten werken hoor

@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
Moet je niet met border left en right gaan werken op de divs die erin zitten?


#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;
}
aangezien ik niet op de live versie kom en ik het niet live kan zien ga ik van wouterJ zijn commentaar uit moet je die border-radius voor je image hebben als het een img is dus in die class waar de styling van de image zit.
@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?
probeer is die border-radius in die image class er ook bij te zetten.
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?


Ik kom ook niet op de live link.
Weet je wat het is. Die link wijst zeer waarschijnlijk naar een localhost (mamp aan de favicon te zien). Als Wouter DS zijn computer uit ziet krijgen wij een 404 error.

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[/edit]

Reageren