Grow your CSS skills. Land your dream job.

media query issue

  • # November 3, 2011 at 6:46 pm

    http://people.ysu.edu/~jtpenezich/tfts/#content_home

    When you re size it to 520px I have the style sheet change. However the nav bar doesn’t switch to be in a straight line unless you refresh the page. Any ideas?

    # November 3, 2011 at 9:41 pm

    The issue: you have wrapped your LI elements inside your anchor elements which is an inline element while the LI element is a block level element, simply switch them around and the problem should fix itself given your CSS is correct and semantic.

    # November 3, 2011 at 9:48 pm

    anchors are allowed to wrap block level elements in html5 – however, I don’t understand why you would want to in this situation

    # November 3, 2011 at 10:16 pm

    @wolfcry911 Correct, however they shouldn’t wrap list items. The immediate children of lists should be list items.

    The li element represents a list item. If its parent element is an ol, ul, or menu element, then the element is an item of the parent element’s list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.

    Source: http://www.w3.org/TR/html5/grouping-content.html#the-li-element

    # November 3, 2011 at 10:23 pm

    of course – I feel foolish now…
    I’ve given the same advice here a number of times, but completely overlooked it X(

    # November 3, 2011 at 11:42 pm

    @wolfcry911 You don’t ever need to feel foolish mate, it would be impossible to remember every little detail of the HTML5 specification. Besides, you are one of the top contributors to the CSS-Tricks forums and I respect all the advice that you give.

    # November 4, 2011 at 1:18 am

    Awesome, I never knew that. The more you know!

    After changing it the text indent has to be applied to nav and not nav a. After that happens though they stop acting like links and break… Should I move the images from background to the markup?

    # November 4, 2011 at 4:04 am

    Thank you

    Good post

    I like your post.

    Thats good….

    # November 4, 2011 at 1:34 pm

    So just to follow up.. Putting the image inside the markup didnt work because it was a sprite, and would re size when adjusting the width. So I had to change the css to be #whatever a { display:block } so I could still have the background image and the text indent.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".