1

opera mini / mobile behaves strange on menu links links, they are not visible (actually, as the site renders they become visible for a second, and then they are not visible anymore, but the text is selectable.). On other browsers, everything is fine. Anyone knows the reason for that?

(i tried with media queries disabled, same thing)

html code

        <div id="navbox"> 
            <nav> 
                <ul> 
                    <li><a href="#1">Usluge</a></li> 
                    <li><a href="#2">Cvijeće</a></li> 
                    <li><a href="#3">Galerija</a></li> 
                    <li><a href="#4">O nama</a></li> 
                    <li><a href="#5">Kontakt</a></li> 
                </ul> 
            </nav> 
        </div>

css code

#navbox {
    width: 620px;
    float: left;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
}

#navbox nav {
    width: 620px;
    float: left;
    margin-top: 66px;
}

    #navbox li {
        width: 68px;
        float: right;
        list-style: none;
        margin-left: 24px;
        background: rgb(230,230,230);
    }

        #navbox a {
            display: block;
            padding: 134px 0px 0px 0px;
            border: 0px solid rgb(195,195,195);
            color: rgb(171,74,119);
            text-decoration: none;
            text-align: center;
        }
thirtydot
  • 224,678
  • 48
  • 389
  • 349
erbo
  • 91
  • 1
  • 2

1 Answers1

0

Try this in your CSS:

#navbox nav {
    width: 620px;
    float: left;
    margin-top: 66px;
}

#navbox li {
    float: right;
    list-style: none;
    margin-left: 24px;
    background: rgb(230,230,230);
}

#navbox a {
    display: block;
    padding: 15px 20px; //adjust to your liking
    border: 0px solid rgb(195,195,195);
    color: rgb(171,74,119);
    text-decoration: none;
    text-align: center;
}

@media screen and (max-width:767px){
    #navbox nav {
        width:100%;
    }
}

If it doesn't work out for you, can you post a link to your page so we can take a look?

Andres I Perez
  • 75,075
  • 21
  • 157
  • 138
  • The links background color is too close to the background color of the body of the page, change it to "#000" to test as rGBA may not be properly supported on the device you're testing on..... i tested on windows mobile 6 phone and on Opera Mobile and it came up ok, just that the background of the links was not showing. – Andres I Perez Sep 17 '11 at 15:14
  • ok, i found out what caused the error, it was the usage of custom font from google fonts. it works now. thanks for your help. – erbo Sep 17 '11 at 15:27