Hi all, I cant find a relative thread for predicament so here goes!
Im working on the menu at www.eyetonline.com/terrafirma and on the what we
can do for you bit where it pops out I cant for the life of me get the width
to how I want it.. as you will see the text flies off the end.. I dont want
to change the width of the main menu on the left though if poss.
I think the main problem is I cant get the submenu to have its own defined
column width and the fact the page has two css scripts!
Css and html below
Richard.
Apologies if its a bit lengthy!
/* CSS Popout menuv */ /* THIS MENU IS JUST FOR THE WHAT WE CAN DO FOR YOU
HOVER MENU THE REST IS COMMANDED BY MM.CSS */
/* Fix IE. Hide from IE Mac \*/
* html #menuv ul li{float:left;height:1%;}
* html #menuv ul li a{height:1%;}
/* End */
#menuv a
{
width: 193px;
display:block;
padding-top:
0.1em; /*
expands menu box vertically*/
padding-bottom: 0.2em; /* adds bottom border */
white-space:nowrap;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #5C743D;
}
#menuv a, #menuv a:visited /*
all menus at rest */
{
color: white;
background-color: #5C743D;
text-decoration:none;
/* removes underlines from links */
}
#menuv a.parent, #menuv a.parent:hover /* attaches parent-arrow on all
parents */
{
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: repeat-x;
}
#navigation td
{ /* keeps it
in with other css menu (mm_health_nutr.css) */
border-bottom: 1px solid #F4FFE4;
}
#navigation a {
color: #D5EDB3;
line-height:16px;
letter-spacing:.1em;
text-decoration: none;
display:block;
padding:8px 6px 10px 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
#menuv a:hover /* all
menus on mouse-over */
{
color:#993300;
background-color: #99CC66;
}
#menuv li
{
list-style-type:none; /* removes
bullets */
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 16px;
font-weight: bold;
text-decoration: none;
position: absolute;
}
#menuv ul li
{
position:relative;
}
#menuv li ul
{
position: absolute;
top: 0;
left: 19.84em;
/* distance from left menu (this should be the same as width
value in #menuv [1]) above */
display: none;
}
div#menuv ul, #menuv ul ul, #menuv ul ul ul
{
margin:0;
/* keeps the menu parts together */
padding:0;
width: 100*; /*
width of sub menus (this should be the same as width value in #menuv [1])
above */
}
div#menuv ul ul, div#menuv ul ul ul, div#menuv ul li:hover ul ul, div#menuv
ul li:hover ul ul ul
{
display: none;
}
div#menuv ul li:hover ul, div#menuv ul ul li:hover ul, div#menuv ul ul ul
li:hover ul
{
display: list-item;
}
**********************************HTML**************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
<html>
<head>
<title>Terra Firma Environmental Ltd</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="mm_health_nutr.css" type="text/css" />
<script language="JavaScript" type="text/javascript">
//--------------- LOCALIZEABLE GLOBALS ---------------
var d=new Date();
var monthname=new
Array("January","February","March","April","May","June","July","August","Sep
tember","October","November","December");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = monthname[d.getMonth()] + " " + d.getDate() + ", " +
d.getFullYear();
//--------------- END LOCALIZEABLE ---------------
</script>
<style type="text/css">
<!--
@import url("menuv.css");
.style3 {font-size: 12px}
#apDiv1 {
position:absolute;
left:366px;
top:128px;
width:544px;
height:69px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:350px;
top:240px;
width:473px;
height:97px;
z-index:1;
}
.style8 {color: #D5EDB3}
#apDiv3 {
position:absolute;
left:586px;
top:19px;
width:486px;
height:84px;
z-index:1;
}
.style10 {font-size: 12px; font-family: Verdana, Arial, Helvetica,
sans-serif; }
#apDiv4 {
position:absolute;
left:288px;
top:212px;
width:147px;
height:99px;
z-index:2;
}
.style13 {color: #666666}
#apDiv5 {
position:absolute;
left:811px;
top:216px;
width:326px;
height:264px;
z-index:2;
}
#apDiv6 {
position:absolute;
left:428px;
top:250px;
width:292px;
height:216px;
z-index:10;
}
#apDiv7 {
position:absolute;
left:889px;
top:231px;
width:270px;
height:219px;
z-index:11;
}
a:link {
color: #993300;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #993300;
}
a:hover {
text-decoration: underline;
color: #993300;
}
a:active {
text-decoration: none;
}
.style14 {color: #993300}
-->
</style>
</script>
<SCRIPT LANGUAGE="JavaScript">
var rand1 = 0;
var useRand = 0;
images = new Array;
images[1] = new Image();
images[1].src = "pictures/fp1.jpg";
images[2] = new Image();
images[2].src = "pictures/fp2.jpg";
images[3] = new Image();
images[3].src = "pictures/fp3.jpg";
images[4] = new Image();
images[4].src = "pictures/fp4.jpg";
images[5] = new Image();
images[5].src = "pictures/fp5.jpg";
images[6] = new Image();
images[6].src = "pictures/fp6.jpg";
function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.randimg.src = images[useRand].src;
}
</script>
</head>
<body bgcolor="#F4FFE4">
<div id="apDiv3"><img src="TFlettering.png" width="566" height="67" /></div>
<div id="apDiv7"><a onClick="swapPic();"><img src="pictures/fp1.jpg"
name="randimg" width="250" height="200" border="0"></a></div>
<table width="100%" height="592" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#D5EDB3">
<td colspan="3" rowspan="2"><img src="pictures/headerfade.png"
width="682" height="101" border="0" /></td>
<td height="50" colspan="3" align="center" valign="bottom"
bgcolor="#D5EDB3" class="style8" id="logo">Terra Firma Environmental
Ltd</td>
<td width="5"> </td>
</tr>
<tr bgcolor="#D5EDB3">
<td height="32" colspan="3" align="center" valign="top" class="bodyText"
id="tagline"> </td>
<td width="5"> </td>
</tr>
<tr>
<td colspan="7" bgcolor="#5C743D"><img src="mm_spacer.gif" alt=""
width="1" height="2" border="0" /></td>
</tr>
<tr>
<td colspan="7" bgcolor="#99CC66" background="mm_dashed_line.gif"><img
src="mm_dashed_line.gif" alt="line decor" width="4" height="3" border="0"
/></td>
</tr>
<tr bgcolor="#99CC66">
<td colspan="7" id="dateformat" height="20"> <script
language="JavaScript" type="text/javascript">
document.write(TODAY); </script> </td>
</tr>
<tr>
<td colspan="7" bgcolor="#99CC66" background="mm_dashed_line.gif"><img
src="mm_dashed_line.gif" alt="line decor" width="4" height="3" border="0"
/></td>
</tr>
<tr>
<td colspan="7" bgcolor="#5C743D"><img src="mm_spacer.gif" alt=""
width="1" height="2" border="0" /></td>
</tr>
<tr>
<td width="219" valign="top" bgcolor="#5C743D">
<table width="219" height="338" border="0" cellpadding="0"
cellspacing="0" id="navigation">
<tr>
<td width="219" height="35"> <br />
<br /></td>
</tr>
<tr>
<td width="219" height="34"><a href="javascript:;"
class="navText">About Us</a></td>
</tr>
<tr>
<td height="40">
<div id="menuv">
<ul>
<li>
<p><a href="#" class="parent">What we can do for
you?</a></p>
<ul>
<li><a href="#">Bridleway Construction and
Restoration</a></li>
<li><a href="#">Path Construction and Machine Built
Paths</a></li>
<li><a href="#">Mountain-Bike Trail Construction</a></li>
<li><a href="#">Stone Pitching, Flagging & Stone
features</a></li>
<li><a href="#">Gates, Fences, Stiles & Access
Infrastructure</a></li>
<li><a href="#">Moorland Restoration & Management</a></li>
<li><a href="#">Woodland Management & Tree Felling</a></li>
<li><a href="#">Ecological & Grassland Management</a></li>
<li><a href="#">Waterways Repair & Maintenance</a></li>
</li>
</ul>
</ul>
</div>
</td>
</tr>
<tr>
<td height="34"><a href="javascript:;" class="navText">Problem
Solving</a></td>
</tr>
<tr>
<td height="34"><a href="javascript:;" class="navText">Special
Projects</a></td>
</tr>
<tr>
<td width="219" height="34"><a href="javascript:;"
class="navText">Plant, Machines & Equipment</a></td>
</tr>
<tr>
<td height="34"><a href="javascript:;" class="navText">Work 4
Us</a></td>
</tr>
<tr>
<td height="34"><a href="javascript:;" class="navText">Contact
Us</a></td>
</tr>
</table>
<br />
<br />
</td>
<td width="55"> </td>
<td colspan="2" valign="top"><img src="mm_spacer.gif" alt="" width="305"
height="1" border="0" /><br />
<br />
<br />
<table border="0" cellspacing="0" cellpadding="0" width="493">
<tr>
<td width="493" class="pageName"><p>WELCOME TO TERRA FIRMA...<br
/>
Countryside Management Specialists</p> </td>
</tr>
<tr>
<td class="bodyText"><p><br />
<span class="style10">Terra Firma is an agri-environmental
business providing a unique opportunity to combine traditional agricultural
skills with those of countryside, environment, and recreation management.
Our skilled team undertake a variety of rural work including the restoration
of upland footpaths and bridleways, repair and maintenance of dry stone
walls, restoration of degraded heather moorland, repair and renewal of
agricultural fencing including the erection of gates, bridges, and sign
posts. We are also developing new areas of rural management for example
conservation grazing regimes for ecologically sensitive sites. Terra Firma
operates nationally predominately in rural areas, often in remote moorland
and mountainous environments, or in areas of environmental sensitivity such
as SSSI, Nature reserves, water catchments, and aesthetically sensitive
landscapes. </span></p>
<p class="style10">... to find out more and about Terra Firma
working with you; browse the appropriate section on the left or <a
href="contact.html" class="style14">contact us</a> for more info.</p></td>
</tr>
</table>
<p><br />
<span class="style13" title="this is an explanation of all this
gobldygook, do you understandwhat it means..good why the f are you reading
this then mwhahahahahahahaahahahhahaha">Test Hover Over Word</span></p>
<p> </p>
<p>
<br/>
</p></td>
<td width="50"><img src="mm_spacer.gif" alt="" width="50" height="1"
border="0" /></td>
<td width="190" valign="top"><br />
<br />
<table border="0" cellspacing="0" cellpadding="0"
width="190" id="leftcol">
<tr>
<td width="10"><img src="mm_spacer.gif" alt="" width="10" height="1"
border="0" /></td>
<td width="170" class="smallText"><br />
<p class="style3"> </p>
<p class="style3"> </p>
<p class="style3"> </p>
<p class="style3"> </p>
<p class="style3"> </p>
<p class="style3"> </p>
<p class="style3"> </p>
<p class="style3"><span class="subHeader style14"><a
href="leequary.html">International Spec Mountain Bike Course now
complete...</a></span><br />
The new mountain bike course at Lee Quary is now
complete and held the international event on the 13th July 2008.. Click for
more info and pictures of this successful event...</p>
<p class="style3"><span class="subHeader">other news
feed?</span><br />
text here</p>
<p class="style3"><br />
<br />
</p>
</td>
<td width="10"> </td>
</tr>
</table> </td>
<td width="5"> </td>
</tr>
<tr>
<td width="219"><div align="center" class="style13">Terra Firma 2008
(c)</div></td>
<td width="55"><span class="style13"></span></td>
<td width="479"><div align="right" class="style13">| <a
href="default.html">Home</a> | <a href="glossary.html">Glossary of
Terms</a> | <a href="contact.html">Contact Us</a> |</div></td>
<td width="4"> </td>
<td width="50"> </td>
<td width="190"> </td>
<td width="5"> </td>
</tr>
</table>
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
