The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> <nav> tag
Xylina
post Aug 7 2012, 07:58 PM
Post #1





Group: Members
Posts: 3
Joined: 7-August 12
Member No.: 17,578



I searched and searched for a Photo Gallery that was easy to set-up and finally found one that I was actually able to get set-up in my site and fit into the theme of my website. After getting everything working right I checked it live in several browsers, including Google Chrome 21.0.1180.60, IE 8 and Firefox 14.0.1. In both Chrome and Firefox the gallery appears correctly and functions properly. However in IE 8 it does not. After some research I discovered that the problem is the <nav> tag...it is not supported in IE 8.

This is the page in question

CODE

<form>
    <div id="content1">
        <input id="slide-01" type="radio" name="nav" />
        <fieldset id="slide-content-01">
        <input id="legend-01" type="checkbox" />
        <label for="legend-01"><em>Jacqui - Council Member</em>
        Biography of Member
        </label> </fieldset>

        <input id="slide-02" type="radio" name="nav" />
        <fieldset id="slide-content-02">
        <input id="legend-02" type="checkbox" />
        <label for="legend-03"><em>Jacqui - Council Member</em>
        Biography of Member
        </label> </fieldset>

        <input id="slide-03" type="radio" name="nav" />
        <fieldset id="slide-content-03">
        <input id="legend-03" type="checkbox" />
        <label for="legend-03"><em>Jacqui - Council Member</em>
        Biography of Member
        </label> </fieldset>

        <input id="slide-04" type="radio" name="nav" />
        <fieldset id="slide-content-04">
        <input id="legend-04" type="checkbox" />
        <label for="legend-04"><em>Jacqui - Council Member</em>
        Biography of Member
        </label> </fieldset>

        <input id="slide-05" type="radio" name="nav" />
        <fieldset id="slide-content-05">
        <input id="legend-05" type="checkbox" />
        <label for="legend-05"><em>Jacqui - Council Member</em>
        Biography of Member
        </label> </fieldset>
    </div>
    <nav>
        <label id="label-01" for="slide-01"></label>
        <label id="label-02" for="slide-02"></label>
        <label id="label-03" for="slide-03"></label>
        <label id="label-04" for="slide-04"></label>
        <label id="label-05" for="slide-05"></label>
    </nav>
</form>


Any help with this would be greatly appreciated.

This post has been edited by Xylina: Aug 7 2012, 07:58 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 8 2012, 02:29 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 4,331
Joined: 23-August 06
From: Europe
Member No.: 9



I don't see any <nav> element in your page. It's an HTML5 element, but your page is XHTML 1.0 Transitional. I do see a DIV with an id="nav" that any browser will understand.

In fact, I don't understand why there are so many form elements. Seems a weird way to code a photo gallery.

http://www.cssplay.co.uk/menu/ (CSS based)
http://www.stunicholls.com/gallery/index.html (using javascript/jQuery).


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Xylina
post Aug 8 2012, 06:47 PM
Post #3





Group: Members
Posts: 3
Joined: 7-August 12
Member No.: 17,578



You must have looked at it after I changed it. Where there is <div id="nav"> it used to be <nav>. The only way I could then get it to work correctly after that was to wrap both sections of the photo gallery with <form></form>.

If you could point me to a better coded photo gallery that is easy to integrate, I would be happy to change it but this was the only one I could find that I could work with.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 9 2012, 02:58 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 4,331
Joined: 23-August 06
From: Europe
Member No.: 9



That's why I posted the two links to relevant sites by Stu Nicholls.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Xylina
post Aug 9 2012, 07:43 AM
Post #5





Group: Members
Posts: 3
Joined: 7-August 12
Member No.: 17,578



*facepalms* That will teach me to read something like this when I am tired. lol

*walks away blushing and checks out the sites*
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 1st September 2014 - 08:51 PM