PDA

Click to See Complete Forum and Search --> : Best way to position a <p> element?

moose151
03-13-2007, 12:16 PM
I have a simple page with 2 columns. The one on the left contains an unordered list with 12 items and the one on the right has text that displays when the mouse is over one of the list items. I have some code that works but I can't get the positioning to be consistent between Firefox and IE so maybe I need to think of another way. Here is the HTML code:

<html>
<head>
<script type="text/javaScript" src="DisplayText.js"></script>
<style>
<!--
img
{
display: block;
margin: 0px;
padding: 0px;
}

p
{
font-family: verdana, sans-serif;
font-style: normal;
color: gray;
font-size: 60%;
margin-left: 0px;
}

#main_body
{
margin: 0px;
padding: 0px;
}

#body_container
{
height: 378px;
width: 800px;
margin: 0px;
padding: 0px;
float: left;
background-color: white;
}

#body_left
{
width: 303px;
height: 378px;
background-color: white;
margin: 0px;
padding: 0px;
float: left;
}

#body_middle
{
width: 463px;
height: 378px;
background-color: white;
margin: 0px;
padding: 0px;
float: left;
}

#body_right
{
width: 34px;
height: 378px;
background-color: white;
margin: 0px;
padding: 0px;
float: right;
}

li
{
color: #003366;
font-family: verdana, sans-serif;
font-style: normal;
font-size: 80%;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
margin-bottom: 10px;
list-style: none;
cursor: pointer;
}

p
{
color: gray;
font-size: 60%;
margin-left: 0px;
}

#service_titles
{
width: 220px;
height: 378px;
background-color: white;
margin: 0px;
padding: 0px;
float: left;
}

#service_descr
{
width: 243px;
height: 378px;
background-color: white;
margin: 0px;
padding: 0px;
float: left;
}

#serv_1
{
position: relative;
top: 20px;
}

#serv_2
{
position: relative;
top: 45px;
}

#serv_3
{
position: relative;
top: 70px;
}

#serv_4
{
position: relative;
top: 97px;
}

#serv_5
{
position: relative;
top: 120px;
}

#serv_6
{
position: relative;
top: 145px;
}

#serv_7
{
position: relative;
top: 170px;
}

#serv_8
{
position: relative;
top: 195px;
}
//-->
</style>

</head>

<body id="main_body">
<!-- website container -->
<div id="body_container">
<div id="body_left">
</div>
<div id="body_middle">
<div id="service_titles">
<ul>
<li onmouseover="DisplayText(1,1)" onmouseout="DisplayText(1,0)">Title 1</li>
<li onmouseover="DisplayText(2,1)" onmouseout="DisplayText(2,0)">Title 2</li>
<li onmouseover="DisplayText(3,1)" onmouseout="DisplayText(3,0)">Title 3</li>
<li onmouseover="DisplayText(4,1)" onmouseout="DisplayText(4,0)">Title 4</li>
<li onmouseover="DisplayText(5,1)" onmouseout="DisplayText(5,0)">Title 5</li>
<li onmouseover="DisplayText(6,1)" onmouseout="DisplayText(6,0)">Title 6</li>
<li onmouseover="DisplayText(7,1)" onmouseout="DisplayText(7,0)">Title 7</li>
<li onmouseover="DisplayText(8,1)" onmouseout="DisplayText(8,0)">Title 8</li>
</ul>
</div>
<div id="services_descr">
<p id="serv_1" style="display: none;">- Description_1 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p id="serv_2" style="display: none;">- Description_2 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p id="serv_3" style="display: none;">- Description_3 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p id="serv_4" style="display: none;">- Description_4 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p id="serv_5" style="display: none;">- Description_5 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p id="serv_6" style="display: none;">- Description_6 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p id="serv_7" style="display: none;">- Description_7 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p id="serv_8" style="display: none;">- Description_8 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div>
</div>
<div id="body_right">
</div>
</div>
</body>
</html>

An here's the javascript:

<!-- hide script from old browsers
function DisplayText(idNumber, onOff)
{
var service = document.getElementById("serv_" + idNumber);

if (onOff == 0)
{
service.style.display = "none";
}
else
{
service.style.display = "inline";
}
}
// end hiding script from old browsers -->

