WibblyWobbly WibblyWobbly - 6 months ago 11
CSS Question

Can't see logo in Google Chrome but can in IE and Firefox

Title explains all, I can't see what the issue is personally, I suspected may an issue with the CSS but it looks just fine in IE and Firefox, I don't see why chrome is struggling?

I have tried adding

#logo img
{
width: 50%;
float:left;
}


To try to directly style the image, still no luck

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css.css"/>
<title>Welcome!</title>
</head>

<body>
<div id="header">
<div id ="logo">
<img src="Media/Images/logo.svg" type="image/svg+xml" width="75%" height="142px;" />
</div>

<div id="icons">
<img src="Media/Images/EnvelopeIcon.png" alt="Envelope Icon" height="25" width="30">
<p>M015734a@student.staffs.ac.uk</p>
<div class="clear">
</div>
<img src="Media/Images/PhoneIcon.png" alt="Envelope Icon" height="25" width="30" />
<p> 07904921417</p>
<div class="clear">
</div>
<img src="Media/Images/HouseIcon.png" alt="Envelope Icon" height="25" width="30">
<p>Stafford, UK</p>
<div class="clear">
</div>
<div class="clear">
</div>
</div>
</div>

<nav>
<div id ="NavBG">
safsafnsakn
</div>
</nav>
</body>
</html>

#logo
{
width: 50%;
float:left;

}

#logo img
{
width: 50%;
float:left;
}

Answer

There seems to be a workaround to this issue. You can try to use <object> instead of <img>

<object height="100%" width="100%" data="Media/Images/logo.svg" type="image/svg+xml">
</object>

Please also refer to the following links for more details.

http://e.metaclarity.org/52/cross-browser-svg-issues/
http://henkelmann.eu/2010/12/16/display_svg_image_same_size_in_decent_browsers

Comments