CSS tune-up

The attached image shows the problem I have with my CSS.

Question 1: How to add White border and transparent background for the tow panels on the image.  
Question2: How to realign the buttons as indicated on the same image.

Thank you.

<style type="text/css">
body {
	text-align:center;
}
.clear {
	clear:both;
}
#form-wrapper {
	width:1050px;
	min-height:100px;
	overflow:hidden;
}
.leftForm {
	width:412px;
	min-height:200px;
	background-color:#cccccc;
    float:left;
    top: 0;
}
.gap {
	width:8px;
	min-height:200px;
	background-color:#999999;
    float:left;
    top: 0;
}
.rightForm {
	width:412px;
	min-height:200px;
	background-color:#cccccc;
    float:left;
    top: 0;
}	
.annual 
{
	width:180px;
	min-height:300px;
	background-color:yellow;
   float:left;
    top: 0;
}
.leftButton {
	width:319px;
	min-height: 60px;
	left:0px;
	background-color:#cc22cc;
	float:left; 
}
.rightButton {
	width:319px;
	min-height: 60px;
	background-color:#cc22cc;
	float:left; 
}
.middleButton {
	width:200px;
	min-height: 60px;
	background-color:#ff0000;
	float:left; 
}
.empty {
	width:220px;
	min-height: 80px;
	background-color:blue;
	float:left; 
}
.controls {
	width:319px;
	min-height: 20px;
	background-color:green;
	float:left;
     text-align: left;
    }
    .controls2 {
	width:200px;
	min-height: 20px;
	background-color:yellow;
	float:left;
	text-align: left;
    }
    .Panel3,  .optRollup {
display:inline-block;
}
      .controls3 {
	width:319px;
	min-height: 20px;
	background-color:green;
	float:left;
	text-align: left;
    }
    
.CriteriaCaptionsLeft{
	width:120px;
	min-height: 20px;
	float:left; 
     background-color: gray;
     text-align: left;
}

.CriteriaGeneral, .CriteriaDefault, .CriteriaSide, .CriteriaRight, .CriteriaLeft  {
	width:75px;
	min-height: 20px;
	float:left; 
     background-color: yellow;
     text-align: left;
}
</style>
</head>
<body>
<div id="form-wrapper">
<form id="form1" runat="server">
	<div class="leftForm">     leftForm     </div>
    
        <div class="gap">  2 - gap  </div>

 	<div class="rightForm">  rightForm </div>
 
       <div class="gap">    4a   </div>

       <div class="annual">  4 - annual   </div>

	<br />

      <div class="controls">
        &nbsp&nbsp&nbsp&nbsp<asp:Label 
            ID="Label4" runat="server" Text="Region:" 
            style="font-family: Arial; font-size: small" Height="22px"></asp:Label>
        <asp:DropDownList ID="cboRegion" runat="server" Width="83">

        </asp:DropDownList>&nbsp&nbsp&nbsp&nbsp
        <asp:Label ID="Label5" runat="server" Text="Data Year:" 
            style="font-size: small; font-family: Arial" Height="22px"></asp:Label>
        <asp:DropDownList ID="cboYear" runat="server"  Width="83">

        </asp:DropDownList>
        </div>
        
        <div class="controls2">&nbsp&nbsp&nbsp
              <asp:Label ID="Label6" runat="server" Text="Rollup:"  style="font-size: small; font-family: Arial" Height="22px"></asp:Label>
        <asp:Panel ID="optRollup" Class="optRollup" runat="server" Width="135" BorderColor="white">
            <asp:RadioButton ID="RadioButton1" Text="Monthly" runat="server" 
                style="font-family: Arial; font-size: small" />&nbsp&nbsp
            <asp:RadioButton ID="RadioButton2"  Text="YTD" runat="server" 
                style="font-family: Arial; font-size: small" />
        </asp:Panel>
        </div>

        <div class="controls3">&nbsp&nbsp&nbsp
                    <asp:Label ID="Label7" runat="server" Text="Location:" 
            style="font-size: small; font-family: Arial" Height="22px"></asp:Label>
        <asp:Panel ID="Panel3" Class="Panel3" runat="server" >
            <asp:RadioButton ID="RadioButton3" Text="A" runat="server" 
                style="font-family: Arial; font-size: small" />&nbsp
            <asp:RadioButton ID="RadioButton4"  Text=" B" runat="server" 
                style="font-family: Arial; font-size: small" />&nbsp
            <asp:RadioButton ID="RadioButton5" Text="C" runat="server" 
                style="font-family: Arial; font-size: small" />&nbsp
            <asp:RadioButton ID="RadioButton6"  Text="D" runat="server" 
                style="font-family: Arial; font-size: small" />
            
        </asp:Panel><br />
        </div>
    
	<div class="leftButton">
                    <asp:Panel ID="Panel1" runat="server">
                     <asp:Button ID="Button1" Name="opt" runat="server" Text="1" Height="30px" 
                            Width="103px" TabIndex="1" />
                     <asp:Button ID="Button2" Name="opt" runat="server" Text="3" Height="30px" 
                            Width="103px" TabIndex="3" />
                     <asp:Button ID="Button3" Name="opt" runat="server" Text="5" Height="30px" 
                            Width="103px" TabIndex="5" /><br />
                     <asp:Button ID="Button4" Name="opt" runat="server" Text="2" Height="30px" 
                            Width="103px" TabIndex="2" />
                     <asp:Button ID="Button5" Name="opt" runat="server" Text="4" Height="30px" 
                            Width="103px" TabIndex="4" />
                     <asp:Button ID="Button6" Name="opt" runat="server" Text="6" Height="30px" 
                            Width="103px" TabIndex="6" />
                 </asp:Panel>
    </div>
	<div class="middleButton right">
         <img src="images/Button.png" width="200px" height="60px" />
    </div>
 	<div class="rightButton right">
                <asp:Panel ID="Panel2" runat="server">
                     <asp:Button ID="Button7" runat="server" Text="7" Height="30px" 
                         Width="103px" TabIndex="7" />
                     <asp:Button ID="Button8" runat="server" Text="9" Height="30px" 
                         Width="103px" TabIndex="9" />
                     <asp:Button ID="Button9" runat="server" Text="11" Height="30px" 
                         Width="103px" TabIndex="11" /><br />
                     <asp:Button ID="Button10" runat="server" Text="8" Height="30px" 
                         Width="103px" TabIndex="8" />
                     <asp:Button ID="Button11" runat="server" Text="10" Height="30px" 
                         Width="103px" TabIndex="10" />
                     <asp:Button ID="Button12" runat="server" Text="12" Height="30px" 
                         Width="103px" TabIndex="12" />
                 </asp:Panel>   
    </div>
  <div class="empty">
  empty
   </div>
