Android Smart App Banner doesn't scale with screen - css

I've created a Smart App Banner for Android using jquery.smartbanner. I've managed to make it work, but the problem is that the banner (which has a width of 100%) doesn't scale with the screen. So when the user opens the page it's zoomed in (because the website is not responsive) and when he zooms out, the banner (which previously had a width of 100%) now maintains the same width, so it only covers a small percentage of the page. Is there a way to fix this? The official CSS code is provided below.
Many thanks!
#smartbanner { position:absolute; left:0; top:-82px; border-bottom:1px solid #e8e8e8; width:100%; height:78px; font-family:'Helvetica Neue',sans-serif; background:-webkit-linear-gradient(top, #f4f4f4 0%,#cdcdcd 100%); background-image: -ms-linear-gradient(top, #F4F4F4 0%, #CDCDCD 100%); background-image: -moz-linear-gradient(top, #F4F4F4 0%, #CDCDCD 100%); box-shadow:0 1px 2px rgba(0,0,0,0.5); z-index:9998; -webkit-font-smoothing:antialiased; overflow:hidden; -webkit-text-size-adjust:none; }
#smartbanner, html.sb-animation {-webkit-transition: all .3s ease;}
#smartbanner .sb-container { margin: 0 auto; }
#smartbanner .sb-close { position:absolute; left:5px; top:5px; display:block; border:2px solid #fff; width:14px; height:14px; font-family:'ArialRoundedMTBold',Arial; font-size:15px; line-height:15px; text-align:center; color:#fff; background:#070707; text-decoration:none; text-shadow:none; border-radius:14px; box-shadow:0 2px 3px rgba(0,0,0,0.4); -webkit-font-smoothing:subpixel-antialiased; }
#smartbanner .sb-close:active { font-size:13px; color:#aaa; }
#smartbanner .sb-icon { position:absolute; left:30px; top:10px; display:block; width:57px; height:57px; background:rgba(0,0,0,0.6); background-size:cover; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,0.3); }
#smartbanner.no-icon .sb-icon { display:none; }
#smartbanner .sb-info { position:absolute; left:98px; top:18px; width:44%; font-size:11px; line-height:1.2em; font-weight:bold; color:#6a6a6a; text-shadow:0 1px 0 rgba(255,255,255,0.8); }
#smartbanner #smartbanner.no-icon .sb-info { left:34px; }
#smartbanner .sb-info strong { display:block; font-size:13px; color:#4d4d4d; line-height: 18px; }
#smartbanner .sb-info > span { display:block; }
#smartbanner .sb-info em { font-style:normal; text-transform:uppercase; }
#smartbanner .sb-button { position:absolute; right:20px; top:24px; border:1px solid #bfbfbf; padding: 0 10px; min-width: 10%; height:24px; font-size:14px; line-height:24px; text-align:center; font-weight:bold; color:#6a6a6a; background:-webkit-linear-gradient(top, #efefef 0%,#dcdcdc 100%); text-transform:uppercase; text-decoration:none; text-shadow:0 1px 0 rgba(255,255,255,0.8); border-radius:3px; box-shadow:0 1px 0 rgba(255,255,255,0.6),0 1px 0 rgba(255,255,255,0.7) inset; }
#smartbanner .sb-button:active, #smartbanner .sb-button:hover { background:-webkit-linear-gradient(top, #dcdcdc 0%,#efefef 100%); }
#smartbanner .sb-icon.gloss:after { content:''; position:absolute; left:0; top:-1px; border-top:1px solid rgba(255,255,255,0.8); width:100%; height:50%; background:-webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); border-radius:10px 10px 12px 12px; }
#smartbanner.android { border-color:#212228; background: #3d3d3d url('dark_background_stripes.gif'); border-top: 5px solid #88B131; box-shadow: none; }
#smartbanner.android .sb-close { border:0; width:17px; height:17px; line-height:17px; color:#b1b1b3; background:#1c1e21; text-shadow:0 1px 1px #000; box-shadow:0 1px 2px rgba(0,0,0,0.8) inset,0 1px 1px rgba(255,255,255,0.3); }
#smartbanner.android .sb-close:active { color:#eee; }
#smartbanner.android .sb-info { color:#ccc; text-shadow:0 1px 2px #000; }
#smartbanner.android .sb-info strong { color:#fff; }
#smartbanner.android .sb-button { min-width: 12%; border:1px solid #DDDCDC; padding:1px; color:#d1d1d1; background: none; border-radius: 0; box-shadow: none; min-height:28px}
#smartbanner.android .sb-button span { text-align: center; display: block; padding: 0 10px; background-color: #42B6C9; background-image: -webkit-gradient(linear,0 0,0 100%,from(#42B6C9),to(#39A9BB)); background-image: -moz-linear-gradient(top,#42B6C9,#39A9BB); text-transform:none; text-shadow:none; box-shadow:none; }
#smartbanner.android .sb-button:active, #smartbanner.android .sb-button:hover { background: none; }
#smartbanner.android .sb-button:active span, #smartbanner.android .sb-button:hover span { background:#2AC7E1; }
#smartbanner.windows .sb-icon { border-radius: 0px; }


Managed to solve it myself! Set #smartbanner to position:fixed; and you're done :-)

Related

Chrome Version 58.0.3000.4 dev (64-bit) CSS rendering issue

