<link rel> Media queries problem

HTML & CSS
1

Hi there,
I’m preparing this site and it’s for tabletop, ipad and iphone among others, but they are the most important.

I’ve been using <link rel> for the 720px and 480px stylesheets, but for some reason I can’t figure out they just don’t seem to load. I’ve consulted various sites to make sure that I am doing it OK and it seems I am. So I’m appealing to other wiser more experienced shoulders to tell me why it’s not working.

The site is at:Professional Video Production and Photography

It’s getting to the point now that I am making changes that don’t register and the whole scheme is starting to get away from me.

Extremely grateful for any help that stops me tearing my hair out.

Thanks in advance

2

Those style sheets seem to be working to me, although there are a few bugs there. It looks a bit broken up on the iPhone. The first two video boxes are out of place.

3

There is a lot to be cleaned up because I have been changing things all morning and not been able to see how it turned out.

It’s good news that they are working for you. So why not for me? A server thing? I’m baffled.

Thanks for your helpful answer anyway.

4

That code is pretty weird - I can’t make head nor tail of it.

Why is the header a fixed height?

Why are all the showreel_elements all pulled upwards with relative positioning?


#showreel_06 {
    position: relative;
    float: left;
    top: -55em;
    left: 4em;
    background-color: #000;
    border: solid 2px #fff;
}

Why isn’t the border and background on the container and not the header anyway?

It doesn’t look like to me that you would really need media queries to make that fit on a smaller screen anyway.

I’d probably do something like this that doesn’t need a media query at all.


<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width">
<style type="text/css">
html,body {
    margin:0;
    padding:0
}
body {
    height: 100%;
    background: #20203c;
}
/*Displays new HTML tags as block not inline*/
header, footer, nav, section, article, aside {
    display:block;
}
/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 {
    font-size : 1em;
    -webkit-text-size-adjust: none;
}
#container {
    max-width: 1000px;
    min-width:460px;
    margin: 0 auto;
    border: solid 2px #fff;
    background: #20203c; /* for browsers that don't take a gradient background*/
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0b0b0d), to(#20203c));  /* safari-chrome */
    background: -moz-linear-gradient(top, #0b0b0d, #20203c);  /* firefox */
}
#showreel_holder{
    text-align:center;
    clear:both;
    width:100%;
}
#showreel_holder section{
    display:inline-block;
    margin:20px;
    background-color: #000;
    border: solid 2px #fff;
    text-align:center;
    vertical-align:top;
}
* html #showreel_holder section{display:inline}
*+html #showreel_holder section{display:inline}

.rounded {
    -webkit-border-radius: 9px;  /* safari-chrome */
    -moz-border-radius: 9px;   /* firefox */
    border-radius: 9px;  /* opera */
}
</style>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>
<div id="container" class="rounded">
    <div id="showreel_holder">
        <section id="showreel_06" class="rounded">
            <iframe src="http://www.youtube.com/watch?v=1GHtrPWN41w&feature=feedf"     width="400" height="225" frameborder="0"></iframe>
            <p><a href="http://www.youtube.com/watch?v=1GHtrPWN41w&feature=feedf">Rolling Vision Showreel</a> from <a href="http://vimeo.com/user4692752">Rolling Vision</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
        </section>
        <section id="showreel_05" class="rounded">
            <iframe src="http://www.youtube.com/watch?v=rX1dOX_THc0&feature=feedf"     width="400" height="225" frameborder="0"></iframe>
            <p><a href="http://www.youtube.com/watch?v=rX1dOX_THc0&feature=feedf">Rolling Vision Showreel</a> from <a href="http://vimeo.com/user4692752">Rolling Vision</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
        </section>
        <section id="showreel_01" class="rounded">
            <iframe src="http://player.vimeo.com/video/22516434?color=cccccc" width="400" height="225" frameborder="0"></iframe>
            <p><a href="http://vimeo.com/22516434">Rolling Vision Showreel</a> from <a href="http://vimeo.com/user4692752">Rolling Vision</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
        </section>
        <section id="showreel_02" class="rounded">
            <iframe src="http://player.vimeo.com/video/22571451?color=cccccc" width="400" height="225" frameborder="0"></iframe>
            <p><a href="http://vimeo.com/22571451">Rolling Vision Showreel</a> from <a href="http://vimeo.com/user4692752">Rolling Vision</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
        </section>
        <section id="showreel_03" class="rounded">
            <iframe src="http://player.vimeo.com/video/22520715?color=cccccc" width="400" height="225" frameborder="0"></iframe>
            <p><a href="http://vimeo.com/22520715">Rolling Vision Showreel</a> from <a href="http://vimeo.com/user4692752">Rolling Vision</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
        </section>
        <section id="showreel_04" class="rounded">
            <iframe src="http://player.vimeo.com/video/16314185?color=cccccc" width="400" height="225" frameborder="0"></iframe>
            <p><a href="http://vimeo.com/16314185">Rolling Vision Showreel</a> from <a href="http://vimeo.com/user4692752">Rolling Vision</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
        </section>
    </div>
