Hi, i am new to css and have made (cut, paste, edit) a new design with background images imported from external css file with <div id> tags.
In my safari browser everything looks perfect and even the java works, but when i test opera, firefox or explorer the images is invisible(!?) ?
The browser must have the positioning right since the java image displayer works and are placed as intended. Everything else is gone.
I have tried to change it to class tags and i have tested a <img src>tag in the HTML file without great luck. Could the problem be that i am working on a mac osx and not a pc? I have no idea 😮 (not quite true, i think it is my poor coding skills) I would really appreaciate some help.
[URL=http://www.sniperstunts.com/test-med-css.html]this is my problem side
This is how my css look like:
[CODE]#top-left
{
background: url(‘http://www.sniperstunts.com/image-design/top-left.jpg’) no-repeat;
margin-top: 150px;
margin-left: 100px;
margin-right: auto;
height: 20px;
width: 20px;
}
#top
{
background: url(‘http://www.sniperstunts.com/image-design/top.jpg’) repeat-x;
margin-top: auto;
margin-left: 20px;
margin-right: auto;
height: 20px;
width: 500px;
}
#top-right
{
background: url(‘http://www.sniperstunts.com/image-design/top-right.jpg’) no-repeat;
margin-top: auto;
margin-left: 500px;
margin-right: auto;
height: 20px;
width: 20px;
}
#left-side
{
background: url(‘http://www.sniperstunts.com/image-design/left-side.gif’) repeat-y;
margin-top: 0px;
margin-left: 100px;
margin-right: auto;
height: 390px;
width: 20px;
}
#right-side
{
background: url(‘http://www.sniperstunts.com/image-design/right-side.jpg’) repeat-y;
margin-top: 0px;
margin-left: 500px;
margin-right: auto;
height: 390px;
width: 20px;
}
#conveyor
{
background:# url(”) no-repeat;
margin-top: 180px;
margin-left: 20px;
margin-right: auto;
height: auto;
width: 500px;
}
#top-lorange
{
background: url(‘http://www.sniperstunts.com/image-design/top-lorange.jpg’) no-repeat;
margin-top: auto;
margin-left: 20px;
margin-right: auto;
height: 100px;
width: 500px;
}
#bottom-left
{
background: url(‘http://www.sniperstunts.com/image-design/bottom-left.gif’) no-repeat;
margin-top: aut0;
margin-left: 100px;
margin-right: auto;
height: 20px;
width: 20px;
}
#bottom
{
background: url(‘http://www.sniperstunts.com/image-design/bottom.jpg’) repeat-x;
margin-top: auto;
margin-left: 20px;
margin-right: auto;
height: 20px;
width: 500px;
}
#bottom-right
{
background: url(‘http://www.sniperstunts.com/image-design/bottom-right.jpg’) no-repeat;
margin-top: auto;
margin-left: 500px;
margin-right: auto;
height: 20px;
width: 20px;
}
#
{
background: url(”) repeat-x;
margin-top: px;
margin-left: px;
margin-right: px;
height: px;
width: px;
}
And the HTML follows:
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Untitled</title>
<meta http-equiv=”Content-type” content=”text/html; charset=iso-8859-1″>
<link rel=”stylesheet” href=”http://www.sniperstunts.com/stylepandp.css”>
</head>
<body>
<div id=”top-left”>
<div id=”top”>
<div id=”top-right”>
</div>
</div>
</div>
<div id=”left-side” style=”float”>
<div id=”top-lorange”>
<div id=”right-side”>
</div>
</div>
<div id=”content”> </div>
<div id=”conveyor”>
<script language=”javascript” src=”http://www.sniperstunts.com/scripts/slider.js”></script>
</div>
</div>
<div id=”bottom-left”>
<div id=”bottom”>
<div id=”bottom-right”>
</div>
</div>
</div>
</body>
</html>
-Morten