LogicOpinion
08-01-2009, 05:52 AM
hello,
i decided to build a tableless website using <div>..
everything is clear and fine for Firefox,Opera,Chrome,IE7,8..
but with IE6 i came to problem i can`t solve, hope someone will help with that.
so what`s wrong?
the problem is that when i minimize window (IE6) until bottom scroll bar appears because of (min-width:990px) css style for header.
all the rest of page but header does not keep 100% width and squeezes.
This is my css file:
body
{
margin:0;
padding:0;
font-size:12px;
font-family:Sylfaen, "BPG Glaho Arial V5", Verdana, Arial, sans-serif;
color:#000000;
}
#wrap
{
margin:0 auto;
min-width:990px;
background-color:#f5f5f5;
width: auto !important;
width:100%;
}
#header
{
width:100%;
height:205px;
background-image:URL(../crt_images/design/top-spacer.jpg);
background-repeat:repeat-x;
}
#top-img
{
width:742px;
height:205px;
position:absolute;
top:0;
background-image:URL(../crt_images/design/courtgovge_01.jpg);
background-repeat:no-repeat;
}
#quick-nav
{
float:right;
width:990px;
height:205px;
}
#top-btns
{
padding-left:840px;
position:relative;
width:150px;
height:40px;
}
div#top-btns ul
{
padding-right:10px;
list-style:none;
}
div#top-btns ul li
{
width:30px;
height:40px;
float:right;
}/* quick navigation */
#search-box /* search box */
{
margin-left:740px;
margin-top:83px;
position:relative;
width:250px;
height:72px;
}
#search-input
{
position:relative;
top:27px;
left:10px;
float:left;
width:auto;
}
#search-input input
{
border:1px #DDDDDD solid;
font-size:12px;
color:#000000;
width:150px;
}
#search-submit
{
position:relative;
top:25px;
margin-left:120px;
}
#search-submit input
{
border:1px #DDDDDD solid;
font-size:12px;
color:#000000;
}
/* search end */
#menu-pane
{
width:100%;
height:27px;
background-image:URL(../crt_images/design/crt-menu-bg.jpg);
background-repeat:repeat-x;
}
/* Menu */
ul#navmenu {
margin: 0;
border: 0 none;
padding: 0;
width: 700px; /*For KHTML*/
list-style: none;
height: 24px;
}
#itm1
{
width:131px;
height:27px;
background-image:URL(../crt_images/design/btn-1.gif);
cursor:pointer;
background-repeat:no-repeat;
}
#itm2
{
width:117px;
height:27px;
background-image:URL(../crt_images/design/btn-2.gif);
cursor:pointer;
background-repeat:no-repeat;
}
#itm3
{
width:166px;
height:27px;
background-image:URL(../crt_images/design/btn-3.gif);
cursor:pointer;
background-repeat:no-repeat;
}
#itm4
{
width:143px;
height:27px;
background-image:URL(../crt_images/design/btn-4.gif);
cursor:pointer;
background-repeat:no-repeat;
}
#itm5
{
width:88px;
height:27px;
background-image:URL(../crt_images/design/btn-5.gif);
cursor:pointer;
background-repeat:no-repeat;
}
ul#navmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
}
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 27px;
left: 0;
}
ul#navmenu ul li {
width: 160px;
float: left; /*For IE 7*/
display: block !important;
display: inline; /*For IE*/
}
/* Root Menu */
ul#navmenu a {
border: 1px solid #FFF;
border-left-color: #F1F1F1;
border-right-color: #F1F1F1;
border-bottom-color: #F1F1F1;
padding: 0 6px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
background: #EEE;
color: #000;
font: 12px/22px BPG Glaho Arial V5;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
outline:none;
}
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #CCC;
color: #FFF;
}
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
float: none;
background: #FFF;
color: #3965d7;
}
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #F9F9F9;
color: #ee772f;
}
ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}
ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}
/* Menu End */
/* page */
#content
{
width: 100%;
margin: 0 ;
background-color: #000000;
height:300px;
color: #333;
line-height: 130%;
}
/* page end*/
and this is my html file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?php
$fullpath = "http://".$_SERVER[ 'SERVER_NAME']."/";
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="<? echo $fullpath; ?>crt_css/style.css" media="all" />
<!--[if gte IE 5.5]>
<script language="JavaScript" src="<? echo $fullpath; ?>crt_1nc/js/ie.js" type="text/JavaScript"></script>
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="<? echo $fullpath; ?>crt_css/IE6_Style.css">
<![endif]-->
<!--[if IE ]>
<link rel="stylesheet" type="text/css" href="<? echo $fullpath; ?>crt_css/IE_Style.css">
<![endif]-->
<title>City Court</title>
</head>
<body>
<div id="wrap">
<!--header start-->
<div id="header">
<div id="top-img"></div>
<div id="quick-nav">
<div id="top-btns">
<ul>
<li><img src="/crt_images/design/crt_mail.png"></li>
<li><img src="/crt_images/design/crt_map.png"></li>
<li><img src="/crt_images/design/crt_home.png"></li>
</ul>
</div>
<div id="search-box">
<form action="/search/" method="POST">
<div id="search-input"><input type="text" name="search"/></div>
<div id="search-submit"><input type="image" src="<? echo $fullpath; ?>crt_images/design/search-btn.jpg" /></div>
</form>
</div>
</div>
</div>
<!--header end-->
<!--top menu-->
<div id="menu-pane">
<!-- ## MENU PANE START ## -->
<div id="menu-wrap" style="padding-left:10px;">
<ul id="navmenu">
<li id="itm1">
<ul>
<li><a href="/news/">სიახლეები</a></li>
<li><a href="/bulletinboard/">bulletins</a></li>
<li><a href="/vacancy/">HR</a></li>
<li><a href="/links/">usefull links</a></li>
<li><a href="/downloads/">download</a></li>
<li><a href="/faq/">FAQ</a></li>
</ul>
</li>
<li id="itm2">
<ul>
<li><a href="/history/">History</a></li>
<li><a href="/lawyers/">lawyers</a></li>
<li><a href="/staff/">staff</a></li>
<li><a href="/gallery/">Photo Gallery</a></li>
</ul>
</li>
<li id="itm3">
<ul>
<li><a href="/case/criminal/">Criminal</a></li>
<li><a href="/case/administrative/">administrative</a></li>
<li><a href="/case/civil/">civil</a></li>
</ul>
</li>
<li id="itm4">
<ul>
<li><a href="#">parliament</a></li>
<li><a href="#">law</a></li>
</ul>
</li>
<li id="itm5">
<ul>
<li><a href="/phonebook/">სატელეფონო ცნობარი</a></li>
<li><a href="/feedback/">დაგვიკავშირდით</a></li>
</ul>
</li>
</ul>
</div>
<!--top menu end-->
</div>
<!-- page start -->
<div id="content">
page content goes here...
</div>
<!-- page end -->
</div>
</body>
</html>
Thank You In Advance!!!
i decided to build a tableless website using <div>..
everything is clear and fine for Firefox,Opera,Chrome,IE7,8..
but with IE6 i came to problem i can`t solve, hope someone will help with that.
so what`s wrong?
the problem is that when i minimize window (IE6) until bottom scroll bar appears because of (min-width:990px) css style for header.
all the rest of page but header does not keep 100% width and squeezes.
This is my css file:
body
{
margin:0;
padding:0;
font-size:12px;
font-family:Sylfaen, "BPG Glaho Arial V5", Verdana, Arial, sans-serif;
color:#000000;
}
#wrap
{
margin:0 auto;
min-width:990px;
background-color:#f5f5f5;
width: auto !important;
width:100%;
}
#header
{
width:100%;
height:205px;
background-image:URL(../crt_images/design/top-spacer.jpg);
background-repeat:repeat-x;
}
#top-img
{
width:742px;
height:205px;
position:absolute;
top:0;
background-image:URL(../crt_images/design/courtgovge_01.jpg);
background-repeat:no-repeat;
}
#quick-nav
{
float:right;
width:990px;
height:205px;
}
#top-btns
{
padding-left:840px;
position:relative;
width:150px;
height:40px;
}
div#top-btns ul
{
padding-right:10px;
list-style:none;
}
div#top-btns ul li
{
width:30px;
height:40px;
float:right;
}/* quick navigation */
#search-box /* search box */
{
margin-left:740px;
margin-top:83px;
position:relative;
width:250px;
height:72px;
}
#search-input
{
position:relative;
top:27px;
left:10px;
float:left;
width:auto;
}
#search-input input
{
border:1px #DDDDDD solid;
font-size:12px;
color:#000000;
width:150px;
}
#search-submit
{
position:relative;
top:25px;
margin-left:120px;
}
#search-submit input
{
border:1px #DDDDDD solid;
font-size:12px;
color:#000000;
}
/* search end */
#menu-pane
{
width:100%;
height:27px;
background-image:URL(../crt_images/design/crt-menu-bg.jpg);
background-repeat:repeat-x;
}
/* Menu */
ul#navmenu {
margin: 0;
border: 0 none;
padding: 0;
width: 700px; /*For KHTML*/
list-style: none;
height: 24px;
}
#itm1
{
width:131px;
height:27px;
background-image:URL(../crt_images/design/btn-1.gif);
cursor:pointer;
background-repeat:no-repeat;
}
#itm2
{
width:117px;
height:27px;
background-image:URL(../crt_images/design/btn-2.gif);
cursor:pointer;
background-repeat:no-repeat;
}
#itm3
{
width:166px;
height:27px;
background-image:URL(../crt_images/design/btn-3.gif);
cursor:pointer;
background-repeat:no-repeat;
}
#itm4
{
width:143px;
height:27px;
background-image:URL(../crt_images/design/btn-4.gif);
cursor:pointer;
background-repeat:no-repeat;
}
#itm5
{
width:88px;
height:27px;
background-image:URL(../crt_images/design/btn-5.gif);
cursor:pointer;
background-repeat:no-repeat;
}
ul#navmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
}
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 27px;
left: 0;
}
ul#navmenu ul li {
width: 160px;
float: left; /*For IE 7*/
display: block !important;
display: inline; /*For IE*/
}
/* Root Menu */
ul#navmenu a {
border: 1px solid #FFF;
border-left-color: #F1F1F1;
border-right-color: #F1F1F1;
border-bottom-color: #F1F1F1;
padding: 0 6px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
background: #EEE;
color: #000;
font: 12px/22px BPG Glaho Arial V5;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
outline:none;
}
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #CCC;
color: #FFF;
}
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
float: none;
background: #FFF;
color: #3965d7;
}
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #F9F9F9;
color: #ee772f;
}
ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}
ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}
/* Menu End */
/* page */
#content
{
width: 100%;
margin: 0 ;
background-color: #000000;
height:300px;
color: #333;
line-height: 130%;
}
/* page end*/
and this is my html file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?php
$fullpath = "http://".$_SERVER[ 'SERVER_NAME']."/";
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="<? echo $fullpath; ?>crt_css/style.css" media="all" />
<!--[if gte IE 5.5]>
<script language="JavaScript" src="<? echo $fullpath; ?>crt_1nc/js/ie.js" type="text/JavaScript"></script>
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="<? echo $fullpath; ?>crt_css/IE6_Style.css">
<![endif]-->
<!--[if IE ]>
<link rel="stylesheet" type="text/css" href="<? echo $fullpath; ?>crt_css/IE_Style.css">
<![endif]-->
<title>City Court</title>
</head>
<body>
<div id="wrap">
<!--header start-->
<div id="header">
<div id="top-img"></div>
<div id="quick-nav">
<div id="top-btns">
<ul>
<li><img src="/crt_images/design/crt_mail.png"></li>
<li><img src="/crt_images/design/crt_map.png"></li>
<li><img src="/crt_images/design/crt_home.png"></li>
</ul>
</div>
<div id="search-box">
<form action="/search/" method="POST">
<div id="search-input"><input type="text" name="search"/></div>
<div id="search-submit"><input type="image" src="<? echo $fullpath; ?>crt_images/design/search-btn.jpg" /></div>
</form>
</div>
</div>
</div>
<!--header end-->
<!--top menu-->
<div id="menu-pane">
<!-- ## MENU PANE START ## -->
<div id="menu-wrap" style="padding-left:10px;">
<ul id="navmenu">
<li id="itm1">
<ul>
<li><a href="/news/">სიახლეები</a></li>
<li><a href="/bulletinboard/">bulletins</a></li>
<li><a href="/vacancy/">HR</a></li>
<li><a href="/links/">usefull links</a></li>
<li><a href="/downloads/">download</a></li>
<li><a href="/faq/">FAQ</a></li>
</ul>
</li>
<li id="itm2">
<ul>
<li><a href="/history/">History</a></li>
<li><a href="/lawyers/">lawyers</a></li>
<li><a href="/staff/">staff</a></li>
<li><a href="/gallery/">Photo Gallery</a></li>
</ul>
</li>
<li id="itm3">
<ul>
<li><a href="/case/criminal/">Criminal</a></li>
<li><a href="/case/administrative/">administrative</a></li>
<li><a href="/case/civil/">civil</a></li>
</ul>
</li>
<li id="itm4">
<ul>
<li><a href="#">parliament</a></li>
<li><a href="#">law</a></li>
</ul>
</li>
<li id="itm5">
<ul>
<li><a href="/phonebook/">სატელეფონო ცნობარი</a></li>
<li><a href="/feedback/">დაგვიკავშირდით</a></li>
</ul>
</li>
</ul>
</div>
<!--top menu end-->
</div>
<!-- page start -->
<div id="content">
page content goes here...
</div>
<!-- page end -->
</div>
</body>
</html>
Thank You In Advance!!!