select JS menu behaves different in server than in my own desktop

0
votes

I published my web some weeks ago...But as I looked my web in my mobile phone (I made @mediaquerie for mobile) I could see that the JS select menu behaved really strange (it appears 4 times and different than in my desktop)...You can see here in these two images the difference...

Mobile version of my web in my desktop

Mobile version of my web in the server

And here is the web if you want to look into the code: www.elenacostasoprano.com/contact.html

(it happens in all the pages).

Does anyone know what could be the problem in the code?

2
javascriptmobileselect-menu
in your media queries there is a gap between the 600px and 768px mark. This is why the elements aren't being styled. - user2417483
Jeff, sorry, I can't see that ! But all the rest of the elements are styled except the select-menu, wich behaves strange in the server (but not in my computer) - Elena

2 Answers

0
votes

The problem is that you actually are including the select four times.

Infact, if you have a look into the navigation menu you'll see

<nav>
        <nav id="menu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Bio</a>
                    <ul>
                        <li><a href="biography.html">Biography</a></li>
                        <li><a href="repertoire.html">Repertoire</a></li>
                    </ul>
                </li>   
                <li><a href="#">Gallery</a>
                    <ul>
                        <li><a href="media.html">Media</a></li>
                        <li><a href="photos.html">Photos</a></li>
                    </ul>
                </li>    
                <li><a href="agenda.html">Agenda</a></li>
                <li><a href="contact.html">Contact</a></li>
        </ul>
    <select><option selected="selected" value="">Go to...</option><option value="index.html">Home</option><option value="#">Bio</option><option value="biography.html">Biography</option><option value="repertoire.html">Repertoire</option><option value="#">Gallery</option><option value="media.html">Media</option><option value="photos.html">Photos</option><option value="agenda.html">Agenda</option><option value="contact.html">Contact</option><option value="https://www.facebook.com/elenacostasoprano">
        </option><option value="https://twitter.com/elenacpsoprano">
        </option><option value="https://www.youtube.com/channel/UCoRkjY7OEQFSs7KwmruUVPw">
        </option><option value="https://plus.google.com/u/0/115736588985404106684/about/p/pub">
        </option><option value="https://www.instagram.com/elenacostasoprano/">
        </option><option value="contact.html">EN</option><option value="de/kontakt.html">DE</option><option value="es/contacto.html">ES</option></select></nav>
    <nav>
        <select onchange="window.location.href=this.value;"> 
            <option value="index.html">Home</option>
            <option value="biography.html">Biography</option> 
            <option value="repertoire.html">Repertoire</option>
            <option value="media.html">Media</option>
            <option value="photos.html">Photos</option>
            <option value="agenda.html">Agenda</option>
            <option selected="selected" value="contact.html">Contact</option>
        <option selected="selected" value="">Go to...</option><option value="index.html">Home</option><option value="#">Bio</option><option value="biography.html">Biography</option><option value="repertoire.html">Repertoire</option><option value="#">Gallery</option><option value="media.html">Media</option><option value="photos.html">Photos</option><option value="agenda.html">Agenda</option><option value="contact.html">Contact</option><option value="https://www.facebook.com/elenacostasoprano">
        </option><option value="https://twitter.com/elenacpsoprano">
        </option><option value="https://www.youtube.com/channel/UCoRkjY7OEQFSs7KwmruUVPw">
        </option><option value="https://plus.google.com/u/0/115736588985404106684/about/p/pub">
        </option><option value="https://www.instagram.com/elenacostasoprano/">
        </option><option value="contact.html">EN</option><option value="de/kontakt.html">DE</option><option value="es/contacto.html">ES</option></select> 

    <select><option selected="selected" value="">Go to...</option><option value="index.html">Home</option><option value="#">Bio</option><option value="biography.html">Biography</option><option value="repertoire.html">Repertoire</option><option value="#">Gallery</option><option value="media.html">Media</option><option value="photos.html">Photos</option><option value="agenda.html">Agenda</option><option value="contact.html">Contact</option><option value="https://www.facebook.com/elenacostasoprano">
        </option><option value="https://twitter.com/elenacpsoprano">
        </option><option value="https://www.youtube.com/channel/UCoRkjY7OEQFSs7KwmruUVPw">
        </option><option value="https://plus.google.com/u/0/115736588985404106684/about/p/pub">
        </option><option value="https://www.instagram.com/elenacostasoprano/">
        </option><option value="contact.html">EN</option><option value="de/kontakt.html">DE</option><option value="es/contacto.html">ES</option></select></nav>
    <div id="extras">
    <div id="socialcontainersup">
    <p>
    <a title="Follow me on Facebook!" href="https://www.facebook.com/elenacostasoprano" target="_blank">
        <img style="margin-right:0px; margin-left:0px;" src="images/facebookmovil.png" onmouseover="this.src='images/facebookmovilhover.png'" onmouseout="this.src='images/facebookmovil.png'" alt="Facebook" width="32" height="32"></a>
    <a title="Follow me on Twitter!" href="https://twitter.com/elenacpsoprano" target="_blank">
        <img style="margin-right:0px; margin-left:0px;" src="images/twittermovil.png" onmouseover="this.src='images/twittermovilhover.png'" onmouseout="this.src='images/twittermovil.png'" alt="Twitter" width="32" height="32"></a>

    <a title="Subscribe to my YouTube channel!" href="https://www.youtube.com/channel/UCoRkjY7OEQFSs7KwmruUVPw" target="_blank">
        <img style="margin-right:0px; margin-left:0px;" src="images/youtubemovil.png" onmouseover="this.src='images/youtubemovilhover.png'" onmouseout="this.src='images/youtubemovil.png'" alt="Youtube" width="32" height="32"></a>

    <a title="Follow me on GooglePlus!" href="https://plus.google.com/u/0/115736588985404106684/about/p/pub" target="_blank">
        <img style="margin-right:0px; margin-left:0px;" src="images/googleplusmovil.png" onmouseover="this.src='images/googleplusmovilhover.png'" onmouseout="this.src='images/googleplusmovil.png'" alt="GooglePlus" width="32" height="32"></a>
    <a title="Follow me on Instagram!" href="https://www.instagram.com/elenacostasoprano/" target="_blank">
        <img style="margin-right:0px; margin-left:0px;" src="images/instagrammovil.png" onmouseover="this.src='images/instagrammovilhover.png'" onmouseout="this.src='images/instagrammovil.png'" alt="Instagram" width="32" height="32"></a>
    </p>
    </div>
    <div id="language">

        <span class="langswitcher">
            <a class="active" href="contact.html">EN</a>
            |
            <a href="de/kontakt.html">DE</a>
            |
            <a href="es/contacto.html">ES</a>
        </span>
    </div>
    </div>
    <h3>Contact</h3>