I noticed a strange problem on Latest Chrome Version 58.0.3000.4 dev (64-bit) My website is broken on Latest chrome DEV (Version 58.0.3000.4)[on MacOS] if you have latest chrome please check this URL http://openspeedtest.com/Get-widget.php
As you can see the buttons and animation Not rendering as expected. But working as expected on all other browser.
.example {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: -webkit-linear-gradient(top, white, black);
background: linear-gradient(to bottom, white, black);
}#ostui{
background-color: white;
height: 700px;
width: 730px;
}
#min_speed, #max_speed {
display:block;
width:auto;
margin-top:auto;
position:absolute;
top:208px;
z-index:4;
color:#35393c;
font-weight:700
}
#min_speed {
float:left;
left:63px
}
#max_speed {
right:63px;
float:right
}
#speedometer {
width:719px;
height:268px;
overflow:hidden;
margin-bottom: 5px;
margin-top: 60px;
background-color: #E5E6E7;
display:none;
}
#speedometer #inside_central {
top:18px;
left:3px;
position:relative;
width:257px;
height:257px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#speedometer #surface_plate {
border-bottom-style: solid !important;
border-bottom-width: 10px !important;
border-color: #FFFFFF;
position:relative;
top:-257px;
z-index:2;
margin-left:auto;
margin-right:auto
}
#inside_central #direction_sign {
margin-left:auto;
margin-right:auto;
position:relative;
top:50px;
left:0;
width:40px;
height:43px;
z-index:3;
overflow:hidden
}
#one_ink_visible {
position:absolute;
width:257px;
height:257px;
overflow:hidden;
top:7px;
-webkit-transform:rotate(74deg);
-moz-transform:rotate(74deg);
-o-transform:rotate(74deg);
-ms-transform:rotate(74deg)
}
#speedometer #inside_left, #speedometer #inside_right {
position:relative;
top:80px;
width:200px;
height:222px;
text-align:center
}
#speedometer #inside_left {
left:25px;
float:left
}
#speedometer #inside_right {
left:0;
float:right;
margin-right:20px
}
.side_ink {
background:url('http://get.openspeedtest.com/images/side-blue-ink.png');
position:absolute;
top:-43px;
left:0;
width:200px;
height:222px;
z-index:1
}
#inside_right .side_ink {
display:none
}
#inside_left .side_ink {
display:none
}
img#ink_segments {
left:0;
z-index:1;
position:relative
}
#direction_sign {
display:none
}
#direction_sign img {
left:0;
top:-43px;
position:relative;
z-index:3
}
.digital_speed {
font-family: 'Open Sans', Arial, sans-serif;
font-size:45px;
font-weight:400;
z-index:3;
position:relative
}
#digital_speed_current {
top:105px;
text-align:center;
width:100%;
position:absolute
}
#digital_speed_down, #digital_speed_up {
top:45px;
position:absolute;
width:100%;
text-align:center
}
.speed_caption {
font-family: 'Arial', sans-serif;
font-size:13px;
z-index:3;
position:relative
}
#speed_caption_current {
top:159px;
display:none;
position:absolute;
text-align:center;
width:100%;
font-weight:700
}
#speed_caption_down, #speed_caption_up {
position:absolute;
top:99px;
width:100%;
text-align:center;
display:none;
font-weight:700
}
/************************/
#speedometer_container{
display:block;
}
#speedometer_controller{
width: 719px;
height:100px;
overflow:hidden;
display:block;
}
#progress_bar {
margin-left:auto;
margin-right:auto;
position:relative;
width:606px;
height:73px;
background:url('http://get.openspeedtest.com/images/horizontal-progress-bar.png') no-repeat top center;
display:none;
z-index:4
}
#progress_text, #ping_result {
font-weight:700;
left:170px;
top:35px;
position:relative;
font-size:12px;
height:20px;
text-align:left;
display:inline;
margin-right:20px
}
#progress_bar_indicator {
font-weight:700;
top:16px;
left:521px;
background:#198bd9;
width:14px;
height:14px;
border-radius:50%;
position:absolute
}
#start_button_wrapper {
margin-left:auto;
margin-right: 20px;
height:auto;
left:8px;
text-align:center;
display:none;
position:relative;
z-index:4;
}
input.formatted_button {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
padding: 8px 20px;
background: -webkit-gradient(
linear, left top, left bottom,
from(#28adf0),
to(#117acf));
background: -o-linear-gradient(top, #28adf0, #117acf);
border-radius: 3px;
border: 1px solid #4887c7;
box-shadow:
1px 1px 0px rgba(000,000,000,0.2),
inset 0px 1px 1px rgba(255,255,255,0.2);
text-shadow:
0px 1px 1px rgba(000,000,000,0.3),
0px 1px 0px rgba(255,255,255,0.3);
margin-bottom:10px;
outline:none;
}
input.formatted_button:hover {
border-top-color: #1090e6;
}
input.formatted_button:active {
top:2px;
position:relative;
border-top-color: #1090e6;
background: #117acf;
}
input.formatted_button_bw {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #303030;
padding: 7px 20px;
background: -webkit-gradient(
linear, left top, left bottom,
from(#f7f7f9),
to(#e0e4e8));
background: -o-linear-gradient(top, #f7f7f9, #e0e4e8);
border-radius: 4px;
border: 1px solid #b8b8b8;
box-shadow:
0px 1px 0px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.3);
text-shadow:
0px 1px 1px rgba(255,255,255,1);
}
input.formatted_button_bw:hover {
border-top-color: #e0e4e8;
background: #e0e4e8;
}
input.formatted_button_bw:active {
top:2px;
position:relative;
border-top-color: #e0e4e8;
background: #e0e4e8;
}
#ip_container {
font-family: 'PT Sans',sans-serif;
font-size: 18px;
font-weight: 700;
margin-top: 10px;
}
#ip_address {
font-weight: 300;
}
#chart_container{
width:490px;
height:60px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
margin-top:-17px;
top:17px;
left:-10px;
position:relative;
}
.spinner {
width: 120px;
height: 120px;
margin: 100px auto;
background-color: #44A8FC;
border-radius: 100%;
-webkit-animation: scaleout .5s infinite ease-in-out;
animation: scaleout .5s infinite ease-in-out;
}
#-webkit-keyframes scaleout {
0% { -webkit-transform: scale(0.0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
#keyframes scaleout {
0% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 100% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
opacity: 0;
}
}

That was a bug on Latest chrome Dev. I reported the same https://bugs.chromium.org/p/chromium/issues/detail?id=689369

Responsive Table Not Working

I have created a table program in which everything works fine, but when I try to make it responsive using media queries it doesn't seem to work as you can see it is uneven. Here is the CodePen for the whole code: http://codepen.io/meeksmadness/pen/YNwOoE. I have provided some images to help if you need them and any help is appreciated.
Regular Screen:
Responsive Screen:
table {
position:relative;
z-index:0;
overflow:hidden;
border:1px solid black;
border-radius:5px;
border-collapse: collapse;
display:block;
max-width:600px;
width:100%;
margin:0 auto;
margin-top:50px;
background-color:white;
-webkit-box-shadow: 10px 10px 15px -7px rgba(0,0,0,0.60);
-moz-box-shadow: 10px 10px 15px -7px rgba(0,0,0,0.60);
box-shadow: 10px 10px 15px -7px rgba(0,0,0,0.60);
}
tr {
color:black;
font-size:18px;
font-weight:400;
}
tr:nth-child(odd){
background-color:#C5C5C5;
}
tr:first-child {
background-color:#191919;
color:#D3D3D3;
font-size:23px;
font-weight:200;
}
tr:first-child td {
border-bottom:4px solid #696969;
}
tr:last-child td {
border-bottom:0;
}
td {
position:relative;
overflow:hidden;
width:200px;
height:auto;
padding:20px;
border-bottom:1px solid #474747;
border-right: 1px solid #474747;
}
td:last-child {
border-right:0;
}
td span.special {
display:block;
float:right;
cursor:pointer;
}
td>a.delete {
position:absolute;
cursor:pointer;
opacity:0;
top:0;
bottom: 0;
right: 0;
background: red;
padding: 18px;
font-size:22px;
}
#media (max-width:600px){
table {
width:100%;
}
}
#media (max-width:357px){
td span.special {
float:none;
text-align:center;
}
}

Why doesn't Chrome render this page as smooth as IE?

When I hover the first div for example, it is meant to change the bg color, and the color changes but it flashes when changing the color and it's not smooth at all in Chrome. but it is really smooth in IE and Firefox ... Why is that? (that's all I want to know)
CSS:
.bg {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:100%;
height:100%;
background-color:#D8D8D8;
z-index:-10;
}
.DIVOne {
color:#FFF;
margin-top:10%;
background-color:#A2D700;
height:300%;
line-height:200%;
width:20%;
padding:0 20px;
font-size:300%;
font-family:Verdana, Geneva, sans-serif;
margin-left:20%;
border: solid 5px #000;
border-width:0 4px 5px 0;
border-radius:5px;
border-color:transparent #ddd #999 transparent;
background-clip:padding-box;
text-align:center;
z-index:-5;
}
.DIVOne:hover {
border-width:0 2px 3px 0;
margin-right:4px;
position:relative;
left:2px;
top:3px;
}
.DIVOne:hover ~ .bg {
background-color:#A2D700;
transition:all 0.5s;
}
.DIVTwo {
color:#FFF;
background-color:#FF8000;
height:300%;
line-height:200%;
width:20%;
margin-top:10px;
padding:0 20px;
font-size:300%;
font-family:Verdana, Geneva, sans-serif;
margin-left:20%;
border: solid 5px #000;
border-width:0 4px 5px 0;
border-radius:5px;
border-color:transparent #ddd #999 transparent;
background-clip:padding-box;
text-align:center;
z-index:-6;
}
.DIVTwo:hover {
border-width:0 2px 3px 0;
margin-right:4px;
position:relative;
left:2px;
top:3px;
}
.DIVTwo:hover ~ .bg {
background-color:#FF8000;
}
.DIVThree {
color:#FFF;
background-color:#0080FF;
height:300%;
line-height:200%;
width:20%;
margin-top:10px;
padding:0 20px;
font-size:300%;
font-family:Verdana, Geneva, sans-serif;
margin-left:20%;
border: solid 5px #000;
border-width:0 4px 5px 0;
border-radius:5px;
border-color:transparent #ddd #999 transparent;
background-clip:padding-box;
text-align:center;
z-index:-6;
}
.DIVThree:hover {
border-width:0 2px 3px 0;
margin-right:4px;
position:relative;
left:2px;
top:3px;
}
.DIVThree:hover ~ .bg {
background-color:#0080FF;
}
HTML:
<div class="DIVOne"> Content </div>
<div class="DIVTwo"> Content </div>
<div class="DIVThree"> Content </div>
demo: http://www.jsfiddle.net/aryanf/w7unZ/

The problem is with the following code
.DIVOne:hover {
border-width:0 2px 3px 0;
margin-right:4px;
position:relative;
left:2px;
top:3px;
}
It's the position:relative; property that is causing the problem on Chrome. Try removing it. Besides, I don't see why you have introduced it in the first place. It seems to work fine without it.
.DIVOne:hover {
border-width:0 2px 3px 0;
margin-right:4px;
//position:relative;
left:2px;
top:3px;
}

If it is not rendering and appearing smooth on other browsers, try to add some css code additionaly inside your CSS file.
Suppose if you need Rounded Corner Border in IE, you will use
.ddlStyle {
border-radius: 4px;
height: 22px;
width: auto;
max-width: 300px;
min-width: 120px;
padding: 0 0 0px 0px;
padding-right: 4px;
font-family: Calibri,Verdana, Tahoma, 'Segoe UI';
}
But this may not render perfect on all other Browser due to different behavior of Rendering Engine. So make addition of some lines and try on other browsers.
.ddlStyle {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
height: 22px;
width: auto;
max-width: 300px;
min-width: 120px;
padding: 0 0 0px 0px;
padding-right: 4px;
font-family: Calibri,Verdana, Tahoma, 'Segoe UI';
}
Hope, it solves the problem.

Asp.net Css Gridview Styling

I have an asp.net gridview. i have applied a style to the main headings bar using shading.
This works fine in IE9 but it doesnt use the shading in Chrome. I use the exact same shading for div etc in my webapplication and both Chrome and IE9 work fine.
So why does Chrome not like my CSS? (specifically the 3 shading lines in .mGrid th shown below)
thanks
Damo
HTML Code
<asp:GridView ID="GridViewMain" OnRowDataBound="RowDataBound" OnPageIndexChanging="gridView_PageIndexChanging"
runat="server" AllowPaging="True" PageSize="50" PagerSettings-Position="TopAndBottom"
CssClass="mGrid"
PagerStyle-CssClass="pgr"
AlternatingRowStyle-CssClass="alt"
>
</asp:GridView>
CSS
/* 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; }
.mGrid td { padding: 2px; border: solid 1px #c1c1c1; color: #003366; }
.mGrid th { padding: 4px 2px; color: #000000;
filter: progid:DXImageTransform.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+ */
background: #99CCFF; font-size: 0.9em;border: solid 2px #c1c1c1;
}
.mGrid .alt { background: #fcfcfc; }
.mGrid .pgr {background: #FFFFFF; }
.mGrid .pgr table { margin: 5px 0; }
.mGrid .pgr td { border-width: 0px; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }
.mGrid .pgr a { color: #666; text-decoration: none; }
.mGrid .pgr a:hover { color: #000; text-decoration: none; }
.mGrid tr:hover{background-color:#FFFFCC;color:white;}
/* End Grids */

U can use below style,
/***** data table ******/
.dataTable{ display:table; margin:0px 0px 3px 0px; padding:0px; border: none; border-spacing:0px; font-size:100%; }
.noPad{ padding:0px !important; margin:0px !important;}
.dataTable tr.altRow td{ background:#EAEAEA ;}
.dataTable tr.selRow td{ background:#FFFFCC ;}
.dataTable td.middleAlign{ padding:11px !important; }
.dataTable tr.totalRow td{ background:#999999 !important;}
.dataTable th{ background: url('/_layouts/ABFSG/MF/Images/tableHdr_bg.png') left top repeat-x; margin:0px; font-size:12px; color:#000; border-top:0px solid #D7BB00; vertical-align:middle !important; }
.dataTable th, td{ display:table-cell; padding:5px 5px 5px 7px; border:0px solid #cecece; vertical-align:middle;text-align:left; font-weight:normal;}
.dataTable td.subRow { border-top:1px solid #D7BB00;background: url('/_layouts/ABFSG/MF/Images/subRowHeader.png') left top repeat-x; height:17px; padding:2px !important; padding-left:7px !important; }
.dataTable tr.singleRow td{ padding:0px 5px 3px 5px !important;}
.withBorder td{ border:1px solid #EAEAEA;}
.dataTable td.gray{ background-color:#818181;}
.dataTable td.noPadDiv{ padding:0px !important; margin:0px !important;}
.dataTable td.vtop{ vertical-align:top;}
.sec_dataTable{display:table; margin:0px 0px 3px 0px; padding:0px; border: none; border-spacing:0px; font-size:100%;}
.sec_dataTable tr th{background:#FFFAEA ; margin:0px; font-size:11px; color:#000; display:table-cell; padding:5px 5px 5px 7px; border:1px solid #DDDDDD; vertical-align:middle; text-align:left; font-weight:normal;}
.sec_dataTable tr td{ display:table-cell; padding:5px 5px 5px 7px; border:1px solid #DDDDDD; vertical-align:middle; text-align:left; font-weight:normal;}
.sec_dataTable tr.altRow td{ background:#EAEAEA !important;}
.dataTableBrd{display:table; margin:0px 0px 3px 0px; padding:0px; border: none; border-spacing:0px; font-size:100%;}
.dataTableBrd tr th{ background: url('/_layouts/ABFSG/MF/Images/tableHdr_bg.png') left top repeat-x;border:1px solid #EBBA05; margin:0px; font-size:11px; color:#000;padding:5px 5px 5px 7px; border-top:0px solid #D7BB00; vertical-align:middle !important; font-weight:normal;}
.dataTableBrd tr td{ display:table-cell; padding:5px 5px 5px 7px; border:1px solid #DDDDDD; vertical-align:middle; text-align:left; font-weight:normal;}
.dataTableBrd tr.altRow td{ background:#EAEAEA !important;}
.globalNav{background:url(/_layouts/ABFSG/MF/Images/globalNav_bg.png) left top repeat-x; margin:0px; padding:0px; height:22px; float:left;}
.globalNav ul{ margin:0px; padding:0px; list-style:none;}
.globalNav li{ float:left;}
.globalNav li a{ display:block; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000; margin:0px; padding:4px 10px 4px 10px;}
.globalNav li.sep{ display:block; background:url('/_layouts/ABFSG/MF/Images/globalNav_sep.png') left top no-repeat; width:1px; height:22px;}
.globalNav li.sel a{ display:block; background:url(/_layouts/ABFSG/MF/Images/globalNav_selbg.png) top left repeat-x; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FECB02;}
.globalNav li.sel a:hover{ cursor:default;}
.globalNav li.first{ float:left; background:url(/_layouts/ABFSG/MF/Images/globalNav_unselFirL.png) left top no-repeat; margin:0px; padding:0px;}
.globalNav li.first a{ display:block; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000; margin:0px; padding:4px 10px 4px 10px;}
.globalNav li.firstsel{ float:left; background:url(/_layouts/ABFSG/MF/Images/globalNav_selFirL.png) left top no-repeat; margin:0px; padding:0px;}
.globalNav li.firstsel a{ display:block; background:url(/_layouts/ABFSG/MF/Images/globalNav_selbg.png) top left repeat-x; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FECB02; margin:0px 0px 0px 5px; padding:4px 10px 4px 5px;}
.globalNav li.firstsel a:hover{ cursor:default;}
.globalNav li.last{ float:left; background:url(/_layouts/ABFSG/MF/Images/globalNav_unselLastL.png) right top no-repeat; margin:0px; padding:0px;}
.globalNav li.last a{ display:block; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000; margin:0px; padding:4px 10px 4px 10px;}
.globalNav li.lastsel{ float:left; background:url(/_layouts/ABFSG/MF/Images/globalNav_selLastL.png) right top no-repeat; margin:0px; padding:0px;}
.globalNav li.lastsel a{ display:block; background:url(/_layouts/ABFSG/MF/Images/globalNav_selbg.png) top left repeat-x; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FECB02; margin:0px 4px 0px 0px; padding:4px 5px 4px 10px;}
.globalNav li.lastsel a:hover{ cursor:default;}
.grayNav ul{ margin:0px; padding:0px;}
.grayNav li{ float:left; list-style:none;}
.grayNav li a{ display:block; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#6c7f85; margin:0px; padding:0px 2px; }
.grayNav li.sel a{ display:block; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000; margin:0px; padding:0px 2px; }
.grayNav li.sel a:hover{ cursor:default; }
.grayNav li.sep{ color:#C8C8C8; font-weight:bold; margin:0 7px 0 7px;}
.header h1{ font-size:15px; color:#000; font-weight:bold; float:left;}
.btnSearchTopPad{ margin-top:0px; *margin-top:1px;}
.arrowPlace{position:absolute; margin-top:-7px;}
.solutionTxt{ padding:5px 0px; width:100%;width:97%\9; text-align:center; color:#000!important; float:left;}
.blkLinkText{ padding:5px 0px; width:100%;width:97%\9; color:#000!important; float:left;}
.largeFont{ font-size:15px; font-weight:bold;}
/*.pagination_bg{background:#D0D0D0; float:left; -moz-border-radius: 3px;-webkit-border-radius: 3px;}*/
.pagination_sel{ padding:2px 5px; float:left;}
.pagination_sel a{ cursor:default;}
.pagination_unsel{ padding:2px 5px; float:left;}
.testimonialBox{ background: #fff url(/_layouts/ABFSG/MF/Images/header_boxBG.png) bottom left repeat-x;}
.testimonialBoxShadow{ background: #fff url(/_layouts/ABFSG/MF/Images/header_boxSDO.png) center no-repeat; height: 10px;}
.testimonial{ position:relative; border:1px solid #9F9F9F; padding:0px!important; float:left; border-left:none; border-top:none; border-bottom:none;}
.testimonialCont{position:absolute; height: 18px; width: 18px; background-position: -47px 0px;}
.testimonial .bdrT{ background:url('/_layouts/ABFSG/MF/Images/testmonial_Top.png') left top repeat-x; margin-left:25px; padding:3px 0 0 0; font-size:3px;}
.testimonial .bdrB{ background:url('/_layouts/ABFSG/MF/Images/testmonial_Top.png') left top repeat-x; margin-left:25px; padding:0 0 3px 0; height:1px; }
.testimonial .bdrL{background: url("/_layouts/ABFSG/MF/Images/testmonial_Aro.png") no-repeat scroll left center transparent; margin: 0;padding: 0 0 0 22px;}
.tmTL{top: -2px; left:19px; clip: rect(auto 8px 8px auto);}
.tmTR{top: -2px; right: -5px; clip: rect(auto auto 8px 8px); float: right;}
.tmBL{bottom: -1px;left: 19px; clip: rect(8px 8px auto auto); }
.tmBR{bottom: -1px;right: -5px;clip: rect(8px auto auto 8px); }
.os_banner1{ margin-left:-10px; padding:103px 0px 4px 0px; background:url(/_layouts/ABFSG/MF/Images/our_solutions_banner1.png) left top no-repeat; width:454px; height:115px;}
.os_banner2{ margin:-4px 0px 0px -10px; padding:103px 0px 4px 0px; background:url(/_layouts/ABFSG/MF/Images/ourSolutions_banner2.jpg) left top no-repeat; width:452; height:111px; width: 456px;}
.os_banner_grp{ margin:-4px 0px 0px -10px; padding:103px 0px 0px 0px; background:url(/_layouts/ABFSG/MF/Images/group_oursolutions.png) left top no-repeat; width:452; height:115px; width: 456px;}
.banner1Cont{ margin:-70px 0 0 250px;}
.banner2Cont{ margin:-80px 0 0 205px;}
h1.privaFont{font-size:16px; color:#000; font-family:PrivaThreeItalicPro,Verdana, Arial; letter-spacing:-1px;}
.os_bannerBG{ background: url(/_layouts/ABFSG/MF/Images/our_solutions_bg.png) top left repeat-x; padding:7px; height:92px; width:442px;}
.headerBox_smallShadow{ background: #fff url(/_layouts/ABFSG/MF/Images/header_box_smallSDO.png) center top no-repeat; height:6px; padding:0px; margin:0px; float:left;}
#wealth_layer,#fundsLayer,#orgFundsLayer,#rollOver1,#rollOver2,#wealthPro_layer,#adityaB_layer,#mutual_layer,#Purchase_step1,#equity,#funds{padding-top:10px; position:absolute; display:none; z-index:10;}
.portlet_01 .bdrRt{background-image:url(/_layouts/ABFSG/MF/Images/purple_dropdwn_right.png);background-position:right 5px; background-repeat:no-repeat; margin-bottom:0px;}
.portlet_01 .bdrLt{background-image:url(/_layouts/ABFSG/MF/Images/purple_dropdwn_left.png);background-position:left 5px; background-repeat:no-repeat; margin-bottom:0px;}
.borderBottHeader{ border-bottom:1px solid #D6D6D6; width:449px; margin-left:3px; margin-top:-0px; *margin-top:-10px;}
.moverArr{background-image:url(/_layouts/ABFSG/MF/Images/solutionSelArr.png); background-position:absolute; height:9px; width:113px; margin-top:-8px; *margin-top:-8px; margin-left:5px; z-index:99;}
#breadCrumbs a{ font-weight:bold;}
.star_icon{width:16px; height:15px; background-image:url('/_layouts/ABFSG/MF/Images/sprite_icon.png'); background-position:-34px -113px; background-repeat:no-repeat; padding:0px;}
.ratingFull_icon{width:10px; height:11px; background-image:url('/_layouts/ABFSG/MF/Images/sprite_icon.png'); background-position:-54px -113px; background-repeat:no-repeat; padding:0px;}
.ratingHalf_icon{width:9px; height:11px; background-image:url('/_layouts/ABFSG/MF/Images/sprite_icon.png'); background-position:-67px -113px; background-repeat:no-repeat; padding:0px;}
.returns_icon{width:17px; height:15px; background-image:url('/_layouts/ABFSG/MF/Images/sprite_icon.png'); background-position:-81px -116px; background-repeat:no-repeat; padding:0px;}
.risk_icon{width:18px; height:17px; background-image:url('/_layouts/ABFSG/MF/Images/sprite_icon.png'); background-position:-101px -116px; background-repeat:no-repeat; padding:0px;}
.liquidity_icon{width:16px; height:18px; background-image:url('/_layouts/ABFSG/MF/Images/sprite_icon.png'); background-position:-122px -116px; background-repeat:no-repeat; padding:0px;}
.investment_icon{width:16px; height:17px; background-image:url('/_layouts/ABFSG/MF/Images/sprite_icon.png'); background-position:-143px -116px; background-repeat:no-repeat; padding:0px;}
.awards_icon{width:15px; height:20px; background-image:url('/_layouts/ABFSG/MF/Images/sprite_icon.png'); background-position:-167px -113px; background-repeat:no-repeat; padding:0px;}
.vr_icon{width:12px; height:10px; background-image:url('/_layouts/ABFSG/MF/Images/sprite_icon.png'); background-position:-189px -118px; background-repeat:no-repeat; padding:0px;}
.botBrdr{ border-top:1px solid #FFDD00; height:0px; border-bottom:1px solid #FFF; margin:0 0px 0 -10px; padding-right:20px;}
.lightYellowBox{border: 1px solid #F6E04E; position:relative; overflow:visible;background-color:#FEFCE5;background-image:none;}
.type7 .yellowBxCrnr{background-image:url(/_layouts/ABFSG/MF/Images/sprite_icon.png);}
.yellowBxCrnr { position:absolute; height: 12px; width: 12px; background-position:-68px 0px;}
.YTL{position: absolute;left: -1px; top: -1px; clip: rect(0 6px 6px 0);}
.YTR {position: absolute;top: -1px; right: -1px; clip: rect(auto auto 6px 6px); float: right;}
.YBL {position: absolute;clip: rect(6px 6px auto auto);left: -1px; bottom: -1px;_bottom: -3px;}
.YBR { position: absolute; clip: rect(6px auto auto 6px);bottom: -1px;right: -1px;_bottom: -3px;}
.fundDetailsBg{ margin:0px 0px 0px 7px; padding:40px 10px 0px 350px; background:url(/_layouts/ABFSG/MF/Images/fund_details.png) left top no-repeat; width:320px; height:118px; }
.gratuityDetailsBg{ margin:0px; padding:40px 0px 0px 350px; background:url(/_layouts/ABFSG/MF/Images/oursolutions_gratuity.png) left top no-repeat; width:330px; height:90px; font-size:20px;}
.fundDetailsMFBg{ margin:0px; padding:40px 0px 4px 340px; background:url(/_layouts/ABFSG/MF/Images/fund_details.gif) left top no-repeat; width:330px; height:138px; }
.fundDetailsCorporateBg{ margin:0px; padding:40px 0px 4px 0px; background:url(/_layouts/ABFSG/MF/Images/Corporatefunddetailsoverview_img.jpg) left top no-repeat; width:670px; height:145px;}
.shadowSep{background:url(/_layouts/ABFSG/MF/Images/shadowSep.png) left top no-repeat; width:680px; height:9px;}
.marginNeg{margin-left:-5px; margin-right:-2px;}
div.greyTab{background:url('/_layouts/ABFSG/MF/Images/button_sprite.png') left no-repeat;overflow: hidden; height: 24px;padding-left: 10px;margin-right: 0px; float:left; background-position:0px -124px; z-index:1000; }
a:hover.greyTab{text-decoration:none}
a.greyTab { display:block; background:url('/_layouts/ABFSG/MF/Images/button_sprite.png') right no-repeat ; padding: 5px 23px 5px 5px; margin-right: 0px;height: 24px; float:left; color: #000; background-position: right -124px;}
#contentBox{ position:absolute; left:264px; left:260px\9; top:256px; float:left; z-index:1001;}
#searchNAVBox{ position:relative; float:left;}
.borderBottom{ border-bottom:1px solid #acacaa; margin-left:3px; margin-top:-0px; *margin-top:-10px; padding-bottom:10px;}
.greyBox{ background-color:#EAEAEA; border-top:1px solid #acacaa; border-bottom:1px solid #acacaa; padding:10px; margin-left:-10px; padding-left:10px;width:671px;}
.whtBox{ background-color:#fff; padding:10px; margin-left:-10px; padding-left:10px; width:671px;}
.whiteBox_01{padding-bottom:10px; margin-left:-10px; padding-left:10px; background:#ffffff;}
#curtain{ width:100%; height:100%; position: absolute; z-index:995 !important; overflow:hidden; left:0px; top:0px; opacity:.4; filter: alpha(opacity=60); background-color: #000;}
.popupAlign{position:absolute; left:50%; top:20%; z-index:999 !important;}
.closeBtn{width:17px; height:17px; background-image:url('/_layouts/ABFSG/MF/Images/sprite_icon.png'); background-position:-137px 0px; background-repeat:no-repeat; padding:0px; `enter code here`margin-top:-3px; margin-right:-5px; cursor:pointer;}

need to put the line
background: #99CCFF; font-size: 0.9em;border: solid 2px #c1c1c1;
before the shading is applied. As shown below. now fixed.
thanks
damo
.mGrid th { padding: 4px 2px; color: #000000;
**background: #99CCFF; font-size: 0.9em;border: solid 2px #c1c1c1;**
filter: progid:DXImageTransform.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+ */
}

setting div to 100% still not working

None of the div elements on my page seem to be adjustable to 100% height. I've been trying since last night. Any help would be appreciated. Thanks.
<style type="text/css">
html, body {
height: 100%;
background-color: #E1E1E1;
}
body, td, th {
font-family: Arial, Helvetica, sans-serif;
height: 100%;
}
</style>
<style type="text/css">
<!--
/* ~~ this fixed width container surrounds all other divs~~ */
.container {
width: 965px;
height: 100%;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
overflow: hidden; /* this declaration makes the .container understand where the floated columns within ends and contain them */
}
.sidebar1 {
float: left;
width: 200px;
padding-bottom: 10px;
min-height: 100%;
}
.content {
padding: 10px 0;
width: 380px;
background: #fcfcfc;
float: left;
height: 100%;
position: relative;
}
.content2 {
float: left;
width: 380px;
background: #fcfcfc;
padding: 10px 0;
}
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}
/* ~~ The footer styles ~~ */
.footer {
padding: 10px 0;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the .container) if the .footer is removed or taken out of the .container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<div class="container_8 clearfix">
<h1 class="grid_1"><img src="resources/img/kite2.png" width="35" height="16"></h1>
<nav class="grid_5">
<ul class="clearfix">
<li class="fr">administrator<span class="arrow-down"></span>
<ul>
<li>Account</li>
<li>Users</li>
<li>Groups</li>
<li>Sign out</li>
</ul>
</li>
</ul>
</nav>
<form class="grid_2">
<input class="full" type="text" placeholder="Search..." />
</form>
</div>
</header>
<section>
<div class="container">
<div class="sidebar1">
<div style="padding-top: 5px;">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0" style="border-right: 0px;"><img src="resources/img/tab1.png" alt=""></li>
<li class="TabbedPanelsTab" tabindex="0"><img src="resources/img/tab2.png"></li>
<li class="TabbedPanelsTab" tabindex="0"><img src="resources/img/tab3.png"></li>
<li class="TabbedPanelsTab" tabindex="0"><img src="resources/img/tab4.png"></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
<div class="TabbedPanelsContent">Content 4</div>
</div>
</div>
</div>
</div>
<div class="content" style="border-left: solid 1px #CCC;"><!-- end .content --></div>
<div class="content2" style="border-left: solid 1px #CCC;"><!-- end .sidebar2 --></div>
<!-- end .container -->
</div>
</section>
</div>
i have another attached css file (style.css)
#wrapper {
min-height:100%;
height:auto!important;
height:100%;
margin:0 auto -50px;
}
footer, #push {
height:50px;
}
html { height: 100%; }
body {
font:normal normal normal 11px/16px 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
background:#8ec2da;
height: 100%;
}
.no-border {
border:none!important;
-moz-border-radius:0!important;
-webkit-border-radius:0!important;
-khtml-border-radius:0!important;
border-radius:0!important;
}
nav>ul {
padding:0;
}
a {
color:#06f;
outline:none;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
abbr, acronym {
font-size:85%;
letter-spacing:.1em;
text-transform:uppercase;
}
abbr[title], dfn[title] {
border-bottom:1px dotted black;
cursor:help;
}
abbr[title], acronym[title], dfn[title] {
border-bottom:1px dotted #CCC;
cursor:help;
}
code, kbd, samp, pre, tt, var, .code {
font-family:Monaco, 'Panic Sans', 'Lucida Console', 'Courier New', Courier, monospace, sans-serif;
}
h1 {
font-size:20px;
}
h2 {
font-size:18px;
}
h3 {
font-size:14px;
}
h4 {
font-size:13px;
}
h5 {
font-size:12px;
}
h6 {
font-size:11px;
}
h1, h2, h3, h4, h5, h6, p {
margin:1em 0;
}
h1, h2, h3 {
color:#000;
}
h4, h5, h6 {
color:#444;
font-weight:normal;
}
h6, p {
color:#676767;
}
h1, h2, h3, b, strong, caption, th, thead, dt, legend {
font-weight:bold;
}
ul, ol {
padding-left:2em;
}
li ul, li ol, ul ul, ol ol, dl dd {
margin-bottom:0;
margin-left:0;
margin-top:0;
}
small, sup, sub {
font-size:90%;
}
.code {
background-color:#EAEFF4;
color:#069;
overflow:auto;
padding:2px 6px;
}
.al {
text-align:left!important;
}
.ar {
text-align:right!important;
}
.ac {
text-align:center!important;
}
.fl {
float:left!important;
}
.fr {
float:right!important;
}
body.login {
height:0;
overflow:hidden;
}
.login-box {
margin:0 auto!important;
margin-top:-140px!important;
margin-left:-175px!important;
position:absolute!important;
top:50%;
left:50%;
width:350px;
}
.login-box form {
border-bottom:1px solid #DDD;
margin:10px 0;
}
.login-box ul {
list-style-type:none;
padding:0;
}
.login-box.main-content {
min-height:0;
}
#promo {
border-bottom:1px solid #000;
background:#f9d835;
background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(top, #f9d835, #f3961c);
-pie-background:linear-gradient(top, #f9d835, #f3961c);
padding:10px 0;
}
#promo p {
color:#fff;
margin:0;
line-height:26px;
text-shadow:0 1px 0 #000;
}
#promo .close {
color:#e83;
font-family:'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size:10px;
font-weight:bold;
padding:1px 5px;
text-shadow:0 1px 1px #fff;
text-decoration:none;
}
#wrapper>header {
background:#434343;
background:-moz-linear-gradient(top, #434343, #191919);
background:-webkit-gradient(linear, left top, left bottom, from(#434343), to(#191919));
-pie-background:linear-gradient(top, #434343, #191919);
-moz-box-shadow:rgba(0, 0, 0, 0.3) 0 1px 2px;
-webkit-box-shadow:rgba(0, 0, 0, 0.3) 0 1px 2px;
-khtml-box-shadow:rgba(0, 0, 0, 0.3) 0 1px 2px;
-pie-box-shadow:#bbb -2px 1px 2px;
box-shadow:rgba(0, 0, 0, 0.3) 0 1px 2px;
margin-bottom:20px;
position:fixed;
top:0;
width:100%;
z-index:999;
zoom:1;
}
#wrapper>header h1 {
color:#fff;
font-family:"Lucida Grande", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
font-size:16px;
line-height:40px;
margin-top:0;
margin-bottom:0;
text-shadow:0 1px 1px #000;
}
#wrapper>header h1 a {
color:#fff;
text-decoration:none;
}
#wrapper>header nav {
background:transparent url(../../resources/img/line_vert.png) repeat-y top left;
}
#wrapper>header nav ul {
padding:0;
}
#wrapper>header nav>ul {
padding-left:10px;
}
#wrapper>header nav>ul>li {
display:block;
float:left;
position:relative;
}
#wrapper>header nav>ul>li a {
color:#eee;
display:block;
font-size:13px;
line-height:40px;
padding:0 10px;
text-decoration:none;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.5);
}
#wrapper>header nav>ul li:hover>a {
color:#fff;
}
#wrapper>header nav>ul>li:hover:not(.action)>a {
background:#555;
background:-moz-linear-gradient(top, #555, #222);
background:-webkit-gradient(linear, left top, left bottom, from(#555), to(#222));
-pie-background:linear-gradient(top, #555, #222);
}
#wrapper>header nav>ul>li.active>a {
background:#191919!important;
color:#fff;
font-weight:bold;
}
#wrapper>header nav>ul>li.action {
border:1px solid #444;
border:1px solid rgba(255, 255, 255, 0.07);
border-bottom:1px solid rgba(255, 255, 255, 0.15);
margin-top:6px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;
margin-right:4px;
}
#wrapper>header nav>ul>li.action>a.button {
color:#fff;
font-size:10px;
font-weight:bold;
line-height:16px;
padding:4px 10px;
border:1px solid #111;
}
#wrapper>header nav>ul>li>a span.arrow-down {
background:transparent url(../../resources/img/arrows.png) no-repeat 0 -103px;
display:inline-block;
height:6px;
margin-left:8px;
width:10px;
}
#wrapper>header nav>ul>li:hover>a span.arrow-down {
background:transparent url(../../resources/img/arrows.png) no-repeat -10px -103px;
}
#wrapper>header nav>ul ul {
background:#191919;
-moz-border-radius:0 0 5px 5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-khtml-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
display:none;
padding-bottom:5px;
position:absolute;
width:150px;
z-index:999;
-moz-box-shadow:0 2px 2px #777;
-webkit-box-shadow:0 2px 2px #777;
-khtml-box-shadow:0 2px 2px #777;
box-shadow:0 2px 2px #777;
}
#wrapper>header nav>ul li:hover ul {
display:block;
}
#wrapper>header nav>ul ul li a {
padding:0 10px;
line-height:30px;
}
#wrapper>header nav>ul ul li a:hover {
background:#434343;
}
#wrapper>header form input[type=text] {
background:#777;
border:1px solid #191919;
margin-top:7px;
-moz-box-shadow:0 1px 0 #ddd;
-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
-webkit-box-shadow:0 1px 0 #ddd;
-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
-khtml-box-shadow:0 1px 0 #ddd;
-khtml-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
}
#wrapper>header form input[type=text]:hover {
background:#888;
}
#wrapper>header form input[type=text]:focus {
background:#eee;
}
#wrapper>section {
padding-top:60px;
}
.has-promo #wrapper>section {
padding-top:110px;
}
.main-section {
background:#afd4e6;
background:rgba(255, 255, 255, 0.3);
margin-bottom:20px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
height: 100%;
}
.main-section .content {
padding:20px 20px 20px 0;
height: 100%;
}
.main-section .content h3:first-child {
margin-top:0;
}
.main-content {
background:#fff;
-moz-box-shadow:0 0 3px #555;
-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:0 0 3px #555;
-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);
-khtml-box-shadow:0 0 3px #555;
-khtml-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);
box-shadow:0 0 3px rgba(0, 0, 0, 0.5);
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
min-height:100%;
position:relative;
z-index:1;
}
.main-content>header {
background:#eee;
background:-moz-linear-gradient(top, #fafafa, #e1e1e1);
background:-webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#e1e1e1));
-pie-background:linear-gradient(top, #fafafa, #e1e1e1);
border-bottom:1px solid #999;
-moz-border-radius:5px 5px 0 0;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-khtml-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
padding:15px 30px;
-moz-box-shadow:0 1px 1px #bbb;
-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 1px 1px #bbb;
-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
-khtml-box-shadow:0 1px 1px #bbb;
-khtml-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
-pie-box-shadow:none;
box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
}
.main-content>header h2 {
font-family:Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;
font-weight:normal;
font-size:18px;
margin:0;
text-shadow:0 1px 0 #fff;
}
.main-content>header h4 {
margin:0;
}
.main-content>header .avatar {
background:#fff url(../../resources/img/user_32.png) no-repeat center center;
-moz-box-shadow:0 0 3px #777;
-webkit-box-shadow:0 0 3px #777;
-khtml-box-shadow:0 0 3px #777;
box-shadow:0 0 3px #777;
display:block;
float:left;
height:60px;
margin-right:10px;
width:60px;
}
.main-content>header .tags {
background:transparent url(../../resources/img/icons/tag_blue.png) no-repeat 0 0;
float:left;
margin:0;
padding-left:20px;
}
.main-content>header .tags a {
font-size:9px;
}
.main-content>header .view-switcher {
font-family:Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;
font-size:18px;
text-shadow:0 1px 0 #fff;
position:relative;
}
.main-content>header .view-switcher>h2>a {
background:transparent url(../../resources/img/arrow-updown.png) no-repeat center center;
display:inline-block;
text-indent:-999em;
width:10px;
height:17px;
}
.main-content>header .view-switcher ul {
background:#dedeff;
border:1px solid #999;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
-moz-box-shadow:0 0 3px #888;
-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:0 0 3px #888;
-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.3);
-khtml-box-shadow:0 0 3px #888;
-khtml-box-shadow:0 0 3px rgba(0, 0, 0, 0.3);
box-shadow:0 0 3px #888;
box-shadow:0 0 3px rgba(0, 0, 0, 0.3);
display:none;
list-style-type:none;
padding:10px 20px;
position:absolute;
z-index:999;
margin:-10px -20px;
top:-12px;
left:-1px;
min-width:160px;
}
.main-content>header .view-switcher ul li {
font-size:12px;
}
.main-content>header .view-switcher ul li.separator {
border-bottom:1px solid #999;
margin:10px 0;
}
.main-content>header .view-switcher ul li a {
color:#222;
display:block;
font-size:18px;
line-height:40px;
margin:0 -20px;
padding:0 20px;
text-decoration:none;
}
.main-content>header .view-switcher ul li a:hover {
background:#afd4e6;
}
.main-content>header .action-buttons {
position:relative;
top:-4px;
z-index:999;
}
.main-content>section {
padding:20px 30px;
-moz-border-radius:0 0 5px 5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-khtml-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
}
.main-content>section.container_6 {
padding:20px;
}
.main-content>section hgroup {
margin-top:10px;
}
.main-content>section hgroup h2 {
padding-top:10px;
margin:0 0 3px 0;
line-height:1.3em;
text-transform:uppercase;
}
.main-content>section hgroup h4 {
line-height:1.4em;
margin:0 0 30px;
}
.main-content>section .other-options h3 {
color:#555;
border-bottom:1px dotted #999;
padding-bottom:5px;
}
.main-content>section .other-options ul {
list-style-type:none;
padding:0;
}
.main-content>section .other-options h4 {
margin-bottom:0;
}
.main-content>section .other-options h4+p {
margin-top:0;
}
.list-view {
border-top:1px solid #ddd;
font-size:12px;
margin-left:-30px;
margin-right:-30px;
}
.list-view>li {
border-bottom:1px solid #ddd;
padding:10px 30px 10px 55px;
position:relative;
zoom:1;
}
.list-view>li.contact {
background:transparent url(../../resources/img/icons/vcard.png) no-repeat 30px 10px;
}
.list-view>li.company {
background:transparent url(../../resources/img/icons/building.png) no-repeat 30px 10px;
}
.list-view>li.note {
background:transparent url(../../resources/img/icons/note.png) no-repeat 30px 10px;
}
.list-view>li.tick {
background:transparent url(../../resources/img/icons/tick.png) no-repeat 30px 10px;
}
.list-view>li.calendar {
background:transparent url(../../resources/img/icons/calendar.png) no-repeat 30px 10px;
}
.list-view>li:hover {
background-color:#fafafa;
}
.list-view>li.current {
background-color:#f1f1f1;
}
.list-view>li .more {
background:#bcf url(../../resources/img/arrow-right.png) no-repeat center center;
display:block;
width:16px;
height:100%;
position:absolute;
right:0;
top:0;
text-align:center;
text-decoration:none;
text-indent:-999em;
visibility:hidden;
}
.list-view>li .more:hover {
cursor:pointer;
}
.list-view>li:hover .more {
visibility:visible;
}
.list-view>li.current .more {
background-image:url(../../resources/img/arrow-left.png);
visibility:visible;
}
.list-view>li .timestamp {
color:#555;
float:right;
font-size:9px;
}
.list-view>li a {
font-weight:bold;
}
.list-view>li p {
color:#111;
margin:0;
}
.list-view>li .entry-meta {
color:#555;
}
.list-view>li .avatar {
border:1px solid #ddd;
float:left;
height:32px;
margin-right:4px;
width:32px;
}
.list-view>li .avatar img {
width:32px;
height:32px;
}
.grid-view li {
background:#fff;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;
-moz-box-shadow:0 0 3px #777;
-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.8);
-webkit-box-shadow:0 0 3px #777;
-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.8);
-khtml-box-shadow:0 0 3px #777;
-khtml-box-shadow:0 0 3px rgba(0, 0, 0, 0.8);
box-shadow:0 0 3px #777;
box-shadow:0 0 3px rgba(0, 0, 0, 0.8);
float:left;
margin:5px;
padding:5px;
position:relative;
width:180px;
}
.grid-view>li .more {
background:#bcf url(../../resources/img/arrow-right.png) no-repeat center center;
-moz-border-radius:0 3px 3px 0;
-webkit-border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
-khtml-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
display:block;
width:16px;
height:100%;
position:absolute;
right:0;
top:0;
text-align:center;
text-decoration:none;
text-indent:-999em;
visibility:hidden;
}
.grid-view>li .more:hover {
cursor:pointer;
}
.grid-view>li:hover .more {
visibility:visible;
}
.grid-view>li.current .more {
background-image:url(../../resources/img/arrow-left.png);
visibility:visible;
}
.grid-view li .timestamp {
position:absolute;
bottom:0;
right:15px;
display:block;
font-size:9px;
}
.grid-view li .name {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.grid-view li .entry-meta {
font-size:9px;
}
.grid-view li .avatar {
border:1px solid #ddd;
float:left;
height:60px;
margin-right:4px;
width:60px;
}
.grid-view>li .avatar img {
width:60px;
height:60px;
}
.listing {
list-style-type:none;
padding:0;
}
.listing>li.contact .avatar {
background:transparent url(../../resources/img/user_32.png) no-repeat center center;
}
.listing>li.company .avatar {
background:transparent url(../../resources/img/users_business_32.png) no-repeat center center;
}
.preview-pane {
position:relative;
z-index:0;
}
.preview-pane .preview {
background:#fcfcfc;
display:block;
top:0;
left:-370px;
padding:20px;
position:absolute;
height:350px;
width:310px;
-moz-border-radius:0 5px 5px 0;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-khtml-border-radius:0 5px 5px 0;
border-radius:0 5px 5px 0;
-moz-box-shadow:0 2px 2px #777;
-webkit-box-shadow:0 2px 2px #777;
-khtml-box-shadow:0 2px 2px #777;
box-shadow:0 2px 2px #777;
}
.preview-pane .preview>h3:first-child, .preview-pane .preview>h4:first-child {
margin-top:0;
}
#wrapper>section>div>aside nav {
padding:10px 0;
margin-right:-20px;
}
#wrapper>section>div>aside nav>ul {
display:block;
}
#wrapper>section>div>aside nav>h4 {
color:#333;
font-size:10px;
font-weight:bold;
margin-top:0;
padding-left:8px;
text-transform:uppercase;
text-shadow:0 1px 0 #eee;
text-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
}
#wrapper>section>div>aside nav>ul>li {
float:left;
width:100%;
}
#wrapper>section>div>aside nav>ul>li a {
color:#333;
display:block;
font-size:11px;
padding:5px 4px 5px 8px;
text-decoration:none;
text-shadow:0 1px 1px #fff;
text-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
-moz-border-radius:4px 0 0 4px;
-webkit-border-top-left-radius:4px;
-webkit-border-bottom-left-radius:4px;
-khtml-border-radius:4px 0 0 4px;
border-radius:4px 0 0 4px;
line-height:16px;
}
#wrapper>section>div>aside nav>ul>li>a:hover {
background:#9ecbe0;
background:rgba(255, 255, 255, 0.15);
}
#wrapper>section>div>aside nav>ul>li.active>a {
background:#afd4e6;
background:rgba(255, 255, 255, 0.3);
color:#111;
font-weight:bold;
}
#wrapper>section>div>aside nav>ul>li a h5, #wrapper>section>div>aside nav>ul>li a h6 {
line-height:140%;
margin:0;
}
#wrapper>section>div>aside nav>ul>li a h5 {
margin-bottom:3px;
}
#wrapper>section>div>aside nav>ul>li a h6 {
font-size:9px;
text-shadow:none;
}
#wrapper>section>div>aside nav.global>ul>li>a span {
background:#def;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-khtml-border-radius:3px;
border-radius:3px;
float:right;
font-size:9px;
font-weight:normal;
padding:0 4px;
margin-right:2px;
}
#wrapper>section>div>aside nav.subnav {
background:transparent url(../../resources/img/line.png) repeat-x top left;
}
#wrapper>section>div>aside nav>ul>li a.nav-icon {
background-position:5px 50%;
background-repeat:no-repeat;
padding-left:25px;
}
.icon-book {
background-image:url(../../resources/img/icons/book.png)!important;
}
.icon-house {
background-image:url(../../resources/img/icons/house.png)!important;
}
.icon-note {
background-image:url(../../resources/img/icons/note.png)!important;
}
.icon-tick {
background-image:url(../../resources/img/icons/tick.png)!important;
}
.icon-time {
background-image:url(../../resources/img/icons/time.png)!important;
}
.apple_overlay {
display:none;
background-image:url(resources/img/white.png);
width:640px;
padding:35px;
font-size:11px;
}
.apple_overlay .close {
background-image:url(../../resources/img/close-icon.png);
position:absolute;
right:14px;
top:14px;
cursor:pointer;
height:30px;
width:30px;
}
.apple_overlay.black {
background-image:url(../../resources/img/transparent.png);
color:#fff;
}
third css file (reset.css)
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
/*content:none;*/
}
a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}

Try adding overflow: auto; to your elements :)

div#wrapper is the first div mentioned in your HTML - and it has no styles applied at all.

100% height will only work if the parent has an absolute height defined. You need to define the height for the parent first and then the child will get 100% of its height.

Resources