Okada Design Blog » IE/IE6/IE7 http://www.okadadesign.no/blog Welcome to Okada Design Web Development Blog Wed, 11 Jan 2012 23:21:51 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Three column layout which works with long contents in any column http://www.okadadesign.no/blog/ie/three-column-layout/ http://www.okadadesign.no/blog/ie/three-column-layout/#comments Tue, 23 Mar 2010 11:56:45 +0000 shinokada http://www.okadadesign.no/blog/?p=1684 I guess some CSS gurus must have done it before. But after browsing a maxdesign’s page, I decided to modify one of their layout. I wanted to improve in two aspects. The main content comes before the left column. This is semantically better. And I also want to allow all three columns [...] Related posts:
  1. Organizing a long list with jQuery: ihwy version
]]>


I guess some CSS gurus must have done it before. But after browsing a maxdesign’s page, I decided to modify one of their layout. I wanted to improve in two aspects. The main content comes before the left column. This is semantically better. And I also want to allow all three columns to have a long content without problem.

This layout has one image and one conditional style for IE6.


If you see this original layout with a long content on the right column, you can see the problem at the bottom. And the left content comes before the main content.

Solution

The following code is tested on IE6/7/8, FF3.6, Opera 10.10, Safari 4.0.5.

Demo

Long main content.

Long left content.

Long right content.

And here is the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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" />
	<title>3 Column Layout</title>
	<style type="text/css">

	#container
{
	margin: 0 auto;
	width: 1000px;
	background: #fff;
}

#header
{
	background: #ccc;
	padding: 20px;
}

#header h1 { margin: 0; }

#navigation
{
	float: left;
	width: 1000px;
	background: #333;
}

#navigation ul
{
	margin: 0;
	padding: 0;
}

#navigation ul li
{
	list-style-type: none;
	display: inline;
}

#navigation li a
{
	display: block;
	float: left;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }

#content-container
{
	float: left;
	width: 1000px;
	background: #fff url(layout-three-fixed-background.gif) repeat-y 100% 0;
	position:relative;
}

#section-navigation
{
	float: left;
	width: 160px;
	padding: 20px 0;
	margin: 0 20px;
	display: inline;
	margin-left: -710px;
}

#section-navigation ul
{
	margin: 0;
	padding: 0;
}

#section-navigation ul li
{
	margin: 0 0 1em;
	padding: 0;
	list-style-type: none;
}

#content
{
	float: left;
	width: 500px;
	padding: 20px 0;

	margin-left:200px;
	padding-left: 30px;
}

#content h2 { margin: 0; }

#aside
{
	float: right;
	width: 200px;
	padding: 20px 0;
	margin: 0 20px 0 0;
	display: inline;

}

#aside h3 { margin: 0; }

#footer
{
	clear: both;
	background: #ccc;
	text-align: right;
	padding: 20px;
	height: 1%;
}
	</style>

	<!--[if IE 6]>
<style type="text/css">

#content
{
	margin-left:100px;
	padding-left: 30px;
}
</style>
<![endif]-->

</head>

<body>
<div id="container">
	<div id="header">
		<h1>
			Site name
		</h1>
	</div>
	<div id="navigation">
		<ul>
				<li><a href="three_column_1.html">Three column 1</a></li>
				<li><a href="three_column_long_left.html">Three column long left</a></li>
				<li><a href="three_column_long_right.html">Three column long right</a></li>
				<li><a href="three_column.html">Three column 2</a></li>
			</ul>
	</div>
	<div id="content-container">
		<div id="content">
			<h2>
				This one has the main content first.
			</h2>
			<p>
				Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			</p>
			<p>
				Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</p>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
			</p>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
			</p>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
			</p>
			<p>
				Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
			</p>
		</div>
		<div id="section-navigation">
			<ul>
				<li><a href="#">Section page 1</a></li>
				<li><a href="#">Section page 2</a></li>
				<li><a href="#">Section page 3</a></li>
				<li><a href="#">Section page 4</a></li>
			</ul>

		</div>

		<div id="aside">
			<h3>
				Aside heading
			</h3>
			<p>
				Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
			</p>

		</div>

	</div>
	<div id="footer">
			Copyright © Site name, 20XX
		</div>
</div>

</body>

</html>

Related posts:

  1. Organizing a long list with jQuery: ihwy version

]]> http://www.okadadesign.no/blog/ie/three-column-layout/feed/ 3 How to install and control IIS on Vista http://www.okadadesign.no/blog/ie/how-to-install-and-control-iis-on-vista/ http://www.okadadesign.no/blog/ie/how-to-install-and-control-iis-on-vista/#comments Mon, 21 Sep 2009 18:40:00 +0000 shinokada http://www.okadadesign.no/blog/?p=179

Here you can find how to install IIS on Vista. You don’t need to install VPASP, but you can install other application. However if you need to use a database, then you need to research a bit more.

After installing IIS, you can control it by start and right click computer and [...] Related posts:

  1. How to install Django in Python on Windows Vista
  2. How to install Save-for-Web in Gimp
]]>

IIS

Here you can find how to install IIS on Vista. You don’t need to install VPASP, but you can install other application. However if you need to use a database, then you need to research a bit more.

After installing IIS, you can control it by start and right click computer and then click Manage. Click Services and Applications. Then click Internet Information Services (IIS) Manageer. You can finc a stop and start button on the right.

If you prefer not to start IIS automatically, then click Services. Find World Wide Web Publishing Service. Click it and select Manual in the Startup type.

