Home/ Questions/Q 8194005
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T04:40:32+00:00

stackoverflow has helped learn lots of cool stuff but unfortunately I’m stuck on something

  • 0

stackoverflow has helped learn lots of cool stuff but unfortunately I’m stuck on something and don’t know how to research my way out of it….so here goes floating a question which I hope has a simple answer.

I’ve laid out a website which works great and is just what I want, it uses a great plugin called LemmonSlider.js and I’ve managed to make it entirely liquid in layout…almost!

The problem is that it works perfectly on Safari, iOS and Chrome but when I test it on Firefox things go bad, very bad. I haven’t tested in IE but I can imagine things will be just as funky.

Below is some simplified code to give you an idea of what I’ve done…

I’ve already tried using min-height in the body, html tag but that doesn’t seem to help.

Any input would be hugely appreciated

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Example layout for the nice folk at stackoverflow</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
        <style type="text/css">
            html, body {
                width:100%;
                height:100%;
                padding:0;
                margin:0;
                background-color:red;
            }
            #content {
                position:absolute;
                top:50%;
                margin-top:-25%;
                width:100%;
                height:50%;
                background-color:blue;
                overflow:hidden;
            }
            #content ul {
                position:relative;
                margin:0;
                padding:0;
                height:100%;
                background-color:yellow;
            }
            #content li {
                list-style:none;
                float:left;
                height:inherit;
                background-color:orange;
                margin:0px 10px 0px 10px;
            }
            #content img {
                height:inherit;
            }
        </style>
        <script type="text/javascript">
            $(window).bind('resize', function () {
                location.reload();
            });
        </script>
    </head>
    <body>
        <div id="content">
            <ul>
                <li>
                    <img src="any/sized/image" />
                </li>
                <li>
                    <img src="any/sized/image" />
                </li>
                <li>
                    <img src="any/sized/image" />
                </li>
                <li>
                    <img src="any/sized/image" />
                </li>
                <li>
                    <img src="any/sized/image" />
                </li>
            </ul>
        </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    change the #content

    #content {
  position:absolute;
  top:25%;
  width:100%;
  height:50%;
  background-color:blue;
  overflow:hidden;
}

    Other wise… If you are not to invested in your css. I would totally recommend using the 1140 grid. Its pretty cool cause the grid also comes with media queries for responsive design.

    Hope this works for you

    Cheers

    • 0