With the help of a friend, I'm working on a small mail-order website, but we're having some problems, in particular with getting the image thumbnail gallery we've set up working on IE and some versions of Firefox...
It also seems that the header banner isn't working in IE.
There is some php at work, but I wasn't thinking that had anything to do with the issues.
If anyone feels like taking a look & making any suggestions then I'd greatly appreciate it, thank you.
The link to the testing version that I'm working on is: http://www.nwofhm.com/atest/
which uses the following HTML & CSS code...
It also seems that the header banner isn't working in IE.
There is some php at work, but I wasn't thinking that had anything to do with the issues.
If anyone feels like taking a look & making any suggestions then I'd greatly appreciate it, thank you.
The link to the testing version that I'm working on is: http://www.nwofhm.com/atest/
which uses the following HTML & CSS code...
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" type="image/png" href="http://www.nwofhm.com/atest/images/favicon.png">
<link rel="stylesheet" href="http://www.nwofhm.com/atest/style.css">
<script src="http://code.jquery.com/jquery.js"></script>
<title>NWOFHM!</title>
</head>
<body>
<header>
<hgroup>
<h1><a href="http://www.nwofhm.com/atest">NWOFHM!</a></h1>
<h2>A UK-based mail-order for all things Circle, Pharaoh Overlord, Ektro, NWOFHM! and more…</h2>
</hgroup>
<nav>
<ul>
<li><a href="newreleases">New Releases</a></li>
<li><a href="artists">Artists</a>
<ul>
<li><a href="circle">Circle</a></li>
<li><a href="pharaohoverlord">Pharaoh Overlord</a></li>
<li><a href="splitcranium">Split Cranium</a></li>
<li><a href="jussilehtisalo">Jussi Lehtisalo</a></li>
</ul>
</li>
<li><a href="labels">Labels</a>
<ul>
<li><a href="">Ektro</a></li>
<li><a href="">SIGE</a></li>
<li><a href="">Hydra Head</a></li>
<li><a href="">Essence Music</a></li>
<li><a href="">No Quarter</a></li>
<li><a href="">Last Visible Dog</a></li>
</ul>
</li>
<li><a href="formats">Formats</a>
<ul>
<li><a href="">CD</a></li>
<li><a href="">LP</a></li>
<li><a href="">7"</a></li>
<li><a href="">Cassette</a></li>
</ul>
</li>
<li><a href="rarities">Secondhand & Rarities</a></li>
<li><a href="ordering">Ordering & Shipping</a></li>
</ul>
</nav>
</header>
<section id="main">
<p>Please email <a href="mailto:[email protected]">[email protected]</a> before making any payments as most stock is currently still in transit - the full mail-order launch is coming soon…</p>
<p>Kiitos!</p>
<article id="featured_records">
<a href="">
<section class="thumbnail">
<img src="images/records/circle_zopalki_cd_cover.jpg" width="200" height="200" alt="Circle 'Zopalki'">
<p class="summary">Circle 'Zopalki' CD on Ektro.</p>
<p class="price">£12</p>
</section>
</a>
<a href="">
<section class="thumbnail">
<img src="images/records/rattojalehtisalo_matematiikka_cd_cover.jpg" width="200" height="200" alt="Ratto Ja Lehtisalo 'Matematiikka'">
<p class="summary">Ratto Ja Lehtisalo 'Matematiikka' CD on Ektro.</p>
<p class="price">£12</p>
</section>
</a>
<a href="">
<section class="thumbnail">
<img src="images/records/pharaohoverlord_lunarjetman_lp_cover.jpg" width="200" height="200" alt="Pharaoh Overlord 'Lunar Jetman'">
<p class="summary">Pharaoh Overlord 'Lunar Jetman' 2xLP on SIGE.</p>
<p class="price">£25</p>
</section>
</a>
<a href="">
<section class="thumbnail">
<img src="images/records/jussilehtisalo_interludesforpreparedbeast_cassette_cover.jpg" width="200" height="200" alt="Jussi Lehtisalo 'Interludes For Prepared Beast'">
<p class="summary">Jussi Lehtisalo 'Interludes For Prepared Beast' Cassette on SIGE.</p>
<p class="price">£10</p>
</section>
</a>
<a href="">
<section class="thumbnail">
<img src="images/records/jussilehtisalo_interludesforpreparedbeast_lp_cover.jpg" width="200" height="200" alt="Jussi Lehtisalo 'Interludes For Prepared Beast'">
<p class="summary">Jussi Lehtisalo 'Interludes For Prepared Beast' LP on Full Contact.</p>
<p class="price">£14</p>
</section>
</a>
<a href="">
<section class="thumbnail">
<img src="images/records/circle_serpent_cd_cover.jpg" width="200" height="200" alt="Circle 'Serpent'">
<p class="summary">Circle 'Serpent' CD on Ektro.</p>
<p class="price">£12</p>
</section>
</a>
<a href="">
<section class="thumbnail">
<img src="images/records/splitcranium_sceptrestorust_7_cover.jpg" width="200" height="200" alt="Split Cranium 'Sceptres To Rust'">
<p class="summary">Split Cranium 'Sceptres To Rust' 7" on Hydra Head.</p>
<p class="price">£8</p>
</section>
</a>
<a href="">
<section class="thumbnail">
<img src="images/records/splitcranium_splitcranium_lp_cover.jpg" width="200" height="200" alt="Split Cranium 'Split Cranium'">
<p class="summary">Split Cranium 'Split Cranium' LP on Hydra Head.</p>
<p class="price">£17</p>
</section>
</a>
<a href="">
<section class="thumbnail">
<img src="images/records/circle_prospekt_cd_cover.jpg" width="200" height="200" alt="Circle 'Prospekt'">
<p class="summary">Circle 'Prospekt' CD on Essence Music.</p>
<p class="price">£12</p>
</section>
</a>
<a href="">
<section class="thumbnail">
<img src="images/records/circle_soundcheck_cd_cover.jpg" width="200" height="200" alt="Circle 'Soundcheck'">
<p class="summary">Circle 'Soundcheck' CD on Essence Music.</p>
<p class="price">£12</p>
</section>
</a>
<a href="">
<section class="thumbnail">
<img src="images/records/circle_tyrant_lp_cover.jpg" width="200" height="200" alt="Circle 'Tyrant'">
<p class="summary">Circle 'Tyrant' 2xLP on Latitudes.</p>
<p class="price">£16</p>
</section>
</a>
<a href="">
<section class="thumbnail">
<img src="images/records/circle_arkades_lp_cover.jpg" width="200" height="200" alt="Circle 'Arkades'">
<p class="summary">Circle 'Arkades' LP on Fourth Dimension.</p>
<p class="price">£12</p>
</section>
</a>
<a href="">
<section class="thumbnail">
<img src="images/records/pharaohoverlord_thebattleoftheaxehammerlive_cd_cover.jpg" width="200" height="200" alt="Pharaoh Overlord 'The Battle Of The Axehammer (Live)'">
<p class="summary">Pharaoh Overlord 'The Battle Of The Axehammer (Live)' CD on Last Visible Dog.</p>
<p class="price">£10</p>
</section>
</a>
<a href="">
<section class="thumbnail">
<img src="images/records/kryptaxeripper_mechanicalwitch_cd_cover.jpg" width="200" height="200" alt="Krypt Axeripper 'Mechanical Witch'">
<p class="summary">Krypt Axeripper 'Mechanical Witch' CD on Ektro.</p>
<p class="price">£5</p>
</section>
</a>
<a href="">
<section class="thumbnail">
<img src="images/records/steelmammoth_nuclearbarbarians_cd_cover.jpg" width="200" height="200" alt="Steel Mammoth 'Nuclear Barbarians'">
<p class="summary">Steel Mammoth 'Nuclear Barbarians' CD on Ektro.</p>
<p class="price">£5</p>
</section>
</a>
</article>
</section>
<footer>
<nav>
<ul>
<li><a href="mailto:[email protected]">[email protected]</a></li>
<li><a href="https://twitter.com/#!/NWOFHM">NWOFHM! on Twitter</a></li>
<li><a href="https://www.facebook.com/nwofhm">NWOFHM! on Facebook</a></li>
<li><a href="http://eepurl.com/kbH5f">NWOFHM! Newsletter Sign-Up</a></li>
</ul>
</nav>
</footer>
</body>
<script src="sweet-justice.js" type="text/javascript"></script>
</html>
Code:
/*
// style.css by Alex Woodward & Chris Norton
// Main display styles for nwofhm.com
*/
/* Browser reset rules by Eric Meyer http: //meyerweb.com/eric/tools/css/reset/ */
/* http: //meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section
{
display: block;
}
body
{
line-height:1.5em;
}
ol, ul
{
list-style: none;
}
blockquote, q
{
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after
{
content: '';
content: none;
}
table
{
border-collapse: collapse;
border-spacing: 0;
}
/* Site styles */
body
{
background-color: #404040;
color: #b0b0b0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 20px auto;
width: 940px;
}
h1,h2,h3,h4, p, ul, ol
{
margin-bottom: 1em;
}
h1,h2,h3,h4,h5,h6
{
font-weight: bold;
}
a
{
color: #a0a0a0;
text-decoration: none;
}
a:hover
{
color: #ffffff;
}
ul
{
list-style-type: disc;
padding-left: 1em;
list-style-position: inside;
}
ul li
{
margin-bottom: 0.5em;
}
hgroup
{
background: #000 top right no-repeat url('images/header_background.jpg');
background-position: 100% 30%;
margin: 0 0 0.5em 0;
padding: 0.5em 1em 0.05em 1em;
}
div h1
{
font-size:4em;
line-height:1em;
margin: 0 .5em 0em 0;
text-align:center;
float:left;
}
header h1 a
{
background: #000 top left no-repeat url('images/header_title.png');
display: block;
height: 92px;
margin: 0;
padding: 0;
text-indent: -9999px;
width: 332px;
}
header h2
{
color: #b0b0b0;
font-size: 1em;
font-weight: normal;
margin: 0;
padding: 0.5em 0 ;
text-align: justify;
width: 332px;
}
section#main
{
float: left;
margin: 0;
padding: 1em 1% 0 1%;
width: 98%;
}
section#main.narrow
{
width: 78%;
}
article.medium
{
margin: 0 auto;
width: 400px;
float: none;
}
.thumbnail
{
float: left;
margin: 0px 15px 30px 15px;
position: relative;
width: 200px;
}
.thumbnail p.price
{
background: #000;
color: #FFF;
opacity:0.7;
font-size: 1em;
font-weight: bold;
height: 18px;
margin: 0;
padding: 5px;
position: absolute;
right: 0;
top: 172px;
}
.thumbnail p.summary
{
color: #FFF;
font-size: 0.7em;
font-weight: bold;
margin: 0;
padding: 5px;
position: absolute;
right: 0;
top: 0;
background:#000;
opacity:0.7;
text-align:center;
width:190px;
}
a:hover .thumbnail .summary, a:hover .thumbnail .price
{
opacity:1}
div.band_sidebar
{
float:right;
margin-left:2em;
width:300px;
}
h2
{
color: #FFF;
font-size: 1.5em;
font-weight: bold;
margin-top: .5em;
}
h3
{
font-size: 1.25em
}
nav ul
{
background-color: #000;
clear: both;
list-style-type: none;
margin: 0;
padding: 0.5em;
text-align: center;
}
nav ul li
{
display: inline;
padding: 2%;
position: relative;
}
nav ul a
{
text-decoration: none;
}
nav ul ul
{
display: none;
}
nav ul li:hover ul
{
display: block;
position: absolute;
z-index: 1;
text-align: left;
left: 0px;
top: 40px;
}
nav ul li li
{
padding: 0;
margin: 0;
border: 0;
}
nav ul li li a
{
display: block;
width: 10em;
padding: 0.4em;
}
/* CP styles */
div.error
{
background: red;
color: white;
}
div.confirmation
{
background: green;
}
table
{
width: 100%;
border-collapse:separate;
border-spacing:4px;
}
table *
{
color: #000;
}
table a
{
color: #000;
display:block;
width:100%;
}
tr:hover td
{background:#FF8;}
td
{
background: white;
padding:1px;
}
thead
{
background: pink;
color: #000;
}
label{
display:block;
float:left;
width:100px;
vertical-align:text-top;
}
@media screen and (min-width: 730px) and (max-width: 960px)
{
body
{
width: 710px;
}
}
@media screen and (min-width: 350px) and (max-width: 730px)
{
body
{
width: 470px;
}
hgroup
{
background: black;
}
header h1 a, header h2
{
margin: auto;
}
div.band_sidebar
{float:none;margin:auto;width:470px;}
h1 {clear:left;}
}
