• 0

Internet Explorer Woes


Question

Hey guys,

I'm setting up a very small website project and am having problems with IE and CSS.

CSS Used:

 

* { margin: 0; padding: 0;}


body {
        background-color: #999999;
        text-align: center
}


#container {
       	margin: 0px auto;
        width: 990px;
       	position: relative;
        background-color: white;
        /* IE Compatibility */
        text-align:left;
        /**/

}
/* Heading */

#header {
        clear: both;
        background-color: white;
        width: 990px;
        height: 75px;
}

#headerlogo {
	float: left;
	padding: 20px 0px 0px 50px;
	margin: 0;
}

#navbar {
        border-top: 1px solid #999;
        background:#EEB358 url(~/images/navbar.png);
        line-height: 20px;
        height: 20px;
        text-align: right;
        color: white;
}

ul#navbar {
        list-style:none; /*Removes bullets */
        font-size:12px;
        color:white;
        margin-bottom: -3px;
        padding-right: 0px;
        /* IE Compatibility */
        text-align:right;
        /**/
}

ul#navbar li {
        display:inline; /*Makes list items appear side by side */
}

#sidebar {
        float: left;
        width: 200px;
        color: black;
        margin-top: 30px;
}

#content{
        float: left;
        width: 730px;
        min-height: 78%;
        text-align:left;
        background-color:#FFEACA;
        margin-left:10px;
        margin-top:10px;
        margin-bottom:10px;
        margin-right:10px;
        padding-top: 10px;
        padding-left: 10px;    
}

#footer {
        clear: both;
        background-color: white;
        width: 990px;
        height: 75px;

}

#footerbar {
        border-bottom: 1px solid #999;
        background:#EEB358 url(~/images/navbar.png);
        line-height: 20px;
        height: 20px;
        text-align: center;
        font-size: 10px;
        color: white;
}

#footerpoweredby{
        float: left;
        padding: 10px 0px 1px 1px;
        margin: 0;
        font-style: italic;
}

#footersupport{
        float: right;
	padding-right:10px;


}

#footervalidation{
        float: right;
        margin-right: 40px;
        margin-top:10px;
}

and HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>

        <link rel="stylesheet" type="text/css" href="themes/flyorange/css/stylesheet.css">
    </head>
    <body>

        <div id ="container">

            <div id ="header">
                <div id="headerlogo">
                <img alt="FlyTools - Service Desk Support Software"  src="images\flyToolsLogoSlogan.png">
                </div>

            </div>
            <div id="navbar">                
                <ul id="navbar">
                    <li>  <img alt="Home" src="images\home.png"> </li>
                </ul>               
            </div>

                <div id ="sidebar">
                 <ul>
                    <li> Welcome </li>
                    <li> Database Setup</li>
                    <li> Administrator Setup</li>
                    <li> Finished!</li>
                 </ul>
                </div>

            <div id="content">
                <h2> Welcome to FlyTools! </h2>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis augue at eros lobortis ut varius turpis dignissim. Duis porttitor aliquet libero vel porta. Fusce mi augue, porttitor at sollicitudin nec, ultricies a turpis. Quisque egestas varius nisl, ac porttitor elit tincidunt ut. Sed fringilla sagittis elit, lacinia fringilla nulla rutrum ut. Nullam sit amet nisl mi. Integer consectetur, tortor scelerisque lacinia sagittis, erat odio faucibus tortor, ac ultricies tellus risus at ante. Nam posuere magna nec mauris faucibus posuere sit amet id metus. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Phasellus uls laoreet nisl justo, a ornare sem. Maecenas sit amet ipsum sit amet felis viverra malesuada quis malesuada massa. Aliquam mollis suscipit velit, sit amet placerat odio venenatis rutrum.
            </div>

            <div id="footer">
                <div id="footerbar">

                </div>

                  <div id="footerpoweredby">
                      <p> Powered by FlyTools Version 1.0</p>


                </div>

                <div id="footersupport">                

                    <img src="images/support.png">

                </div>

                  <div id="footervalidation">
                    <img alt="Valid HTML" src="https://www.w3.org/Icons/valid-html401">
                    <img alt="Valid CSS" src="https://jigsaw.w3.org/css-validator/images/vcss">
                </div>

            </div>






        </div>
     </body>
</html>


Screenshot

iechrom.png

As you can see IE isn't taking notice of the minimum height on the content and making the whole thing smaller which is no good to me.

This is a very rough design by the way, I know that using images the way I have isn't right etc... but that's not an issue right now.

Thanks for the help :)

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

Give this a try


html, body{ min-height: 100%; }

#div{ height: 100%; }

Or something along those lines, im not at a PC so I can't get my files up, if its wrong, feel free to laugh at me :p

Link to comment
Share on other sites

  • 0

Give this a try


html, body{ min-height: 100%; }

#div{ height: 100%; }

Or something along those lines, im not at a PC so I can't get my files up, if its wrong, feel free to laugh at me :p

Thanks for the suggestion, it didn't work but I've decided to not use min-height now so it's not a big issue :D

Link to comment
Share on other sites

This topic is now closed to further replies.