Я борюсь с работой с Internet Explorer.
Проблема первая:
Я использовал min-height:100%, и я не знаю, что это не работает в IE.Как я мог установить "минимальную высоту" в моем css?
Проблема вторая:
Я использовал
position: relative;
z-index:50000;`
для моего заголовка, и теперь он не выровнен гдеэто необходимо.
У меня установлен shiv
Ссылка на сайт http://buddywalknz.org
HTML (с тегами CMS)
<!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;
}