Tue, 2010-02-09 10:32
dear members of css creator,
I'm working on a site about a street theater show from some friends of me.
But, now i'm placing images on top of an existing image (going to be a img rotator in php)
But, it looks oke in firefox, in ie but on a safari browser it is always a little to much to the bottom.
But, my friends both use a mac with safari so it really has to work good on it.
You guys got any idea what the problem is?
My regards,
Michiel
P.S; example is: site
@charset "UTF-8"; body { background-color:#993300; } #container { margin: 0px auto; background-image: url(images/background.jpg); height: 600px; width: 800px; } #menu{ position: relative; top: 180px; left: 50px; width: 120px; color:#FFFFFF; } li{ list-style-type:none; margin-bottom:2px; } #menu a{ text-decoration:none; color: #FFF; } #menu a:hover{ text-decoration: underline; color: #999999; } #fotoL{ position:absolute; height:128px; width: 154px; /*margin-top: 140px; !important*/ margin-left: 165px; padding-top: 145px; } #fotoR{ position: absolute; height:128px; width: 154px; margin-left: 330px; margin-top: 150px; }
<!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>TheGBC - index</title> <link href="reset.css" rel="stylesheet" type="text/css" /> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Video</a></li> <li><a href="#">Foto</a></li> <li><a href="#">Show</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Info</a></li> <li><a href="#">Agenda</a></li> <li><a href="#">Bedankt</a></li> </ul> </div> <div id="fotoL"> <img src="images/fotoL1.jpg" alt="sfeerfoto1" /> </div> <div id="fotoR"> <img src="images/fotoR1.jpg" alt="sfeerfoto2" /> </div> </div> </body> </html>