IE6 and IE7 – layout question

@dcanupDec 29.2006

I know how to use css for basic “text layout”, but I am now trying to expand my knowledge so that I can use it for “website layout”. I am tired of using tables….. I can get it to look like i want it to in Firefox (the browser i use…) but it looks <b>nothing</b> like it should in IE.

After some googling I think the problem is that I need “holly hack” so it will work in IE6, but I know that that will not work in IE7. So how can I get is so it will work in both IE6 and IE7?

[CODE]<!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> <meta http-equiv=”content-type” content=”text/html;charset=utf-8″ /> <title>Layout test 1</title> <style type=”text/css”> #top { position: absolute; left: 1%; width: 98%; top: 1%; height: 10%; background: #ffffff; border: 1px solid #000000; }

#left { position: absolute; left: 1%; width: 20%; top: 12%; height:76%; background: #ffffff; border: 1px solid #000000;}

#center { position: absolute; left: 22%; right: 22%; top: 12%; height:76%; background: #ffffff; border: 1px solid #000000;}

#right { position: absolute; right: 1%; width: 20%; top: 12%; height:76%; background: #ffffff; border: 1px solid #000000; }

#bottom { position: absolute; left: 1%; width: 98%; bottom: 1%; height: 10%; background: #ffffff; border: 1px solid #000000; }

body { background: #98AFC7 } </style> </head>

<body> <div id=”top”> test </div>

<div id=”left”> test </div>

<div id=”center”> test </div>

<div id=”right”> test </div>

<div id=”bottom”> <center> <a href=”http://validator.w3.org/check?uri=referer”> <img src=”http://www.w3.org/Icons/valid-xhtml10″ alt=”Valid XHTML 1.0 Transitional” height=”31″ width=”88″ /> </a> </center> </div> </body>

</html>[/CODE]

to post a comment

CSS

11 Comments(s) _↴

@kiwibritDec 29.2006 — #Put your styling in an external style sheet - say general.css

Put the styling you would have put for you IE 6 or less in another external style sheet - say iebasic.css.

Call them up in the <head> section of your web page like so:

[code=html]
 <link href="general.css" rel="stylesheet"type="text/css" media="screen">
 <!--[if lte IE 6]>
 <link rel="stylesheet" href="iebasic.css" type="text/css">
 <![endif]-->
 [/code]

You are then using a conditional statement which IE 6 (or less) will see - and other browsers will ignore. Note that the conditional statement calling up the IE styling variation follows the link calling up the general external style sheet.

Using external style sheets like this saves you having to write the styling in full for each page in your site.

More on external style sheets [url=http://www.w3schools.com/css/css_howto.asp]in this W3schools page[/url].

You can use includes to bring in the above lines of code - and anything else that is standard - reducing you coding per page even further. They can make updating easier, too.

@dcanupauthorDec 29.2006 — #Ok.... to make it easier for you to "debug" I put it all on one page.....plus you could just copy and paste it so you can get a idea of what I am going for. I now see what I should have done and I will do it below.

Sorry for the size of this post...but I want to make sure that this time people get all the information that they need. I have two questions..

1) How to get "layout.css" to work in IE6....I do not see what part of the "css code" would not work.

2) I can not test it in IE7 but if it does not look right in IE6 I would not think that it would in IE7....So how do I get it to work in IE7 too?

[B]NOTES[/B]

1) This is "layout.css"

2) It works for Firefox

3) It does not work for IE6 (I do not know how to get it to work).

4) I use windows 2000, so I do not know what it looks like on IE7.

[CODE]#top {
 position: absolute;
 left: 1%;
 width: 98%;
 top: 1%;
 height: 10%;
 background: #ffffff;
 border: 1px solid #000000;
 }
 
 [CODE]#left {
 position: absolute;
 left: 1%;
 width: 20%;
 top: 12%;
 height:76%;
 background: #7A5DC7;
 border: 1px solid #000000;}
 
 #center {
 position: absolute;
 overflow: auto;
 left: 22%;
 right: 22%;
 top: 12%;
 height:76%;
 background: #ffffff;
 border: 1px solid #000000;}
 
 #right {
 position: absolute;
 right: 1%;
 width: 20%;
 top: 12%;
 height:76%;
 background: #7A5DC7;
 border: 1px solid #000000;
 }
 
 #bottom {
 position: absolute;
 left: 1%;
 width: 98%;
 bottom: 1%;
 height: 10%;
 background: #ffffff;
 border: 1px solid #000000;
 }[/CODE]

