Jump to content

Safari and Chrome not displaying images/background images, firefox/IE does

shortysbest

By shortysbest
in CSS Help

 Share

Recommended Posts

shortysbest Advanced Member

shortysbest

Posted
Posted

I attached a photo of what's going on. on the left is Safari, and the right is Firefox.

 

Even just images aren't loading. such as:  <img src="assets/logo.png" />

If i set the size on it however it shows a big white box for the size that it is defined.

The same problem with background images, and I'm using this css for background images: 

background-image: url(../assets/buttons.png);

(the ../ does have to be there, it's not that).

 

background images do show for like :hover and :active and such, just not when you load the page. (images are on in safari preferences).

this same problem is safari and chrome.

 

 

[attachment deleted by admin]

cssfreakie Regular Member

cssfreakie

Posted
Posted

- since your using an image as a background. we might want to know the css properties of the element to which the background is applied. (maybe also add if it should be repeated (and don't forget the space)

- concernin g the in-line image:you ommited the alt=" " tag inside the image element.

shortysbest Advanced Member

shortysbest

Posted
  • Author
Posted

concerning the alt="" tag for the image element, I have that in my code for my site, and even that doesn't show up in safari.

 

In response to the css code, this would be the css I am using for the two black buttons (black in firefox, white in safari), along with the active image for the buttons (which show and everything when you click on the buttons)

 

.button {
background-image: url(../assets/buttons.png);
background-repeat: repeat-x;
color: #FFF;
border: 1px solid #000;
padding-top: 5px;
padding-right: 12px;
padding-bottom: 5px;
padding-left: 12px;
cursor: pointer;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
text-decoration: none;
background-position: top;
text-align: center;
display: block;
background-color: #333;
}
.button:active , .share:active{
background-image: url(../assets/navigationback-active.png);
background-repeat: repeat-x;
}

cssfreakie Regular Member

cssfreakie

Posted
Posted

here you are, some things i changed but the effect and idea are the same:

 

<style type="text/css">
input.coolbutton {
    background:transparent url(assets/yourimage.png) repeat-x top; /* don't give a background color since it will screw up your image */
    color: #FFF;
    border: 1px solid #000;
    padding: 5px 12px; /* made this shorter */
    cursor: pointer;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    text-decoration: none;
    text-align: center;
    /* removed display block */
}

input.coolbutton:active {/* i don't know what that share class was for */
    background-image: transparent url(assets/navigationback-active.png) repeat-x;
}

        </style>
        <title></title>
    </head>
    <body>
        
        <input class="coolbutton" type="button" value="my-button" name="my-button" />
    </body>

 

I made the code a little shorter, but the above wrked for me. ( i recommend an external style sheet though

cssfreakie Regular Member

cssfreakie

Posted
Posted

well i bet that is because I didn't see the html, that's also why i removed the display block but it seems you use an anchor element for this so it's needed than. and that's why i used input.class.

 

maybe adjust it a bit to your needs? btw this works in chrome!

 

a.button {
background: transparent url(../assets/buttons.png) repeat-x;
border: 1px solid black;
color: white;
cursor: pointer;
display: block;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
padding: 5px 12px;
text-align: center;
text-decoration: none;
}

 

-edit if this doesn't work, in safari, maybe add a width or something not sure if that works, but you never know :)

cssfreakie Regular Member

cssfreakie

Posted
Posted

I hope the above helps the error is in your background-xxx stuff, try the short hand i showed.

or:

background: transparent url("../assets/buttons.png") repeat-x ;

and don't give a color to the background.

haku Regular Member

haku

Posted
Posted

The first step to fixing cross-browser issues is to clean up the errors in your HTML. You have 16: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fkithell.com%2Findex.php%23%2Fhome

 

I have a feeling that cleaning these up will solve your problem, particularly as one of the major issues is that your link tag is all in caps (invalid in an XHTML doctype) and isn't self closed (also invalid in an XHTML doctype). Since the link tag is the one linking your CSS sheet, it's probably causing you troubles. Fix these issues and if the problem doesn't go away, let us know.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.