PDA

Click to See Complete Forum and Search --> : background disappears in other browsers

morten
06-14-2006, 04:43 PM
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(!?) :confused:

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 :o (not quite true, i think it is my poor coding skills) I would really appreaciate some help.
this is my problem side (http://www.sniperstunts.com/test-med-css.html)
This is how my css look like:
#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:

<!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
WebJoel
06-14-2006, 04:53 PM
I'm just guessing here (haven't gotten to deep with this yet), but this(??):

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

-is VERY SMALL. A scrollbar is about 20 or 21 pixels wide, so imagine that, -and equally tall- ... what are you trying to display? If the defined width & height are exceedingly smaller than the actual image, -you might have a problem...

I'll look a little more... but the image URL "http://www.sniperstunts.com/image-design/top-left.jpg" appears to not be at this location. Check your URLs for the images (all of them, -in case this is a recurring error) to see if this is the correct path.
If you're seeing the proper background on your computer, you are probably pulling these from cache...
morten
06-14-2006, 06:02 PM
I am trying to display something that will look like a colored frame without using tables. The corners are images 20x20px. The sides, top and bottom as well but i used the repeat to set the height and width respectively.
Here is a screenshot on how it should look.screenshot (http://www.sniperstunts.com/screenshot.tiff)
The images on the bottom are scrolling and are displayed cross browsers. The frame are not :(

oh, and i checked the url and the image path is correct and the small jigsaw piece pops up in the corner of my browser (safari) when i type in this address:
http://www.sniperstunts.com/image-design/top-left.jpg

When i type the same url in firefox and opera, however, the image don't show up. Just the url sows in the window with ff and a text saying "image" appears in the opera browser.

-Morten
ray326
06-14-2006, 10:39 PM
I think those images are bad. Maybe they still have the Mac header or something.
WebJoel
06-15-2006, 06:42 AM
I am trying to display something that will look like a colored frame without using tables.....

Oh okay, -I see what you're trying to do. It can be done more efficiently than using small images in the corners I think, but the fact that the small images aren't displaying in (for instance) Firefox is a real problem(all I get is text giving the URL of the page), like Ray said, might be a non-compatible format with the images.
*** I regress...
A few years ago (well, quite a few in fact), back when "IBM/pc" and "Mac" computers were not compatible at all, I remember a co-worker came back from a computer show and was bragging to me that he'd bought some nifty program that converts Mac-format images into IBM/pc format images and that he'd gotten some 75% off the price of this program (he'd paid something like $40.oo maybe??).
*I* had downloaded the same thing (in 'freeware' form) from AmericaOnline, -at 10-cents per minute-, so my copy cost me only fifty cents(!).
Basically what this program did was strip some 16 or 32-bytes(??) of Mac-format data off of the beginning of image code and replace it with equal-size non-relevant bytes to preserve the image volume(size), -and the Mac-image would now work on pc. I mean, -like Wow (sic!).

A few years later on, a major computer company had something new & wonderful... a lil' button on their new line of computer that you could push that would allow you to run Mac-program diskettes in a pc-floppy drive. :rolleyes: That particular model wasn't available for long... and shortly thereafter, IBM/pc & Mac stuff became more-of-less compatible.

This wonderful little innovation that people whom bought this computer and paid extra for this, probably got nothing more than what I just described above but in 'automatic, mechanized' conversion, -it stripped the Mac-heading off of the image file and replaces it with open-bytes of non-data, and allows it to load.

-Doesn't explain the current dilema I know... but I felt like tale-telling this morning...
morten
06-15-2006, 07:58 AM
Hmm. That was a nice story and i am thinking of a way to make use of it :p

I don't have much experience in mac/pc compatibility problems regarding images. I thought a jpg was a jpg and a gif was just a gif. I made the images in adobe image ready (since my photoshop expired in lack of software funds) so i would assume adobe made the formats same way..?
Assumptions is the mother of all f...ups, as we know it, so could anyone direct me to a program that could make the images compatible? (if that is the problem...

-Morten
ray326
06-15-2006, 07:51 PM
The first thing in your image file is "8BPS". That ain't JPEG. I think you've uploaded Photoshop format image files with a *.jpg file extension. It wouldn't surprise me that a Mac application would know how to render them, much like a Windows app would probably be able to render a BMP.
morten
06-16-2006, 03:34 AM
HEY! Thank you very much, ray! That was the problem and it is now solved!
I thought it should be a jpg file coz i applied the jpg extention. It seems it was not a jpg after all. Thanks again :D

-Morten