<select><option selected="selected" value="">Go to...</option><option value="index.html">Home</option><option value="#">Bio</option><option value="biography.html">Biography</option><option value="repertoire.html">Repertoire</option><option value="#">Gallery</option><option value="media.html">Media</option><option value="photos.html">Photos</option><option value="agenda.html">Agenda</option><option value="contact.html">Contact</option><option value="https://www.facebook.com/elenacostasoprano">
        </option><option value="https://twitter.com/elenacpsoprano">
        </option><option value="https://www.youtube.com/channel/UCoRkjY7OEQFSs7KwmruUVPw">
        </option><option value="https://plus.google.com/u/0/115736588985404106684/about/p/pub">
        </option><option value="https://www.instagram.com/elenacostasoprano/">
        </option><option value="contact.html">EN</option><option value="de/kontakt.html">DE</option><option value="es/contacto.html">ES</option></select></nav>

where there are four select menu that are shown using this media query

@media only screen and (max-width: 600px){
  nav ul     { display: none; }
  nav select { display: inline-block; }
} /*Note: This last bracket miss in the original css*/

which basically means "Hide every ul and show every select element placed inside a nav element".

To resolve the issue, you can just get the rid off of every select but one.

Please also notice that there are several error both in the html and in the css. Use a validator to help you find those issues and correct them. There's plenty of them online, like this one (for CSS)

Best!

0
votes

Thanks, I already saw that code in my web, but the original code in my desktop isn't that, I didn't write the "select menu" four times! The code is as follows...Select menu and css

Here you can see the code in my desktop isn't like that and I alredy used that code also in the css...So in my desktop worked perfectly!