Problemer med pseudo elements i et div
Hej eksperter jeg skal ha lavet en "shoutbox" med runde kanter og en lille fin gradient i top og bund.Måden jeg gør det på er ved at have et div med classen Box og på den class benytter jeg .Box:before og after til at sætte billeder ind.
problemmet er bare at det ikke virker i nogen browser, men når jeg bruger web developer tool til firefox så viser den det rigtig men så snart jeg lukker dev tool så boom er det væk igen.
------MAKEUP--------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="LeftFrame">
<div class="Box">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
set eiusmod tempor incidunt et labore et dolore magna aliquam.
Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="Box">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
set eiusmod tempor incidunt et labore et dolore magna aliquam.
Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>
---------CSS------
#LeftFrame
{
width: 197px;
}
.Box
{
background-color: #F8F8F8;
border: solid 2px #D5D5D5;
padding: 5px;
}
.Box:first
{
content: url(images/BoxTop.jpg);
display: block;
margin: -7px 0px -18px -7px;
}
.Box:after
{
clear: both;
content: url(images/BoxBund.jpg);
display: block;
margin: -7px 0px -18px -7px;
}
hvad gør jeg galt ?? og findes der smarter måder at lave det som måske er mere cross-browser sikre ?