[B]NOTES[/B]

1) This is "format.css"

2) I like to be over organized when I design....so I use two external css the first is for the "text format" and the second is for the "page layout"

[CODE]
 p {
 font-family: Georgia;
 text-indent: 3%;
 padding: 2%;
 }
 [/CODE]

[B]NOTES[/B]

1) This is "index.html"

2) This is the test page that I am using just to get started with....

[CODE]
 <!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>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <title>Layout Test 1</title>
   <link rel="stylesheet" type="text/css" href="css/layout.css" />
   <link rel="stylesheet" type="text/css" href="css/format.css" /> 
  </head>
 
  <body>
 
   <div id="top">
   test
   </div>
 
   <div id="left">
   test
   </div>
 
   <div id="center">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam id lorem. Quisque ornare. Integer tristique condimentum nisi. Ut id tellus. Vestibulum sed leo vitae sapien adipiscing condimentum. Vestibulum purus felis, dapibus nec, pellentesque volutpat, porta ut, sem. Pellentesque purus diam, volutpat et, pretium at, ullamcorper vitae, lectus. Fusce blandit. Nulla consequat ligula a nunc. Aenean vel lacus. Vivamus varius. Maecenas ac felis. Donec sagittis mauris sit amet leo.</p>
 
   <p>Nam placerat arcu sit amet lacus blandit lobortis. Nam aliquam placerat pede. Etiam vestibulum eleifend nisi. Integer sed metus. Etiam mattis vehicula eros. Proin eu libero. Mauris sapien magna, posuere id, viverra sed, imperdiet ac, neque. Suspendisse auctor. Nullam vitae eros vel elit sodales imperdiet. Nulla facilisi. In sit amet lacus. Nam sagittis orci ac ligula luctus varius. Sed sit amet felis vel turpis ultricies imperdiet.</p>
 
   <p>Integer adipiscing diam nec libero. Duis est metus, dignissim ac, posuere vitae, porttitor nec, orci. Donec sed mauris in massa luctus imperdiet. Donec consectetuer elit quis libero. Morbi sed sem at enim pretium molestie. Donec urna ante, imperdiet vel, euismod sit amet, luctus eget, tortor. Nulla dictum. Curabitur pulvinar eros. Sed vitae purus. Nullam sem enim, vulputate eu, placerat id, dapibus vitae, libero. In hac habitasse platea dictumst. Nulla fringilla.</p>
 
   <p>Nunc dapibus, erat vel euismod suscipit, lectus sapien malesuada arcu, eget molestie leo magna pharetra tortor. Donec blandit, augue sed viverra consequat, quam sem venenatis urna, at interdum eros lacus at neque. Nam ac sem. Curabitur et enim. Pellentesque in dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla interdum, orci non pretium sollicitudin, est eros bibendum dui, vitae blandit turpis nisi vitae justo. Nam lacus neque, sollicitudin ac, pulvinar feugiat, blandit ut, pede. Integer auctor. Duis erat pede, accumsan egestas, laoreet id, tincidunt id, leo. Maecenas vitae nisl sit amet justo rutrum pellentesque. Suspendisse tincidunt, eros sit amet tincidunt viverra, libero nulla lacinia libero, eu tincidunt ante eros mollis nibh.</p>
 
   <p>Cras nonummy sagittis leo. Donec ac orci. Quisque sollicitudin, quam sed vulputate mollis, purus magna suscipit velit, quis consectetuer metus ligula non sapien. Vivamus dictum eleifend dolor. Donec nec risus. Donec volutpat ipsum eu libero. Aenean facilisis urna id ligula. Nam vitae risus. Morbi in nibh. In purus. Pellentesque nec purus. Suspendisse sit amet ligula interdum ligula viverra sodales. Aliquam ullamcorper urna sit amet magna. Nullam et augue.</p>
 
   </div>
 
   <div id="right">
   test
   </div>
 
   <div id="bottom">
   <center>
   <a href="http://validator.w3.org/check?uri=referer">
   <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" />
   </a>
   </center>
   </div>
 
  </body>
 
 </html>
 [/CODE]