</div>
</body>
</html>

Of course you can fine tune it with media queries but the basic structure is sound as it is.

5

Thanks Paul. I’ve had a few problems as you can see and I thought it would be very simple.
Of course, border and background on the container, it’s obvious isn’t it. Maybe I need to step back and examine these things with a bit more nous.
The showreels were always disappearing off the bottom until I gave them negative margins, which worked on fullscreen, but seems to have messed up badly on 720 and 480 widths.
I’ll redo it all tomorrow which will bring me some peace of mind, I hate having work screw up.
Indebted to you again, Paul. Thankyou.

6
  • html #showreel_holder section{display:inline}
    *+html #showreel_holder section{display:inline}

Paul, could you explain these, please.

7

Those are hacks that target IE6 (first line) and IE7 (second line) only. Those browsers don’t support display:inline-block properly, so we have to use display:inline. All other browsers are smart enough to know that the <html> element can neither be inside nor alongside anything, so they ignore those lines. IE6/7 isn’t that smart and so it uses them.

8
Edit:

Stevie explains the hack mechanism and I discuss the inline-block behaviour below :slight_smile:

It’s hack for ie6 and 7 so that they behave like inline block. IE7 and under don’t have native support for inline block on block elements but they do have support for inline-block on inline elements.

It’s more complicated than that as the inline-block behaviour is really achieved by giving an inline element haslayout. For a block level element you make it inline and then ensure it has haslayout.

Read more here and in the comments in the [URL=“http://reference.sitepoint.com/css/display”]reference here.

9

Thanks. That seems pretty clear now about inline block.
Re. the hack: Why have you preferred to use a hack instead of a conditional comment?

10

Ha ha, I consider CCs a hack too. One downside of CCs is that they slow IE down, as all downloading halts while the CC is being downloaded.

11

Thanks Ralph.

  • html #showreel_holder section{display:inline}
    *+html #showreel_holder section{display:inline}

*html for IE6 and *+html for IE7 Is that the way into each for any hack? And IE8?

12

For IE6, leave a space between * and html. I haven’t seen such a hack for IE8, but IE8 has good CSS support, so you most likely won’t need such an artifice. (And if you do, I guess just use a conditional comment.)

13

I think its all explained clearly now but one point to remember is that you can’t mix the hacks or any other normal rules.

e.g.
You can’t do this:


* html #showreel_holder section,
*+html #showreel_holder section {display:inline}

or even this:


.test,
*+html #showreel_holder section{display:inline}

but you could do this:


*+html #showreel_holder section,
*+html #showreel_holder section_ 2 {display:inline}

You just can’t mix them.

As soon as a browsers meets a rule it doesn’t understand it should drop out of the whole list comma separated list completely.

14

Thankyou both. You’ve helped a lot.

15