Stylesheets - Positioning relative v absolute-- Style or functionality, not both

Author

Positioning relative v absolute-- Style or functionality, not both

GGG@steric.net

2007-03-10, 3:15 am

Neither go the way I want them to... Absolute doesn't get it right
over multiple browsers. Relative puts it in the right place, but only
the portion that it is "relative" the style, #wleMenu, is running.
Holding the cursor over any portion OUTSIDE of this block is not
registering.
Mozilla doesn't do anything, IE will fire off an error, when I go past
"the zone" with "object required" (like the scipting isn't even there)

I have the following CSS code.

#wleMenu

{
position: absolute;
left: 1;
width: 245px;
height: 786px;
}

#twoLine {position:absolute;bottom:-325;left:-5;width:850;height:40;}
/* ( I've also tried, {position: relative;bottom-770;left;-85;width:
850;height:40;}
(also have had "px" at the back of the width and height) */

--- filebloc1

<script language="javascript" src="js/t.js"></script>

<div id="oneLine" class="bi24"> </div> 
<div id="wleMenu" class="bi52" align='center'> 

<div align='center'><div class="bi40">Services</div></div>
<br>

<a href="index.php" onMouseOut="swapImgRest()"
onMouseOver="swapImg('j1','','images/r180hom.gif',1)"><img name="j1"
alt="8" border="0" src="images/b180hom.gif" ></a>
<a href="intro.php" onMouseOut="swapImgRest()"
onMouseOver="swapImg('j2','','images/r180care.gif',1)"><img name="j2"
alt="8" border="0" src="images/b180care.gif" ></a>
<a href="compSvc.php" onMouseOut="swapImgRest()"
onMouseOver="swapImg('j3','','images/r180cs.gif',1)"><img name="j3"
alt="8" border="0" src="images/b180cs.gif" ></a>
<a href="Skills.htm" onMouseOut="swapImgRest()"
onMouseOver="swapImg('j4','','images/r180pgm.gif',1)"><img name="j4"
alt="8" border="0" src="images/b180pgm.gif"></a>
<a href="weblinks.php" onMouseOut="swapImgRest()"
onMouseOver="swapImg('j5','','images/r180ws.gif',1)"><img name="j5"
alt="8" border="0" src="images/b180ws.gif" > </a>
<a href="vertgen.php" onMouseOut="swapImgRest()"
onMouseOver="swapImg('j8','','images/r180fs.gif',1)"><img name="j8"
alt="8" border="0" src="images/b180fs.gif" > </a>

<a href="ebyaTA.php" onMouseOut="swapImgRest()"
onMouseOver="swapImg('j6','','images/r180ta.gif',1)"><img name="j6"
alt="8" border="0" src="images/b180ta.gif" > </a>
<a href="#" onMouseOut="swapImgRest()"
onMouseOver="swapImg('j7','','images/r180msg.gif',1)"><img name="j7"
alt="8" border="0" src="images/b180msg.gif" > </a>
<br><br>
<div class="bi40" align='center'>On the Lighter Side</div>
<br><br>
<a href="#" onMouseOut="swapImgRest()"
onMouseOver="swapImg('j9','','images/r180int.gif',1)"><img name="j9"
alt="8" border="0" src="images/b180int.gif" > </a>
<a href="#" title="coming Soon" onMouseOut="swapImgRest()"
onMouseOver="swapImg('j10','','images/r180trav.gif',1)"><img
name="j10" alt="8" border="0" src="images/b180trav.gif" > </a>

<a href="swtoc.html" title="Yes, these were my experiences"
onMouseOut="swapImgRest()" onMouseOver="swapImg('j11','','images/
r180AM.gif',1)"><img name="j11" alt="8" border="0" src="images/
b180AM.gif" > </a>

</div>

----Fileblock2--- this follows the above... it's the bottom menu I
want to have functionality with when doing a relative position, and
which very little of it works in its current stead.
<div id="twoLine" class="bi47">
<table width="775" " border="0" cellspacing="0" cellpadding="0" >
<tr>
<td width="55" ><a href="index.php"
onMouseOut="swapImgRest()" onMouseOver="swapImg('I1','','images/
bk90hom.gif',1)"><img name="I1" alt="8" border="0" src="images/
r90hom.gif" ></a></td>
<td><a href="intro.php" onMouseOut="swapImgRest()"
onMouseOver="swapImg('I2','','images/bk90care.gif',1)"><img name="I2"
border="0" src="images/r90care.gif" ></a></td>
<td width="87"><a href="Skills.html"
onMouseOut="swapImgRest()" onMouseOver="swapImg('I4','','images/
bk90pgm.gif',1)"><img name="I4" border="0" src="images/r90pgm.gif" ></
a></td>
<td ><a href="portfolio.htm" onMouseOut="swapImgRest()"
onMouseOver="swapImg('I8','','images/bk90ebya.gif',1)"><img
src="images/r90ebya.gif" name="I8" border="0"></a></td>
<td ><a href="http://www.responsemarketing.com/"
onMouseOut="swapImgRest()" onMouseOver="swapImg('I5','','images/
bk90msg.gif',1)" target="_blank"><img name="I5" border="0" src="images/
r90msg.gif" ></a></td>
<td ><a href="http://rjlauren.com/rjlauren/index.html"
onMouseOut="swapImgRest()" onMouseOver="swapImg('I6','','images/
bk90fs.gif',1)" target="_blank"><img name="I6" border="0" src="images/
r90fs.gif"></a></td>
<td width="87"><a href="compSrv.php"
onMouseOut="swapImgRest()" onMouseOver="swapImg('I3','','images/
bk90cs.gif',1)"><img name="I3" border="0" src="images/r90cs.gif" ></
a></td>
<td ><a href="contact.htm" onMouseOut="swapImgRest()"
onMouseOver="swapImg('I7','','images/bk90trav.gif',1)"><img name="I7"
border="0" src="images/r90trav.gif" width="50" height="28"></a></td>
</tr>
<tr>
<td align='center' class="smallpr" colspan="8">FAQ | <a
href="mailto:daven@steric.net"> Contact Me</a> </td>

<td></td>

</tr>
</table>
</div>

all in the form of PHP includes (again, it does not matter if I hard
code it into a file or use server includes ala php--- same result.)

When I use "relative" (the second option), I get what I want. Just
nothing outside of the wleMenu works.
When I use "absolute", the design really sucks, but I get
functionality.
I know it is better to use relative, but how do I get the other damned
options to work the way they are supposed to?

I'm too embarassed to show my site.

Bergamot

2007-03-10, 6:17 pm

GGG@steric.net wrote:
>
> I have the following CSS code.

Don't post code, post a URL.

> I'm too embarassed to show my site.

Maybe so, but we still need to see it if you expect to get some help
with it.

BTW, the first thing you should do is validate your code. This will
eliminate syntax errors as a cause of rendering problems. Your code
definitely has errors in it.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

--
Berg