Here is the code
---------------------------CSS----------------------
body {
width:100%;
margin: 0px;
padding: 0px;
text-align: left;
font: 12px Arial, Helvetica, sans-serif;
font-size: 13px;
background: url('../images/bg.jpg');
background-repeat:repeat-x 0px 30px;
}
.dsply { display: none; }
.logo { background: url(../images/logo.jpg) no-repeat 25px 25px;
float:left;
width: 175px;
height: 150px;
}
.nav-flag-left { /* background: url(../images/nav-flag-left.png) no-repeat 13px 40px; */
float:left;
margin-top:47px;
margin-left:0px;
width: 13px;
height: 40px;
}
#menu {
width: 50%;
height: 40px;
margin-top:47px;
margin-left:0px;
margin-right:0px;
font-size: 14px;
font-family:Trebuchet MS,"Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
font-weight: bold;
text-align:left;
float:left;
text-shadow: 3px 2px 3px #DA9AFB;
background-color:#F6F9E8;
/* background-image: url(../images/logo.jpg);*/
background-repeat: no-repeat;
border-radius: 0px;
}
#menu li {
display:inline;
padding:5px;
text-align:left;
margin:auto;
}
#menu a {
text-decoration:none;
color:#7D169D;
padding:8px 8px 8px 8px;
text-align:center;
}
#menu li:hover {
display:inline;
color:#FFF;
text-shadow: 3px 2px 3px #FCF;
padding-top:20px;
/* background-color:#7D169D;*/
background-image: url(../images/pinkcloud.png);
background-repeat:no-repeat;
/* background-size: 100%;
background-size: 60px 90px; */
top:40px;
height:60px;
width:90px;
position:absolute;
}
.nav-flag-plane {
float:left;
margin-top:32px;
margin-left:0px;
width: 109px;
height: 71px;
}
.nav-menu-cloude {
float:left;
margin-top:32px;
margin-left:35px;
width: 109px;
height: 75px;
}
using above given css and an image on hover effect.The problem is when mouse over on first menu item other items become shrink and the second item become hide.
Related
I am not sure how to remove the large gap between my header and the beginning of the slideshow. pivotalpixels.com/colusa_fair/ I believe that the problem is something to do with the ribbon navigation but after trying tons of different things I do not know how to move the content up without the recent news moving up to right underneath the navigation bar, which needs to be under the slideshow as it currently is.
css is below
Thanks I appreciate any help!
#charset "utf-8";
/* CSS Document */
body {
margin:0px;
padding:0px;
background-color:#c4c0be;
background-image:url(../images/bluewoodbkgd.jpg);
margin:0px; padding:0px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#7f7d78;
font-size:13px;
line-height:19px;
}
h1{}
h2 {
margin:0px 0px 10px 0px;
font-size:36px;
font-family:Helvetica, Arial, Sans-serif;
color:#000000;
font-weight: bold;
}
h3{font-size:16px; color: #142b4e; font-weight: bold;}
small {
color:#595856;
font-weight:bold;
font-size:11px;
display:block;
margin-bottom:15px;
}
a {
color:#007de2;
text-decoration:none;
}
a:hover { text-decoration:underline; }
p { margin: 0px 0px 15px 0px; }
#main {
min-height: 500px;
}
#footer {
color:white;
}
.container {
width:994px;
margin:0 auto;
}
#header {
padding-top:10px;
margin: 0;
}
#logo h1 {
margin:0px;
display:block;
text-indent:-9999px;
}
/* Fix up IE6 PNG Support */
img, #logo { behavior: url(scripts/iepngfix.htc); }
#logo {
position: absolute;
top:-25px;
background-image:url(../images/logo_colusa.png);
background-repeat:no-repeat;
margin: 0 0 0 25px;
width:240px;
height:147px;
}
#navigation_container {
width: 994px;
margin: 0;
}
ul#menu{
margin: 0;
top:10px;
position: absolute;
left: 300px;
}
ul#menu li {
list-style: none;
float: left;
display: inline;
}
ul#menu li a {
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
text-decoration: none;
margin: 0 10px 0 0;
color:#FFF;
font: 18px/27px 'ArvoRegular', Arial, sans-serif;
line-height: 28px;
}
ul#menu li a.active, ul#menu li a:hover {
color:#5a8c35;
text-decoration: underline;
margin-top: 2px;
}
.rectangle {
background: #142b4e;
height: 52px;
position: relative;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
z-index: 500; /* the stack order: foreground */
margin: 35px 0 0 0;
}
.l-triangle-top {
border-color: #142b4e transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: 0px;
left: -50px;
}
.l-triangle-bottom {
border-color: transparent transparent #142b4e;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: -49px;
left: -150px;
}
.r-triangle-top {
border-color: #142b4e transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
right: -45px;
top: -50px;
}
.r-triangle-bottom {
border-color: transparent transparent #142b4e;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
top: -100px;
right: -145px;
}
#sec_navigation_container {
width: 600px;
margin: 0 0 0 255px;
}
ul#menu_sec{
margin: 0;
top:10px;
position: absolute;
left: 110px;
}
ul#menu_sec li {
list-style: none;
float: left;
display: inline;
}
ul#menu_sec li a {
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
text-decoration: none;
margin: 0 10px 0 0;
color:#FFF;
font: 18px/27px 'ArvoRegular', Arial, sans-serif;
line-height: 28px;
}
ul#menu_sec li a.active, ul#menu_sec li a:hover {
color:#ce6536;
text-decoration: underline;
margin-top: 2px;
}
.rectangle_mainsec {
background: #ce6536;
height: 52px;
position: relative;
z-index: 500; /* the stack order: foreground */
margin: 0;
}
.l-triangle-top-sec {
border-color: #ce6536 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: 0px;
left: -50px;
}
.l-triangle-bottom-sec {
border-color: transparent transparent #ce6536;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: -49px;
left: -150px;
}
.r-triangle-top-sec {
border-color: #ce6536 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
right: -125px;
top: -53px;
}
.r-triangle-bottom-sec {
border-color: transparent transparent #ce6536;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
top: -100px;
right: -225px;
}
/*
Block-Styles
*/
.block {
margin-bottom:20px;
}
.block_inside {
padding:0 20px;
}
.image_block {
border:1px solid #557f9d;
background-color:#ffffff;
padding:5px;
float:left;
}
.image_block img {
border:1px solid #b5b5b5;
}
#block_slideshow{
overflow: hidden;
width: 100%;
}
.upcoming_events {
float:left;
width:315px;
height: 325px;
margin-left:30px;
padding: 10px;
border: 1px solid #557f9d;
background-color:#ffffff;
}
.upcoming_events h2, #event_items h2{
position: relative;
width: 90%;
font: 24px/27px 'DancingScriptOTRegular', Arial, sans-serif;
padding: 6px 20px 6px 30px;
margin: 4px 10px 10px -31px;
color: #fff;
background-color: #5a8c35;
text-shadow: 0px 1px 2px #7c7c7c;
-webkit-box-shadow: 0px 2px 2px 0px #295e04;
-moz-box-shadow: 0px 2px 2px 0px #295e04;
box-shadow: 0px 2px 1px 0px #295e04;
border: 1px solid #295e04;
}
.upcoming_events h2:before, #event_items h2:before
{
content: ' ';
position: absolute;
width: 0;
height: 0;
right: -2px;
top: 0px;
border-style: solid;
border-width:20px;
border-color: transparent #fff transparent transparent;
}
.upcoming_events h2:after, #event_items h2:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #295e04 #295e04 transparent transparent;
}
.block_content{ padding: 10px;}
#block_recent{overflow:auto;
margin-bottom:20px; }
#event_items {
width:560px;
margin-right:25px;
margin-left: 20px;
float:left;
padding: 10px;
border: 1px solid #557f9d;
background-color:#ffffff;
}
#countdown {
float:right;
width:332px;
height: 175px;
margin-right: 20px;
margin-bottom:20px;
background-image: url(../images/countdown.png);
background-repeat:no-repeat;
}
#block_right {
float:right;
width:332px;
height: 175px;
margin-right: 20px;
margin-bottom: 20px;
background-image: url(../images/countdown.png);
background-repeat:no-repeat;
}
.mini_event_item {
width: 48%;
margin: 5px 0px 10px 10px;
float: left;
}
.date{color: #5a8c35; font-weight: bold;}
.mini_event_item .block_inside {
padding:25px 30px 15px 30px;
}
.mini_event_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; }
#sponsors{margin: 10px 0px; padding: 10px; height: 95px; background-color: #142b4e; }
.sponsor_item,footer_item{float: left; margin-right: 10px; padding: 10px; height: 70px; background-color: #ffffff; border: 1px solid #000;}
#footer {
font: 18px/27px 'ArvoRegular', Arial, sans-serif;
}
.footer_column {
float:left;
width:300px;
margin-right:10px;
}
#footer .long {
width:670px;
}
#footer h3 {
color:#fff;
text-shadow: 1px 1px 1px #000;
}
#footer h4{
font-size: 16px;
text-shadow: 1px 1px 1px #000;
}
#footer p{ font-size: 12px;
}
ul.industry_links{
padding: 10px;
display: inline;
}
ul.industry_links li {
float:left;
list-style:none;
text-align: center;
}
ul.industry_links li a{
display:block;
width: 135px;
height: 79px;
margin-right: 10px;
padding: 10px;
background-color: #ffffff;
border: 1px solid #039;
text-align: center;
}
.footer_column ul li, .footer_column ul {
list-style:none;
margin:0px;
padding:0px;
font-size: 12px;
}
The r-triangle-top-sec and r-triangle-bottom-sec elements that generate the "ribbon" effect are using the "CSS Triangle Trick" which requires a large border size (50px in this case).
This is causing a lot of extra height due to the invisible border rendering.
One quick fix is to position:absolute these elements.
First, make the container position:relative so the child elements will use it as a positioning reference point
#sec_navigation_container{
position:relative /* Add */
/*...*/
}
Add this to r-triange-top-sec
position: absolute;
top: 0;
right: -50px;
Add this to r-triange-bottom-sec
position: absolute;
top: -50px;
right: -50px;
That should get rid of some of that spacing. Applying this idea to the upper "ribbon" might help as well.
UPDATE
Turns out, the exact same code can be used for the blue ribbon as well. Rinse/repeate the above code but for #navigation_container, l-triangle-top and l-triangle-bottom.
That will move your "slideshow" content flush to the navigation.
You can then add some margin to your #header element such as:
margin-bottom:2em;
to push that "slideshow" back down to a desired separation. (adjust the valid as desired)
note I just eyeballed the placement of the ribbon. Please adjust top/right position as needed for your design
I hope that helps!
I have add a footer background image.It's look perfect on my PC. But it show up not correct on iPad browser. I'm try to upload image to show you guy but i'm very new on stackoverflow so i can't upload.If anyone know how to show you guy an image. Please let me know i will upload it. Please have a look at the Black part bottom right. Anyone please help me to fix this problem
Thank you
I add this line to my css.
.footer{ border-top: 4px solid #00b0bd; }
.footer a{ color: #000000;}
.footer-container { width:100%; text-align: left; background: url("../images/footer/footer_damask.gif") repeat scroll 0 0 #333333;}
.footer { margin: 0 auto 15px; width: 960px; }
.aditional-footer { margin:0 auto 0; padding: 30px 0 30px; width: 960px; background-image:none !important;}
.footer .links li { text-transform: none; }
.footer-container a { color:#666669; font-size: 11px; width: 960px; }
.footer-container .footer-right { width: 250px; }
.footer .f-right { width:429px; text-align: right; padding-right:20px; }
this is my full CSS.
/* Footer ================================================================================ */
.footer-social-container { width:100%; background: none repeat scroll 0 0 #404040; border-top: 0 solid #00aebb;}
.footer-social { width:960px; padding: 5px 0; margin:0 auto; }
.footer-social .phone { color:#111; float:right; font-size:16px; }
.footer-social .follow_us { display: inline-block; font-size: 16px; margin: 0; float: left; color:#ffffff; }
.footer-social .twitter,
.footer-social .rss,
.footer-social .facebook { margin-left: 5px; text-indent: -9999px; display: inline-block; float: left; background-repeat: no-repeat; background-position: top center; height:24px; width:30px; }
.footer-social .twitter:hover,
.footer-social .rss:hover,
.footer-social .facebook:hover { background-position: bottom center; }
.footer-social .twitter { background-image: url(../images/twitter.png); }
.footer-social .rss { background-image: url(../images/rss.png); }
.footer-social .facebook { background-image: url(../images/facebook.png); }
.footer-social .gift_img { float: left; border-left: 1px solid #00afbc; border-right: 1px solid #00afbc; padding: 0 50px; margin: 0 0 0 100px; }
.footer{ border-top: 4px solid #00b0bd; }
.footer a{ color: #000000;}
.footer-container { width:100%; text-align: left; background: url("../images/footer/footer_damask.gif") repeat scroll 0 0 #333333;}
.footer { margin: 0 auto 15px; width: 960px; }
.aditional-footer { margin:0 auto 0; padding: 30px 0 30px; width: 960px; background-image:none !important;}
.footer .links li { text-transform: none; }
.footer-container a { color:#666669; font-size: 11px; width: 960px; }
.footer-container .footer-right { width: 250px; }
.footer .f-right { width:429px; text-align: right; padding-right:20px; }
.footer ul { display:inline; }
.footer li { display:inline; background:url(../images/bkg_pipe1.gif) 100% 50% no-repeat; padding:0 5px 0 0; margin:0 3px 0 0; }
.footer .links li.last { background:none !important; padding-right:0 !important; }
.footer .bugs { margin:0; color:#666; }
.footer .bugs a { font-weight:bold; color:#353535; }
.footer address { color:#666; }
.footer address a { color:#353535; }
.policy li { margin-left:2px; padding-left:10px ; line-height: 1.5; background: url(../images/footer_li.png) no-repeat left top;}
.policy li:hover { background: url(../images/footer_li.png) no-repeat left bottom;}
.footer-container .form-subscribe { }
.footer-container .form-subscribe label { padding-top:2px; font-weight:bold; color:#555; }
.footer-container .form-subscribe .input-box { border: 1px solid #EFEFEF; width: auto; float: left; height: 27px;}
.footer-container .form-subscribe button.button { float:left; width: 58px;}
.footer-container .form-subscribe button.button span { height: 22px; font: normal 11px/22px Tahoma, Verdana, Arial, sans-serif; }
.footer-container .form-subscribe input.input-text { width: 180px; border: 0px solid #d6d4d4; border-right:0; padding: 0; padding-left: 8px; float:left; height: 27px; line-height: 27px; }
.footer-container .form-subscribe input.input-text:focus { border: 1px solid #FF292C; border-right: 0; height: 25px; line-height: 15px }
.footer-container .form-subscribe input.input-text.validation-failed { background: none!important; border-right:0!important; }
.footer-container .form-subscribe .validation-advice { position: absolute; width: 171px; margin-top: 31px; background: white; padding:5px; }
.footer-container .footer-callout { display:block; margin:-10px 0 10px; position:relative; }
.footer-container .store-switcher { color:#555; text-align:right; }
.footer-container .store-switcher label { font-weight:bold; vertical-align:middle; }
.footer-container .store-switcher select { padding:0; vertical-align:middle; }
.footer-container .bottom-container { margin:0 0 8px; text-align:right; }
/* ======================================================================================= */
Not an iPad specific problem, rather a low horizontal resolution one. I've the same bug in Chrome when my window is narrow.
Why ?
Your .page is 960px wide, overflowing your body which is 100% (768px on iPad)
Your footer is 100% width, so the same width than your body, 768px.
Ok, I give up - I can't work it out; the wrapper seems to go from the top to the bottom while I want it to leave a gap at the top and bottom so the background appears through. I can't seem to work it out. I am very novice to this. Any help & ideas very welcome.
Code
body {
background: #ffffff url(bgfin.jpg) repeat;
font-family: Tahoma,arial, sans-serif;
font-size:12px;
color:#666666;
height: 100%;
margin:0;
padding:0;
}
#wrapper {
background: url(body-line.png) center repeat-y;
padding-top: 65px;
padding-bottom: 65px;
}
#wrappertop{
background: url(header.png) top center no-repeat;
}
#wrappertbtm{
background: url(footer-new.png) bottom center no-repeat;
padding-bottom: 65px;
}
#container{
width: 959px;
margin: 0 auto;
}
.title{
width: 959px;
height: 56px;
padding: 15px 0px 10px 0px;
font-size: 30px;
color: #bd7821;
}
#navigation{
position: relative;
width: 959px;
height: 40px;
z-index: 2;
}
#navigation li{
float: left;
z-index: 2;
padding: 0px 34px 0px 0px;
}
#navigation li a{
display: inline-block;
position: relative;
outline: none;
height: 28px;
color: #e3e3e3;
z-index: 2;
font-size: 12px;
padding: 15px 0px 0px 0px;
text-decoration: none;
}
#navigation li a:hover, #navigation li#active a{
color: #bd7821;
text-decoration: none;
}
#header{
position: relative;
width: 959px;
height: 196px;
z-index: 1;
margin: 20px 0px 0px 0px;
}
Try:
body { padding:20px 0; }
Or:
#wrapper { margin:20px 0; }
That is shorthand for:
#wrapper {
margin-top:20px;
margin-right:0;
margin-bottom:20px;
margin-left:0;
}
Remember:
Padding is rendered inside of the element
Margin is on the outside
This might help as a reminder:
How to remember in CSS that margin is outside the border, and padding inside
My site is http://farmersforum.in which is not displaying properly on ipad and iphone. The header and footer and left aligned but the body is right aligned and starts from where the header ends.
the #container width is 1020px so i dont think that is the problem. Here's the css code;
/*
Theme Name: gazpoMag
Theme URI: gazpo.com
Description: gazpoMag is a clean and featured-rich Wordpress magazine style theme. It allows you to easily customize every detail of the theme to best suit your needs.
Author: Sami Ch.
Author URI: http://www.gazpo.com
License: GNU General Public License
License URI: license.txt
*/
* {
padding:0;
margin:0;
}
body{
color: #333333;
font-family: Arial, Helvetica, sans-serif;
line-height: 20px;
font-size: 12px;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a, a:visited{
text-decoration: none;
color: #004A8D;
}
a:hover{
text-decoration: underline;
color: #004A8D;
}
a { outline: none; }
h2, h3, h4{
font-family: 'Helvetica', Arial;
color: #222;
text-shadow: 0px 0px 1px #ccc;
}
h2{
font-size:16px;
margin:10px 0 3px;
}
h3{
font-size: 16px;
}
h4{
font-size: 16px;
}
h2 a, h2 a:visited{
color:#004A8D;
font-size:16px;
}
h2 a:hover{
text-decoration: none;
color:#133451;
}
a img {
border: none;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
#container{
margin: 0 auto;
width: 1020px;
text-align: left;
overflow:auto;
background:#ffffff;
}
#header {
background: url("images/bg.png") repeat-x;
}
#header .wrap{
background: url("images/bg.png") repeat-x;
width: 1020px;
height: 120px;
margin:0 auto;
}
#header .logo{
margin-top:7px;
width: 420px;
float:left;
overflow:hidden;
display:table;
}
#header .logo img{
max-width: 415px;
max-height:110px;
}
#header .logo .text{
display:table-cell;
vertical-align:middle;
}
#header .logo h1 a{
font-family: 'Droid Serif', Arial;
font-size:44px;
line-height:0.9;
color:rgba(241,244,245,.7) ;
font-weight: bold;
text-shadow:1px 1px rgba(202,216,221,.7),
2px 2px rgba(202,216,221,.7),
3px 3px rgba(202,216,221,.7);
}
#header .logo h1 a:hover{
text-decoration:none;
}
#header .right{
margin-top:10px;
width: 546px;
float:left;
margin-left: 50px;
}
#header .links {
margin-bottom:10px;
overflow:auto;
}
#header .links ul{
overflow:auto;
color:white;
float:right;
}
#header .links ul li{
float: left;
margin-left:8px;
}
#header .links ul li a {
color: #DAE5EC;
padding-right:8px;
font-size:13px;
font-weight:bold;
}
#header .twitter{
background: url("") no-repeat;
padding-left:55px;
font-family:'Droid Serif', serif;
font-size:14px;
min-height:40px;
max-height:60px;
overflow:hidden;
}
#header #twitter_update_list{
color:#cccccc;
}
#header #twitter_update_list a{
color: #DAE5EC;
}
#subheader{
background: url("images/subheader.png") repeat-x;
}
#subheader .wrap{
width: 1020px;
margin:0 auto;
background: url("images/subheader.png") repeat-x;
height:40px;
text-transform:uppercase;
font-weight:bold;
color: #7B7B7B;
line-height:40px;
}
#subheader ul li{
float: left;
margin-right:25px;
}
#subheader .categories{
width:780px;
float:left;
}
#subheader .search{
width:236px;
float:left;
}
#subheader .search input {
font: normal 14px/100% Arial, Helvetica, sans-serif;
}
#subheader .search .searchfield {
background: #fff;
padding: 7px 6px 7px 8px;
width: 220px;
border: solid 1px #bcbbbb;
outline: none;
margin-top:4px;
border-radius: 15px;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
#content{
float: left;
width: 716px;
overflow: auto;
}
#featured-cat{
overflow: auto;
margin: 10px 10px 5px;
border-bottom:1px solid #D4D4D4;
}
#featured-cat .cat-title{
background:#f6f6f6;
border-bottom:1px solid #dbdbdb;
padding:5px;
margin-bottom:5px;
}
#featured-cat .box{
width:220px;
float:left;
overflow:hidden;
}
#featured-cat .margin-right{
margin-right:15px;
}
#featured-cat .thumb{
position:relative;
float:left;
width:220px;
height:130px;
overflow:hidden;
}
#featured-cat .date{
position:absolute;
background: #000000;
color: #FFFFFF;
display: block;
font-size: 12px;
font-weight: 700;
opacity: 0.7;
padding: 2px 5px 4px 5px;
top: 20px;
}
#featured-cat .details{
margin-bottom:10px;
clear:both;
padding-top: 8px;
}
#content .post{
overflow: auto;
margin: 10px 10px 5px 0px;
}
#content .s_socialbar{
margin-top:30px;
margin-left: -80px;
display: block;
position: absolute;
background:#ECF5FA;
border-radius:7px;
}
#content .s_socialbar ul{
margin:10px 5px 0px 5px;
}
#content .s_socialbar ul li{
margin-bottom:10px;
}
#content .s_socialbar .fb-like{
margin:0px 0px 4px 4px;
}
#content .post .postmeta {
overflow:auto;
padding:2px;
font-size:12px;
color: #777777;
}
#content .post .postmeta .comments{
float:right;
margin-right: 10px;
background:url(images/comments.png) no-repeat left center;
padding-left:20px;
}
#content .wp-post-image{
background-color: #F3F3F3;
border: 1px solid #DDDDDD;
border-radius: 3px 3px 3px 3px;
}
#content .entry img{
max-width: 97.5%;
height:auto;
border:1px solid #ddd;
padding:2px
background-color:#f3f3f3;
margin:5px 10px 5px 0;
}
#content .thumb-twitter-entry{
overflow:auto;
width: 420px;
float:left;
}
#content .thumb-entry{
float:left;
width: 489px;
}
#content .twitter-entry{
float:left;
width: 635px;
}
#content .entry{
overflow:auto;
margin-bottom:20px;
}
#content .post-twitter{
width: 60px;
float:left;
margin:15px 0px 0px 5px;
}
#content .wp-caption{
border:1px solid #ddd;
text-align:center;
background-color:#f3f3f3;
padding-top:4px;
margin:10px 5px;
-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
#content .wp-caption img{
margin:0;
padding:0;
border:0 none;
}
#content .wp-caption p.wp-caption-text{
font-size:11px;
line-height:17px;
padding:0 4px 5px;
margin:0;
}
#content .entry blockquote{
background: url("images/quote.png") no-repeat;
font-family: "Georgia", Arial, Helvetica, sans-serif;
color: #777777;
margin: 5px 5px 10px 25px;
padding-left: 32px;
padding-top: 3px;
font-style:italic;
}
#content .entry ul{
list-style-type:square;
margin: 5px 10px 10px 40px;
}
#content .entry ol{
list-style-type:decimal;
margin: 5px 10px 10px 40px;
}
#sidebar{
float: left;
width: 300px;
padding-top:10px;
}
#sidebar h4{
padding: 4px 0px 4px 24px;
border-bottom:1px solid #dbdbdb;
}
#sidebar .box{
margin-bottom:10px;
border-bottom: 1px solid #EFEFEF;
padding:5px;
}
#sidebar_social{
overflow:auto;
margin:10px 0;
}
#sidebar_social a{
font-size: 12px;
font-weight: bold;
padding: 50px 5px 0px;
}
#sidebar_social ul{
overflow:auto;
}
#sidebar_social ul li{
width:70px;
float:left;
padding-top:50px;
text-align: center;
overflow:auto;
}
#sidebar .widget_categories{
margin-bottom: 10px;
}
#sidebar .widget_categories h4{
background:#f6f6f6 url('images/tag.png') no-repeat 5px center;
}
#sidebar .widget_categories ul, #footer .widget_categories ul{
overflow:auto;
padding:10px 5px;
margin: 5px;
}
#sidebar .widget_categories ul li, #footer .widget_categories ul li{
margin-right:8px;
float: left;
font-size: 12px;
margin-bottom: 10px;
}
#sidebar .widget_categories ul li a, #footer .widget_categories ul li a{
background-color: #f6f6f6;
border-bottom: 1px solid #DBDBDB;
border-right: 1px solid #DBDBDB;
color: #777777;
padding: 3px 6px;
text-decoration: none;
white-space: nowrap;
}
#sidebar .widget_categories ul li a:hover,#footer .widget_categories ul li a:hover{
text-decoration: none;
background: #E8E8E8;
}
#sidebar .widget_archive h4{
background:#f6f6f6 url('images/calendar.png') no-repeat 5px center;
}
#sidebar .widget_archive ul, #sidebar .widget_links ul{
padding:5px;
}
#sidebar .widget_archive ul li, #sidebar .widget_links ul li{
padding:3px 0px 3px 12px;
background:url(images/cat_bullet.png) no-repeat left center;
}
#sidebar .widget_links h4{
background:#f6f6f6 url('images/bookmarks.png') no-repeat 5px center;
}
#sidebar .widget_subscribers{
margin-bottom:10px;
}
#sidebar .widget_subscribers .counts{
margin:15px;
overflow:auto;
}
#sidebar .widget_subscribers .counts img{
vertical-align:middle;
}
#sidebar .widget_subscribers .fb{
float:left;
margin-right: 20px;
margin-left:25px;
}
#sidebar .widget_subscribers .twitter{
float:left;
}
#sidebar .widget_subscribers .count{
display: inline-block;
font-size: 22px;
font-weight: bold;
vertical-align: middle;
}
#sidebar .widget_subscribers .count a{
color: #404040 !important;
}
#sidebar .widget_subscribers .count a:hover{
text-decoration:none;
}
#sidebar .widget_posts{
margin-bottom:10px;
}
#sidebar .widget_posts ul.tabs {
height: 30px;
line-height: 24px;
list-style: none;
background: #FFF;
background:url(images/sidebar_posts.png) no-repeat top center;
font-size: 14px;
font-weight: bold;
font-family: 'Droid Serif', Arial;
border-bottom: 1px solid #D4D4D4;
}
#sidebar .widget_posts .tabs li {
float: left;
padding-top:3px;
color: #777;
cursor: pointer;
padding-left: 24px;
}
#sidebar .widget_posts .tabs li:hover {
color: #333333;
text-shadow: 0px 0px 1px #ccc;
}
#sidebar .widget_posts .tabs li.current {
color: #333333;
text-shadow: 0px 0px 1px #ccc;
}
#sidebar .widget_posts .post_box.visible {
display: block;
}
#sidebar .widget_posts .tabs li.recent{
background:#f6f6f6 url('images/calendar1.png') no-repeat 5px center;
margin-right:5px;
width:65px;
}
#sidebar .widget_posts .tabs li.popular{
background:#f6f6f6 url('images/heart.png') no-repeat 5px center;
margin-right:5px;
width:70px;
}
#sidebar .widget_posts .tabs li.comments{
background:#f6f6f6 url('images/comments.png') no-repeat 5px center;
width:80px;
}
#sidebar .widget_posts .posts-list li{
margin-bottom:5px;
font-size: 12px;
overflow:auto;
padding-bottom:5px;
}
#sidebar .widget_posts .post_box {
display: none;
border-width: 0 1px 1px;
padding: 5px;
height:255px;
}
#sidebar .widget_posts .info{
float:left;
width:210px;
}
#sidebar .widget_posts .meta {
font-style:italic;
}
#sidebar .widget_posts .meta .date{
float:left;
}
#sidebar .widget_posts .meta .cmts{
float:right;
margin-right: 10px;
background:url(images/comment.png) no-repeat left center;
padding-left:20px;
font-style:normal;
}
#sidebar .widget_posts .posts-list li .title{
font-weight:bold;
}
#sidebar .widget_posts .thumb{
width: 60px;
height: 40px;
float:left;
margin-right:5px;
}
#sidebar .widget_posts .avatar-42{
width: 42px;
height: 42px;
float:left;
margin-right:5px;
}
#sidebar .widget_posts .comment-info{
float:left;
width:230px;
}
#sidebar .widget_posts .comment-info p{
line-height:15px;
}
#sidebar .widget_facebook h4{
background:#f6f6f6 url('images/facebook.png') no-repeat 5px center;
}
#sidebar .widget_facebook{
margin-bottom:10px;
}
#sidebar .widget_text h4{
background:#f6f6f6 url('images/about.png') no-repeat 5px center;
margin-bottom:5px;
}
#sidebar .widget_text {
margin-bottom:10px;
}
#footer .widget_text h4{
background:url('images/about.png') no-repeat 12px center;
margin-bottom:5px;
}
#sidebar .widget_ad125{
margin-bottom:10px;
overflow:auto;
}
#sidebar .widget_ad125 h4{
background:#f6f6f6 url('images/star.png') no-repeat 5px center;
margin-bottom:5px;
}
#sidebar .widget_ad125 li{
float:left;
margin:10px 10px;
}
#sidebar .widget_ad125 li img{
width:125px;
height:125px;
}
#footer {
background: url("images/bg.png") repeat;
}
#footer .wrap{
width: 1020px;
margin:0 auto;
padding:10px;
overflow:auto;
color: #CCCCCC;
}
#footer .main{
overflow:auto;
padding-bottom:5px;
}
#footer .box{
float: left;
width:330px;
}
#footer .info{
font-size:12px;
}
#footer h4{
padding-left:32px;
margin-bottom:5px;
color: #CCCCCC;
text-shadow:none;
}
#footer a{
color: #DAE5EC;
}
#footer .widget_text{
margin-bottom:10px;
padding: 0 20px;
}
#footer .widget_links ul, #footer .widget_archive ul, #footer .widget_categories ul{
padding:0px 15px;
}
#footer .widget_links h4{
background:url('images/bookmarks.png') no-repeat 12px center;
}
#footer .widget_archive h4{
background:url('images/calendar.png') no-repeat 12px center;
}
#footer .widget_categories h4{
background:url('images/tag.png') no-repeat 12px center;
}
#footer .widget_links, #footer .widget_archive, #footer .widget_categories, #footer .widget_text{
float: left;
width:298px;
margin-right:10px;
}
#footer .widget_links ul li, #footer .widget_archive ul li{
padding: 2px 0 2px 20px;
background:url(images/u.png) no-repeat left center;
}
#footer .widget_tweets{
width:298px;
float:left;
margin-right:30px;
}
#footer .widget_tweets h4.title{
background:url('images/twitter.png') no-repeat 12px center;
}
#footer .widget_social{
width:298px;
float: left;
margin-right:10px;
}
#footer .widget_social h4{
background:url('images/interact.png') no-repeat 12px center;
}
#sidebar .widget_social h4{
background:#f6f6f6 url('images/interact.png') no-repeat 5px center;
}
#sidebar .widget_social ul{
padding:10px 5px;
}
#footer .widget_social ul{
padding:0px 15px;
}
#footer .widget_social ul li{
padding: 2px 0 2px 20px;
}
#sidebar .widget_social ul li{
padding:4px 0px 4px 20px;
}
.widget_social ul li.facebook{
background:url(images/facebook.png) no-repeat left center;
}
.widget_social ul li.twitter{
background:url(images/twitter.png) no-repeat left center;
}
.widget_social ul li.gplus{
background:url(images/gplus.png) no-repeat left center;
}
.widget_social ul li.rss{
background:url(images/rss.png) no-repeat left center;
}
.widget_social ul li.contact{
background:url(images/email.png) no-repeat left center;
}
#gazpo-socialbar {
background: #E3EDF4;
border-color: #E3EDF4;
display: block;
margin-left: -65px;
position: fixed;
top: 200px;
width: 65px;
}
#respond .cancel-comment-reply{
float:right;
}
#comments h3, #content .comments h4 {
margin:10px 0px;
}
#comments ol.commentlist {
margin: 10px 0 20px 0;
list-style-type: none;
overflow: visible;
}
#comments li.comment {
margin-bottom: 10px;
}
#comments li.comment .comment-body {
margin-left: 65px;
position: relative;
min-height:60px;
}
#comments li.comment .comment-meta {
overflow: hidden;
float: left;
display: block;
width: 50%;
}
#comments li.comment .avatar {
position: absolute;
left: -65px;
padding: 3px;
border:1px solid #ddd;
background-color:#f3f3f3;
}
#comments .comment-awaiting-moderation{
color: red;
font-size:12px;
font-style:italic;
}
#comments li.comment p {
clear: both;
}
#comments li.comment cite, li.bypostauthor li.comment cite {
font-weight: bold;
font-style: normal;
padding-right:10px;
margin-right: 8px;
float: left;
}
#comments .commentmetadata, .commentmetadata a {
font-size: 12px;
color: #999;
}
#comments .commentmetadata a:hover {
color: #666;
text-decoration: none;
}
#comments .says {
display: none;
}
#comments .comment-meta {
margin: 0 0 10px;
line-height: 18px;
position: relative;
}
#comments li.comment .comment-body a.comment-reply-link {
display: block;
position: absolute;
right: 0;
top: 0px;
padding-right: 10px;
font-size: 12px;
}
#comments .children {
list-style-type: none;
margin: 10px 0 0px 30px;
}
#comments .children li.comment .comment-body {
margin-left: 70px;
position: relative;
min-height:60px;
}
#comments .children li.comment .avatar {
position: absolute;
left: -65px;
}
#respond {
margin-top:15px;
}
#commentform {
background: #f6f6f6;
border-radius: 3px;
padding: 15px 10px;
overflow:auto;
margin:20px 0px;
}
#commentform .fields-container{
overflow:auto;
margin-bottom:15px;
}
#commentform .info{
float: left;
margin-right: 15px;
width: 250px;
}
#commentform .info span{
font-style:italic;
}
#commentform label{
clear: both;
color: #667780;
display: block;
line-height: 24px;
}
#commentform input{
width: 240px;
border: 1px solid #CAD9E0;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
margin-bottom: 6px;
padding: 8px 3px;
}
#commentform textarea {
height: 150px;
width:98%;
border: 1px solid #CAD9E0;
border-radius: 3px;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin-bottom: 6px;
margin-top: 2px;
padding: 6px 3px;
}
#commentform .message{
float: left;
width: 410px;
}
#commentform .gazpo-button{
width: 80px;
padding: 6px 8px;
}
.gazpo-button{
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
cursor: pointer;
display: inline-block;
font: 14px/100% Arial,Helvetica,sans-serif;
margin: 0 2px;
outline: medium none;
padding: 5px 10px;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
vertical-align: baseline;
background: -moz-linear-gradient(center top , #FFFFFF, #EDEDED) repeat scroll 0 0 transparent;
border: 1px solid #B7B7B7;
color: #606060;
}
.gazpo-button:hover {
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.gazpo-button:active {
color: #999;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
background: -moz-linear-gradient(top, #ededed, #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}
.pagination {
clear:both;
margin: 10px;
text-align:center;
font-family:Verdana,Tahoma,Arial;
font-size: 13px;
padding:4px 6px 4px 0;
background-color:#fff;
color:#313031;
}
.pagination span{
padding: 3px;
margin: 3px;
text-align:center;
}
.pagination a {
padding: 2px 5px 2px 5px;
margin-right: 4px;
border: 1px solid #9aafe5;
text-decoration: none;
color: #2e6ab1;
}
.pagination a:hover, .pagination a:active{
border: 1px solid #2b66a5;
color: #000;
}
.pagination .current{
padding: 2px 5px 2px 5px;
margin-right: 4px;
border: 1px solid navy;
font-weight: bold;
background-color: #2e6ab1;
color: #FFF;
}
just put these inside another div and make it 1020px wide, secure the position and max/min widths.
<div id="wrapper/container">
<div id="header"></div>
<div id="subheader"></div>
<div id="container"></div>
<div id="footer"></div>
</div>
Or re-make theme using responsive design with grid and nice columns.
My web site seems to be working fine with every other broser but IE8, IE9 and compatibility mode!!
As soon as I disable my CSS, I see content, but when its switched back on I get nothing!
This is giving my hell.
This is my CSS here:
body {
background: center top url(./images/background.jpg) no-repeat;
background-color: #FFF;
margin: 0px;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #8e8f91;
}
h1 {
font-size: 12px;
color: #FFFFFF;
text-transform: uppercase;
line-height: normal;
margin: 0;
padding: 0;
letter-spacing: 1px;
}
#Table_01 {
top:0px;
width:1200px;
margin: 0 auto;
}
.backing {
background: repeat transparent url(./images/backing.png);
padding: 4px;
margin-left: 4px;
margin-top: 443px;
width: 130px;
text-transform: uppercase;
color: #FFF;
font-size: 11px;
letter-spacing: 1px;
}
.backing a, a:active {
text-decoration: none;
color: #FFFFFF;
}
.backing a:hover {
text-decoration: underline;
color: #FFFFFF;
}
.snipet {
background: repeat transparent url(./images/backing.png);
padding: 4px;
margin: 4px;
width: 100px;
text-transform: uppercase;
color: #FFF;
font-size: 11px;
letter-spacing: 1px;
}
.snipet_text {
font-size: 12px;
font-style: italic;
font-weight: normal;
letter-spacing: 0px;
line-height: 18px;
}
.snipet_container {
margin: 10px;
}
a, a:active {
text-decoration: underline;
color: #8e8f91;
}
a:hover {
text-decoration: none;
}
a img {
border:none;
}
.clear {
clear:both;
}
ul.menu {
list-style:none;
margin: 0;
padding: 0;
}
ul.menu li {
width:auto;
height:29px;
margin-left: 1px;
}
ul.menu li a {
display:block;
position:relative;
}
ul.menu li a img {
position:absolute;
z-index:1;
}
ul.menu li span {
display:block;
height: 29px;
width: auto;
position:absolute;
z-index:2;
}
/* TABLES */
div.index-1_ {
position:absolute;
left:0px;
top:0px;
width:1200px;
height:17px;
}
div.index-2_ {
position:absolute;
left:0px;
top:22px;
width:33px;
height:675px;
}
div.index-3_ {
position:absolute;
left:33px;
top:22px;
width:208px;
height:221px;
}
div.index-4_ {
position:absolute;
left:241px;
top:22px;
width:12px;
height:675px;
}
div.index-5_ {
position:absolute;
left:254px;
top:22px;
width:82px;
height:29px;
}
div.index-6_ {
position:absolute;
left:335px;
top:22px;
width:10px;
height:43px;
}
div.index-7_ {
position:absolute;
left:346px;
top:22px;
width:102px;
height:29px;
}
div.index-8_ {
position:absolute;
left:447px;
top:22px;
width:11px;
height:43px;
}
div.index-9_ {
position:absolute;
left:459px;
top:22px;
width:77px;
height:29px;
}
div.index-10_ {
position:absolute;
left:535px;
top:22px;
width:10px;
height:43px;
}
div.index-11_ {
position:absolute;
left:546px;
top:22px;
width:87px;
height:29px;
}
div.index-12_ {
position:absolute;
left:632px;
top:22px;
width:10px;
height:43px;
}
div.index-13_ {
position:absolute;
left:643px;
top:22px;
width:73px;
height:29px;
}
div.index-14_ {
position:absolute;
left:715px;
top:22px;
width:485px;
height:43px;
}
div.index-15_ {
position:absolute;
left:253px;
top:46px;
width:82px;
height:14px;
}
div.index-16_ {
position:absolute;
left:345px;
top:46px;
width:102px;
height:14px;
}
div.index-17_ {
position:absolute;
left:458px;
top:46px;
width:77px;
height:14px;
}
div.index-18_ {
position:absolute;
left:545px;
top:46px;
width:87px;
height:14px;
}
div.index-19_ {
position:absolute;
left:642px;
top:46px;
width:73px;
height:14px;
}
div.index-20_ {
position:absolute;
left:253px;
top:60px;
width:1px;
height:481px;
}
div.index-21_ {
position:absolute;
left:254px;
top:60px;
width:249px;
height:470px;
background-image: url(./images/projects/HomeProject001.jpg);
}
div.index-22_ {
position:absolute;
left:503px;
top:60px;
width:618px;
height:442px;
background-color: #CBCBCB;
}
div.index-23_ {
position:absolute;
left:1121px;
top:60px;
width:79px;
height:632px;
}
div.index-24_ {
position:absolute;
left:33px;
top:238px;
width:208px;
height:67px;
}
div.index-25_ {
position:absolute;
left:503px;
top:502px;
width:606px;
height:16px;
background-image: url(./images/index-25.png);
padding:6px;
}
div.index-26_ {
position:absolute;
left:254px;
top:530px;
width:867px;
height:11px;
}
div.index-27_ {
position:absolute;
left:253px;
top:541px;
width:619px;
height:151px;
background-color: #FFF;
}
div.index-28_ {
position:absolute;
left:872px;
top:541px;
width:249px;
height:151px;
background-image: url(./images/index-28.png);
}
/* sliding panel */
/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}
#toppanel {
position: absolute; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
top: 0;
left: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 130%; /* font-size set to 130% for the default Kubrick Wordpress theme */
}
#panel {
width: 100%;
height: 280px;
color: #333;
background: transparent url(images/tab_bk.png) repeat;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: #15ADFF;
text-align: left;
}
#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: #e01000;
text-align: left;
}
#panel p {
margin: 5px 0;
padding: 0;
}
#panel a {
text-decoration: underline;
color: #333;
}
#panel a:hover {
color: #666;
}
#panel a-lost-pwd {
display: block;
float: left;
}
#panel ul {
margin: 0 0 5px 0;
padding: 0;
line-height: 1.6em;
list-style: none;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
margin-bottom: 25px;
padding: 0 15px;
min-height: 220px;
}
#panel .content .border {
border-left: 1px solid #333;
}
#panel .content .narrow {
width:1000px !important;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background-color: #efefef;
margin-right: 5px;
margin-top: 4px;
width: 300px;
color: white;
height: 16px;
}
#panel .content input:focus.field {
background: #ccc;
}
#panel .content .ui-state-highlight .ui-icon {background-image: url(./images/icon_sprite.png); width: 16px; height: 16px; margin-top: -2px;}
#panel .content .ui-state-error .ui-icon, #panel .content .ui-state-error-text .ui-icon { background: url(./images/icon_sprite.png) -16px 0 no-repeat !important; width: 16px; height: 16px; margin-top: -2px;}
#panel .content .ui-state-highlight { border: 1px solid #d2dbf4; background: #f4f8fd; color: #0d2054; }
#panel .content .ui-state-error { border: 1px solid #e2d0d0; background: #fcf0f0; color: #280b0b;}
/* BUTTONS */
#panel .content .ui-button {
outline: none;
color: #1c4257;
border-color: #7096ab;
display: block;
font-size: 14px;
font-weight: bold;
border: thin solid;
margin-top: 20px;
padding: 4px 20px 4px 20px;
}
#panel .content .ui-button:hover {
background: #fbc900;
}
/* Panel Tab/button */
.tab {
height: 25px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
width: auto;
font-weight: bold;
line-height: 25px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(images/tab_l.png) no-repeat left 0;
height: 25px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(images/tab_r.png) no-repeat left 0;
height: 25px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 25px;
background: url(images/tab_m.png) repeat-x 0 0;
}
.tab ul.login li a {
color: #15ADFF;
}
.tab ul.login li a:hover {
color: #333;
}
.tab .sep {color:#666}
.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 2px;
}
.tab a.open {background: url(images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(images/bt_close.png) no-repeat left -19px;}
I know it's a little messy... Sorry :(
how to determine the error:
remove all classes from the stylesheet.
add the classes one by one.
see when/where it fails
fix/solve bug
if not at the end proceed to step 2
#panel {
width: 100%;
height: 280px;
color: #333;
background: transparent url(images/tab_bk.png) repeat;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
Though the DIV was actually closed off, for some reason IE completely ignored it!
This was the problem:
display: none;
So all I did was place the DIV in the footer at it all worked. It still puzzled me why it was only doing it in IE!!