CODEWITHSUNDEEP
cssfirefoxhtml
creatando
creatando

Reputation: 25

Image div showing in Safari, Chrome and IE but not in Firefox

So I've recently developed a website here and I was wondering why my image div (the logo) shows up in Safari, IE and Chrome but not in Firefox? I've tried to looking for an answer but nothing has worked. Appreciate the help.

Here's my CSS code:

 #logo-header {
padding-top: 70px;
content:url(../img/logo.png);
margin: 0 auto;
outline: 0; max-width: 100%; height: auto;
margin-bottom: -50px;
}

and here's how I initialise it in HTML:

<div id="logo-header"> </div>

Again, thanks for the help.

Upvotes: 1

Views: 900

Answers (4)

Hossein
Hossein

Reputation: 4549

Instead of content use background:

#logo-header {
background: url(../img/logo.png) no-repeat center;
}

Upvotes: 0

Pavlo
Pavlo

Reputation: 44889

content property is not supported on regular elements (I'm surprised that it works in other browsers). If the image is the part of your content, put it in the markup:

<div id="logo-header">
  <img src="img/logo.png" alt="Logo">
</div>

Upvotes: 1

Steven
Steven

Reputation: 6148

Firefox only accepts content in pseudo elements lie before and after.

You can change your css to something like:

background: transparent url(../img/logo.png) no-repeat center center;

and set an appropriate height (something like 300px).

Upvotes: 1

Angelo Giuffredi
Angelo Giuffredi

Reputation: 943

In place of the attribute 'content' tries to use 'background-image', firefox reads it.

Upvotes: 1

Related Questions