Cross browser image display and font embedding issues [Archive]

Subyne Simean

11-09-2011, 07:48 PM

Hi all,

I'm using the latest version of these browsers. I've finished the layout/design of my site but the following issues occur:

Firefox = works

Chrome = works

Safari = works

Opera = embedded fonts don't work, browser uses the fall-back font (Verdana). Background image of header and footer isn't displayed.

Internet Explorer = embedded fonts don't work, browser uses the fall-back font (Verdana). Oddly, doesn't display .gif files that have transparency, but will display .gif's that don't. I also have a few .png files (all with transparency) which don't display either.

Please could you tell me if there's anything obviously wrong with my coding?

thank you

HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="styles\style.css" />
<title>adkm.co.uk | aspiring Front End Developer - Home</title>
</head>
<body>


<div id="background">
<img src="images/spiral.jpg" alt="Background Image" />
</div>

<div id="strip_top">
</div>

<div id="header_wrapper">
<div id="header">

<div id="title">
adKm.co.uk
</div>

<div id="subtitle">
aspiring Front End Developer
</div>

<div id="sitesearch">
<form>
<input type="text" value=" Search adkm.co.uk"
onFocus="
this.value=' ';
this.style.color='black';this.style.fontStyle='normal';
" />
<button>go</button>
</form>
</div>

</div>
</div>

content here... (removed due to character limit)

<div id="footer_wrapper">
<div id="footer">

<div id="connections">

<div id="connect1">
<a href="">
<img src="images\LinkedIn.png" alt="LinkedIn" title="LinkedIn" />
</a>
</div>

<div id="connect2">
<a href="http://validator.w3.org/check?uri=referer">
<img src="images\v15445.gif" alt="Valid HTML!" title="Valid HTML!" />
</a>
</div>

<div id="connect3">
<a href="http://tinyurl.com/3txzens">
<img src="images\vcss.gif" alt="Valid CSS!" title="Valid CSS!" />
</a>
</div>

</div>

<div id="tagline">
Hand coded, validated, cross-browser HTML4 - XHTML - HTML5
</div>

</div>
</div>

<div id="strip_bottom">
</div>

</body>
</html>

CSS:

/* Specify height: 100% in html/body to control the height of all child elements in percentages. */
html, body {
margin: 0%;
height: 100%;
background-color: #0A000A;
background-image: url('../images/spiral.jpg');
background-size: 100% 100%; /* CSS3 method. */
background-repeat: no-repeat;
font-family: Arial;
font-size: 0.95em;
color: #70848E;
overflow: hidden; /* Disable primary scrolling. */
}

@font-face{
font-family: 'advent_bold-webfont';
font-style: normal; /* makes Chrome & Safari produce italicized text when requested */
font-weight: normal; /* makes Chrome & Safari produce italicized text when requested */
src: url('../fonts/advent_bold-webfont.eot');
src: url('../fonts/advent_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/advent_bold-webfont.woff') format('woff'),
url('../fonts/advent_bold-webfont.ttf') format('truetype'),
url('../fonts/advent_bold-webfont.svg#webfont') format('svg');
}

@font-face{
font-family: 'planob1-webfont';
font-style: normal; /* makes Chrome & Safari produce italicized text when requested */
font-weight: normal; /* makes Chrome & Safari produce italicized text when requested */
src: url('../fonts/planob1-webfont.eot');
src: url('../fonts/planob1-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/planob1-webfont.woff') format('woff'),
url('../fonts/planob1-webfont.ttf') format('truetype'),
url('../fonts/planob1-webfont.svg#webfont') format('svg');
}

img {
border: 0px;
}

/********************* Main structure. */

/* Specifies background image for pre-CSS3 browsers. */
#background {
position: fixed;
z-index: 0;
width: 100%;
height: 100%;
}

#background img {
width: 100%;
height: 100%;
}

#strip_top, #strip_bottom {
position: fixed;
z-index: 1;
width: 99.97%; /* any higher and a white border will appear around the strips if browser is windowed */
height: 80px;
background-image: url('../images/stripes.jpg');
}

#strip_top {
top: 0%;
}

#strip_bottom {
bottom: 0%;
}

#header_wrapper {
position: fixed;
z-index: 2;
top: 0%;
width: 100%;
}

#header {
margin-left: auto;
margin-right: auto;
margin-top: 12px;
width: 72%;
}

#title {
float: left;
margin-top: 4px;
font-family: planob1-webfont, Verdana;
font-size: 4.2em;
color: white;
}

#subtitle {
float: left;
font-family: advent_bold-webfont, Verdana;
font-size: 2.8em;
color: #E6E6E6;
margin-top: 23px;
margin-left: 38px;
}

#sitesearch {
float: right;
margin-top: 8px;
}

#sitesearch input {
width: 250px;
height: 25px;
font-family: Verdana;
font-style: italic;
color: gray;
}

#sitesearch button {
font-family: advent_bold-webfont, Verdana;
font-size: 20px;
font-weight: bold;
}

#footer_wrapper {
position: fixed;
z-index: 2;
bottom: 0%;
width: 100%;
color: black;
}

#footer {
margin-left: auto;
margin-right: auto;
width: 72%;
}

#connections {
float: left;
padding-top: 30px;
}

#connect1, #connect2, #connect3 {
float: left;
}

#connect1 {
margin-top: 2px;
}

#connect2 {
margin-left: 45px;
}

#connect3 {
margin-top: 3px;
margin-left: 15px;
}

/* Use pixels, as percentage value is ignored by some browsers. */
#connect2 img, #connect3 img {
width: 74px;
}

#tagline {
float: right;
padding-bottom: 47px;
font-family: advent_bold-webfont, Verdana;
font-size: 2.8em;
font-style: italic;
color: white;
}