CODEWITHSUNDEEP
cssinternet-explorer
Jess McKenzie
Jess McKenzie

Reputation: 8385

CSS and Internet Explorer

I struggle with working with Internet Explorer.

Issue one:

I have used min-height:100% and I no that this does not work in IE. How could I set the "min-height" in my css?

Issue two:

I have used 

position: relative;
    z-index:50000;`

for my header and now its not aligned where it is required.

I have shiv installed

The link to the site is http://buddywalknz.org

HTML (With CMS Tags)

<!DOCTYPE html>
<head>
    {pyro:theme:partial name="metadata"}
<body>
        <header>
            <div id="logo"></div>
        </header>

            <nav>
                <ul>
                    {pyro:navigation:links group="header" indent="tab"} 
                </ul>   
            </nav>

<div id="mainContent">
    {if ('{pyro:page:is_home}' == TRUE)}
    <h1>Welcome</h1>
    {else}
    <h1>{pyro:page:title}</h1>
    {/if}
    <p>
    {pyro:page:body}    
    </p>
        <div id="gallery">
                <div id="galleryMain"><img src="http://buddywalknz.org/uploads/default/files/accouncil_s.jpg" width="375" height="149" title="Proudly Supported by Auckland Council" alt="Auckland Council"></div>
            {pyro:streams:cycle stream="sponsors"}
            {entries}
                <div class="galleryLogo"><a href="{company_website}"><img src="{company_logo.thumb}" title="Proudly Supported by {company_name}" alt="{company_name}"></a></div>
            {/entries}
            {/pyro:streams:cycle}   
        </div>
</div><!-- Main Content Close -->
    </body>
</html>

CSS:

html{
    background: url('../img/Body_BG.png') repeat-x 0 0 scroll;
    background-color:#0C0C0C;
    height:100%;
    width:100%;
}
body{
    width:960px;
    height:100%;
    min-height: 100% !important;
    margin: 0 auto;
    font-family:Verdana, Geneva, sans-serif;  
}
h1{
    margin:25px 0 0 25px;
    font-family: 'Quicksand', sans-serif;
    font-size:30px;
}
header{
    height: 219px;
    width: 551px;
    margin:0 auto;
}
header #logo{
    background:url('../img/logo.png') no-repeat scroll 0 0 transparent;
    width:551px;
    height:219px;
    position: relative;
    z-index:50000;
}
nav{
    background:url('../img/navBG.png') no-repeat;
    float:right;
    width:135px;
    height:100%;
    padding:30px 0 0 0;
}
nav ul{
    list-style:none;
    margin:15px 0 0 0;
}
nav li{
    margin:10px 0 0 -30px;
    text-align:left;
    text-indent:5px;
}
nav li a{
    text-decoration:none;
    color:#ff9f30;
    font-family: 'Quicksand', sans-serif;
}
#mainContent{
    float:right;
    background:url('../img/mainBG.png') no-repeat;
    width:707px;
    height:auto;
    min-height:100%;
    margin:-35px auto;
}
#mainContent h1{
    font-family: 'Quicksand', sans-serif;
}
#mainContent a{
    color:#ff9f30;
    font-weight:bold;
    text-decoration: none;
}
#bottomBanner{
    background: url('../img/bottomBanner.png') no-repeat;
    width:478px;
    height: 47px;
    margin: -47px 0 0 300px;
}
#mainContent p{
    margin:0 30px 0 30px;
    font-size: 13px;
    text-align:justify;
}

#Video{

    margin: 30px 0 0 150px;

}

#Video #Vid{

    border: 5px solid #4e2b97;
}

.img{

    border: 5px solid #ff9f30;
}


a {
    outline: none;
}

a img {
    border: 1px solid #BBB;
    padding: 2px;
    margin: 10px 20px 10px 0;
    vertical-align: top;
}

a img.last {
    margin-right: 0;    
}

ul {
    margin-bottom: 24px;
    padding-left: 30px;
}


#img{

    margin-left: 25px;
}

#map{
    margin:0 0 0 115px;
}

/* Sponsor Gallery CSS  */
#gallery{
    width:707px;
    min-height: 100% !important;
    margin:0 0 0 30px;
}
#galleryMain{
    margin:0 0 0 150px;
}
.galleryLogo{
    float:left;
    width:200px;
    height:200px;
    margin:0 8px 5px 0;
}
#galleryLogo img{
    border:none;
}
#galleryLogo a{
    border:none;
    text-decoration: none;
}
/* End Sponsor Gallery CSS  */

#contact-form{
    width:350px;
    margin:10px auto;
}

#contact-form label{
    float:left;
    width:175px;
}
#contact-form input{
    width:175px;
}

Upvotes: 0

Views: 408

Answers (2)

Erik Funkenbusch
Erik Funkenbusch

Reputation: 93424

min-height does work in IE7 and later, but does not work in IE6. Since IE6's usage is minimal, you should consider just ignoring it.

You have this code:

<!--[if lt IE 8]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Get rid if the first block, you only need the second. This is what includes two copies of html5shim in IE7.

Upvotes: 1

ssamuel
ssamuel

Reputation: 427

It's a barbaric -- and probably outdated -- solution, but IE does respect image bounds. Create a 1x1-px transparent GIF or PNG, stick it in your space with a height.

This will give you one pixel of shim too (call it leading if you want to be fancy) so make sure you adjust your CSS around that.

Upvotes: 0

Related Questions