asked on

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

Gary

Can you post the rendered HTML - makes it easier to debug

Mike Eghtebas

ASKER

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

Gary

From the browser do View Source and post the HTML from there.

Mike Eghtebas

ASKER

I see, here you are.
index.html

Gary

Try an hard refresh in your browser - the page looks how you want it to look when I test the code.

Mike Eghtebas

ASKER

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

Gary

Same for me in IE11 and Chrome

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Mike Eghtebas

ASKER

Thanks, I will try it now. Yes I need transparent to take whatever color html body has. The green and yellow will change,

Mike

Mike Eghtebas

ASKER

Thank you for your good help.

background: transparent; works okay.

Also, the realignment problem is corrected now.

Thanks again,

Mike