I am trying to position a division just to the right of another division which
When I try it in IE it work, in Netscap 4.2 it works. When I try it in Netscap 7.2, the second division is placed at the bottom of the first division.
Does the pos:aboslute, top and left css commands not work in Netscape 7....
Here is my code:
<html>
<head>
<title>Borgo - Special Quote (View/Update) Form </title>
<meta name="Microsoft Border" content="none">
<style>
div.top {
border: 1pt solid #c6c6c6;
/* background-color: #00FFCC */
}
div.left {
border: 1pt solid #c6c6c6;
font-style: normal;
font-family: "Times New Roman", Times, serif;
position: absolute;
top: 45 px;
width: 35px
/* height: 100px */
/* background-color: #00FFCC */
}
.posMiddle {
position: absolute;
left: 60 px;
top: 45 px;
width: 770 px;
border: 1pt solid #c6c6c6;
}
</style>
</head>
<body>
<div class="top">
TOP of Page hereh
<b> This should be the ttitle page on top </b>
</div>
<div align="left" class="left">
This should be menu side <br>
This is the second line now <br>
this is the third line <br>
this is the 4 third line <br>
this is the 5 third line <br>
this is the 6 third line <br>
this is the 7 third line <br>
this is the 8 third line <br>
</div>
<div class="posMiddle">
Middle of page <br>
Just to the right of the menu division
<table>
<tr>
<td> col-1 <td>
<td> col-2 <td>
<td> col-3 <td>
<td> col-4 <td>
<td> col-5 <td>
<td> col-6 <td>
</tr>
<tr>
<td> col-1 <td>
<td> col-2 <td>
<td> col-3 <td>
<td> col-4 <td>
<td> col-5 <td>
<td> col-6 <td>
</tr>
<tr>
<td> col-1 <td>
<td> col-2 <td>
<td> col-3 <td>
<td> col-4 <td>
<td> col-5 <td>
<td> col-6 <td>
</tr>
<tr>
<td> col-1 <td>
<td> col-2 <td>
<td> col-3 <td>
<td> col-4 <td>
<td> col-5 <td>
<td> col-6 <td>
</tr><tr>
<td> col-1 <td>
<td> col-2 <td>
<td> col-3 <td>
<td> col-4 <td>
<td> col-5 <td>
<td> col-6 <td>
</tr>
</table>
</div>
</body>
</html>
Any help is appreciated. Hate to fgo back and use a table in order to place my layoutIncorrect html does not work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Borgo - Special Quote (View/Update) Form </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Microsoft_Border" content="none">
<script type="text/javascript">
<!--
// all JavaScript here
//-->
</script>
<style type="text/css">
<!--
#top {
border: 1px solid #c6c6c6;
margin-bottom:5px;
/* background-color: #00FFCC */
}
#left {
border: 1px solid #c6c6c6;
font-style: normal;
font-family: "Times New Roman", Times, serif;
float:left;
overflow:hidden;
width: 35px
/* height: 100px */
/* background-color: #00FFCC */
}
#posMiddle {
float:left;
margin-left:5px;
width: 770 px;
border: 1px solid #c6c6c6;
}
-->
</style>
</head>
<body>
<div id="top">
TOP of Page hereh
<strong> This should be the ttitle page on top </strong>
</div>
<div id="left">
This should be menu side <br>
This is the second line now <br>
this is the third line <br>
this is the 4 third line <br>
this is the 5 third line <br>
this is the 6 third line <br>
this is the 7 third line <br>
this is the 8 third line <br>
</div>
<div id="posMiddle">
Middle of page <br>
Just to the right of the menu division
<table border="0" cellpadding="3" cellspacing="0" summary="">
<tbody>
<tr>
<td> col-1 <td>
<td> col-2 <td>
<td> col-3 <td>
<td> col-4 <td>
<td> col-5 <td>
<td> col-6 <td>
</tr>
<tr>
<td> col-1 <td>
<td> col-2 <td>
<td> col-3 <td>
<td> col-4 <td>
<td> col-5 <td>
<td> col-6 <td>
</tr>
<tr>
<td> col-1 <td>
<td> col-2 <td>
<td> col-3 <td>
<td> col-4 <td>
<td> col-5 <td>
<td> col-6 <td>
</tr>
<tr>
<td> col-1 <td>
<td> col-2 <td>
<td> col-3 <td>
<td> col-4 <td>
<td> col-5 <td>
<td> col-6 <td>
</tr><tr>
<td> col-1 <td>
<td> col-2 <td>
<td> col-3 <td>
<td> col-4 <td>
<td> col-5 <td>
<td> col-6 <td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Tutorials (<!-- m --><a class="postlink" href="http://www.w3schools.com/default.asp">http://www.w3schools.com/default.asp</a><!-- m -->)
html validator (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->)Something very similar to Fang's reply only it uses absolute positioning like you had originally:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Borgo - Special Quote (View/Update) Form </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
<!--
/* To keep the absolute positioning correct, remove and margins or padding
from the BODY tag. */
body {
margin: 0;
padding: 0;
}
div.top {
background-color: #00FFCC;
}
/* Border placed here in case you ever want to give .top dimensions. Read
up on the Standard Box Model. */
div.topBox {
border: 1pt solid #c6c6c6;
}
/* Removed the border from here. The 120px + 1px left border + 1px right
border gives you a standard box size of 122px. */
div.left {
background-color: #00FFCC;
/* font-style: normal; REMOVE THIS, FONT STYLES ARE NORMAL BY DEFAULT */
font-family: "Times New Roman", Times, serif;
position: absolute;
/* top: 45px; REMOVE THIS, .left AND .posMiddle ARE VERTICALLY POSITIONED
ACCORDING TO WHERE .top ENDS. */
/* 35px is too narrow for a menu. 120px is about as narrow as I'd go,
unless you're going to have all image navigation. Forget about NS 4.x.
It's old and outdated. */
width: 120px;
}
/* Because of the Standard CSS Box model, place any borders, padding and
margins for the left column in this element. */
div.leftBox {
border: 1pt solid #c6c6c6;
}
/* Removed the spaces between the number and the unit of measure. */
.posMiddle {
position: absolute;
/* Move this box left as many pixels as .left is wide */
left: 120px;
/* top: 45px; REMOVE THIS, .left AND .posMiddle ARE VERTICALLY POSITIONED
ACCORDING TO WHERE .top ENDS. */
width: 650px;
}
/* Same reason as div.leftBox */
.posMiddleBox {
border: 1pt solid #c6c6c6;
}
-->
</style>
</head>
<body>
<div class="top">
<div class="topBox">
TOP of Page here <strong>This should be the title page on top</strong>
</div>
</div>
<!-- Since Absolute positioning takes elements out of the normal flow and
creates a new flow (i.e. a layer) we can place the code for the middle
column before the left column code in your HTML document. Search engines
and screen readers like this better, often called Source-Ordered Columns.
-->
<div class="posMiddle">
<div class="posMiddleBox">
Middle of page <br>
Just to the right of the menu division
<table>
.
.
.
</table>
</div>
</div>
<div class="left">
<div class="leftBox">
<!-- A menu can be thought of as a list, so semantically mark up your
menu as an unordered list. -->
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Menu Item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Menu Item 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Menu Item 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Menu Item 4</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Menu Item 5</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Menu Item 6</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Menu Item 7</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Menu Item 8</a></li>
</ul>
</div>
</div>
</body>
</html>
The DOCTYPE at the beginning throws IE6 and Standards Browsers into standards mode where they more closely adhere to Web standards. I switched up the markup a bit to make it more meaningful. Your menu really is a list of items, so use an unordered list. Since you used absolute positioning, the order in which you write the left and middle column code is irrelevant. I moved the middle column before the left in the HTML document. This makes your page a little more search engine and screen reader-friendly.
Read the HTML and CSS comments in the source code for more details. You'll also want to check out the documentation on the Standard CSS Box Model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">http://www.w3.org/TR/CSS21/box.html#box-dimensions</a><!-- m -->).
Let us know if you have any other questions.Thanks guys. Just learning all this stuff now. I am an old mainframer, trying to learn all this new stuff
When I try it in IE it work, in Netscap 4.2 it works. When I try it in Netscap 7.2, the second division is placed at the bottom of the first division.
Does the pos:aboslute, top and left css commands not work in Netscape 7....
Here is my code:
<html>
<head>
<title>Borgo - Special Quote (View/Update) Form </title>
<meta name="Microsoft Border" content="none">
<style>
div.top {
border: 1pt solid #c6c6c6;
/* background-color: #00FFCC */
}
div.left {
border: 1pt solid #c6c6c6;
font-style: normal;
font-family: "Times New Roman", Times, serif;
position: absolute;
top: 45 px;
width: 35px
/* height: 100px */
/* background-color: #00FFCC */
}
.posMiddle {
position: absolute;
left: 60 px;
top: 45 px;
width: 770 px;
border: 1pt solid #c6c6c6;
}
</style>
</head>
<body>
<div class="top">
TOP of Page hereh
<b> This should be the ttitle page on top </b>
</div>
<div align="left" class="left">
This should be menu side <br>
This is the second line now <br>
this is the third line <br>
this is the 4 third line <br>
this is the 5 third line <br>
this is the 6 third line <br>
this is the 7 third line <br>
this is the 8 third line <br>
</div>
<div class="posMiddle">
Middle of page <br>
Just to the right of the menu division
<table>
<tr>
<td> col-1 <td>
<td> col-2 <td>
<td> col-3 <td>
<td> col-4 <td>
<td> col-5 <td>
<td> col-6 <td>
</tr>
<tr>
<td> col-1 <td>
<td> col-2 <td>
<td> col-3 <td>
<td> col-4 <td>
<td> col-5 <td>
<td> col-6 <td>
</tr>
<tr>
<td> col-1 <td>
<td> col-2 <td>
<td> col-3 <td>
<td> col-4 <td>
<td> col-5 <td>
<td> col-6 <td>
</tr>
<tr>
<td> col-1 <td>
<td> col-2 <td>
<td> col-3 <td>
<td> col-4 <td>
<td> col-5 <td>
<td> col-6 <td>
</tr><tr>
<td> col-1 <td>
<td> col-2 <td>
<td> col-3 <td>
<td> col-4 <td>
<td> col-5 <td>
<td> col-6 <td>
</tr>
</table>
</div>
</body>
</html>
Any help is appreciated. Hate to fgo back and use a table in order to place my layoutIncorrect html does not work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Borgo - Special Quote (View/Update) Form </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Microsoft_Border" content="none">
<script type="text/javascript">
<!--
// all JavaScript here
//-->
</script>
<style type="text/css">
<!--
#top {
border: 1px solid #c6c6c6;
margin-bottom:5px;
/* background-color: #00FFCC */
}
#left {
border: 1px solid #c6c6c6;
font-style: normal;
font-family: "Times New Roman", Times, serif;
float:left;
overflow:hidden;
width: 35px
/* height: 100px */
/* background-color: #00FFCC */
}
#posMiddle {
float:left;
margin-left:5px;
width: 770 px;
border: 1px solid #c6c6c6;
}
-->
</style>
</head>
<body>
<div id="top">
TOP of Page hereh
<strong> This should be the ttitle page on top </strong>
</div>
<div id="left">
This should be menu side <br>
This is the second line now <br>
this is the third line <br>
this is the 4 third line <br>
this is the 5 third line <br>
this is the 6 third line <br>
this is the 7 third line <br>
this is the 8 third line <br>
</div>
<div id="posMiddle">
Middle of page <br>
Just to the right of the menu division
<table border="0" cellpadding="3" cellspacing="0" summary="">
<tbody>
<tr>
<td> col-1 <td>
<td> col-2 <td>
<td> col-3 <td>
<td> col-4 <td>
<td> col-5 <td>
<td> col-6 <td>
</tr>
<tr>
<td> col-1 <td>
<td> col-2 <td>
<td> col-3 <td>
<td> col-4 <td>
<td> col-5 <td>
<td> col-6 <td>
</tr>
<tr>
<td> col-1 <td>
<td> col-2 <td>
<td> col-3 <td>
<td> col-4 <td>
<td> col-5 <td>
<td> col-6 <td>
</tr>
<tr>
<td> col-1 <td>
<td> col-2 <td>
<td> col-3 <td>
<td> col-4 <td>
<td> col-5 <td>
<td> col-6 <td>
</tr><tr>
<td> col-1 <td>
<td> col-2 <td>
<td> col-3 <td>
<td> col-4 <td>
<td> col-5 <td>
<td> col-6 <td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Tutorials (<!-- m --><a class="postlink" href="http://www.w3schools.com/default.asp">http://www.w3schools.com/default.asp</a><!-- m -->)
html validator (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->)Something very similar to Fang's reply only it uses absolute positioning like you had originally:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Borgo - Special Quote (View/Update) Form </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
<!--
/* To keep the absolute positioning correct, remove and margins or padding
from the BODY tag. */
body {
margin: 0;
padding: 0;
}
div.top {
background-color: #00FFCC;
}
/* Border placed here in case you ever want to give .top dimensions. Read
up on the Standard Box Model. */
div.topBox {
border: 1pt solid #c6c6c6;
}
/* Removed the border from here. The 120px + 1px left border + 1px right
border gives you a standard box size of 122px. */
div.left {
background-color: #00FFCC;
/* font-style: normal; REMOVE THIS, FONT STYLES ARE NORMAL BY DEFAULT */
font-family: "Times New Roman", Times, serif;
position: absolute;
/* top: 45px; REMOVE THIS, .left AND .posMiddle ARE VERTICALLY POSITIONED
ACCORDING TO WHERE .top ENDS. */
/* 35px is too narrow for a menu. 120px is about as narrow as I'd go,
unless you're going to have all image navigation. Forget about NS 4.x.
It's old and outdated. */
width: 120px;
}
/* Because of the Standard CSS Box model, place any borders, padding and
margins for the left column in this element. */
div.leftBox {
border: 1pt solid #c6c6c6;
}
/* Removed the spaces between the number and the unit of measure. */
.posMiddle {
position: absolute;
/* Move this box left as many pixels as .left is wide */
left: 120px;
/* top: 45px; REMOVE THIS, .left AND .posMiddle ARE VERTICALLY POSITIONED
ACCORDING TO WHERE .top ENDS. */
width: 650px;
}
/* Same reason as div.leftBox */
.posMiddleBox {
border: 1pt solid #c6c6c6;
}
-->
</style>
</head>
<body>
<div class="top">
<div class="topBox">
TOP of Page here <strong>This should be the title page on top</strong>
</div>
</div>
<!-- Since Absolute positioning takes elements out of the normal flow and
creates a new flow (i.e. a layer) we can place the code for the middle
column before the left column code in your HTML document. Search engines
and screen readers like this better, often called Source-Ordered Columns.
-->
<div class="posMiddle">
<div class="posMiddleBox">
Middle of page <br>
Just to the right of the menu division
<table>
.
.
.
</table>
</div>
</div>
<div class="left">
<div class="leftBox">
<!-- A menu can be thought of as a list, so semantically mark up your
menu as an unordered list. -->
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Menu Item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Menu Item 2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Menu Item 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Menu Item 4</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Menu Item 5</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Menu Item 6</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Menu Item 7</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Menu Item 8</a></li>
</ul>
</div>
</div>
</body>
</html>
The DOCTYPE at the beginning throws IE6 and Standards Browsers into standards mode where they more closely adhere to Web standards. I switched up the markup a bit to make it more meaningful. Your menu really is a list of items, so use an unordered list. Since you used absolute positioning, the order in which you write the left and middle column code is irrelevant. I moved the middle column before the left in the HTML document. This makes your page a little more search engine and screen reader-friendly.
Read the HTML and CSS comments in the source code for more details. You'll also want to check out the documentation on the Standard CSS Box Model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">http://www.w3.org/TR/CSS21/box.html#box-dimensions</a><!-- m -->).
Let us know if you have any other questions.Thanks guys. Just learning all this stuff now. I am an old mainframer, trying to learn all this new stuff