HTML5/CSS help - Thumbnail gallery & other cross-browser issues

alexw

alexw

alexw

Associate
Joined
18 May 2004
Posts
121
Location
Glasgow
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...

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 &amp; Rarities</a></li>
          <li><a href="ordering">Ordering &amp; 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;}
}
 
Here is how it looks in Safari on Mac:

Screenshot2012-04-08at141759.png


In Firefox 3.6.12 on Mac however, for example, the gallery falls apart and everything cascades across/down the page, rather than having the image captions and prices overlay the images...

Screenshot2012-04-08at141730.png


In IE on Windows it does the same kind of thing, but in addition the header banner only displays bare text.

Hope that helps.
 
Thank you.

I only installed Firefox last week myself, in order to test the design, so I assumed that I had the most up-to-date version, but something must have gone awry - I'll check that at least...

It would be nice to figure out what is throwing it off regardless, and we definitely need to sort the IE issue.
 
Thanks Tripnologist, it is definitely helpful & I'm happy to learn, so don't worry - constructive criticism like that is precisely what I'm after.

I've suspected that some kind of block vs. inline issue was at fault myself, but can't quite get to grips with it.

I certainly want the whole of each thumbnail image and its overlaid caption & price to be a link (going to that particular release page).

I thought that <section> could be used as a general container for a section of content, but I'll need to re-read.

Would the following be a better suggestion (written in structural shorthand)?

<div class="thumbnail">
<a>
<img>
<span class="summary">Caption</span>
<span class="price">Price</span>
</a>
 
Thanks.

Does turning the "summary" and "price" into spans give the problem that one can't apply a width to them? We give a width to the "summary" so that even long summaries fit within the image rather than overflowing...
 
I'm hopeful that I've solved the issues!

I'm appropriately tired now, but here's a rough idea of the issues & solutions as I understand them...

Because we have written the site in HTML5, nesting block-level elements inside an anchor is actually perfectly fine.

I think that part of the problem might have come from the nesting of the new HTML5 element 'section' inside the anchor, but I agree with Tripnologist that divs were more appropriate anyway, so I've changed that.

Currently using:

<div class="thumbnail">
<a href="">
<img>
<p class="summary"></p>
<p class="price"></p>
</a>
</div>

With IE, the problems comes from its poor handling of HTML5 and its new elements (e.g. header, hgroup, footer, section, article etc.), which, even if it recognises, it apparently defaults to treating as inline rather than block-level.
I've made use of http://code.google.com/p/html5shiv/ to make sure that IE<9 recognises HTML5 elements and treats them appropriately, and the website seems to be working much better!

I've only used browsershots.org to see how it looks on Windows so if anyone with IE (any version) especially could have a check of http://www.nwofhm.com/atest/ and let me know, then I'd greatly appreciate it.

Thank you.
 
rogan said:
generally though in terms of the nav bar, if you bring the page size in horizontally the nav bar goes onto new lines, as does the reocrds, i imagine this isn't something you'd really want...
Click to expand...

Having (apparently!) fixed the other issues, I'm just getting to thinking about this part...

You're right rogan, I certainly don't want the horizontal navbars becoming two lines when the window is resized, but would rather have them stay on a single line and for scroll bars to appear when one resized the window below whatever their overall minimum width is. Does anyone have tips on how to achieve this (across browsers)?

The current version of the website is now live at simply http://www.nwofhm.com/ rather than using the 'atest' version by the way, for the up-to-date code.

Thank you!
 
You must log in or register to reply here.
Back
Top Bottom