IE6 displaying main container only

1,024 Posts

Frank Reply #1, 19 years, 5 months ago

Hi,

just created this simple page, stupidly enough read to late I should not verify my CSS/Template using IE.
After loads of CSS correction all is fine now in FF, Safari and IE7. But IE6 just shows the wrapping container, and the "under construction" text. Tried the double margin fix when float left, margin left are applied. And a few more hacks I found. But that did not resolve anything. I am very new to CSS, first CSS page ever, a week after I started. Hope someone can spot my mistake (s) straight away. I think the page should certainly display in IE6! (http://www.noekdesign.com, page yet to be filled but menu should be there and some more stuff that dóes show in FF etc)

Here the CSS:

 /* styles for IE 5 Mac */
 #horizon {
	background-color: transparent;
	position: absolute;
	top: 20px;
	left: 20px;
 }
 
 /* following rules are invisible to IE 5 \*/
 #horizon {
   top: 50%;
   left: 0px;
   width: 100%;
   margin-top: -200px;
   text-align: center;
   min-width: 900px; 
 }
 /* end IE 5 hack */ 


#horizon {
	background-color: transparent;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	margin-top: -200px;
	text-align: center;
	min-width: 900px; 
}

#container {
	background-color: #fff;
	position: relative;
	text-align: left;
	width: 900px;
	height: 450px;
	margin: 0px auto;
	}



.masthead {
	position: absolute; height: 40px; width: 900px;
}
.logo {
	float: left;
	display: ;inline;
	height: 40px;
	width: 330px;
	margin-top: 9px;
   margin-left: 20px;
}


.mainnavigation {
	float: right;
	display: inline;
	width: 470px;
	border: none;
	color: White;
	font-size: 12px;
	
}

.mainnavigation ul{
   padding: 0;
   margin: 0;
   list-style-type: none;
	

}

.mainnavigation ul li{
    float;left;
    display: inline;    
    list-style: none;
    padding: 0;
    margin: 0;
    border-right: solid 0px
}

.mainnavigation ul li a{
	float: left;
	display: inline;
	height: 3.1em;
	line-height: 3.1em;
	padding: 0 16px 0 16px;
   text-decoration: none;
	font-weight: normal;
}


/*IE6*/
.mainnavigation ul li a:hover {background-color:rgb(255,255,255); text-decoration:none; color: #E77817;} 

html>body .mainnavigation ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: none;
}

.navsubcont01 ul { list-style:none; margin:0px; padding:0px ; text-decoration: none;}
.navsubcont01 a {
	display: block;
	width: 120px;
	height: 8px;
margin: 0px;
padding: 0px;
	border-collapse: collapse;
	line-height: 8px;
	text-decoration: none;
/*	position: absolute;*/
	font-size: 60%;
}
.navsubcont01 a:hover {
	text-decoration: none;
	color: #E77817;
}

.navsubcont01{
	float: right;
	display: inline;
	background-color: transparent;
padding: 0px;
	position: absolute;
	margin-top: 25px;
	margin-left: 555px;

	height: 120px;
	width: 120px;
	text-decoration: none;
}



.titleright {
	font-size: 12px;
	float: left;
	width: 150px;
	height: 20px;
	background-color: transparent;
	margin-top: 100px;
	margin-left: 638px;
	display: inline;
	position: absolute;
	overflow: hidden;

}

.titlemain {
	font-size: 12px;

	float: left;
	width: 150px;
	height: 20px;
	background-color: transparent;
	margin-top: 140px;
	margin-left: 375px;
	display: inline;
	position: absolute;
	overflow: hidden;

}
#contentholder1 {
	float: left;
	width: 250px;
	height: 200px;
	background-color:transparent;
	margin-top: 200px;
	margin-left: 38px;
	display: inline;
	position: absolute;
	overflow: hidden;
}

#contentholder2 {
	float: left;
	display: inline;
	width: 250px;
	height: 200px;
	background-color: transparent;
	margin-top: 200px;
	margin-left: 326px;
	position: absolute;
	overflow: hidden;
} 
#contentholder3 {
	float: right;
	display: inline;
	width: 250px;
	height: 200px;
	background-color: transparent;
	margin-top: 200px;
	margin-left: 613px;
	position: absolute;
	overflow: hidden;
}

