CODEWITHSUNDEEP
css
MemoNick
MemoNick

Reputation: 511

Max-Height Firefox/Opera/IE

I'm trying to set a max-height to an image. It works well in Safari and Chrome, but not in Firefox/Opera/IE. Now I read that html and body heights should be put at 100%, and it did work when I used jsfiddle. However, it doesn't work in my page (memo-designs.com/portfolio.php).

The following is the source of the page: 

<!DOCTYPE html>
    <html>
    <head>
        <title>memodesigns</title>
        <link rel='stylesheet' href='style/stylesheet.css'>
        <script type = 'text/javascript'>
            function displayImage(image, link) {
                document.getElementById('img').src = image;
                document.getElementById('mylink').href = link;
            }

            function displayNextImage() {
                if (x < images.length-1){
                    x++;
                } else {
                    x = 0;
                }
                displayImage(images[x], links[x]);           
            }

            function displayPreviousImage() {
                if (x > 0){
                    x--;
                } else {
                    x = images.length-1;
                }
                displayImage(images[x]);           
            }

            function startTimer() {
                setInterval(displayNextImage, -1);
            }

          var images = [], links = [], x = 0;images[0] = "http://memo-designs.com/items/doublek-01.png"
links[0] = "http://memo-designs.com/items/doublek-01.png"
images[1] = "http://memo-designs.com/items/memodesigns.png"
links[1] = "http://memo-designs.com/items/memodesigns.png"

      </script>
    </head>

    <body style = 'background-color: #000000'><div id = 'menucontainer'>
            <div id = 'menu'>
                <p>
                    <ul>
                        <li><a class = 'menu' href = '/'>HOME</a></li>
                        <li><a class = 'menu' href = 'about.php'>ABOUT</a></li>
                        <li><a class = 'menu' href = 'portfolio.php'>PORTFOLIO</a></li>
                        <li><a class = 'menu' href = 'rates.php'>RATES</a></li>
                        <li><a class = 'menu' href = 'contact.php'>CONTACT</a></li>
                    </ul>
                </p>
            </div>
        </div>
                <div id = 'contentcontainer' style = 'padding-top: 0%; max-height: 100%; overflow: hidden; background-color: #000000'>
                <p>
                    <img id= 'img' src = 'http://memo-designs.com/items/doublek-01.png' style = 'max-height: 100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;'>
                    <img class = 'arrow' onclick = 'displayPreviousImage()' id= 'img' src = 'style/graphics/larrow.png' style = 'position: absolute; left: 0; top: 40%;'>
                    <img class = 'arrow' onclick = 'displayNextImage()' id= 'img' src = 'style/graphics/rarrow.png' style = 'position: absolute; right: 0; top: 40%;'>          </p>
            </div>
    </body>

    </html>

And the css stylesheet (only part of it is shown here):

*{
    margin:  0;
    padding:  0;
}

html{
    margin: 0;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
}

body{
    margin: 0px;
    background-color: #f3f4f4;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
}

Would appreciate any help as to what I'm doing wrong :)

Upvotes: 2

Views: 628

Answers (1)

Markus Hofmann
Markus Hofmann

Reputation: 3447

First of all I recommend you to start using a CSS-Reset like Normalize.css . It makes browsers render all elements more consistently and in line with modern standards.

Your HTML notation might also cause inconsistency across browsers. Turn things like <div id = 'menu'> into <div id="menu">. This makes it also more readable IMHO.

Inline style attributes make maintaining the pages a pain and may override things you didn't intent to. They also need to be applied to every single element thus also increasing download time. Using classes / id's is the way to go. Also pseudo-elements can't be used with inline styles. I advice to only use them for quick changes during development. I use the element inspector from Chrome / Firefox to change things quickly and instantly see how the changes look, copy/pasting the edits afterwards.

So, make sure to put all css into your stylesheet. It's also considered as a best practice for maintainability and better download speed (minify the files for production) of your pages.

You surely have heard about jQuery before. Try using it. jQuery makes developing things like image sliders a breeze (once you understand the syntax, but it's a low learning curve). Furthermore, there are LOTS of ready-to-use plugins for jQuery.

Another "good practice" is to put your javascripts at the very end of your document just before the </body> tag. Read more about this here and here.

Ok, enough tips. Let's get the hands dirty:

The HTML Part: 

<!DOCTYPE html>
<html>
<head>
    <title>memodesigns</title>
    <link rel="stylesheet" href="/assets/css/normalize.css">
    <link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>

    <div id="menuContainer">
        <div id="menu">
            <p>
                <ul>
                    <!-- Instead of writing in CAPITALS use the text-transform:uppercase; css property -->
                    <li><a class="menu" href="/">Home</a></li>
                    <li><a class="menu" href="about.php">About</a></li>
                    <li><a class="menu" href="portfolio.php">Portfolio</a></li>
                    <li><a class="menu" href="rates.php">Rates</a></li>
                    <li><a class="menu" href="contact.php">Contact</a></li>
                </ul>
            </p>
        </div>
    </div>

    <div id="contentContainer">
        <p>
            <!-- NOTE: Use IDs only once, else use classes to share css styles -->
            <img id="img" src="http://memo-designs.com/items/doublek-01.png">
            <img class="arrow left" src="style/graphics/larrow.png" onclick="displayPreviousImage()">
            <img class="arrow right" src="style/graphics/rarrow.png" onclick="displayNextImage()">
        </p>
    </div>


    <!-- Put the JavaScript at the end of the document just before the closing body tag -->
    <script>
        var images = [], links = [], x = 0,
            baseUrl   = "http://memo-designs.com/items/";
            images[0] = baseUrl + "doublek-01.png";
            links[0]  = baseUrl + "doublek-01.png";
            images[1] = baseUrl + "memodesigns.png";
            links[1]  = baseUrl + "memodesigns.png";

        function displayImage(img, link)
        {
            document.getElementById('img').src = img;
            document.getElementById('mylink').href = link;
        }

        function displayNextImage()
        {
            if (x < images.length-1) x++; 
                else x = 0;

            displayImage(images[x], links[x]);           
        }

        function displayPreviousImage()
        {
            if (x > 0) x--; 
                else x = images.length-1;

            displayImage(images[x]);           
        }

        function startTimer()
        {
            setInterval(displayNextImage, -1);
        }
    </script>

</body>
</html>

...and the CSS: 

/* Assuming you'll use a CSS-Reset */
body {
    background-color: #f3f4f4;
    font:
    ...

    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#menuContainer { ... }
#menu { ... }
#menu ul { ... }

/* Making the menu labels all UPPERCASE */
#menu ul > li {
    text-transform: uppercase;
}

#contentContainer {
    background-color: #000;
    padding-top: 0;
    overflow: hidden;

    /* IMPORTANT: Set a fixed pixel height here to make the images use up the given space */
    height: 200px; /* change 200 to your needs */
}
#img {
    display: block;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;

}
#contentContainer .arrow {
    position: absolute;
    top: 40%;
}
#contentContainer .arrow.left {
    left: 0;
}
#contentContainer .arrow.right {
    right: 0;
}

Ok, try out the suggestions and the code example. Tell us if and what helped.

Good luck and happy coding!

Upvotes: 1

Related Questions