Make IE8 Display in IE7 Compatibility Mode

admin — Tue, 04 May 2010 09:19:43 +0000

Browser compatibility is realy pain for css coders,this is a quickly to fix the the pages have problems IE8 while looks good in IE7,just following line in the tag on the page,

but some one failed while others success,why?

the key of use

The key of use this is add this tag before all the css so the IE8 browser can know h, i need display this page in IE7 Compatibility Mode.

How to code a w3c valid 2 columns xhtml layout–step 2

admin — Fri, 11 Dec 2009 15:39:39 +0000

In the first part,we aready done the 2 columns layout frame.
Let’s go on, add elements to each sections also style it and finish the html template.

First the header , usually the header include the blog name and description sometimes maybe have a login box or search box . ok , let’s add it .

    id="header"> 
       id="headtxt">
       id="blogname">  id="A1" href='http://www.brightyoursite.com'> Bright Your Site >> 
       id="blogdesc">Professional Css Xhtml business -- w3c valid css xhtml 2 columns layout >  
      >
       id="searchbox"> class="inputbox"  />   id="gobtn"  type="button" />> 
  >

Check the codes,you can see we add blog name ,blog description and a search box.the blog name is the most important,that’s why i use h1 tag (for SEO optimise) so dose blog description.Usually,the blog name , description should be the left and the search box right.ok,let’s see how it be styled in the css .

/*-- begin header --*/
#header
{
  height:100px;
}
 
#headtxt
{
	float:left;
}
#blogname
{
   padding:0px; 
   margin:20px 0px 0px 15px; 
}
#blogname a
{
	text-decoration:none;
	color:#d4242b;
	font-size:28px;
}
#blogdesc
{
	font-size:14px;
	color:#333;
	margin:15px 0px 0px 15px; 
}
#searchbox
{
	float:right; 
	padding:0px;
	vertical-align:middle;
	margin:30px  5px 0px 0px;
	height:30px;
	line-height:30px;
	border:solid 1px #900;
 
} 
.inputbox
{
	width:150px;
	border:0px;
	height:20px;
	padding:5px 0px;
	float:left;
	margin:0px 0px 0px 2px;
	font-size:13px;
	font-size:16px;
	color:#000;
 
}
#gobtn
{
    background:url(images/go.png)  no-repeat;
    border:0px;
     width:47px;
     height:30px;
     overflow:hidden;
}
/*-- end of header --*/

The most important part is the Main Content, in this section we will list all articles here .
it’s simple and easy to code .Let’s see the html codes:

  class="item_head">
     class="item_header_text">> href=''>title here>>>	
 >
  class="item_description">
   content here
   class="tags" >Tags:> tags here>>
   class="author">Gepost door >admin> in: >tags here> >
 >

the post title is the essence of the post , so we need h1 tag it ( you know why , check the header section ) . for the content we just need need add space , font-size , color … . Of course , we also can add post date , tags , author … in the list . the style codes :

/*-- begin main content -- */ 
#maincontent
{
   width:580px; 
   float:left; 
   margin-left:20px;
}
.item_head
{
	border-bottom:solid 1px #8d0b03;
	height:33px;
    margin-top:20px;
}
.item_header_text
{  
font-size:12px;
font-weight:bold;
line-height:36px; 
display:inline-block;
float:left;
background:url(images/tlbg.png) repeat-x; 
}
.item_header_text a
{
  padding:0px 10px;  
  display:inline-block;
  background:url(images/tacorner.png) no-repeat right top;
  font-size:14px;
  font-weight:600;
  color:#fff;
  text-decoration:none;
}
.item_header_text h1
{ 
  display:inline-block;
  background:url(images/tbefore.png) no-repeat  left top;
  padding:0px;
  margin:0px;
}
.item_description
{
	color:#333333;
	line-height:18px;
}
.item_description p
{
	margin:5px 0px 10px 0px;
	padding:0px;
}
.tags ,.author
{
	color:#696969;	 
	 line-height:16px; 
}
.author
{
   height:25px;
}
.tags span ,.author span
{
	color:#9a1209;	
}
.tags  a,.author span a
{
	 color:#9a1209;	
	 text-decoration:none;
}
/*-- end of main content --*/

The right content aways are Archives , Categories , Blogroll …. .We can do it just use ul li list .

>
    >
     >Links>
     >
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     >
  >
  >
     >Links>
     >
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     > href=''>birghtyoursite>>
     >
  >
  >
   >Tags>
   >Ajax> >Cat> >Wordpress> >Template>
  >
  >

The css is also simple

/*-- begin right content --*/
#rightcontent
{
   width:240px;
   float:right; 
   margin-right:10px;
}
#rightcontent ul
{ 
	padding:0px;
	margin:0px;	
	color:#000;	 
	margin-top:10px;
}
 
#rightcontent ul h2
{ 
	 margin:0px;
	 padding:0px;
}
#rightcontent  li 
{
    height:auto;
	line-height:25px;
 
}
 
li
{
  list-style :none;   
}
a
{
    text-decoration:none;
}
#rightcontent  li ul li
{  
	background:url(images/arrow.png) no-repeat left 5px;   
	padding:0px 0px 0px 13px;
	list-style:none;
	line-height:18px;
}
#rightcontent  ul li img
{
	vertical-align:middle;
}
#rightcontent ul  li h2
{
	margin:0px 0px 5px 0px;
	padding:0px;
	font-size:14px;
	line-height:30px;
	background:url(images/dot.jpg)  repeat-x left bottom;
 
}
#rightcontent  ul li a
{
	 color:#9a1209;	
	 font-size:12px;
	 text-decoration:none;
	 line-height:20px;
	 font-weight:600;
	 font-weight:normal;
	 vertical-align:middle;
}
/*-- end of right content --*/

At last , add some links and copyright to the footer to finish it.

 id="footer">
     href='/'>Home> |   href='/'>Portfolio> |  href='/'>Services> |  href='/'>Projects> |  href='/'>Articles> |  href='/'>About> |  href='/'>Contact>
    > © 2009 www.brightyoursite.com All Rights Reserved.>
  >

/*-- begin footer --*/
#footer
{
   height:82px; 
   clear:both;
   text-align:center;
   background:url(images/footer_bg.png) repeat-x;
   line-height:35px;
   vertical-align:middle;
   font-weight:bold;
   color:#E9E9E9;  
   margin-top:20px;
}
#footer a
{ 
   color:#E9E9E9;   
   text-decoration:none; 
   display:inline-block;
    margin:0px 5px;
}
#footer h1
{ 
   font-size:12px;
   font-weight:lighter;
   padding:0px;
   margin:0px;
}
/*-- end of footer --*/

Up to now,we add most of the elements.let’s see the final result click here .

Now, you may notice there is important part missed.The Menu. This is also important to a site .there is tons of menus . So next lession we will introduce the ul li css seo fridenly menu . Click here to go directly:

The simple ul li css SEO friendly horizontal menu

And

ul li css none-js SEO friendly sub-menu

birghtyoursite » xhtml css

Make IE8 Display in IE7 Compatibility Mode

the key of use

How to code a w3c valid 2 columns xhtml layout–step 2