Problem using positioning can some explain why?

csphard · Apr 30, 2008

I am trying to learn positioning and wanted to know what does this display correctly in ie and not in firefox.

in ie the menu is right beside the container. In firefox 1 is on the left and the other is on the right.

Thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"

http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body
{
text-align: center;
color: white;
}
#container
{
width: 505px;
border: 10px solid black;
}

#header
{
position: relative;
background-color: #FF6600;
width: 505px;
height: 250px;
font-family: "Arial Black";
}
#myM
{
position: absolute;
background-image:url(images/m.png);
background-repeat: no-repeat;
height: 48px;
width: 57px;
top: 5px;
right: 20px;
}

h1 {
margin: 40px 0 0 0;}
span
{
font-family:"Arial Narrow";
}
#content
{
background-image:url(images/howie.jpg);
background-repeat:no-repeat;
height: 255px;
width: 505px;}
#footer
{
width: 505px;
height: 150px;
}
#menu
{
background-color: black;
position:absolute;
top: 200px;
right: 45px;
height: 400px;
}

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

#menu li
{
width: 200px;
padding: 10px 0 0 0;
}
#menu li a
{
color: white;
font-family: tahoma;
text-decoration: none;

}
#menu li a:hover
{
text-decoratioN:underline;
}
</style>
</head>

<body>
<div id="container">

<div id="header"><div id="myM"></div><h1>Come clap your hands,<br><span>--- stomp your feet ---- </span><br>and nourish your soul.</h1>
ssssssssssssssssssssssss.</div>
<div id="content"></div>
<div id="footer"></div>
</div>
<div id="menu">
<ul>
<li><a href="#">test1</a></li>
<li><a href="#">test1</a></li>
<li><a href="#">test1</a></li>
<li><a href="#">test1</a></li>
</ul></div>
</body>
</html>

Vragabond · Apr 30, 2008

I don't know what you mean by right and wrong place. Can you tell us more specifically where you expect the items to appear (and you're saying that they already appear in IE there) and where exactly they appear in FF (and make sure to note which element specifically you're talking about).

Given the information you have given us, I would expect the #menu element to:

- be positioned relative to the browser window (or the viewport)
- be positioned absolutely, thus not interacting with other elements on the page
- be positioned 200px from the top and 45px from the right side of the screen (viewport)
- be 400px high

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

csphard · Apr 30, 2008

My goal is to get the menu
to display to the right side
of the container. I wanted it
to touch the contain. like

http://www.csszengarden.com/?cssfile=/205/205.css&page=1

The black menu is supposed to
be like the gray menu

Since the menu is outside of the
container that I could position it
absolute to the viewport/browser

In ie it displays the way I want it to. the menu to the right
and touching the container on the
left

In ff the container looks like
it is floated left and the
menu is floated right.
With white space in between.

I hope this is clearer.

Howard

ChrisHunt · Apr 30, 2008

You've positioned the menu like this:

Code:

#menu
{
background-color: black;
position:absolute;
[b]top: 200px;
right: 45px;[/b]
height: 400px;
}

That puts the right hand side of the menu 45 pixels from the right edge of the document, which is dependent on how wide or narrow your browser window happens to be. Its left edge will be 200 pixels left of this, regardless of your #content div (absolute positioning takes it out of the document flow).

It's possible to get the effect you're after if you absolutely positioned the left edge of the menu instead, but I wouldn't do it that way. I think you'll find it both easier and more robust if you simply give both div#container and div#menu [tt]float:left[/tt].

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Problem using positioning can some explain why?

csphard

Programmer

Vragabond

Programmer

csphard

Programmer

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor