I'm trying to have a popup for each news article in my database, so that the user can edit it. I can make it work for a single news article, but when I try to use .next() to find the next popup after the link it doesn't work. Seems like I'm misunderstanding something here?
php to make the links & popups:
foreach ($news as $n) {
//clickable link
echo '<a class="trigger_popup">'.$n['fldSubject'].'<span class="glyphicon glyphicon-edit edit-file clickable"> </span></a>';
//hidden div
echo '<div class="hover_bkgr"><span class="helper"></span><div><div class="popupCloseButton">×</div>'.$n['fldBody'].'</div></div>'
}
JQuery
$(window).load(function () {
$('.trigger_popup').click(function(){
$(this).next('.hover_bkgr').show();
});
$('.hover_bkgr').click(function(){
$(this).next('.hover_bkgr').hide();
});
$('.popupCloseButton').click(function(){
$(this).next('.hover_bkgr').hide();
});
});
.hover_bkgr{
background:rgba(0,0,0,.4);
cursor:pointer;
display:none;
height:100%;
position:fixed;
text-align:center;
top:0;
width:100%;
z-index:10;
}
.hover_bkgr .helper{
display:inline-block;
height:100%;
vertical-align:middle;
}
.hover_bkgr > div {
background-color: #fff;
box-shadow: 10px 10px 60px #555;
display: inline-block;
height: auto;
max-width: 800px;
min-height: 100px;
vertical-align: middle;
width: 80%;
position: relative;
border-radius: 8px;
padding: 15px 5%;
}
.popupCloseButton {
background-color: #fff;
border: 3px solid #999;
border-radius: 50px;
cursor: pointer;
display: inline-block;
font-family: arial;
font-weight: bold;
position: absolute;
top: -20px;
right: -20px;
font-size: 25px;
line-height: 30px;
width: 30px;
height: 30px;
text-align: center;
}
.popupCloseButton:hover {
background-color: #ccc;
}
.trigger_popup {
cursor: pointer;
font-weight: bold;
color:#fff;
}
.trigger_popup:hover{
color:#ccc;
}
Related
I want all the boxes to be made with perfect alignemnt, but for some reason, from the second row onwards, they start to lean to the left.
$(document).ready(function() {
number = 0;
document.getElementById("create").onclick = function () {
var ok = true;
boxHTML = document.getElementsByClassName("box")[number].innerHTML;
if (ok === true) {
var obj = document.createElement('div');
obj.className = 'box';
obj.innerHTML = boxHTML;
$(this).before(obj);
}
number++;
};});
//Colours
$Background:#EAEAEA;
//Body
body{
}
//Menu
#menu {
margin-left: 5%;
margin-top: 5.25rem;
position:absolute;
ul{
list-style-type: none;
}
li{
a{
padding: 10px 15px;
text-decoration: none;
display: block;
color: black;
font-family: "roboto", sans-serif;
&:hover {
text-transform: uppercase;
}
}
}
}
//Dashboard
#dashboard{
display: inline-block;
border-radius:5px;
border: 0.5px solid black;
width: 73%;
height: 35rem;
margin-left: 17%;
margin-right: 20%;
margin-top: 6.8rem;
position: absolute;
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 10px rgba(0,0,0,0.8);
box-shadow:0 0 10px rgba(0,0,0,0.8);
}
//Boxes
#import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
html, * {
box-sizing: border-box;
}
body {
background: #e4e9f0;
padding: 40px;
}
.box {
float: left;
position: relative;
display: inline-block;
width: 45%;
background: white;
padding: 30px;
margin-right: 2%;
margin-left: 4%;
margin-top: 3%;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: 2px;
overflow: hidden;
+ .box {
margin: 0px;
margin-top: 3%;
}
&:after {
padding-top: 30%;
display: block;
content: '';
}
> div {
float: left;
width: 100%;
height: 150px;
color: #fff;
}
header {
background: #533687;
display: block;
margin: -30px -30px 30px -30px;
padding: 10px 10px;
h2 {
line-height: 1;
padding: 0;
margin: 0;
font-family: "roboto", sans-serif;
font-weight: 600;
font-size: 20px;
color: white;
-webkit-font-smoothing: antialiased;
}
}
}
#create {
user-select:none;
padding:20px;
border-radius:20px;
text-align:center;
border:15px solid rgba(0,0,0,0.1);
cursor:pointer;
color:rgba(0,0,0,0.1);
font:220px "Helvetica", sans-serif;
line-height:185px;
float:left;
padding:25px 25px 40px;
margin:0 20px 20px 0;
width:250px;
height:250px;
margin-top: 3%;
}
#create:hover { border-color:rgba(0,0,0,0.2); color:rgba(0,0,0,0.2); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dashboard">
<a href="#" class="box">
<header><h2>Responsive C3</h2></header>
<div id="chartA">
</div>
</a>
<div id="create">+</div>
</div>
JSFiddle
It didn't work for you because the newly added boxes have different margin properties. I've just statically set margin properties for the first box.
https://jsfiddle.net/oh0hjavL/2/
I want to add some column filters in order to allow to filter a data in some html report,
but i don't have a friendly access to the html generator,
so my easy way is to do it by to add some hack inside the external css of this report.
Any ideas guys?
The HTML report generator:
https://www.npmjs.com/package/protractor-html-screenshot-reporter
The HTML report (actual view):
CSS:
body{
font-family:Arial
}
h1 {
padding-top: 15px;
padding-bottom: 5px;
text-shadow: 3px 3px #D0D0D0;
text-align: center;
font-size: 40px;
}
h2 {
background-color: #C0C0C0;
}
h1:after {
content: " - vCita Production \a";
white-space: pre;
}
div {
padding-bottom: 50px;
font-size: 18px;
}
ul,li{
margin-left:0;
padding-left:0;
width:100%;
font-weight:bold;
padding-top: 5px;
font-size: 18px;
}
table{
width:95%;text-align:left;
border-spacing:0;
border-collapse: separate;
margin-bottom:5px;
}
body > ul {
margin: 0 30px;
}
li{
font-weight:bold;
list-style:none;
width: 1900px;
width:100% !important;
}
ul table li{
font-weight: normal;
}
th {
padding: 10px;
border: 1px solid #FFFFFF;
}
td {
padding: 10px;
border: 1px solid #C0C0C0;
}
td:hover {
background: #F0F0F0;
}
a:hover {
color: gray;
}
td.desc-col{
width:500px;
}
th.desc-col{
width: 500px;
}
td.status-col{
width:75px;
}
th.status-col{
width: 75px;
}
td.browser-col{
width:160px;
}
th.browser-col{
width: 160px;
}
td.os-col{
width:100px;
}
th.os-col{
width: 100px;
}
th.img-col{
width: 50px;
}
td.img-col{
width: 80px;
}
th.msg-col{
width: 200px;
}
td.msg-col{
width: 200px;
word-break: break-all;
display: inline-block !important;
}
table.header{
background-color: gray;
color: #fff;
margin-left:30px;
}
.traceinfo{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right:0;
background: rgba(0,0,0,0.8);
z-index: 99999;opacity:0;
-webkit-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.traceinfo.visible{
opacity:1;
pointer-events: auto;
}
.traceinfo > div{
width: 800px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
background: #fff;
overflow: auto;
max-height: 75%;
font-size: 14px;
}
.traceinfo .close{
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
}
.traceinfo .close:hover{
background: #00d9ff;
}
img.alt{
src: url(http://idantesting.comuv.com/public_html/reports/);
}
unfortunately you cant do this with css, you'll need a javascript solution.
Whilst it's possible to write it from scratch it a bigger job then you might imagine, but there are several plugins you can use, such as:
list.js - has functionalty to sort tables as well as lists
watable - requires jquery but provides lots of functionality
If you really want to write something from scratch you could look at this SO question on a jquery sorter for rows
As you are using a node package to generate the report, there isnts (to my knowledge) a way to add custom javascriot the same way you can add custom css. One option would be to use grunt to run the report, then use a template/find/replace to insert the javascript code <script src="[some url"> into the html that's been rendered
I'm trying to dynamically resize a .png image to whatever text is put on the box. As you can see from the printscreen it doesn't resize dynamically to fit the text in the box. I have no idea how to make it work ... the link to that page is here. I've tried formatting the padding, margins and adding classes and divs to that, but it didn't work. A link to the website can be found here.
So the problem in the
<div id='page' class='container'>:
<div id="page-bg1">
<div id="page-bg2">
<div id="page-bg3">
<div id="page" class="container">
<div class="box-style2" id="content">
<h2 class="title">Services</h2>
<p>Our experience and business ethics have evolved over several decades of working in the cleaning industry. We understand the importance of supervision, training, communication, and customer satisfaction. The facility types we serve include commercial, healthcare, corporate, education, industrial, manufacturing, and auto dealerships
</p>
<h2>Building Maintenance Services:</h2>
<ul>
<li><b>Contract Custodial Cleaning:</b> Outsourcing of custodial cleaning is a way for corporate clients to reduce their direct costs while ensuring that quality control standards are met. We can work within your existing cleaning specifications or custom design a complete program for your nightly cleaning requirements, including all labor, cleaning equipment and complete supervision. Additional value-add features include consumable product inventory control, periodic project cleaning, and quality control site audits.
</li>
<li><b>Certified Cleanroom Attendant Services: </b>
Cleanroom cleaning is a highly-specialized function and critical part of our clients’ quality control standards. We can develop and implement a program that will conform to your protocols. Our Attendants are trained and certified in all areas of contamination control including waste removal, gowning procedures, cleaning techniques and equipment handling.
</li>
</ul>
</div>
<div id="sidebar">
<div id="box2" class="box-style2">
<h2 class="title">Specialized Cleaning Services</h2>
<ul class="style3">
<li>ESD and composition tile floor refinishing and maintenance</li>
<li>Carpet and area rug cleaning</li>
<li>Cubicle fabrics partition and upholstery cleaning</li>
<li>Kitchen and cafeteria cleaning</li>
<li>Window and glass cleaning</li>
<li>Wall and ceiling cleaning</li>
</ul>
</div>
<div id="box3" class="box-style2">
<h2 class="title">Additional Services</h2>
<ul>
<li>Post-construction cleanup</li>
<li>Temporary hourly-rate personnel</li>
<li>Matron/day porters</li>
<li>Pressure washing</li>
<li>Painting</li>
<li>Relamping</li>
<li>Mold and mildew treatments</li>
<li>Fabric and carpet soil protection</li>
<li>Carpet deodorizing</li>
<li>Floor mat purchase and rental programs</li>
<li>Flame retardant applications</li>
<li>Static control applications</li>
<li>Seasonal school dormitory cleaning</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The CSS is here:
html, body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
background: url(palette/png/Background/bg.png) repeat left top;
font: 14px/26px "Arvo", Georgia, "Times New Roman", Times, serif;
//color: #94856A;
color: #0020C2;
}
a
h1, h2, h3 {
margin: 0px;
padding: 0px;
font-family: 'Arvo', serif;
}
p, ol, ul {
margin-top: 0px;
}
strong {
}
a {
color: #789329;
}
a:hover {
text-decoration: none;
}
a img {
border: none;
}
img.border {
}
img.alignleft {
float: left;
}
img.alignright {
float: right;
}
img.aligncenter {
margin: 0px auto;
}
hr {
display: none;
}
.image-wrapper {
position : relative;
}
.scale-image {
display : block;
width : auto;
max-width : 75% ;
}
/** WRAPPER */
#wrapper {
background: url(palette/png/Background/bg.png) repeat left top;
}
#main-bg {
background: url(palette/png/Background/bg_combined.png) repeat center top;
}
.container {
width: 1000px;
margin: 0px auto;
}
.clearfix {
clear: both;
}
/** HEADER */
#header {
}
/** LOGO */
#logo {
height: 183px;
background: url(images/fmn_200.jpg) no-repeat center top;
text-align: center;
text-transform: uppercase;
}
#logo h1, #logo p {
margin: 0px;
}
#logo h1 {
padding-top: 107px;
letter-spacing: 2px;
line-height: 25px;
font-size: 25px;
color: #FFFFFF;
}
#logo h1 a {
text-decoration: none;
color: #FFFFFF;
}
#logo p {
padding-top: 15px;
letter-spacing: 1px;
line-height: 14px;
font-size: 14px;
color: #776D5C;
background: url(image/fmn_200.jpg);
}
/** MENU */
#menu {
height: 100px;
background: url(images/crop.png) repeat center top;
}
#menu ul {
height: 69px;
margin: 0px;
padding: 31px 0px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline;
}
#menu a {
display: inline-block;
margin: 0 30px;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
line-height: 68px;
font-size: 14px;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: underline;
}
/** PAGE */
#page-bg1 {
overflow: hidden;
background: url(palette/png/CBG/cbg_shadow.png) repeat-x left bottom;
}
#page-bg2 {
background: url(palette/png/CBG/cbg_shadow.png) repeat-y center top;
}
#page-bg3 {
background: url(palette/png/CBG/cbg_combined.png) repeat center bottom;
}
#page {
overflow: hidden;
padding: 50px 0px 50px 0px;
}
.homepage #page {
height: auto !important;
height: 380px;
min-height: 380px;
}
/** SLIDERTRON */
#slidertron {
position: relative;
width: 900px;
height: 300px;
margin: 0px auto;
}
#slidertron .viewer {
width: 900px;
height: 290px;
overflow: hidden;
}
#slidertron .reel {
}
#slidertron .slide {
float: left;
width: 640px;
height: 260px;
background: #FFFFFF;
}
#slidertron .slide img {
padding: 9px;
border: 1px solid #E4E2DE;
}
#slidertron .indicator {
position: absolute;
bottom: 0px;
width: 100%;
height: 16px;
cursor: default;
user-select: none !important;
-khtml-user-select: none !important;
-moz-user-select: none !important;
-o-user-select: none !important;
-webkit-user-select: none !important;
}
#slidertron .indicator ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
#slidertron .indicator li {
display: inline;
}
#slidertron .indicator li.active {
}
#slidertron .indicator a {
display: inline-block;
width: 16px;
height: 16px;
margin: 0px 3px;
background: url(images/slidertron_01.png) no-repeat -16px -258px;
text-indent: -9999em;
}
#slidertron .indicator li.active a {
background-position: 0px -258px;
}
#slidertron .navigation a {
position: absolute;
top: 1px;
display: block;
width: 125px;
height: 258px;
background: url(images/slidertron_01.png) no-repeat;
text-indent: -9999em;
}
#slidertron .navigation a.previous {
left: -1px;
background-position: 0px 0px;
}
#slidertron .navigation a.next {
background-position: 100% 0px;
right: -1px;
}
/** CONTENT */
#content {
float: left;
width: 600px;
padding-left: 50px;
}
.two-column2 #content {
float: right;
padding-right: 50px;
padding-left: 0px;
}
#wide-content {
overflow: hidden;
padding: 0px 50px;
}
/** SIDEBAR */
#sidebar {
float: right;
width: 260px;
padding-right: 50px;
}
.two-column2 #sidebar {
float: left;
padding-left: 50px;
padding-right: 0px;
}
#sidebar .title {
font-size: 18px;
}
/** FOOTER BLOCK */
#footer-block-wrapper {
overflow: hidden;
padding-bottom: 40px;
}
#footer-block-bg {
overflow: hidden;
padding-bottom: 30px;
background: url(palette/png/Background/bg_bar.png) repeat-y center top;
}
#footer-block-bgtop {
background: url(palette/png/Background/bg_bar.png) no-repeat center top;
}
#footer-block {
overflow: hidden;
width: 860px;
height: auto !important;
padding: 70px 70px 0px 70px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #6C5F48;
}
#footer-block h2 {
margin: 0px;
padding: 0px 0px 20px 0px;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
}
#footer-block #column1 {
float: left;
width: 240px;
margin-right: 70px;
}
#footer-block #column2 {
float: left;
width: 240px;
}
#footer-block #column3 {
float: right;
width: 240px;
}
/** FOOTER */
#footer {
padding: 50px 0px 70px 0px;
}
#footer p {
margin: 0px;
padding: 0px 0px 0px 0px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #2F2518;
}
/** BOX 1 */
#box1 .title1, #box1 .title2 {
text-align: center;
}
/** BOX 2 */
#box2 {
margin-bottom: 30px;
}
/** BOX STYLE 1 */
.box-style1 {
}
.box-style1 .title1 {
padding: 0px 0px 5px 0px;
text-shadow: 1px 1px 1px #FFFFFF;
text-transform: uppercase;
font-weight: bold;
font-size: 26px;
color: #3C3223;
}
.box-style1 .title2 {
padding: 0px 0px 15px 0px;
text-shadow: 1px 1px 1px #FFFFFF;
text-transform: uppercase;
font-weight: normal;
font-size: 15px;
color: #8A7C60;
}
/** BOX STYLE 2 */
.box-style2 {
}
.box-style2 .title {
padding: 0px 0px 5px 0px;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 26px;
font-weight: bold;
color: #3C3223;
}
.box-style2 .byline {
letter-spacing: 1px;
text-transform: uppercase;
font-size: 15px;
font-weight: normal;
color: #8B806F;
}
/** LINK STYLE 1 */
.link-style1 {
display: inline-block;
height: 48px;
margin: 9px 0px 0px 0px;
background: url(images/bio_2.png) repeat-x left top;
}
.link-style1 a {
display: inline-block;
height: 48px;
background: url(images/bio_1.png) no-repeat left top;
line-height: 48px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Arvo', serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}
.link-style1 span {
display: inline-block;
padding: 0px 30px 0px 30px;
background: url(images/bio_3.png) no-repeat right top;
color: #FFFFF;
}
/** LINK STYLE 2 */
.link-style2 {
display: inline-block;
background: url(images/homepage09.gif) no-repeat left 3px;
margin-top: 20px;
padding-left: 30px;
text-decoration: none;
color: #9F9788;
}
/** LINK STYLE 3 */
.link-style3 {
background: url(images/homepage10.gif) no-repeat left 2px;
padding-left: 30px;
text-decoration: none;
color: #9F9788;
}
/** LIST STYLE 1 */
ul.style1 {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.style1 li {
}
ul.style1 a {
color: #6C5F48;
}
/** LIST STYLE 2 */
ul.style2 {
margin: 0px 0px 10px 0px;
padding: 10px 0px;
list-style: none;
}
ul.style2 li {
float: left;
margin-right: 9px;
}
/** LIST STYLE 3 */
ul.style3 {
margin: 0px 0px 0px 0px;
padding: 0px 0px;
list-style: none;
}
The images which needs to be resized are palette/png/CBG/cbg_combined.png and palette/png/CBG/cbg_shadow.png, presented in the divs #page-bg3, #page-bg2 and #page-bg1. That's the image that I wanted to resize according to the div text presented in that box.. I'm also adding a screenshot so you guys can have an idea of the problem.
What can I do to make it work? I only need this central banner to be able to dynamically resize.
I'm also adding a screenshot of how I wanted the page to look like:
Basically, I have cropped your background and used it in a differnt way. You can get the images from the following link:
#page-bg1
#page-bg2
#page-bg-3
And here's my code:
#page-bg1 {
overflow: hidden;
background: url(https://dl.dropboxusercontent.com/u/23887590/cbg_combined2.png) center;
}
#page-bg2 {
background: url(https://dl.dropboxusercontent.com/u/23887590/cbg_combined.png) repeat-y center top;
}
#page-bg3 {
background: url(https://dl.dropboxusercontent.com/u/23887590/cbg_combined1.png) no-repeat center bottom;
}
Little Explanation:
#page-bg1 is the background behind and outside the box.
#page-bg-2 is a vertically repeating background inside the box where you put your content.
#page-bg-3 is a backgroud with dashed border at the bottom of your content box which doesn't repeat but is always fixed at the bottom.
I am trying to make a fancy button.
JSfiddle
<div class="button" data-button='closed'>
<div class="button-default">
<span class="button-text">Click</span>
</div>
<div class="button-overflow">
<span class="button-overflow-text">Confirm!</span>
</div>
</div>
The idea is that by default it displays 'Click' and when clicked it switches to 'Confirm'.
The problem is that I don't know how to make 'Click' and 'Confirm!' be always centered. I want it so no matter what text I put there - it still will be centered.
Just add
text-align: center;
to .button.
forked fiddle -> http://jsfiddle.net/Wd5vP/
You can simplify the CSS slightly, as such:
.button {
border: 1px solid black;
background: #EEE;
width: 100px;
height: 28px;
overflow:hidden;
cursor: pointer;
}
body {
font-family:Arial;
}
.button-text {
position:absolute;
left:40px;
}
.button-overflow {
width:100%;
position:relative;
background:green;
width: 100px;
height: 28px;
right: -100px;
}
.button-default, .button-overflow {
text-align: center;
}
just add text-align:center to .button-overflow
.button-overflow {
width:100%;
position:relative;
display:table-cell;
background:green;
width: 100px;
height: 28px;
right: -100px;
text-align:center;
}
Add text-align: center; to your css class .button
It would look like this now:
.button {
border: 1px solid black;
background: #EEE;
width: 100px;
height: 28px;
overflow:hidden;
cursor: pointer;
text-align: center;
line-height: 28px;
}
You also need to update your css class .button-overflow-text to display: inline and remove text-align: left and vertical-align:middle:
.button-overflow-text{
display: inline;
}
This modified CSS worked for me:
.button {
border: 1px solid black;
background: #EEE;
width: 100px;
height: 28px;
overflow:hidden;
cursor: pointer;
text-align:center;
}
.button-default{text-align:Center;}
body {
font-family:Arial;
}
.button-text {
position:absolute;
left:40px;
}
.button-overflow {
width:100%;
position:relative;
display:table-cell;
background:green;
width: 100px;
text-align:center;
height: 28px;
right: -100px;
}
.button-overflow-text{
text-align:Center;
}
I'm using an HTML/CSS template to create a web app. For some reason the elements are not sliding back on the template when I resize the window which I need them to do. For example, if I float a button on the right it would position itself to the leftmost portion of the full screen. If I then contract the window horizontally the button does not move back but is simply 'hidden by the window'. I've been looking at the template CSS code for days now and googling everywhere but I still don't know what's causing this.
Here is the CSS code for the template:
body, html {
padding:0;
margin:0;
font-family: BBAlpha Sans;
font-size: 15pt;
overflow:visible;
}
body {
background-image: url('../images/stripes.png');
overflow:hidden;
}
.listSeparator
{
border-bottom: solid 1px Silver;
}
.label
{
display:inline;
float:left;
line-height:40px;
margin-left: 5px;
}
.row
{
height: 40px;
width:100%;
vertical-align: middle;
}
.tab
{
position:absolute;
top:70px;
padding: 10px;
}
.main-panel
{
position:relative;
}
.panel-top-left {
margin-right: 4px;
height: 4px;
background-image: url('../images/panel.png');
}
.panel-top-right {
margin-top: -4px;
margin-left: 4px;
background-position: 100% 0;
height: 4px;
font-size: 2px;
background-image: url('../images/panel.png');
}
.panel-bottom-left {
margin-right: 9px;
background-position: 0 -7px;
height: 9px;
font-size: 2px;
background-image: url('../images/panel.png');
}
.panel-bottom-right {
margin-top: -9px;
margin-left: 9px;
background-position: 100% -7px;
height: 9px;
font-size: 2px;
background-image: url('../images/panel.png');
}
.panel-inside {
border-left: 2px solid #D6D3D6;
border-right: 2px solid #D6D3D6;
background: White;
padding-left: 0px;
padding-right: 0px;
overflow:auto;
}
.panel-nogap {
margin-top: -3;
margin-bottom: -3;
}
.panel-nogap input
{
display:inline;
float:left;
font-family: BBAlpha Sans;
font-size: 16pt;
border: none;
padding-top: 0px;
width: 10px;
margin-top: 7px;
}
.buttonPanel
{
margin-top: 5px;
margin-left: 8px;
margin-bottom: 0px;
text-align:center;
position:relative;
}
a.tabButton {
background: transparent url('../images/tabs/tabRight.png') no-repeat scroll top right;
color: White;
display: block;
float: left;
height: 64px;
margin-right: 5px;
padding-right: 10px;
text-decoration: none;
width: 28%;
}
a.tabButton div {
background: url('../images/tabs/tab.png') no-repeat top left;
display: block;
height: 64px;
padding: 0px 0px 0px 10px;
line-height: 0px;
}
a.tabButton p
{
font-size: 10pt;
margin-top: 0px;
padding: 0px;
}
a.tabButton img
{
position:relative;
height:35px;
width:35px;
margin-top: 5px;
margin-bottom: 0px;
padding: 0px;
}
.tabSeparator
{
position: absolute;
top:69px;
background-color:#014EBE;
height:5px;
width: 100%;
z-index: -1;
}
and what the template looks like:
If anyone knows what is causing this or at least what I should look for, any help at all would be appreciated. Thanks in advance!
How about changing the position properties... fixed would be your best bet: positioning it fixed # 5em from the browser sides or something:
http://www.w3schools.com/cssref/pr_class_position.asp
play around on w3schools, it's a great site :)