13 replies [Last post]
want2learncss
Offline
newbie
Last seen: 17 years 15 weeks ago
Joined: 2005-06-15
Posts: 4
Points: 0

i runs good in other browses except IE. can anyone provide some helpful comments please?

on other browsers the menu is correctly displayed to the right, with the content in the center and header on top. but if i open it with internet explorer the menu will overlap the content, they dont position correctly its all a big mess

<html>
<head>
<title> three column layout </title>
<style type  ="text/css">
#header {
        
	padding: 10px;
	background: #ccc;
	height: 100px;
         }

#content {
           position:absolute;
            top:120px;
            right:50px;
            left:300px;
            font-family:'bookman old style';
            border-top:1px solid #B2BCC6;
            color:#2A4F6F;
           }

#navigation {
                 
               position:absolute;
               left:5px;
               }

#navigation ul {
                  
                 
                 background-color:rgb(99% 46% 34%);
                 list-style:none;
               }

#navigation ul li {
                     font-family:'bookman old style';
                     font-size:70%;
                  }



</style>
</head>
<body>
<div id = "header">
<h1>header<h1>
</div>
<div id = "navigation">
<ul>
<li><a href ="#">Home Page</a></li>
<li><a href ="#">Travel and Tourism</a></li>
<li><a href ="#">Entertainment</a></li>
<li><a href ="#">Discussion Board</a></li>
<li><a href ="#">Contact us</a></li>
</ul>
</div>
<div id = "content">
<h1>center content </h1>
<p>ashdjahsdjkhsajdhasjdhjaskhdkjahskjdhaskjdhakjshdkjashdkjahskjdhaskjdhjsadh
askdhakjshdkjsahdkjashdkjahsdkjahskjdhaskjhdkjsahdkjashdkjahsdkjahsdkjashdkjahskjd
askhdkjsahdkjashdkjaslhkjdhsakjdhsakjdhaskjdhaskjdhakjsdhkjsahdkjsahdkjashdjskahd
ajshdlkjashdkjashdkjashdkjashdkjalhskjdlahskjdhsakjdhsakjdlhakjsdlhkjsalhdkjsalhdkj</p>
<p>ashdjahsdjkhsajdhasjdhjaskhdkjahskjdhaskjdhakjshdkjashdkjahskjdhaskjdhjsadh
askdhakjshdkjsahdkjashdkjahsdkjahskjdhaskjhdkjsahdkjashdkjahsdkjahsdkjashdkjahskjd
askhdkjsahdkjashdkjaslhkjdhsakjdhsakjdhaskjdhaskjdhakjsdhkjsahdkjsahdkjashdjskahd
ajshdlkjashdkjashdkjashdkjashdkjalhskjdlahskjdhsakjdhsakjdlhakjsdlhkjsalhdkjsalhdkj</p>

</div>

</body>
</html>

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

why wont this display on IE corectly??

Sigh.

You're missing the most important part of the code, the DOCTYPE. Withou it, IE is throwin into Quirks mode and renders as it wants.

Visit:

http://www.alistapart.com/stories/doctype/

Verschwindende wrote:
  • CSS doesn't make pies

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 30 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

why wont this display on IE corectly??

Your also looking for problems with the absolute positioning of major divisions.

want2learncss
Offline
newbie
Last seen: 17 years 15 weeks ago
Joined: 2005-06-15
Posts: 4
Points: 0

why wont this display on IE corectly??

thepineapplehead wrote:
Sigh.

You're missing the most important part of the code, the DOCTYPE. Withou it, IE is throwin into Quirks mode and renders as it wants.

Visit:

http://www.alistapart.com/stories/doctype/

thank for the reply, I included the doctype but it did not work im still having the same problem.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

why wont this display on IE corectly??

You need to take note of wolfcry's comment, absolute positioning is a no no for page layout unless you understand all the issues, you need to track down a basic two column float layout.

As an exercise try removing the right position from the #content; in theory you can specify more than two directions in practise you can't.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

want2learncss
Offline
newbie
Last seen: 17 years 15 weeks ago
Joined: 2005-06-15
Posts: 4
Points: 0

why wont this display on IE corectly??

Hugo wrote:
You need to take note of wolfcry's comment, absolute positioning is a no no for page layout unless you understand all the issues, you need to track down a basic two column float layout.

As an exercise try removing the right position from the #content; in theory you can specify more than two directions in practise you can't.

Hugo.

I took note of his comment and was going to reply but i dont think i even understand what absolute position even is

I removed the right position from the #content but it didnt fix anything.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

why wont this display on IE corectly??

If you do not understand what position absolute is, how comes your using it, have you picked this layout up from somewhere ?

If so then you should really Google for two or three column float layouts, as floated layouts are the usual way of laying out .

In fact at this stage it's best to start over with a more stable design, here are a few examples of float layouts that you could use.

