PDA

View Full Version : Just can't "stretch" the menu out horizontally?



JVRudnick
10-13-2009, 09:52 PM
1) Script Title: Inverted Shift Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/inverted-shift-down-menu/

3) Describe problem: Using same, which was quite easy to do install wise and modify wise. But problem is, that for some reason, I can NOT get it to 'stretch' out to fill a complete area. I think that might be because there is a setting to indicate how far to space the margins on the far left hand edge here [margin-left: 40px; /*margin between first menu item and left browser edge*/]. But I cant either create same for the margin-right nor 'stretch' it anyother way to get it to fill a certain horizontal width.

Anyone know how I might do that? It's supposed to fill an area that is 832 px, but always shows about 10 px on the far right hand side tween the edge of the rollover button and the container wall...

???

Jim

JVRudnick
10-14-2009, 03:51 PM
So...has no one used this script?

?

Jim

JVRudnick
10-15-2009, 06:40 PM
Does no one know how to 'stretch' this menu?

If someone does please just let me know what to use as I still can't get it to look right...

sigh...

:-(

Jim

ddadmin
10-15-2009, 10:35 PM
By stretched out, do you mean the horizontal strip that runs across the top of the menu bar, or the links themselves? Also, does your page contain a valid doctype at the top, such as:


<!DOCTYPE HTML>

Please post a link to the page on your site that contains the problematic script so we can check it out.

JVRudnick
10-16-2009, 01:01 PM
Sure...here's the testing page -- http://www.midainternationalinc.com/testRPM/rpm.html

You will note that I've got the menu positioned below the blue bar and all I want to happen is that when you rollover or click on the far right hand nav button entitled FAQ, that the blue portion goes ALL the way to the far right hand vertical bar too -- just like it does for the first button entitled Who We Are...

Can not adjust the CSS to do that either...is it just me?

Jim

PS yes, valid doctype too [<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">] is what is used...

ddadmin
10-16-2009, 07:27 PM
Hmm right now your "FAQ" link actually appears on a second line for me, since there isn't enough room on the first line. Is that intentional? See screenshot.

JVRudnick
10-16-2009, 07:35 PM
Not at all, on my own monitor it fits...with that whitespace to the right hand side of the blue button you see on the rollover...

IS there a way to get this to be 'horizontally' modifiable?
(dunno if that's good English?) so that I can use those terms across the width of that
blue bar just above same?

?

Jim

JVRudnick
10-19-2009, 06:42 PM
Hello....

could someone pls look at this for me?

I've NO idea on why I simply can't stretch out the width of this nav menu???

???

Jim

ddadmin
10-20-2009, 06:08 AM
I believe I understand what you're asking, though there isn't an easy way to do this with this particular menu, at least not that I'm aware of. Each of the menu items is floated left in CSS to achieve its look, which makes them lose their "elasticity", so to speak.

JVRudnick
10-20-2009, 02:49 PM
Hmm....okay, but is there not a way to use CSS to <center> that menu - and in that way I can perhaps stretch it out using padding etc to fill that horizontal space?

While it must be apparent that my CSS skillSet is negligable, it seems that CSS is lacking here?

???

Jim

ddadmin
10-21-2009, 04:15 AM
Well, the line in red below in the default CSS of the menu controls the padding between each menu item:


.invertedshiftdown a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px 9px 10px; /*Padding within each menu item*/
background-color: white; /*Default menu color*/

So for example, you might try changing "1px" to say "50px".

stringcugu
10-21-2009, 06:19 AM
.invertedshiftdown{
padding: 0;
//width: 80%;
border-top: 10px solid #005083; /*Red color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

JVRudnick
10-21-2009, 07:21 PM
ddadmin --

when I try to change the margin line to anything 'bigger' than 10px, it then does expand but
moves the far right hand item "FAQ" down to a new line...ie this setting will NOT expand what horizontal
distance the menu uses as it is now...so that is NOT an answer that works...

stringcugu --

when I try to change that padding: 0; item to anything else, it totally does NOT change anything, horizontal
width wise...ie this does NOT work either....

sigh...

CSS is so so so confusing eh?

ALL I wanna do is to stretch this out to be same width as the dang white space is...sigh....

:-(

Jim

PS I think that CSS is letting me down...surely there HAS to be an answer for this, eh..anyone?

:-(

Jim

stringcugu
10-22-2009, 02:26 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>MIDA International Inc.</title>
<style type="text/css">
.invertedshiftdown{
padding: 0;
width: 80%;
border-top: 10px solid #005083; /*Red color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
.invertedshiftdown ul{
margin:0;
margin-left: 10px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}
.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
.invertedshiftdown a{
float: left;
display: block;
font: bold 10px Arial;
color: black;
text-decoration: none;
margin: 0 10px 0 0; /*Margin between each menu item*/
padding: 5px 10px 9px 10px; /*Padding within each menu item*/
background-color: white; /*Default menu color*/
/*BELOW 4 LINES add rounded bottom corners to each menu item.
ONLY WORKS IN FIREFOX AND FUTURE CSS3 CAPABLE BROWSERS
REMOVE IF DESIRED*/
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}
.invertedshiftdown a:hover{
background-color: #005083; /*blue color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}
.invertedshiftdown .current a{ /** currently selected menu item **/
background-color: #005083; /*blue color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}
#myform{ /*CSS for sample search box. Remove if desired */
float: right;
margin: 0;
margin-top: 2px;
padding: 0;
}
#myform .textinput{
width: 190px;
border: 1px solid gray;
}
#myform .submit{
font: normal 12px Verdana;
height: 22px;
border: 1px solid #D10000;
background-color: black;
color: white;
}
</style>
<style type="text/css">
.linkgold{color:#f6c531;}
.linkb{color:black;}
.linkblue{color:#005083;}
</style>
<style type="text/css">
<!--a{text-decoration:none}//-->
<!--a:hover{text-decoration:none}//-->
<!--a:hover{color:#f6c531; }-->
</style>
<style type="text/css" media="all">
#pixelText10 {
font-size: 10px;
}
#pixelText12 {
font-size: 12px;
}
#pixelText8 {
font-size: 8px;
}
</style>
</head>
<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">
<center>
<table width="832" cellpadding="0" cellspacing="0" style="border: 0px solid black;">
<tr>
<!-- ============ HEADER SECTION ============================================================================================================================ -->
<td colspan="2" width="832" height="200" valign="top" align="left" bgcolor="white" style="background-repeat:no-repeat" background="http://www.midainternationalinc.com/testRPM/images/topBar_interior-rpm.jpg">
<br>
<center>
<FONT SIZE="1" COLOR="#005083" face="Verdana"></A>
<a href="index.asp" class="linkblue">Home</a>
|
<a href="aboutus.html" class="linkblue">About Us </a>
|
<a href="clientservices.html" class="linkblue">Client Services</a>
|
<a href="programs.html" class="linkblue">MIDA Programs </a>
|
<a href="rpm.html" class="linkblue">MIDA RPM </a>
|
<a href="contactus.html" class="linkblue">Contact Us</a>
</b></FONT>
</td>
</tr>
<tr>
<!-- ============ LEFT SIDE CONTENTS COLUMN======================================================================================== -->
<td width="832" align="left" valign="top" border="0"background="http://www.midainternationalinc.com/testRPM/images/interior_background.jpg">
<center>
<div class="invertedshiftdown">
<li class="current"><a href="rpm.html" title="Home">Who <brWe Are</a></li>
<li><a href="acceptedmaterials.html" title="New">Accepted<br>Materials</a></li>
<li><a href="theMIDAprocess.html" title="Revised">The MIDA<br>Process</a></li>
<li><a href="guarantee.html" title="Tools">The MIDA<br>Guarantee</a></li>
<li><a href="incentiveprograms.html" title="CSS">Incentive<br>Programs</a></li>
<li><a href="managementsystem.html" title="DHTML Forums">Environmental<br>Management<br>System</a></li>
<li><a href="faq.html" title="DHTML Forums">Frequently<br>Asked<brQuestions</a></li>
</div>
<br style="clear: both;" />
</center>
<img src="http://www.midainternationalinc.com/testRPM/images/SPACER.GIF" width="100" height="500" border="0" align="left">
<img src="http://www.midainternationalinc.com/testRPM/images/SPACER.GIF" width="100" height="500" border="0" align="right">
<font size="3" color="#005083" face="Verdana">
<b>
<font color="#f1a931">MIDA </font><font color="#005083"> RPM</font><font color="black"> - Who We Are</b></font>
<br><br>
<font size="2" color="black" face="Verdana">
<ul>
<ul>
Mida RPM, a division of Mida International Inc., started processing electronic scrap in 2006.
Our purpose at Mida RPM is to assist our customers in ensuring that electronic scrap is properly recycled.
<br><br>
MIDA RPM has been approved by the Ministry of the Environment and obtained a Certificate of Approval
which not only gives us the legal ability to process electronic waste in Ontario, but holds us to
very strict environmental guidelines. MIDA RPM partners with companies that have been audited and
qualified to our rigorous standards.We work only with ethical, compliant recycling partners that
are located in North America.
<br><br>
Because MIDA RPM is part of a bigger entity, Mida International Inc., we are able to process more
than just electronics.We have trading partners for all metals, and viable homes for all of the
material that we receive.So don’t be afraid to ask about any metallic material you may want to be recycled.
<br><br>
Here are a few websites where you can find information regarding the electronic recycling industry.
<br><br>
<ul>
<b>
<a href="http://www.epsc.ca/" target="_blank">www.epsc.ca</a> -- Electronics Product Stewardship Canada (EPSC)
<br><br>
<a href="http://www.ban.org/" target="_blank">www.ban.org</a> -- Basel Action Network (BAN)
</b>
</ul>
<br>
<center><img src="http://www.midainternationalinc.com/testRPM/images/recycling-symbol.jpg" width="200" height="200" border="0" align="center">
</center>
</font>
</ul></ul>
</td>
</tr>
<tr>
<!-- ============ FOOTER SECTION =============================================================================================== -->
<td colspan="2" align="left" width="832" height="61" style="background-repeat:no-repeat" background="http://www.midainternationalinc.com/testRPM/images/bottomBar_home.jpg">
&nbsp;
<FONT SIZE="1" COLOR="#005083" face="Verdana"><b>
<center>
<a href="index.asp" class="linkblue">Home</a>
|
<a href="aboutus.html" class="linkblue">About Us </a>
|
<a href="clientservices.html" class="linkblue">Client Services</a>
|
<a href="programs.html" class="linkblue">MIDA Programs </a>
|
<a href="rpm.html" class="linkblue">MIDA RPM </a>
|
<a href="contactus.html" class="linkblue">Contact Us</a>
<p>
Copyright 2009 MIDA International Inc.ALL RIGHTS RESERVED
</b>
</FONT>
</td>
</tr>
</table>
</body>
</html>

stringcugu
10-22-2009, 03:14 AM
try this

.invertedshiftdown{
padding: 0;
width: 83%;
border-top: 10px solid #005083; /*Red color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}


and forgot the > in the
<br

try this now

<div class="invertedshiftdown">
<li class="current"><a href="rpm.html" title="Home">Who <br>We Are</a></li>
<li><a href="acceptedmaterials.html" title="New">Accepted<br>Materials</a></li>
<li><a href="theMIDAprocess.html" title="Revised">The MIDA<br>Process</a></li>
<li><a href="guarantee.html" title="Tools">The MIDA<br>Guarantee</a></li>
<li><a href="incentiveprograms.html" title="CSS">Incentive<br>Programs</a></li>
<li><a href="managementsystem.html" title="DHTML Forums">Environmental<br>Management<br>System</a></li>
<li><a href="faq.html" title="DHTML Forums">Frequently<br>Asked<br>Questions</a></li>
</div>

JVRudnick
10-22-2009, 03:00 PM
Hi stringcugu....

first thanks! we're so so so close....as I just added that change to the Who Are We page, ie the far left hand menu item only...and if you go to check, you'll note that it does stretch out that menu horizontally, but not QUITE to the far right hand vertical bar...see that sliver of white space when you rollover the FAQ menu item?

is there no way to get rid of that white space?

boy, this is a lot tougher than I ever figured it'd be!

:-)

Jim

stringcugu
10-22-2009, 10:09 PM
i looked at your link and the
Frequently<br>Asked Questions
is on the left under the who are we
put the <br>in the

Frequently<br>Asked <br>Questions
so it be at the right next to Environmental<br>Management
if thats what you want

JVRudnick
10-23-2009, 05:01 PM
sorry, that's not correct either...right now it does show as per the attachment...ie its on the right hand side but just doesn't quite stretch to kill that white vertical space tween the FAQ button and the vertical blue sidebar...

http://www.kkti.com/test/menu.jpg

is there no way to get CSS to work here? ie to push the blue box out to the left to kill that white space?


:-(((

Jim

stringcugu
10-24-2009, 03:12 AM
change the color back
i left the color code there

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>MIDA International Inc.</title>
<style type="text/css">
.invertedshiftdown{
padding: 0;
width: 699px;
border-top: 10px solid #005083; /*Red color theme*/
//border-top: 10px solid #ccff83; /*Red color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
.invertedshiftdown ul{
margin:0;
margin-left: 10px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}
.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
.invertedshiftdown a{
float: left;
display: block;
font: bold 10px Arial;
color: black;
text-decoration: none;
margin: 0 10px 0 0; /*Margin between each menu item*/
padding: 0px 0px 9px 10px; /*Padding within each menu item*/
background-color: red; /*Default menu color*/
/*BELOW 4 LINES add rounded bottom corners to each menu item.
ONLY WORKS IN FIREFOX AND FUTURE CSS3 CAPABLE BROWSERS
REMOVE IF DESIRED*/
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
}
.invertedshiftdown a:hover{
background-color: #005083; /*blue color theme*/
padding-top: 0px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 10px; /*Flip default padding-bottom value with padding-top*/
padding-right: 11px; /*Flip default padding-bottom value with padding-top*/
color: white;
}
.invertedshiftdown .current a{ /** currently selected menu item **/
background-color: #0000cc; /*blue color theme*/
padding-top: 0px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 0px; /*Flip default padding-bottom value with padding-top*/
color: white;
}
#myform{ /*CSS for sample search box. Remove if desired */
float: left;
//float: right;
margin: 0;
margin-top: 0px;
margin-right: 0px;
padding: 0;
}
#myform .textinput{
width: 190px;
border: 0px solid gray;
}
#myform .submit{
font: normal 12px Verdana;
height: 22px;
border: 1px solid #D10000;
background-color: black;
color: red;
}
</style>
<style type="text/css">
.linkgold{color:#f6c531;}
.linkb{color:black;}
.linkblue{color:#005083;}
</style>
<style type="text/css">
<!--a{text-decoration:none}//-->
<!--a:hover{text-decoration:none}//-->
<!--a:hover{color:#f6c531; }-->
</style>
<style type="text/css" media="all">
#pixelText10 {
font-size: 10px;
}
#pixelText12 {
font-size: 12px;
}
#pixelText8 {
font-size: 8px;
}
</style>
</head>
<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">
<center>
<table width="830" cellpadding="0" cellspacing="0" style="border: 0px solid black;">

<tr>
<!-- ============ HEADER SECTION ============================================================================================================================ -->
<td colspan="2" width="830" height="200" valign="top" align="left" bgcolor="white" style="background-repeat:no-repeat" background="http://www.midainternationalinc.com/testRPM/images/topBar_interior-rpm.jpg">
<br>
<center>
<FONT SIZE="1" COLOR="#005083" face="Verdana"></A>
<a href="index.asp" class="linkblue">Home</a>
|
<a href="aboutus.html" class="linkblue">About Us </a>
|
<a href="clientservices.html" class="linkblue">Client Services</a>
|
<a href="programs.html" class="linkblue">MIDA Programs </a>

|
<a href="rpm.html" class="linkblue">MIDA RPM </a>
|
<a href="contactus.html" class="linkblue">Contact Us</a>
</b></FONT>
</td>
</tr>
<tr>
<!-- ============ LEFT SIDE CONTENTS COLUMN== align=left======= width=799=============================================================================== -->
<td width="830" align="left" valign="top" border="0"background="http://www.midainternationalinc.com/testRPM/images/interior_background.jpg">
<center>
<span class="invertedshiftdown" id=elField1 style="position:absolute;left:155px;top:-6px;width:688px;height:45px;z-index:19">
<table border=0 hspace=0 cellpadding=0 bordercolor=#000000 bgcolor=#FFFFFF>
<tr>
<td ><a href=javascript:showhide()><strong>Home</strong></A><a href=javascript:showhide()><strong>About Us</strong></A><a href=javascript:showhide()><strong>Client Services</strong></A><a href=javascript:showhide()><strong>MIDA Programs </strong></A><a href=javascript:showhide()><strong>MIDA Program</strong></A><a href=javascript:showhide()><strong>MIDA RPM</strong></A><a href=javascript:showhide()><strong>Contact Us</strong></A></td>

</tr>
</table>
</span>
<span class="invertedshiftdown" id=elField1 style="position:absolute;left:155px;top:255px;width:688px;height:45px;z-index:19">
<table border=1 hspace=1 cellpadding=1 bordercolor=#000000 bgcolor=#FFFFFF>
<tr>
<td ><a href=javascript:showhide()><strong>Who We Are</strong></A><a href=javascript:showhide()><strong>Accepted<br>Materials</strong></A><a href=javascript:showhide()><strong>The MIDA<br>Process</strong></A><a href=javascript:showhide()><strong>The MIDA Guarantee</strong></A><a href=javascript:showhide()><strong>Environmental <br>Management<br>System</strong></A><a href=javascript:showhide()><strong>Frequently<br>Asked Questions</strong></A><a href=javascript:showhide()><strong>Incentive<br>Programs</strong></A></td>

</tr>
</table>
</span>
<span class="invertedshiftdown" id=elField1 style="position:absolute;left:155px;top:215px;width:688px;height:45px;z-index:19">
<table border=1 hspace=1 cellpadding=1 bordercolor=#000000 bgcolor=#FFFFFF>
<tr>
<td ><font color="#f1a931">MIDA </font><font color="#005083"> RPM</font><font color="black"> - Who We Are</b></font>
</td>
</tr>
</table>

</span>
<br style="clear: both;" />
</center>
<img src="http://www.midainternationalinc.com/testRPM/images/SPACER.GIF" width="100" height="500" border="0" align="left">
<div class="invertedshiftdown" style="position:absolute;left:160px;top:157px;width:710px;height:45px;z-index:19">
<li class="current"><a href="rpm.html" title="Home">Who We Are</a></li>
<li><a href="acceptedmaterials.html" title="New">Accepted<br>Materials</a></li>
<li><a href="theMIDAprocess.html" title="Revised">The MIDA<br>Process</a></li>
<li><a href="guarantee.html" title="Tools">The MIDA<br>Guarantee</a></li>
<li><a href="guarantee.html" title="Tools">The MIDA<br>Guarantee</a></li>

<li><a href="incentiveprograms.html" title="CSS">info</a></li>
<li><a href="managementsystem.html" title="DHTML Forums">Environmental<br> Management<br>System</a></li>
<li><a href="faq.html" title="DHTML Forums">.Frequently Asked. <br>Questions</a></li>
</div><img src="http://www.midainternationalinc.com/testRPM/images/SPACER.GIF" width="100" height="500" border="0" align="right">
<font size="3" color="#005083" face="Verdana">
<b>
<font color="#f1a931">MIDA </font><font color="#005083"> RPM</font><font color="black"> - Who We Are</b></font>

<br><br>
<font size="2" color="black" face="Verdana">
<ul>
<ul>
Mida RPM, a division of Mida International Inc., started processing electronic scrap in 2006.
Our purpose at Mida RPM is to assist our customers in ensuring that electronic scrap is properly
recycled.
<br><br>
MIDA RPM has been approved by the Ministry of the Environment and obtained a Certificate of Approval
which not only gives us the legal ability to process electronic waste in Ontario, but holds us to
very strict environmental guidelines. MIDA RPM partners with companies that have been audited and
qualified to our rigorous standards.We work only with ethical, compliant recycling partners that
are located in North America.
<br><br>
Because MIDA RPM is part of a bigger entity, Mida International Inc., we are able to process more
than just electronics.We have trading partners for all metals, and viable homes for all of the
material that we receive.So don’t be afraid to ask about any metallic material you may want to be recycled.
<br><br>
Here are a few websites where you can find information regarding the electronic recycling industry.
<br><br>
<ul>
<b>
<a href="http://www.epsc.ca/" target="_blank">www.epsc.ca</a> -- Electronics Product Stewardship Canada (EPSC)

<br><br>
<a href="http://www.ban.org/" target="_blank">www.ban.org</a> -- Basel Action Network (BAN)
</b>
</ul>
<br>
<center><img src="http://www.midainternationalinc.com/testRPM/images/recycling-symbol.jpg" width="200" height="200" border="0" align="center">
</center>
</font>
</ul></ul>
</td>
</tr>
<tr>
<!-- ============ FOOTER SECTION =============================================================================================== -->
<td colspan="2" align="left" width="832" height="61" style="background-repeat:no-repeat" background="http://www.midainternationalinc.com/testRPM/images/bottomBar_home.jpg">
&nbsp;

<FONT SIZE="1" COLOR="#005083" face="Verdana"><b>
<center>
<a href="index.asp" class="linkblue">Home</a>
|
<a href="aboutus.html" class="linkblue">About Us </a>
|
<a href="clientservices.html" class="linkblue">Client Services</a>
|
<a href="programs.html" class="linkblue">MIDA Programs </a>
|
<a href="rpm.html" class="linkblue">MIDA RPM </a>
|

<a href="contactus.html" class="linkblue">Contact Us</a>
<p>
Copyright 2009 MIDA International Inc.ALL RIGHTS RESERVED
</b>
</FONT>
</td>
</tr>
</table><span class="invertedshiftdown" id=elField1 style="position:absolute;left:155px;top:666px;width:688px;height:45px;z-index:19">
<table border=1 hspace=1 cellpadding=1 bordercolor=#000000 bgcolor=#FFFFFF>
<tr>
<td >
<a href="http://www.epsc.ca/" target="_blank">www.epsc.ca</a> -- Electronics Product Stewardship Canada (EPSC)
<br><br>
<a href="http://www.ban.org/" target="_blank">www.ban.org</a> -- Basel Action Network (BAN)

</font>
</td>
</tr>
</table>
</span>


also you can leave out the > in this line
<div class="invertedshiftdown" style="position:absolute;left:160px;top:157px;width:710px;height:45px;z-index:19">

to this
<div class="invertedshiftdown" style="position:absolute;left:160px;top:157px;width:710px;height:45px;z-index:19"