I would appreciate any help or suggestions. TIA.
drhowarddrfine
03-13-2007, 01:08 PM
For lists, IE uses margin while Firefox uses padding. That's why you can't get them to be consistent. Best thing to do is set them all to zero in the body and then set each element as you want it. So, in the head:
body{margin:0;padding:0}
or
ul li{margin:0;padding:0}
moose151
03-13-2007, 01:33 PM
For lists, IE uses margin while Firefox uses padding. That's why you can't get them to be consistent. Best thing to do is set them all to zero in the body and then set each element as you want it. So, in the head:
body{margin:0;padding:0}
or
ul li{margin:0;padding:0}
Thanks for the tip drhowarddrfine but I already have the body already has margins and padding set to 0px (see #main_body). Any other ideas?
WebJoel
03-13-2007, 06:39 PM
Thanks for the tip drhowarddrfine but I already have the body already has margins and padding set to 0px (see #main_body). Any other ideas?

"#main_body" is not the same thing as "body".

<style>
body {padding:0; margin:0;}
</style>

removes padding and margin from the BODY, but the DIV "#main_body" still has a default padding and a default margin.

To remove ALL padding & margin from everything:

<style>
* {padding:0; margin:0;}
</style>

and no need to state "padding:0;" or "margin:0;" anywhere in the document again, as this universal selector " * " has stripped padding & margin from all elements.
I see that you have stated "padding:0; margin:0;" a half-dozen places throught the document. Use the "universal selector" above, and you may remove all instances of "padding:0; margin:0;" in your CSS. Reduces KB size.
moose151
03-14-2007, 10:07 AM
"#main_body" is not the same thing as "body".

<style>
body {padding:0; margin:0;}
</style>

removes padding and margin from the BODY, but the DIV "#main_body" still has a default padding and a default margin.

To remove ALL padding & margin from everything:

<style>
* {padding:0; margin:0;}
</style>

and no need to state "padding:0;" or "margin:0;" anywhere in the document again, as this universal selector " * " has stripped padding & margin from all elements.
I see that you have stated "padding:0; margin:0;" a half-dozen places throught the document. Use the "universal selector" above, and you may remove all instances of "padding:0; margin:0;" in your CSS. Reduces KB size.

Thanks a lot for the inputs guys, I guess there's still a lot I need to learn regarding CSS. However, after making the changes, the <p> elements on the right still don't line up the same between FF and IE. Here is my modified code:

<html>
<head>
<script type="text/javaScript" src="DisplayText.js"></script>
<style type="text/css">
<!--
*
{
margin: 0px;
padding: 0px;
}

img
{
display: block;
}

p
{
font-family: verdana, sans-serif;
font-style: normal;
color: gray;
font-size: 60%;
margin-left: 0px;
}

#body_container
{
height: 378px;
width: 800px;
float: left;
background-color: white;
}

#body_left
{
width: 303px;
height: 378px;
background-color: white;
float: left;
}

#body_middle
{
width: 463px;
height: 378px;
background-color: white;
float: left;
}

#body_right
{
width: 34px;
height: 378px;
background-color: white;
float: right;
}

li
{
color: #003366;
font-family: verdana, sans-serif;
font-style: normal;
font-size: 80%;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
margin-bottom: 10px;
list-style: none;
cursor: pointer;
}

#service_titles
{
width: 220px;
height: 378px;
background-color: white;
float: left;
}

#service_descr
{
width: 243px;
height: 378px;
background-color: white;
float: left;
}

#serv_1
{
position: relative;
top: 20px;
}

#serv_2
{
position: relative;
top: 45px;
}

#serv_3
{
position: relative;
top: 70px;
}

#serv_4
{
position: relative;
top: 97px;
}

#serv_5
{
position: relative;
top: 120px;
}

#serv_6
{
position: relative;
top: 145px;
}

#serv_7
{
position: relative;
top: 170px;
}

#serv_8
{
position: relative;
top: 195px;
}
//-->
</style>

</head>

<body id="main_body">
<!-- website container -->
<div id="body_container">
<div id="body_left">
</div>
<div id="body_middle">
<div id="service_titles">
<ul>
<li onmouseover="DisplayText(1,1)" onmouseout="DisplayText(1,0)">Title 1</li>
<li onmouseover="DisplayText(2,1)" onmouseout="DisplayText(2,0)">Title 2</li>
<li onmouseover="DisplayText(3,1)" onmouseout="DisplayText(3,0)">Title 3</li>
<li onmouseover="DisplayText(4,1)" onmouseout="DisplayText(4,0)">Title 4</li>
<li onmouseover="DisplayText(5,1)" onmouseout="DisplayText(5,0)">Title 5</li>
<li onmouseover="DisplayText(6,1)" onmouseout="DisplayText(6,0)">Title 6</li>
<li onmouseover="DisplayText(7,1)" onmouseout="DisplayText(7,0)">Title 7</li>
<li onmouseover="DisplayText(8,1)" onmouseout="DisplayText(8,0)">Title 8</li>
</ul>
</div>
<div id="services_descr">
<p id="serv_1" style="display: none;">- Description_1 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p id="serv_2" style="display: none;">- Description_2 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p id="serv_3" style="display: none;">- Description_3 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p id="serv_4" style="display: none;">- Description_4 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p id="serv_5" style="display: none;">- Description_5 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p id="serv_6" style="display: none;">- Description_6 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p id="serv_7" style="display: none;">- Description_7 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p id="serv_8" style="display: none;">- Description_8 blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div>
</div>
<div id="body_right">
</div>
</div>
</body>
</html>

Any other ideas?
ray326
03-14-2007, 10:43 AM
You'll never get it right without a doctype to take the browsers out of quirks mode.
moose151
03-14-2007, 01:00 PM
You'll never get it right without a doctype to take the browsers out of quirks mode.

Sorry, I forgot to post that line. I actually have it in my file but didn't c&p into the post. This is what I have:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">