.footer {
	float: left;
	display : inline;
	background-color: Black;
	width: 900px;
    height:50px;
    padding: 15px;
	margin-top: 450px;
	position: absolute;

}

/* MAIL FORM */
fieldset {
	margin: 2em 0;
  	padding: 1em;
	height: 300px;
	width: 220px;
	border-width: 0px;
	border-color: transparent;
	background: #f79a16;
	font-size: 1em;
	float: right;
	display: block;
} 



legend {
	font-weight: bold;
}
label {
	float: left;
	display: inline;
	
	margin-right: 0.4em;
}


#mailform {
	float: right; /*background-color: transparent;*/
	position: fixed;
	display: inline;
	margin-top: 180px;
  	margin-left: 550px;
  	width: 200px;
	text-align: left;
	text-decoration: none;
}
#descriptcontainer {
	float: right;
	display: inline;
	position: fixed;
	margin-top: 130px;
	margin-left: 630px;
	width: 282px;
	height: 330px;
	overflow: hidden;
	text-decoration: none;
}


input {
	width: 200px;
}
textarea {
	width: 200px;
	height: 155px;
}	

.picturecontainer {
	float: left;
	display: inline;
	width: 840px;
	height: 370px;
	margin-left: 70px;
	margin-top: 100px;
   position: absolute;
	background-color: transparent;
	overflow: hidden;
}


#arrowback {
	float: left;
	display: inline;
	height: 25px;
	width: 50px;
	margin-left: 600px;
	margin-top: 400px;
   position: absolute;
	background-color: transparent;
/*Firefox*/
	overflow: visible !important;
/*IE6*/
	overflow: hidden;
}
#arrowspacer {
	float: left;
	display: inline;
	height: 25px;
	width: 50px;
	margin-left: 650px;
	margin-top: 400px;
   position: absolute;
	background-color: transparent;
/*Firefox*/
	overflow: visible !important;
/*IE6*/
	overflow: hidden;
}

#arrowfront {
	float: left;
	display: inline;
	height: 25px;
	width: 50px;
	margin-left: 700px;
	margin-top: 400px;
    position: absolute;
	background-color: transparent;
/*Firefox*/
	overflow: visible !important;
/*IE6*/
	overflow: hidden;
}


.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {
    display:inline-block;
}

 /* mac hide \*/
    * html .clearfix {height: 1%;}
      .clearfix {display: block;}
 /* End hide */

and the template?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <base href="[(site_url)]" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="cache-control" content="no-cache" />
  <link rel="stylesheet" type="text/css" media="screen,projection,print" href="assets/templates/noek/css/layout.css" />
  <link rel="stylesheet" type="text/css" media="screen,projection,print" href="assets/templates/noek/css/font.css" />
  <link rel="icon" type="image/x-icon" href="assets/templates/shift/img/favicon.ico" />
  <script src="[(base_url)]/manager/media/script/scriptaculous/prototype.js" type="text/javascript"></script>
  <script src="[(base_url)]/manager/media/script/scriptaculous/scriptaculous.js" type="text/javascript"></script>
