**DEVILZ**
New Member
i have a website with a left sidebar and content area. All is well. I would like to be able to collapse the sidebar using the ajax control toolkit CollapsiblePanelExtender.I have used the code below but the sidebar shows and the content area is below it. its like the panel actually has a width that messes things up but im not sure.What i want is that the siebar and content area show as normal and when a user wants to the sidebar collapses and the content fills the full available area of the screen.any help appreciatedHTML Code\[code\]<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="MyTestWebsite.Site1" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <script src="http://stackoverflow.com/questions/12663732/assets/js/jquery.js" type="text/javascript"></script> <script src="http://stackoverflow.com/questions/12663732/assets/js/FAInteractions.js" type="text/javascript"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="refresh" content="590; URL=Login.aspx" /> <title>MyTestWebsite</title> <meta name="keywords" content="application,control" /> <meta name="keywords" content="application,control" /> <meta name="description" content="Control Application" /> <link href="http://stackoverflow.com/questions/12663732/assets/css/Main.css" rel="stylesheet" type="text/css" /> <link href="http://stackoverflow.com/questions/12663732/assets/css/modalBackground.css" rel="stylesheet" type="text/css" /> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" LoadScriptsBeforeUI="True"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel" runat="server"> <ContentTemplate> <div id="HeaderWrapper"> <div id="Header"> <asp
anel ID="Panel1" runat="server" CssClass="pnl"> <div style="float: left;"> Panel1 </div> <div style="float: right;"> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </div> <div style="clear: both"> </div> </aspanel> </div> </div> <div id="ContentWrapper"> <ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" CollapseControlID="Panel1" Collapsed="false" ExpandControlID="Panel1" TextLabelID="Label1" CollapsedText="Show" ExpandedText="Hide" ExpandDirection="Vertical" TargetControlID="Panel2" ScrollContents="false"> </ajaxToolkit:CollapsiblePanelExtender> <aspanel ID="Panel2" runat="server"> <div id="Sidebar"> <asp:Accordion ID="AccordionMenu" CssClass="accordion" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" runat="server" Width="95%" Height="800px" FramesPerSecond="30" TransitionDuration="250"> <Panes> <asp:AccordionPane ID="AccordionPaneConfigureDevice" runat="server"> <Header> Configure Device</Header> <Content> <asp:Button CssClass="Button" ID="btnConfigureDevice" runat="server" Text="Configure Device" Width="100%" OnClick="btnConfigureDevice_Click" /> </Content> </asp:AccordionPane> </Panes> </asp:Accordion> </div> </aspanel> <div id="Content" style="border: thin solid #666666" class="Tabs"> <asp:TabContainer ID="TabContainerMain" runat="server" ActiveTabIndex="4" Width="100%" Height="100%" CssClass="" ViewStateMode="Enabled"> <asp:TabPanel ID="Tab_Configure_Device" runat="server" HeaderText="Tab_Configure_Device"> <ContentTemplate> <div class="TabControls"> <p> Howdy, I'm in Section Tab_Configure_Device .</p> </div> <div class="TabsAction"> </div> </ContentTemplate> </asp:TabPanel> </asp:TabContainer> </div> </div> <!-- end of wrapper --> </ContentTemplate> </asp:UpdatePanel> </form></body></html>\[/code\]CSS\[code\]Main CSS File */#HeaderWrapper { width: 100%; clear: both; height: 80px; margin-top:2px; margin-bottom:2px; margin-right:0px; margin-left:0px; filter: progid
XImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#99CCFF'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9CF)); /* for webkit browsers */ background: -moz-linear-gradient(top, #FFF, #9CF); /* for firefox 3.6+ */ padding-top:0px; padding-bottom:0px; padding-right:0px; padding-left:0px; border-bottom:thin solid #FFFFFF;}#Header{ width:1024px; margin: 0 auto; padding-top:0px; padding-bottom:0px; padding-right:0px; padding-left:0px; border-radius: 5px; }#ContentWrapper { width:1024px; margin: 0 auto; padding-top:0px; padding-bottom:0px; padding-right:0px; padding-left:0px; border-radius: 5px; }/* sidebar */#Sidebar { float: left; width: 184px; padding: 0px; height:800px; border: thin solid #666666; padding:0px; border-radius: 0px; margin-top:0px; margin-bottom:0px; margin-right:6px; margin-left:0px; filter: progidXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF)); /* for webkit browsers */ background: -moz-linear-gradient(top, #FFF, #FFF); /* for firefox 3.6+ */ }/* end of sidebar -->/* content */#Content { float: left; width: 824px; padding-top:0px; padding-bottom:0px; padding-right:0px; padding-left:0px; min-height:800px; border-radius: 0px; filter: progidXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF)); /* for webkit browsers */ background: -moz-linear-gradient(top, #FFF, #FFF); /* for firefox 3.6+ */ }/* End content *//* End content */html,body { margin:0px; padding:0px; font-family: Arial, Helvetica, sans-serif; font-size:13px; line-height:1.5em; filter: progidXImageTransform.Microsoft.gradient(startColorstr='#003366', endColorstr='#FFFFFF'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#036), to(#FFF)); /* for webkit browsers */ background: -moz-linear-gradient(top, #036, #FFF); /* for firefox 3.6+ */ height: 100%; }/*Accordion */ .accordion { width: 100%; padding-left: 5px; padding-right: 5px; } .accordionHeader { border: 1px solid #003366; color: white; background-color: #003366; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 4px; margin-top: 4px; cursor: pointer; border-radius: 5px; } .accordionHeaderSelected { border: 1px solid #003366; color: white; background-color: #003366; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 4px; margin-top: 4px; cursor: pointer; border-radius: 5px; } .accordionContent { background-color: #FFFFFF; border: 1px solid #003366; border-top: none; padding: 5px; padding-top: 4px; border-radius: 5px; } /*End Accordion *//* Busy Form */.updateProgress { border-radius: 5px;}/* Busy Form *//* Logo */#DivLogo{ float: left; margin-top:5px; margin-bottom:0px; margin-right:6px; margin-left:0px; padding-top:5px; padding-bottom:0px; padding-right:0px; padding-left:0px; width: 140px; height: 25px; font-family: Arial, Sans-Serif; font-size: 20px; font-weight: bold; }/* End Logo *//* Menu */#DivMenu{ float: left; clear: left; margin-top:12px; margin-bottom:0px; margin-right:6px; margin-left:0px; padding-top:5px; padding-bottom:0px; padding-right:0px; padding-left:5px; width: 205px; height: 25px; border-width: 1px; border-style: solid; border-top-left-radius: 5px; border-top-right-radius: 5px;}.Menu{ list-style: none; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; margin-top:1px; }.Menu ul{ background:#003366;}.Menu ul li{ background:#003366; text-align:center; /* set width if needed.*/ width:100px;}.Menu ul li a{ color: White; padding: 4px 2px 4px; padding-left:8px !important;}.Menu ul li a:hover{ background-image: none;}.Menu ul li a:hover{ color: Black; background:White;}.Menu ul li a{ color: White;}/* End Menu*/#DivUserDetails{ float: right; margin-top:13px; margin-bottom:0px; margin-right:5px; margin-left:0px; padding-top:5px; padding-bottom:0px; padding-right:20px; padding-left:5px; width: auto; height: 25px; border-width: 1px; border-style: solid; border-top-left-radius: 5px; border-top-right-radius: 5px;}/* About Modal */#AboutContainer {position:absolute; height:300px; width:440px; top:10%; left:35%; }#AboutInputContainer {position:absolute; height:100px; width:300px; top:10%; left:20%; color:Black;}/* End About Modal *//* Signoff Modal */#SignoffContainer {position:absolute; height:200px; width:440px; top:10%; left:35%; }#SignoffInputContainer {position:absolute; height:100px; width:300px; top:10%; left:20%; color:Black;}/* End Signoff Modal *//* Error Modal */#ErrorContainer {position:absolute;height:300px;min-height:300px;max-height:100%; width:440px; top:10%; left:35%; overflow:auto;}#ErrorInputContainer {position:absolute; height:100px; width:300px; top:10%; left:20%; color:Black;}#lblErrorCode{}#lblErrorMessage{}#lblExMessage{}/* End Error Modal *//* Grids */.mGrid { width: 100%; background-color: #fff; margin: 5px 0 10px 0; border: solid 1px #525252; border-collapse:collapse;font-family:Verdana; font-size:12px; table-layout:fixed; }.mGrid td { padding: 2px; border: solid 1px #c1c1c1; color: #003366; }.mGrid th { padding: 4px 2px; color: #000000; background: #99CCFF; font-size: 0.9em;border: solid 1px #c1c1c1; filter: progidXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#99CCFF'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9CF)); /* for webkit browsers */ background: -moz-linear-gradient(top, #FFF, #9CF); /* for firefox 3.6+ */ }.mGrid .alt { background: #fcfcfc; }.mGrid tr.data-row:hover { background-color:#FFFFCC; color:white; }.mGrid .pgr {background: #FFCC33; }.mGrid .pgr table { margin: 5px 0;}.mGrid .pgr td { border-width: 0px; padding: 2px; font-weight: bold; color:Black; line-height: 12px; font-family: Arial, Sans-Serif; font-size: 12px; border-radius: 5px; padding-left: 4px; padding-right: 4px; } .mGrid .pgr a { color:Black; text-decoration: none; }.mGrid .pgr a:hover { color:Black; text-decoration: none; }.pgr span{ padding: 5px; text-decoration: none; background: White; border-radius: 5px;}/* End Grids */.TabControls{ margin-top:2px; margin-bottom:2px; margin-right:2px; margin-left:2px; padding-top:2px; padding-bottom:2px; padding-right:2px; padding-left:2px; width: auto; border-width: 1px; border-style: solid; border-radius: 5px; filter: progidXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#99CCFF'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9CF)); /* for webkit browsers */ background: -moz-linear-gradient(top, #FFF, #9CF); /* for firefox 3.6+ */ height:120px;}.TabsAction{ margin-top:2px; margin-bottom:1px; margin-right:2px; margin-left:2px; padding-top:5px; padding-bottom:1px; padding-right:5px; padding-left:5px; border-width: 1px; border-style: solid; border-radius: 5px; filter: progidXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#99CCFF'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9CF)); /* for webkit browsers */ background: -moz-linear-gradient(top, #FFF, #9CF); /* for firefox 3.6+ */ height:120px; height: 660px; overflow: auto; /* Wrap all words in the grid so it fits in the window */ word-break : break-all;}/* TextBox */.Textbox{width:auto; padding:2px; color:Black; text-align:left; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }.Textbox:focus{ background-color:#FFCC33;}/* End TextBox *//* Button */.Button{ -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; text-align:left; padding-left:22px; margin-top:1px; margin-bottom:1px; background-repeat: no-repeat; background-image: url(/assets/img/action.gif); background-position:3px 50%}.Button:hover{ background: #FFCC33; background-repeat: no-repeat; background-image: url(/assets/img/action.gif); background-position:3px 50%}/* End Button */\[/code\]
anel ID="Panel1" runat="server" CssClass="pnl"> <div style="float: left;"> Panel1 </div> <div style="float: right;"> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </div> <div style="clear: both"> </div> </aspanel> </div> </div> <div id="ContentWrapper"> <ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" CollapseControlID="Panel1" Collapsed="false" ExpandControlID="Panel1" TextLabelID="Label1" CollapsedText="Show" ExpandedText="Hide" ExpandDirection="Vertical" TargetControlID="Panel2" ScrollContents="false"> </ajaxToolkit:CollapsiblePanelExtender> <aspanel ID="Panel2" runat="server"> <div id="Sidebar"> <asp:Accordion ID="AccordionMenu" CssClass="accordion" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" runat="server" Width="95%" Height="800px" FramesPerSecond="30" TransitionDuration="250"> <Panes> <asp:AccordionPane ID="AccordionPaneConfigureDevice" runat="server"> <Header> Configure Device</Header> <Content> <asp:Button CssClass="Button" ID="btnConfigureDevice" runat="server" Text="Configure Device" Width="100%" OnClick="btnConfigureDevice_Click" /> </Content> </asp:AccordionPane> </Panes> </asp:Accordion> </div> </aspanel> <div id="Content" style="border: thin solid #666666" class="Tabs"> <asp:TabContainer ID="TabContainerMain" runat="server" ActiveTabIndex="4" Width="100%" Height="100%" CssClass="" ViewStateMode="Enabled"> <asp:TabPanel ID="Tab_Configure_Device" runat="server" HeaderText="Tab_Configure_Device"> <ContentTemplate> <div class="TabControls"> <p> Howdy, I'm in Section Tab_Configure_Device .</p> </div> <div class="TabsAction"> </div> </ContentTemplate> </asp:TabPanel> </asp:TabContainer> </div> </div> <!-- end of wrapper --> </ContentTemplate> </asp:UpdatePanel> </form></body></html>\[/code\]CSS\[code\]Main CSS File */#HeaderWrapper { width: 100%; clear: both; height: 80px; margin-top:2px; margin-bottom:2px; margin-right:0px; margin-left:0px; filter: progidXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#99CCFF'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9CF)); /* for webkit browsers */ background: -moz-linear-gradient(top, #FFF, #9CF); /* for firefox 3.6+ */ padding-top:0px; padding-bottom:0px; padding-right:0px; padding-left:0px; border-bottom:thin solid #FFFFFF;}#Header{ width:1024px; margin: 0 auto; padding-top:0px; padding-bottom:0px; padding-right:0px; padding-left:0px; border-radius: 5px; }#ContentWrapper { width:1024px; margin: 0 auto; padding-top:0px; padding-bottom:0px; padding-right:0px; padding-left:0px; border-radius: 5px; }/* sidebar */#Sidebar { float: left; width: 184px; padding: 0px; height:800px; border: thin solid #666666; padding:0px; border-radius: 0px; margin-top:0px; margin-bottom:0px; margin-right:6px; margin-left:0px; filter: progidXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF)); /* for webkit browsers */ background: -moz-linear-gradient(top, #FFF, #FFF); /* for firefox 3.6+ */ }/* end of sidebar -->/* content */#Content { float: left; width: 824px; padding-top:0px; padding-bottom:0px; padding-right:0px; padding-left:0px; min-height:800px; border-radius: 0px; filter: progidXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF)); /* for webkit browsers */ background: -moz-linear-gradient(top, #FFF, #FFF); /* for firefox 3.6+ */ }/* End content *//* End content */html,body { margin:0px; padding:0px; font-family: Arial, Helvetica, sans-serif; font-size:13px; line-height:1.5em; filter: progidXImageTransform.Microsoft.gradient(startColorstr='#003366', endColorstr='#FFFFFF'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#036), to(#FFF)); /* for webkit browsers */ background: -moz-linear-gradient(top, #036, #FFF); /* for firefox 3.6+ */ height: 100%; }/*Accordion */ .accordion { width: 100%; padding-left: 5px; padding-right: 5px; } .accordionHeader { border: 1px solid #003366; color: white; background-color: #003366; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 4px; margin-top: 4px; cursor: pointer; border-radius: 5px; } .accordionHeaderSelected { border: 1px solid #003366; color: white; background-color: #003366; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 4px; margin-top: 4px; cursor: pointer; border-radius: 5px; } .accordionContent { background-color: #FFFFFF; border: 1px solid #003366; border-top: none; padding: 5px; padding-top: 4px; border-radius: 5px; } /*End Accordion *//* Busy Form */.updateProgress { border-radius: 5px;}/* Busy Form *//* Logo */#DivLogo{ float: left; margin-top:5px; margin-bottom:0px; margin-right:6px; margin-left:0px; padding-top:5px; padding-bottom:0px; padding-right:0px; padding-left:0px; width: 140px; height: 25px; font-family: Arial, Sans-Serif; font-size: 20px; font-weight: bold; }/* End Logo *//* Menu */#DivMenu{ float: left; clear: left; margin-top:12px; margin-bottom:0px; margin-right:6px; margin-left:0px; padding-top:5px; padding-bottom:0px; padding-right:0px; padding-left:5px; width: 205px; height: 25px; border-width: 1px; border-style: solid; border-top-left-radius: 5px; border-top-right-radius: 5px;}.Menu{ list-style: none; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; margin-top:1px; }.Menu ul{ background:#003366;}.Menu ul li{ background:#003366; text-align:center; /* set width if needed.*/ width:100px;}.Menu ul li a{ color: White; padding: 4px 2px 4px; padding-left:8px !important;}.Menu ul li a:hover{ background-image: none;}.Menu ul li a:hover{ color: Black; background:White;}.Menu ul li a{ color: White;}/* End Menu*/#DivUserDetails{ float: right; margin-top:13px; margin-bottom:0px; margin-right:5px; margin-left:0px; padding-top:5px; padding-bottom:0px; padding-right:20px; padding-left:5px; width: auto; height: 25px; border-width: 1px; border-style: solid; border-top-left-radius: 5px; border-top-right-radius: 5px;}/* About Modal */#AboutContainer {position:absolute; height:300px; width:440px; top:10%; left:35%; }#AboutInputContainer {position:absolute; height:100px; width:300px; top:10%; left:20%; color:Black;}/* End About Modal *//* Signoff Modal */#SignoffContainer {position:absolute; height:200px; width:440px; top:10%; left:35%; }#SignoffInputContainer {position:absolute; height:100px; width:300px; top:10%; left:20%; color:Black;}/* End Signoff Modal *//* Error Modal */#ErrorContainer {position:absolute;height:300px;min-height:300px;max-height:100%; width:440px; top:10%; left:35%; overflow:auto;}#ErrorInputContainer {position:absolute; height:100px; width:300px; top:10%; left:20%; color:Black;}#lblErrorCode{}#lblErrorMessage{}#lblExMessage{}/* End Error Modal *//* Grids */.mGrid { width: 100%; background-color: #fff; margin: 5px 0 10px 0; border: solid 1px #525252; border-collapse:collapse;font-family:Verdana; font-size:12px; table-layout:fixed; }.mGrid td { padding: 2px; border: solid 1px #c1c1c1; color: #003366; }.mGrid th { padding: 4px 2px; color: #000000; background: #99CCFF; font-size: 0.9em;border: solid 1px #c1c1c1; filter: progidXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#99CCFF'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9CF)); /* for webkit browsers */ background: -moz-linear-gradient(top, #FFF, #9CF); /* for firefox 3.6+ */ }.mGrid .alt { background: #fcfcfc; }.mGrid tr.data-row:hover { background-color:#FFFFCC; color:white; }.mGrid .pgr {background: #FFCC33; }.mGrid .pgr table { margin: 5px 0;}.mGrid .pgr td { border-width: 0px; padding: 2px; font-weight: bold; color:Black; line-height: 12px; font-family: Arial, Sans-Serif; font-size: 12px; border-radius: 5px; padding-left: 4px; padding-right: 4px; } .mGrid .pgr a { color:Black; text-decoration: none; }.mGrid .pgr a:hover { color:Black; text-decoration: none; }.pgr span{ padding: 5px; text-decoration: none; background: White; border-radius: 5px;}/* End Grids */.TabControls{ margin-top:2px; margin-bottom:2px; margin-right:2px; margin-left:2px; padding-top:2px; padding-bottom:2px; padding-right:2px; padding-left:2px; width: auto; border-width: 1px; border-style: solid; border-radius: 5px; filter: progidXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#99CCFF'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9CF)); /* for webkit browsers */ background: -moz-linear-gradient(top, #FFF, #9CF); /* for firefox 3.6+ */ height:120px;}.TabsAction{ margin-top:2px; margin-bottom:1px; margin-right:2px; margin-left:2px; padding-top:5px; padding-bottom:1px; padding-right:5px; padding-left:5px; border-width: 1px; border-style: solid; border-radius: 5px; filter: progidXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#99CCFF'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9CF)); /* for webkit browsers */ background: -moz-linear-gradient(top, #FFF, #9CF); /* for firefox 3.6+ */ height:120px; height: 660px; overflow: auto; /* Wrap all words in the grid so it fits in the window */ word-break : break-all;}/* TextBox */.Textbox{width:auto; padding:2px; color:Black; text-align:left; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }.Textbox:focus{ background-color:#FFCC33;}/* End TextBox *//* Button */.Button{ -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; text-align:left; padding-left:22px; margin-top:1px; margin-bottom:1px; background-repeat: no-repeat; background-image: url(/assets/img/action.gif); background-position:3px 50%}.Button:hover{ background: #FFCC33; background-repeat: no-repeat; background-image: url(/assets/img/action.gif); background-position:3px 50%}/* End Button */\[/code\]