<br />
<br />
<div class="CriteriaCaptionsLeft">
    <asp:Label ID="Label1" runat="server" Text="Criterial type:"></asp:Label><br />
    <asp:Label ID="Label2" runat="server" Text="Region ID"></asp:Label><br />
    <asp:Label name="MetricLeft" ID="Label3" runat="server" Text="Metric ID, Left"></asp:Label><br />
    <asp:Label ID="YYYY" runat="server" Text="YYYY"></asp:Label>
</div>
<div class="CriteriaLeft">      
    <asp:TextBox ID="criterialtype_Left" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
    <asp:TextBox ID="metricId_Left" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
    <asp:TextBox ID="regionId_Left" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
    <asp:TextBox ID="yYYYRight_Left" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
    </div>
    <div class="CriteriaRight">      
        <asp:TextBox ID="criterialtype_Right" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
        <asp:TextBox ID="metricId_Right" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
        <asp:TextBox ID="regionId_Right" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
        <asp:TextBox ID="yYYYRight_Right" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
    </div>
    <div class="CriteriaSide">      
         <asp:TextBox ID="criterialtype_Side" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
        <asp:TextBox ID="metricId_Side" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
        <asp:TextBox ID="regionId_Side" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
        <asp:TextBox ID="yYYYRight_Side" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
    </div>
    <div class="CriteriaGeneral">      
            <asp:TextBox ID="criterialtype_General" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
            <asp:TextBox ID="metricId_General" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
            <asp:TextBox ID="regionId_General" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
            <asp:TextBox ID="yYYYRight_General" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
    </div>
    <div class="CriteriaDefault">      
            <asp:TextBox ID="criterialtype_Default" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
            <asp:TextBox ID="metricId_Default" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
            <asp:TextBox ID="regionId_Default" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
            <asp:TextBox ID="yYYYRight_Default" runat="server" Height="14px" Width="75px"></asp:TextBox><br />
    </div>
    </form>
</div><!--end of main-wrapper-->
</body>
</html>

Open in new window

CCS-Help.png
LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Can you post the rendered HTML - makes it easier to debug
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
The submitted code is the html I have except very beginning:
<!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 id="Head1" runat="server">
    <title></title>

Open in new window


I will do more cleaning up and resubmit it.

Thanks,

Mike
0
GaryCommented:
From the browser do View Source and post the HTML from there.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Mike EghtebasDatabase and Application DeveloperAuthor Commented:
I see, here you are.
index.html
0
GaryCommented:
Try an hard refresh in your browser - the page looks how you want it to look when I test the code.
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
You must be using firefox. It works okay with firefox but not with chrome or explorer.

I wonder why it doesn't work with explorer? BTW, any suggestion on the white panel border and transparent background?

Thanks,

Mike
0
GaryCommented:
Same for me in IE11 and Chrome
0
GaryCommented:
Add to the new class you added optrollout,panel3 this css

border:2px solid #fff

When you say transparent do you mean white? Because a transparent background would be yellow and green there
If so add this css as well
background: #fff;
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Thanks, I will try it now. Yes I need transparent to take whatever color html body has. The green and yellow will change,

Mike
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Thank you for your good help.

background: transparent; works okay.

Also, the realignment problem is corrected now.

Thanks again,

Mike
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.