/    Sign up×
Community /Pin to ProfileBookmark

background disappears in other browsers

Copy linkTweet thisAlerts:
Jun 14.2006

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[/URL]
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;
} [/CODE]

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

-Morten

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelJun 14.2006 — 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;

[B]height: 20px;

width: 20px;[/B]

-is VERY SMALL. A scrollbar is about 20 or 21 pixels [I]wide[/I], 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 [I]your[/I] computer, you are probably pulling these from cache...
Copy linkTweet thisAlerts:
@mortenauthorJun 14.2006 — 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.[URL=http://www.sniperstunts.com/screenshot.tiff]screenshot[/URL]

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
Copy linkTweet thisAlerts:
@ray326Jun 15.2006 — I think those images are bad. Maybe they still have the Mac header or something.
Copy linkTweet thisAlerts:
@WebJoelJun 15.2006 — I am trying to display something that will look like a colored frame without using tables.....[/QUOTE]

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 [I]my[/I] 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...
Copy linkTweet thisAlerts:
@mortenauthorJun 15.2006 — 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
Copy linkTweet thisAlerts:
@ray326Jun 16.2006 — 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.
Copy linkTweet thisAlerts:
@mortenauthorJun 16.2006 — 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 ?

-Morten
×

Success!

Help @morten spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...