http://www.maxdesign.com.au/presentation/liquid/

http://www.positioniseverything.net/ordered-floats.html

http://www.alistapart.com/articles/negativemargins/

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

want2learncss
Offline
newbie
Last seen: 17 years 15 weeks ago
Joined: 2005-06-15
Posts: 4
Points: 0

why wont this display on IE corectly??

Hugo wrote:
If you do not understand what position absolute is, how comes your using it, have you picked this layout up from somewhere ?

If so then you should really Google for two or three column float layouts, as floated layouts are the usual way of laying out .

In fact at this stage it's best to start over with a more stable design, here are a few examples of float layouts that you could use.

http://www.maxdesign.com.au/presentation/liquid/

http://www.positioniseverything.net/ordered-floats.html

http://www.alistapart.com/articles/negativemargins/

Hugo.

the reason im using absolute position is because I know its a way to position elements in a page, i did read a couple of book on css , guess i need to go back and read more about absolute positioning. thanks for those links man, i'll definately give them a look. but can someone please tell me why my page isnt working? i really need to understand the reason that its not aligning properly in IE, but in other browsers its perfectly fine.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

why wont this display on IE corectly??

Quote:
guess i need to go back and read more about absolute positioning.

What you need to do is ditch absolute positioning RIGHT NOW and read up on relative positioning.

Sorry if I sound harsh, but you'll only get more problems.

Also, which doctype did you use?

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

why wont this display on IE corectly??

This is how you SHOULD be doing it:

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

<html dir="ltr">
<head>
<title> three column layout </title>

<style type="text/css">
<!--
body {
	font-family: "Bookman Old Style", serif;
}

#header {
	padding: 10px;
	background: #ccc;
	height: 100px;
}

#content {
	float: right;
	border-top: 1px solid #B2BCC6;
	color:#2A4F6F;
}

#navigation {
	float: left;
	margin-left: 5px;
}

#navigation ul {
	background-color: rgb(99, 46, 34 );
	list-style:none;
}

#navigation ul li {
	font-size:70%;
}


-->
</style>
</head>

<body>

<div id = "header">
<h1>header<h1>
</div>

<div id = "navigation">
	<ul>
		<li><a href ="#">Home Page</a></li>
		<li><a href ="#">Travel and Tourism</a></li>
		<li><a href ="#">Entertainment</a></li>
		<li><a href ="#">Discussion Board</a></li>
		<li><a href ="#">Contact us</a></li>
	</ul>
</div>

<div id ="content">

<h2>center content </h2>
<p>ashdjahsdjkhsajdhasjdhjaskhdkjahskjdhaskjdhakjshdkjashdkjahskjdhaskjdhjsadh
askdhakjshdkjsahdkjashdkjahsdkjahskjdhaskjhdkjsahdkjashdkjahsdkjahsdkjashdkjahskjd
askhdkjsahdkjashdkjaslhkjdhsakjdhsakjdhaskjdhaskjdhakjsdhkjsahdkjsahdkjashdjskahd
ajshdlkjashdkjashdkjashdkjashdkjalhskjdlahskjdhsakjdhsakjdlhakjsdlhkjsalhdkjsalhdkj</p>
<p>ashdjahsdjkhsajdhasjdhjaskhdkjahskjdhaskjdhakjshdkjashdkjahskjdhaskjdhjsadh
askdhakjshdkjsahdkjashdkjahsdkjahskjdhaskjhdkjsahdkjashdkjahsdkjahsdkjashdkjahskjd
askhdkjsahdkjashdkjaslhkjdhsakjdhsakjdhaskjdhaskjdhakjsdhkjsahdkjsahdkjashdjskahd
ajshdlkjashdkjashdkjashdkjashdkjalhskjdlahskjdhsakjdhsakjdlhakjsdlhkjsalhdkjsalhdkj</p>

</div>

</body>
</html>

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

why wont this display on IE corectly??

It isn't perfectly fine in other browsers, granted it's worse in IE but that's hardly surprising.
Why doesn't it work ? for too many reasons to go into, but things like lack of width do not help try setting the width on the content to 65% and right:0;
the ul has a margin in IE that is forcing it away from the left edge set margin-left:0; in the ul, long unbroken words cause problems these are all things that you will need to start to read up on such as layout flow, box model, default behavior of elements, IE quirks etc..
Most important though do not take this layout any further find a float layout and rework things and then post it up when you run into difficulties and we can help, but this style of layout isn't worth the agony.
Hugo

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

why wont this display on IE corectly??

Quote:
Most important though do not take this layout any further find a float layout

Like my one there Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

why wont this display on IE corectly??

Like the one posted by TPH, on the sly, slipped in when I wasn't paying attention, I'm not the most observant chap today Smile oh, where are your float widths ?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

why wont this display on IE corectly??

I don't deal with floats, so I don't know too much about it.

Verschwindende wrote:
  • CSS doesn't make pies