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:

Code:
<!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>

<!-- Specifies background image for pre-CSS3 browsers. -->
<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>

<!-- close header --></div>
<!-- close header_wrapper --></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>

<!-- close connections --></div>

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

<!-- close footer --></div>
<!-- close footer_wrapper --></div>

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

</body>
</html>
CSS:

Code:
/* 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; 
}