@_Aerospace_Eng_Dec 29.2006 — #What is the deal with all of that absolute positioning? That is likely the cause of your problems. Just let things flow naturally. Remove the absolute positioning and use floats and margins when neccessary.

@dcanupauthorDec 29.2006 — #I do not see how I can let if flow naturally. If I take out the "position: absolute" then they just line up one right under the other. I took the time to make and upload screen shots so you can see what I need it to look like and what it looks like now.

I need five parts to my pages, it needs to look like this...the page its self can not scroll at all you have to [B]always[/B] see the "logo" and "footer" but the "body" does scroll...

[URL=http://imageshack.us]

[IMG]http://img117.imageshack.us/img117/5593/needsve2.jpg[/IMG][/URL]

This is how it looks with absolute in FireFox.....(it looks [B]just[/B] like I need it to)

[URL=http://imageshack.us]

[IMG]http://img171.imageshack.us/img171/4203/abffgi4.jpg[/IMG][/URL]

This is how it looks with absoulte in IE6....

[URL=http://imageshack.us]

[IMG]http://img47.imageshack.us/img47/2760/abie6fs0.jpg[/IMG][/URL]

This is how it looks with OUT absolute in FF...

[URL=http://imageshack.us]

[IMG]http://img109.imageshack.us/img109/5243/ffrb4.jpg[/IMG][/URL]

This is hot it looks with OUT absolute in IE6...

[URL=http://imageshack.us]

[IMG]http://img126.imageshack.us/img126/8342/ie6zi9.jpg[/IMG][/URL]

@kiwibritDec 30.2006 — #......... I can not test it in IE7 ......[/QUOTE]

Why not? If you are serious about web-authoring, you should download IE7 - it is becoming and will be the most popular internet browser. An author who cannot check his/her site in IE7 (which is better than IE6, but not totally standards compliant) is operating under a severe handicap.

@_Aerospace_Eng_Dec 30.2006 — #Why not? If you are serious about web-authoring, you should download IE7 - it is becoming and will be the most popular internet browser. An author who cannot check his/her site in IE7 (which is better than IE6, but not totally standards compliant) is operating under a severe handicap.[/QUOTE]
or not windows xp or an illegal copy of winxp.

@ray326Dec 30.2006 — #or not windows xp or an illegal copy of winxp.[/QUOTE]Or Linux under Wine.

http://www.tatanka.com.br/ies4linux/news/28

@dcanupauthorJan 02.2007 — #Why not? If you are serious about web-authoring, you should download IE7 - it is becoming and will be the most popular internet browser. An author who cannot check his/her site in IE7 (which is better than IE6, but not totally standards compliant) is operating under a severe handicap.[/QUOTE]

I am the graphic artist of a 501c3 (non-profit) organization. I know a little bit about web design.....but I make Zero money form this job. The entire network that we have setup uses Windows 2000. As of the release dates of IE7 Microsoft is not longer ordering ANY tech support of Windows 2000, so you know that means any updates to IE......like update to version seven.

But know one knows how to get got to work for IE6 and IE7 yet.... ?

@CentauriJan 03.2007 — #Suggest you have a look at http://www.cssplay.co.uk/layouts/index.html especially fixed layouts 3 and 4 - view page source to see how they are done.

Cheers

Graeme

@Paul_JrJan 03.2007 — #Or Linux under Wine.

http://www.tatanka.com.br/ies4linux/news/28[/QUOTE]
Or [url=http://www.microsoft.com/windows/ie/ie7/about/sysreqs/default.mspx]XP SP1[/url]

@dcanupauthorJan 03.2007 — #Suggest you have a look at http://www.cssplay.co.uk/layouts/index.html especially fixed layouts 3 and 4 - view page source to see how they are done.

Cheers

Graeme[/QUOTE]

Thank you for the link I will look into this......

SOVLED

Also in #CSS _↴

menu using css CSS modifications [RESOLVED] Trouble with lining thins up

Success!

Help @dcanup spread the word by sharing this article on Twitter...

Tweet This

IE6 and IE7 – layout question

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

IE6 and IE7 – layout question

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