We're a community of 1077K IT Pros here for help, advice, solutions, professional growth and fun. Join us!
1,076,322 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Start New Discussion Reply to this Discussion

menu bar problem in mobile devices

Hi web designers! I just want to know what is the problem with my css since its perfectly working in desktop and laptop, while its having a problem in tablets and mobile devices. This is my code:

CSS:

#header{

    width: 935px;
    margin-left: auto;
    margin-right:auto;
    padding:20px;
    background-color:#FFF;
    margin-top:-9px;
}

ul#css3menu1,ul#css3menu1 ul{
    margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu1 ul{
    display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#424542;border-width:2px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#FFF;padding:0 10px 10px;}
ul#css3menu1 li:hover>*{
    display:block;}
ul#css3menu1 li{
    position:relative;width:139px;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
    z-index:1;}
ul#css3menu1{
    font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
    *display:inline;}
* html ul#css3menu1 li a{
    display:inline-block;}
ul#css3menu1>li{
    margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
    outline-style:none;}
ul#css3menu1 a{
    display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Trebuchet MS;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#5289e5;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu1 ul li{
    float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
    text-align:left;padding:4px;background-color:#424542;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma;color:#FFF;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
    background-color:#000000;border-color:#C0C0C0;border-style:solid;color:#ffffff;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;text-decoration:none;}
ul#css3menu1 span{
    display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
    background-color:#424542;background-image:none;color:#00aaff;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu1 li.topfirst>a{
    border-width:0;border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu1 li.toplast>a{
    border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;}

HTML:

<div id="header">
<center>
  <img style="margin-left:-100px; margin-top:-12px" src="images/header.gif" />
</center>
<a href="http://positiveqa.com:2095/horde/index.php"><img style="float:right; margin-top: -20px; margin-right:15px" src="images/email.png" border="0"/></a>
</div>
<center>
<ul id="css3menu1" class="topmenu">
    <li class="topfirst"><a href="index.php" style="height:18px;line-height:18px;"><center>Home</center></a></li>
    <li class="topmenu"><a href="findjobs.php" style="height:18px;line-height:18px;"><center>Find Jobs</center></a></li>
    <li class="topmenu"><a href="addcv.php" style="height:18px;line-height:18px;"><center>Post CV</center></a></li>
    <li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span><center>Employers</center></span></a>
    <ul>
        <li><a href="creatjobform.php">Post Job</a></li>
        <li><a href="applicants.php">Search CVs</a></li>
    </ul></li>
    <li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span><center>Domestic Workers</center></span></a>
    <ul>
<li><a href="domestichelpers/housemaids.php">Housemaid</a></li>
        <li><a href="domestichelpers/houseboy.php">House Boy</a></li>
        <li><a href="domestichelpers/driver.php">Driver</a></li>
        <li><a href="domestichelpers/chef.php">Chef</a></li>
        <li><a href="domestichelpers/others.php">Others</a></li>
    </ul></li>
    <li class="topmenu"><a href="contactusform.php" style="height:18px;line-height:18px;"><center>Contact Us</center></a></li>
    <li class="toplast"><a href="aboutus.php" style="height:18px;line-height:18px;"><center>About Us</center></a></li>
</ul>
</center>
2
Contributors
4
Replies
7 Hours
Discussion Span
6 Months Ago
Last Updated
5
Views
Question
Answered
karlcunanan
Light Poster
34 posts since Oct 2012
Reputation Points: 0
Solved Threads: 3
Skill Endorsements: 0

What problem are you having with the mobile devices?

JorgeM
Industrious Poster
4,018 posts since Dec 2011
Reputation Points: 297
Solved Threads: 548
Skill Endorsements: 115

The last item in my Menu bar is showing at the bottom of the first item

karlcunanan
Light Poster
34 posts since Oct 2012
Reputation Points: 0
Solved Threads: 3
Skill Endorsements: 0

If you are setting a width on the list items and you run out of space, it will wrap to the next line, in this case, under the first item.

JorgeM
Industrious Poster
4,018 posts since Dec 2011
Reputation Points: 297
Solved Threads: 548
Skill Endorsements: 115

Am just wondering why only in mobile device and tablets, in pc's its okay. Anyway I adjusted the width and it went okay :) Thanks JorgeM!

karlcunanan
Light Poster
34 posts since Oct 2012
Reputation Points: 0
Solved Threads: 3
Skill Endorsements: 0
Question Answered as of 6 Months Ago by JorgeM

This question has already been solved: Start a new discussion instead

Post: Markdown Syntax: Formatting Help
 
You
 
© 2013 DaniWeb® LLC
Page rendered in 0.0856 seconds using 2.69MB