<style type="text/css">
A:link {text-decoration: none; color: #1A1A1A;}
A:visited {text-decoration: none ; color: #1A1A1A;}
A:active {text-decoration: none; color: #E77817;}
A:hover {text-decoration: none; color: #076102;}
</style> 

  <title>Noek Design</title>
 </head>



<body bgcolor="#000000">
  <!-- Main Page Container -->
<div id="horizon">
  <div id="container"> 
       <div class="masthead">
         <div class="logo">{{logo}}</div>
          <div class="mainnavigation">
	    [!Wayfinder?startId=`0`!]  
              </div></div>
        
             


                   
             
  

          <div id="contentholder1" class="clearfix">[*#mainleft*]</div>
           <div id="contentholder2" class="clearfix">[*#mainmid*]</div>
            <div id="contentholder3" class="clearfix">[*#mainright*]</div>
             <div class="titleright">[*longtitle*]</div>
              <div class="titlemain">[*description*]</div>
               <div id="mailform">[*contactform*]</div>
                <div class="picturecontainer">[*#pictureholder*]</div>
                 <div id="descriptcontainer">[*#infotext*]</div>
                  <div id="arrowback">[*#arrowback*]</div>
                   <div id="arrowspacer">[*#arrowspacer*]</div>
                    <div id="arrowfront">[*#arrowfront*]</div>
                     <div class="footer">{{footer}}</div></div></div> 

  
  </body>
</html>

229 Posts

ejcross Reply #2, 19 years, 5 months ago

One thing I notice right away with your stylesheet is that you have 3 #horizon available. If you are wanting to seperate them for different browsers, you might try a seperate stylesheet or other fixes, as right now, they are all 3 available to each browser.

I would also strongly suggest that you first validate your CSS, as there are errors in it per my validation attempt, and also validate your HTML.

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

I am still looking into it for you to see what else I can find.

Visit the most beautiful girl in the world...my daughter! http://www.natalie-update.org

http://ejcross.com | http://allaboutasiah.blogspot.com | http://www.squidoo.com/allaboutasiahepperson

229 Posts

ejcross Reply #3, 19 years, 5 months ago

There are two errors in the CSS file, around line 49 and 76, where there are ; instead of :

Try fixing those and see if that helps.

Also, being newer to CSS, and as you have learned, always design for Firefox or another standards compliant browser, then fix for IE. THis is the easiest way to do design. Your site looks nice so far in FF. I use it and strongly recommend it.

If you don’t have it for FF, check out Chris Pedericks Web Developer Toolbar. This thing is INVALUABLE as far as helping determine layout, etc. and has a ton of neat features:

http://chrispederick.com/work/webdeveloper/

Another good site to help you optimize your CSS file is clean CSS:

http://www.cleancss.com/

This will help clean up some redundancy in your CSS file. Meantime, you have alot of duplicate items, such as the margin and padding set to 0 on most items.

I have recently begun to use a default ’zero’ CSS line or two to remove all default paddings and margins on everything, and it works great!

Add this to the top of your main CSS file and then you can remove all of the margin and padding 0 lines:

* { padding:0; margin:0;}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address {
margin:0;
padding:0;
font-weight: normal;
}

Hope some of this helps, and I’ll keep looking at the IE6 issue.

Visit the most beautiful girl in the world...my daughter! http://www.natalie-update.org

http://ejcross.com | http://allaboutasiah.blogspot.com | http://www.squidoo.com/allaboutasiahepperson

1,024 Posts

Frank Reply #4, 19 years, 5 months ago

I fixed the issue and then read your reply. Only one remaing is the IE 4 Mac, but I m affraid I willleave it that way.
Issue indeed was a missing ;

there will probably be loads of unneccesary DIV´s in my CSS. But I hope to learn that comes time. This page here is "done" exept for some alignment and content. But the last one is not my task, I love Modx CMS, customers turn now!

Thanks for your advise wilcertainly try to create cleaner CSS and I optimized through: http://www.cssoptimiser.com
Glad this one is done, next challenge is waiting,

best, Frank.

229 Posts

ejcross Reply #5, 19 years, 5 months ago

Glad you were able to get it working! Keep working and googling for CSS stuff, and it will come a lot easier over time.

Best MODx wishes!

Visit the most beautiful girl in the world...my daughter! http://www.natalie-update.org

http://ejcross.com | http://allaboutasiah.blogspot.com | http://www.squidoo.com/allaboutasiahepperson

1,024 Posts

Frank Reply #6, 19 years, 5 months ago

thought I ´d let you know. Been able to replicate the error, one of the floating elements inside the wrapper container had a position: fixed. Ie explodes on that instruction, that is the page does. Changing it to absolute, and all is OK.

#descriptcontainer {
	float: left;
	display: inline;
      
/*was position: fixed; */
	
               position: absolute;
	
margin-top: 100px;
	margin-left: 554px;
	width: 300px;
	height: 330px;
	background-color: transparent;
	overflow: hidden;
	text-decoration: none;
}