Related posts:

  1. How to install Django in Python on Windows Vista
  2. How to install Save-for-Web in Gimp

]]> http://www.okadadesign.no/blog/ie/how-to-install-and-control-iis-on-vista/feed/ 0 IE 6 hacks, tips and blocker tutorials http://www.okadadesign.no/blog/ie/ie-6-hacks-tips-and-blocker-tutorials/ http://www.okadadesign.no/blog/ie/ie-6-hacks-tips-and-blocker-tutorials/#comments Wed, 18 Mar 2009 07:41:00 +0000 shinokada http://www.okadadesign.no/blog/?p=41 I collected a number of IE hacks tutorials over the years. Here is the list which you can find great tips for your websites.

IE6 hacks and tips1. 10 Fixes That Solve IE6 Problems2. Obituary For IE63. Feed IE 6 with a basic stylesheet4. IE CSS Bugs That’ll Get You Every Time5. Defensive [...] Related posts:

  1. z-index problem with IE
  2. Tips for Ubuntu 10.04
  3. New cross-browser testing from Microsoft
]]>


I collected a number of IE hacks tutorials over the years. Here is the list which you can find great tips for your websites.

IE6 hacks and tips
1. 10 Fixes That Solve IE6 Problems
2. Obituary For IE6
3. Feed IE 6 with a basic stylesheet
4. IE CSS Bugs That’ll Get You Every Time
5. Defensive coding and CSS: Preventing the most common bugs
6. Closing the gap between list items in IE
7. 5 Easy Ways to Tackle IE6’s Transparency Issues
8. Don’t kick your visitors’s IE 6 and below out of your css layout
9. Let Internet Explorer 6 Behave Like Internet Explorer 7

IE6 Blocker scripts.
One way is to educate your audience by suggesting to a better browsers.

1. IE 6 Blocker Script
2. A simple IE6 upgrade script

Demo for above script are here. You have to use IE6 to see the effects though.
IE 6 Blocker Script Demo
A simple IE6 upgrade script Demo

Tools
1. Internet Explorer Application Compatibility VPC Image
2. IE6 standalone
3. IE tester
4. netrenderer

If you know more, please add them to the comment.

Related posts:

  1. z-index problem with IE
  2. Tips for Ubuntu 10.04
  3. New cross-browser testing from Microsoft

]]> http://www.okadadesign.no/blog/ie/ie-6-hacks-tips-and-blocker-tutorials/feed/ 0 z-index problem with IE http://www.okadadesign.no/blog/ie/z-index-problem-with-ie/ http://www.okadadesign.no/blog/ie/z-index-problem-with-ie/#comments Tue, 10 Feb 2009 17:51:00 +0000 shinokada http://www.okadadesign.no/blog/?p=17 This article helped me how to solve IE z-index problem. There is a good comment at the end as well.Title is called Squish the Internet Explorer Z-Index Bug and written by Brenelz Web Solutions.http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/

I had jquery dropdown menu from www.kriesi.at and jquery.innerfade.js on a home page. The dropdown menu goes behind the [...] No related posts.]]>

This article helped me how to solve IE z-index problem. There is a good comment at the end as well.
Title is called Squish the Internet Explorer Z-Index Bug and written by Brenelz Web Solutions.
http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/

I had jquery dropdown menu from www.kriesi.at and jquery.innerfade.js on a home page. The dropdown menu goes behind the slideshow in IE 6/7.
I have forgotten about it and here comes a rescue. I added z-index: 3000 to not closest parent but 2 levels up in my case. Thanks.

UPDATE
First, make sure the elements who has z-index property also has position:relative or position:absolute.

Read more

http://www.tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

http://livebinders.com/play/play?id=1808

No related posts.

]]> http://www.okadadesign.no/blog/ie/z-index-problem-with-ie/feed/ 0 Gracefully Degradable jquery Drop-Down-Menu http://www.okadadesign.no/blog/ie/gracefully-degradable-jquery-drop-down-menu/ http://www.okadadesign.no/blog/ie/gracefully-degradable-jquery-drop-down-menu/#comments Mon, 26 Jan 2009 07:08:00 +0000 shinokada http://www.okadadesign.no/blog/?p=9 There are many jquery menus. However I found that some are not gracefully degradable and some don’t work in IE6 etc.

I found good one with mootools. Then I wanted to change it to jquery for other reasons.

I found two jquery menus for my purpose. Both of them works without javascript enabled [...] Related posts:

  1. jQuery menu- snook version
  2. Animated menu using jquery and sprite
  3. "How to Make a Smooth Animated Menu with jQuery" by Zach Dunn
]]>

There are many jquery menus. However I found that some are not gracefully degradable and some don’t work in IE6 etc.

I found good one with mootools. Then I wanted to change it to jquery for other reasons.

I found two jquery menus for my purpose. Both of them works without javascript enabled and in IE6.

http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery
and
http://users.tpg.com.au/j_birch/plugins/superfish/

I decided to use the first one since it does not need other js as the second one and it serves my purpose.

This menu does not look fancy, because of color, but I used this for some websites. www.okadadesign.no www.designvalg.no and other websites.

Related posts:

  1. jQuery menu- snook version
  2. Animated menu using jquery and sprite
  3. "How to Make a Smooth Animated Menu with jQuery" by Zach Dunn

]]> http://www.okadadesign.no/blog/ie/gracefully-degradable-jquery-drop-down-menu/feed/ 0