0

I'm working on a website, and I've encountered a problem for which I cannot find any kind of solution online, so I'd appreciate your help.

I've designed a drop-down menu, and this is the problem: if the page is zoomed in, it breaks into 2 lines (not desired as it's a drop-down menu!), but if I set a minimum-width for the menu, as the position is set to absolute, I cannot scroll to the right and the menu just goes out of the screen. It doesn't work neither if I set a minimum-width for the body tag, as it allows me to scroll the body but the menu stays out! It's frustrating

The position must be kept to absolute, otherwise I'd need a whole method to keep it on top and would appreciate your help, so I'm looking for a solution that let's me scroll to the right if the screen is really zoomed in, as in smartphones.

Here's the menu code (not all of it ofc, as it's too long, but the main parts. To see more, ask for it or visit the page and see the source code).

Website: http://newfutureuniversity.org/

HTML:

...
<body>
    <div id="container">
        <div class="menu" >
            <ul>
                <li><a href="http://newfutureuniversity.org/">New Future</a></li>
                <li><a href="http://newfutureuniversity.org/learn/degree/">Learn</a>
                <ul class="bottom">
                ...
                </ul>
                </li>
...

CSS:

body                /* Changes the style for the whole body */
    {
    position:absolute;
    margin:0px;         /* Avoids margin in the whole page */
    padding:0px;
    border:0px;
    background-color: #EEEEEE;  /* Default background color, light grey */
    height:100%;            /* Vertically complete */
    width:100%;
    min-width:400px;
    min-height: 100%;
    color: #333;            /* Letters color */
    }

#container          /* The container has the header, main and footer inside */
    {
    position:relative;
    margin:0px;
    padding:0px;
    min-height: 100%;       /* Avoids the footer to go up */
    height: auto !important;
    height: 100%;
    margin: 0px auto -51px;
    }
.menu
    {
    position: fixed;
    top:0px;
    left:0px;
    opacity:0.3;
    filter:alpha(opacity=30);   /* For IE8 and earlier */
    width:100%;
    min-width:400px;
    border:none;
    border-bottom:1px solid gray;
    margin:0px;
    padding:0px;
    font-size:18px;
    z-index:3;
    }

.menu ul
    {
    background:#DDD;
    height:26px;
    list-style:none;
    margin:0px;
    padding:0px;
    z-index:3;
    }
    .menu li{
        width:24.5%;
        min-width:93px;
        float:left;
        padding:0px;
        margin: 2px 0px 2px 0.5%;
        }
...

EDIT: You need to unmaximize and to zoom to see the problem in a desktop browser.

2
  • Dont see it happening in Windows 7 and IE9 even when I unmaximize and zoom to 300%. Can you post a pic of the problem.
    – Jawad
    Feb 8, 2012 at 17:36
  • Picture of the problem added here: oi40.tinypic.com/2eqc104.jpg Feb 8, 2012 at 23:04

1 Answer 1

0

I am not especially sure what you mean by breaking into two lines. I have looked at your site on Firefox, Chrome, IE, Opera and on my iPhone and was unable to reproduce your problem. The menu simply overflowed off the screen and out of view for the final item "Get In". I fear you may however have a design problem. I would not encourage you to build 'one-site-for-all' but target your audience.

Your desired solution is relatively impossible to do with your menu design. You are working with fixed/absolute position and positioning it relative to the window/screen view. When you zoom your screen 'floats ' around on the webpage, but the position of absolute positioned objects are relative to the screen(not the page) and will not move.

You 'could solve' this with js script that would allow modifications in the positioning based on scale, but I advise against it. I had tried to solve a similar problem and this quickly became the device specific debugging is a nightmare worst then the browser nightmare we struggle with today.

As for solutions, I would strongly recommend you look into a few different frameworks. First being an CSS solution, lessframework. It gives you a simple framework to use for multi-device compatible layouts without digging into js. On the other hand if JavaScript isn't an issue checkout jQuery Mobile. You can produce drop-down menus with nice transition effect easily that are very similar to what you were creating.

3
  • No, you could not reproduce it as I can get 2 different errors if I keep or delete the min-height:400px; if you really want to check it in the other way, now I delete it so you can see what I meant. I will check for the lessframework, but I will probably end up separating by devices, as this problem is only encountered when not maximized and really zoomed in at desktop browsers. Thank you for your elaborated answer! Edit: remember to press F5 to refresh style.css! Feb 8, 2012 at 18:30
  • Most likely it is best if you create a desktop version and another just for mobile. It might be worth you time to look at tera-wurfl to help with individual mobile device. It can help give information like the width and height of the displays. Feb 8, 2012 at 19:10
  • Thank you again, it will definitely help me a lot Feb 8, 2012 at 23:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.