• Registered: 2012-06-01
  • Posts: 4

Topic: 100% height not working

Greetings,

100% height isn't working, the "main" image appears smaller then my thumbs..
I want the gallery to scale with the page a.k.a. resolution of the user.

I can't find a sollution. My total design is liquid/fluid with percentages (%).
Everything is set in 100% (width + height) and it is not desirable to set it fixed with px.
Also for the firefox problem; my parent div is in 100% but the sv-gallery still shrinks.

What am I doing wrong?

(I copyed the code: pasted it in my html, the according files are in the same folder; these are on 100% height also).

Thanx in advance.

  • Registered: 2008-07-06
  • Posts: 6,334

Re: 100% height not working

Make sure all parent containers (not just the gallery's first parent container), up to and including the 'body' and 'html' tags have heights set via CSS. If you do not already have the following code in your page, add it to your page's <head> section:

<style type="text/css">
body, html {
    height: 100%;
}
</style>

If you continue to experience difficulties, please post the URL to your gallery so that I can take a look.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2012-06-01
  • Posts: 4

Re: 100% height not working

Thanx for the reply, but I've done that allready.
I've put everything in my css to 100% just to test, but it doesn't work.
Or should I put the Css from svbuilder in my own css?

The thing is not online, I'm building it on the go.
I could copy paste the (long) code in here (html + css). If that's ok?

What happens is: the thumbs are showing, but not the "main image", this one shrinks.
The page Svbuilder sets up for me, is just fine.. No problem there..
I'm probably overlooking something...

Also when I put a lot of paragraphs under the gallery (not in the same div) the main image is vissible. Another thing is: there is a lot of space between the thumbs (the main image is at the top) and the "simpleviewer logo". I don't know if that is supposed to be this way. This changes when I select the thumbs at the left option in Svbuilder. Then it looks better, but it's not what I want (choices...)...

  • Registered: 2008-07-06
  • Posts: 6,334

Re: 100% height not working

I could copy paste the (long) code in here (html + css). If that's ok?

Yes, please. I really need to see the code in order to help further.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2012-06-01
  • Posts: 4

Re: 100% height not working

Thanx.

Here's the html first. Then the css.

Notice that I'm learning this the DIY way.. (So I can be terribly wrong in a lot of things  :D  )
And I need to clean up my css: 'cause somethings I don't use..


Html: -->
------------------------------
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en, nl" lang="en, nl">

<meta http-equiv="Pragma" content="no-cache" />

<head>
<meta name="google" value="notranslate">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Work --&gt;</title>
<link href="../css-mv-smallhead.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="../images/favico.ico" />

</head>

<body class="oneColLiqCtrHdr">

<!-- <div class="tablecenter" id="container"> -->
<div class="img">
<div id="behindhead">

<div id="headsmallpiece">
<a href="../index.html"><img src="../img-all-pages/spacer.gif" width="167" height="60" /></a><br />
<div id="headlink2"><a href="../disclaimer.html">Copyright &copy; All Rights Reserved - 2012</a>
<!-- End headlink2 --></div>
<!-- End headsmall --></div>

<div id="topborder-blw-blw-head" class="stretchimg">
<img src="../img-all-pages/top-paper-border-1024-NIEUWSTE-3.png" class="img-stretch" alt="" />
<!-- END topborder below head --></div>
<!-- end BEHIND head --> </div>
<div id="backonback">
<div id="mainContent">
<div id="hs">.o2
<!-- End hs --> </div>
<div class="h1a">&nbsp;&nbsp;&nbsp;Work }</div>
<div class="h1b">&nbsp;&nbsp;&nbsp;Work }</div>
<div class="h1c">&nbsp;&nbsp;&nbsp;Work }</div>

<div class="h3a">All Work & No Play; </div>
<div class="h3b">All Work & No Play; </div>
<div class="h3c">All Work & No Play; </div>
<!-- PORTFOLIO -->
<br />
<br />
<br />
<div id="portfolionav">
<ul>
<li><a href="../work-instruct.html" class="port">?</a></li>
<li><a  href="../link 1.html" class="port">Printmaking / Grafiek</a></li>&nbsp;
<li><a  href="../link 2.html" class="port">Drawings / Tekeningen</a></li>&nbsp;
<li><a  href="../link 3.html" class="port">Installations / Installaties</a></li>&nbsp;
<li><a  href="../animations.html" class="port">Animations / Animaties</a></li>&nbsp;
<li><a  href="../toegepast.html" class="port">Applied / Toegepast</a></li>&nbsp;
<li><a  href="../opdrachten.html" class="port">Opdrachten / Assignments</a></li>&nbsp;
<li><a  href="../woord.html" class="port">Words / Woorden</a></li>

</ul>
<!-- End #portfolionav --> </div>

<p>
All play;
</p>
<div class="gallery-container">
<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
simpleviewer.ready(function () {
simpleviewer.load("sv-container", "100%", "100%", "transparent", true);
});
</script>
<div id="sv-container"></div>
<!-- END SIMPLEVIEWER EMBED -->
</div>

<div class="backfun">
<p>&nbsp;</p>
BACK UFN
<!-- END backfun-->
</div>

<div id="footer-cntrd">

<div class="footer-top">  &nbsp;
<!-- end footer top --></div>

<ul class="footer-menu">
    <li class="stripe0">&nbsp;</li>
    <li class="home"><a href="../index.html" class="footer-home" title="Home"><span class="displace">Home</span></a></li>
    <li class="stripe1">&nbsp;</li>
    <li class="work"><a href="../work.html" class="footer-work" title="Work"><span class="displace">Blog</span></a></li>
    <li class="stripe2">&nbsp;</li>
    <li class="info"><a href="../info.html" class="footer-info" title="Info"><span class="displace">Contact</span></a></li>
    <li class="stripe3">&nbsp;</li>
    <li class="contact"><a href="../contact.html" class="footer-contact" title="Contact"><span class="displace">Contact</span></a></li>
    <li class="stripe4">&nbsp;</li>
    <li class="links"><a href="../links.html" class="footer-links" title="Links"><span class="displace">Contact</span></a></li>
    <li class="stripe5">&nbsp;</li>
</ul>
<br/>

<div class="footer-bottom">  &nbsp;
<!-- end footer bottom--></div>
<!-- End footer menu--></div>
<!-- end footer cntrd --></div>


<!-- end #mainContent --></div>
<!-- end #backonback --> </div>
<div id="downsite">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
|
Some navigation link
|
<a href="../disclaimer.html">Disclaimer</a>
|
<a href="../index.html" target="_self"> &copy; Copysheit</a>
|

<!-- end #downsite--></div>

<!-- end #container --></div>


<!-- end img (no borders) --></div>
</body>

<img src="../footer-img/foot-two-colors-black_03.png" height="" width="" class="img-hidden">
<img src="../footer-img/foot-two-colors-black_05.png" height="" width="" class="img-hidden">
<img src="../footer-img/foot-two-colors-black_07.png" height="" width="" class="img-hidden">
<img src="../footer-img/foot-two-colors-black_09.png" height="" width="" class="img-hidden">
<img src="../footer-img/foot-two-colors-black_11.png" height="" width="" class="img-hidden">
</html>



---------------------
CSS -->
---------------------

@charset "utf-8";
body {
    font-family: Tahoma, Geneva, sans-serif;
    width: 100%; min-width: 400px;
    height: 100%; margin: 0; padding: 0;
    text-align: center;
    color: #FFFFFF;
    background-color: #000 ;}   
   
html {height:100%;}

/*
INPUT, SELECT, TH, TD {font-size: 100%}
LI LI, LI P, TD P, BLOCKQUOTE P {font-size: 100%}
*/

.oneColLiqCtrHdr #container {
    margin: 0 0;
    padding: 0 0;
    width: 100%;
    background: #fff;
    height:100%;   
    text-align: left;
    background-image: url(img-all-pages/paperbackerall.jpg);
    background-repeat: repeat;}

.oneColLiqCtrHdr #behindhead {
    background-image: url(header-img/headback-c.png);
    background-repeat: repeat-x;}

#headback {
    background-image: url(header-img/headback.png);
    background-repeat: repeat-x;}

.oneColLiqCtrHdr #header {
    text-align: right;
    clear: both;
    margin-top: 0px;
    font-family: Tahoma, Geneva, sans-serif;
    margin-left: auto;
    margin-right: auto;}   
   
.oneColLiqCtrHdr #headonepiece {
    background-image: url(header-img/mv-header.png);
    background-position: center;
    background-repeat: no-repeat;
    width: 538px;
    height: 199px;
    text-align: right;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    visibility: visible;
    overflow: hidden;}
   
.oneColLiqCtrHdr #headsmallpiece {
    background-image: url(header-img/mv-header-small3.png);
    background-position: center;
    background-repeat: no-repeat;
    width: 538px;
    height: 89px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 10px;
    padding: 0px;
    /*visibility:visible;
    overflow:hidden;*/}

.oneColLiqCtrHdr #head-small-piece {
    background-image: url(header-img/header-small-onepiece.png);
    background-position: center;
    background-repeat: no-repeat;
    width: 425px;
    height: 97px;
    text-align: right;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
    visibility: visible;
    overflow: hidden;
    clear:both;}
   
.oneColLiqCtrHdr #header h1 {
    font-stretch: condensed;
    letter-spacing: 10px;
    text-align: right;
    color: #CCC;
    clear: both;
    /*  margin: 0; */
    }
   
.oneColLiqCtrHdr #mainContent {
    background: #FFFFFF;
    background-image: url(img-all-pages/paperbackerall.jpg);
    background-repeat: repeat;
    text-align: left;
    padding-left: 1%;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 1%;
/*    height:100%; */
    max-height:100%;
}
/* C VS c ?!?!?!??!?!?! LET OP ! */
#maincontent {
    background: url(img-all-pages/paperbackerall.jpg);
    background-repeat: repeat;
    background-color:#FF0000;}

/*   Liever geen iframes: handheld devices gedoe enzow
.oneColLiqCtrHdr #iframer {
    width:auto; height:auto;
    background: #FFFFFF;
    background-image: url(img-all-pages/paperbackerall.jpg);
    background-repeat: repeat;
    text-align: left;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;}
*/

.oneColLiqCtrHdr #ContentUnderHs {
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 0;
    padding-top: 0;
    text-align:left;
    margin-left:auto;
    margin-right:auto;
    margin-top: 0;
    margin-bottom: 0px;
/*    background-image: url(images/mv-logg2.png);
    background-repeat: no-repeat;
    background-position: bottom right;*/}

.oneColLiqCtrHdr #datum {     
    font-family: /*9px*/ "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 60%;
    color: #999 /*  #d8d8d8  #800517 firebrick*/;
    text-align:right;
    font-stretch: extra-condensed;
    letter-spacing: 1px;
    text-transform: capitalize;
    text-decoration: none;
    padding-right:7px;
    /*    clear: both;
        position: absolute;
        top: 150px;
        right: 10px;
        top:10px;
        right:10px;
        width:300px;*/   
    background-image: none /*url(images/paperbackerall.jpg)*/;}
   
        /*  .01 TOP OF PAGE enzow-smallhead */
.oneColLiqCtrHdr #hs {     
    font-family: /*9px*/ "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 60%;
    color: #999 /*  #d8d8d8  #800517 */;
    text-align:right;
    font-stretch: extra-condensed;
    letter-spacing: 12px;
    text-transform: capitalize;
    text-decoration: none;
    /*    overflow: hidden;*/
    /*    font-weight:bold;*/
    clear: both;
    position: absolute;
    top: 150px;
    right: 10px;
    background-image: none /*url(images/paperbackerall.jpg)*/;}

.oneColLiqCtrHdr #hs-index {     
    font-family: /*9px*/ "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 60%;
    color: #999 /*  #d8d8d8  #800517 */;
    text-align:right;
    font-stretch: extra-condensed;
    letter-spacing: 12px;
    text-transform: capitalize;
    text-decoration: none;
    clear: both;
    position: absolute;
    top: 245px;
    right: 10px;
    background-image: none /*url(images/paperbackerall.jpg)*/;}

.oneColLiqCtrHdr #headlink a{
    font-family: /*10px*/ Tahoma, Geneva, sans-serif;
    font-size: 60%;
    color: #999;
    text-decoration: none;
    text-transform:uppercase;
    text-shadow: none;
    letter-spacing: 1px;
    padding-right: 7px;
    padding-left: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
    margin-top: 50%;
}

.oneColLiqCtrHdr #headlink a:hover{
    color:#000;
}

.oneColLiqCtrHdr #headlink2 a{
    font-family: /*10px*/ Tahoma, Geneva, sans-serif;
    font-size: 60%;
    text-align: right;
    float: right;
    color: #333;
    text-decoration:none;
    text-shadow: none;
    padding-right: 7px;
    padding-left: 0;
    padding-bottom: 0;
    padding-top: 22px;
    margin:0;}

.oneColLiqCtrHdr #headlink2 a:hover{
    color:#000;
}

.tablecenter {
    font-family: Verdana, Geneva, sans-serif;
    margin: auto;
    text-align: center;
    color: #000000;}

#topborder-blw-blw-head {
    background: url(img-all-pages/top-paper-border-1024plus-NIEUWSTE-bckfill.png);
    background-repeat: repeat-x;
    height:89px;
    clear:both;}

/*
#topborder-blw-head {
    background-image: url(img-all-pages/top-paper-border-1024-NIEUWSTE-transp.png);
    background-repeat:no-repeat;
    height:89px;
    width: 100%;
    clear:both;}
*/

#backonback {
    background: url(img-all-pages/paperbackerall.jpg);
    background-repeat: repeat;
    background-color: #FFF;
    text-align: left;
    font-family:"Lucida Console", Monaco, monospace;
    color:#666666;
    height:100%;}

#portfolionav ul {
    /*word-wrap: break-word;
    white-space: nowrap   ;*/
    line-height: 40px;
    margin: 0; padding: 0;
    list-style-type: none;
    text-align: center;
    width: 100%;
    float:left;
    display: inline;
    text-decoration: none;
    clear: both;
    background: url(img-all-pages/paperbackerall.jpg);
    background-repeat: repeat;}

#portfolionav ul li {
    /*display: inline;
    white-space: nowrap;
    text-decoration: none;
    padding: 5px;
    color: #787878;
    background-color: #f0f0f0; */
    display: inline;
    white-space: nowrap; /* anders BIG HEADER prob */ }

#portfolionav ul li a.port {
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    text-decoration: none;
    color: #666/*#323232*/;
    background-color: #F0F0F0;
    padding-left: 5px;
    padding-right: 5px;}

#portfolionav ul li a.port:link {text-decoration: none;}

#portfolionav ul li a.port:visited {text-decoration:line-through; color: #999;}

#portfolionav ul li a.port:hover {
    display: inline;
    white-space: nowrap;
    text-decoration: none;
    color: #323232;
    background-color: #E1DFDC;}

            /* GALLERY enlarged WIDTH image - Of een andere oplossing vinden! */
.thumbnail-width img{border: 0px /*solid #0C0*/; margin: 0 5px 5px 0;}
.thumbnail-width:hover{background-color: transparent; text-decoration:none; padding: 0px;}
.thumbnail-width:hover img {border: 0px /*solid #FFF*/;}
.thumbnail-width span{white-space: nowrap; position: absolute; background-color: transparent; padding: 0px; left: -1000px; border: none; width: 80%; height: auto; text-align:center;}
.thumbnail-width span img{ /*Border and back behind img */ padding: 0px; background: transparant; width: 80%; height: auto;}
.thumbnail-width:hover span { /*square beghind img*/ visibility: visible; top: 0; left: 250px; /*position where enlarged image should offset horizontally  geen % ivm overlapping thumbs*/ width: 80%; z-index: 50; /* hoe groter het getal; hoe hoger in ranglijst: boven of onder ene element div whatever */ height: auto; background: /* #F00 / transparant*/  url(img-all-pages/paperbackerall.jpg) repeat;  }

.gallerycontainer{
    font-size: 100%;
    text-decoration: none;
    clear: both;
    padding: 0;
    margin:0;
    border-top:dotted #CCCCCC thin;
    height:100%}

.gallerycontainer: a {text-decoration: none;}

.paper-main-hold {
    width: 100%;
    clear:both;
    margin-top:10%;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:10px;}
   
.ppr-main-left {
    float:left;
    display:block;
    width:45%;
    position: relative;
    clear:left;
    margin:0;
    padding:0;}
   
.ppr-main-right {
    float:right;
    display: block;
    width:45%;
    position:relative;
    clear:right;
    margin:0;
    padding:0;}

.ppr-content {
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
    word-wrap: normal;
    word-break: break-strict;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 100%;
    font-weight: 500;
    color: #2E2E2E;
    text-shadow: #FFF -1px 1px, #CCC 1px -1px;}

.ppr-hold-left {   
    float: left;
    width: 40%;
    padding:0;
    display:inline;
    margin-left: 5%;  /* left & right margin aan alle elementen in de zijkant columns */
    margin-right: auto;
    margin-bottom: 0px;
    margin-top: 0px;}

.ppr-hold-right {
    float: left;
    width: 40%;
    padding:0;
    display:inline;
    margin-left: 10%; 
    margin-right: auto;   
    margin-bottom: 0px;
    margin-top: 0px;}
   
.ppr-top-left {
    float:left;
    clear:left;
    width:100%;
    height:14px;
    display:block;
    position:relative;
    background: url(img-back-grounds/sidebar-papers_01.gif) no-repeat left; }

.ppr-top-mid {
    float:left;
    height:14px;
    width:100%;
    background:url(img-back-grounds/sidebar-papers_02.gif) repeat-x;
    display:block; position:relative;}

.ppr-top-right {
    float:left;
    clear:right;
    width: 100%;
    height: 14px;
    display:block;
    position:relative;
    background:url(img-back-grounds/sidebar-papers_03.gif) no-repeat right;}

.ppr-filler {  /*Onderste laag = achtergrond papier */
    background-image: url(img-back-grounds/sidebar-4ab-fill.gif);
    background-position: center;
    background-repeat: repeat;
    background-color: #FFF;
    float: left;
    width: 100%;
    padding:0;
    margin:0;
    clear:left;}

.ppr-left {
    background:url(img-back-grounds/sidebar-papers_04.gif) repeat-y left;
    float:left;
    width:100%;
    padding:0;
    margin:0;}

.ppr-right {
    background:url(img-back-grounds/sidebar-papers_06.gif) repeat-y right;
    float:right;
    width:100%;
    padding:0;
    margin:0;}

.ppr-down-left {
    float:left;
    clear:left;
    width:100%;
    height:11px;
    display:block;
    position:relative;
    background:url(img-back-grounds/sidebar-papers_07.gif) no-repeat left;}
   
.ppr-down-mid {
    float:left;
    height:11px;
    width:100%;
    background: url(img-back-grounds/sidebar-papers_08.gif) repeat-x;
    display:block;
    position:relative;}
   
.ppr-down-right {
    float:left;
    clear:right;
    background:url(img-back-grounds/sidebar-papers_09.gif) no-repeat right;
    width: 100%;
    height: 11px;
    display:block;
    position:relative;}

.carbon-holdemall {
    position: relative;
    clear: both;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 75px;
    width: 90% /* voorheen:   50% */;
    display: inline-block; /* voorheen:   inline*/
    background: #CCC;
    padding:0;}
   
.carbon-2columns {
    float: left;
    clear:right;
    display: inline /*-block*/;
    word-wrap: break-word;
        margin-left: 2%;
        margin-right: 5%;
        margin-top: 0px;
        margin-bottom: 0px;
        width: 40%;
    padding: 0px;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #151515;
    text-shadow: #CCC -1px 1px/*, #61380b 1px -0.5px*/;
    font-weight:bold;
}

.carbon-vertical-columns {
    float: left;
    clear: both;
    display: inline /*-block*/;
    word-wrap: break-word;
        margin-left: 2%;
        margin-right: 5%;
        margin-top: 0px;
        margin-bottom: 0px;
        width: 40%;
    padding: 0px;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #151515;
    text-shadow: #CCC -1px 1px/*, #61380b 1px -0.5px*/;
    font-weight:bold;
}
   
.carbon-content {
    float: left;
    clear:right; /* TEST TEST TEST */
    display: inline /*-block*/;
    word-wrap: break-word;
    word-break: break-all;
        margin-left: 2%;
        margin-right: 5%;
        margin-top: 0px;
        margin-bottom: 0px;
        width: 40%;
    padding: 0px;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #151515;
    text-shadow: #CCC -1px 1px/*, #61380b 1px -0.5px*/;
    /*    text-shadow: #CCC -1px 1px, #999 1px -1px;*/
    font-weight:bold;
}

.carbon-content-list {
    width:90%;
    margin-right: auto;
    margin-left:auto;
    padding:0;
    word-wrap: break-word;
    word-break:normal;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #151515;
    text-shadow: #CCC -1px 1px/*, #61380b 1px -0.5px*/;
    font-weight:bold;}
       
.carbon-top-left {
    float:left;
    clear:left;
    width:100%;
    height:17px;
    display:block;
    position:relative;
    background: url(img-back-grounds/carbon-tab-slices_01.gif) no-repeat left; }
   
.carbon-top-mid {
    float:left;
    height:17px;
    width:100%;
    background:url(img-back-grounds/carbon-tab-slices_02.gif) repeat-x;
    display:block;
    position:relative;}

.carbon-top-right {
    float:left;
    clear:right;
    width: 100%;
    height: 17px;
    display:block;
    position:relative;
    background:url(img-back-grounds/carbon-tab-slices_03.gif) no-repeat right;}

.carbon-filler {  /*Onderste laag = achtergrond papiertje */
    background: url(img-back-grounds/carbon-tab-slices_05.gif) repeat;
    background-position: center;
    background-color: #FFF;
    float: left;
    width: 100%;
    padding:0;
    margin:0;
    clear:left;}

.carbon-left {
    background: url(img-back-grounds/carbon-tab-slices_04.gif) repeat-y left;
    float:left;
    width:100%;
    padding:0; margin:0;}

.carbon-right {
    background: url(img-back-grounds/carbon-tab-slices_06.gif) repeat-y right;
    float:right;
    width:100%;
    padding:0; margin:0;}

.carbon-down-left {
    float:left;
    clear:left;
    width:100%;
    height:23px;
    display:block;
    position:relative;
    background: url(img-back-grounds/carbon-tab-slices_07.gif) no-repeat left;}
   
.carbon-down-mid {
    float:left;
    height:23px;
    width:100%;
    background: url(img-back-grounds/carbon-tab-slices_08.gif) repeat-x;
    display:block;
    position:relative;}
   
.carbon-down-right {
    float:left;
    clear:right;
    background: url(img-back-grounds/carbon-tab-slices_09.gif) no-repeat right;
    width: 100%;
    height: 23px;
    display:block;
    position:relative;}

.artvetiser-txt {text-align:left;
clear:both;
display:inline-block;
width: 80%;
margin-left:auto;
margin-right:auto;
padding-left:10%;
}


a {font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; color: #666;}

a:link, a:visited{color: #666; text-decoration: none;}

a:hover, a:active{color: #333; text-decoration: underline;}

a.noshowlink {text-decoration:none;}

.indent-txt {
    width:90%;
    text-align: left; /*line-height:110%;*/ /*margin-top:50px;*/
    margin-left:20px;
    margin-right:auto;
    padding:0;
    word-break:normal;
    word-wrap:break-word;}

.img-hidden /*PreLoad images = rollover footer */ {
    display:none;
    border: 0;
    left: -9999px;
    top:-9999px;
    height:1px;
    width:1px;}
   
.img-stretch{
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right:auto;
    padding: 0;
    background: none;
    border: 0;}
   
.img-cntrd {
    display: block;
     clear:both;
     margin-left: auto;
     margin-right: auto;
     padding: 20px;
     position: relative;
     text-align:center;
     width: auto;
     border: 0;}
    
.img-align-mid {
    clear:both;
    margin-left:auto;
    margin-right:auto;
    padding:0;
    border:0;
    width:100%;
    height:100%;}
   
.img-right {
    display:inline;
    clear:both;
    float: right;
    text-align:right;
    padding-right: 0;
    margin:0;
    border:0;}
   
.img-left {
    float: left;
    text-align:left;
    padding-top: 5px;
    padding-bottom:5px;
    padding-right:0;
    padding-left:0;
    margin:0;
    border:0;
    width: 90%;}
   
.img-left-small {
    display: inline;
    clear: left;
    margin-left:auto;
    margin-right:5px;
    padding: 5px;
    position:relative;
    text-align: left;
    width: 50%;
    border:0;
    float:left;
    clear:right;}
   
.img {border: 0;}

.img-right-float {
    width: 40%;
    float:right;
    display: inline; 
    margin-left:auto;
    margin-right:auto;
    padding:0;
    background:none;
    border:0;}

h1 {font-family: /*24px*/ "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style: italic;
    letter-spacing: 10px;
    margin-top: -5px;
    color: #EEEEEE;
    text-transform: uppercase;
    text-shadow: #FFF -1px 1px, #E6E6E6 1px -1px;
    border-style: inset;
    border-bottom-style: #DFDFDF;
    border-bottom-width: thin;
    border-left: none;
    border-right: none;
    border-top: none;
}

h2 {font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style: italic;
    font-size: 150%;
    font-weight: bold;
    letter-spacing: 6px;   
    color: #C80000;
    display: inline;
    clear: both;
    text-shadow: #CCC -1px 1px, #999 1px -1px;
}

h3 {font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style: italic;
/*    font-weight:lighter;    */
    letter-spacing: 4px;
    color: #BDBDBD;
    font-weight: bold;
    display: inline;
}

h3info {font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style: italic;
    letter-spacing: 4px;
    color: #6c6c6c;
    font-weight: bold;
    display: inline;
}

h4 {font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style: italic;
    font-size: 110%;
    letter-spacing: 4px;
    color: #61380B     /*#800517*/;
    font-weight: 900;
    display: inline;
    text-shadow: #CCC -1px 1px, #999 1px -1px;
}

h5 {font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style: italic;
    font-size: 110%;
    letter-spacing: 4px;
    color: #61300b/*#61380B*/ /*#800517*/;
    font-weight: 900;
    display: inline;
    text-shadow: #CCC -1px 1px, #999 1px -1px;
}
h6 {font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style: italic;
    font-size: 105%;
    letter-spacing: 4px;
    color: /*#61380B*/ /*#800517*/ #815940;
    font-weight: 900;
    display: inline;
    text-shadow: #CCC -1px 1px, #999 1px -1px;
}


.h1a {
    font-family: /*24px*/ "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style: italic; font-size:200%; letter-spacing: 10px; text-transform: uppercase; font-weight:bolder;
    display: inline; clear: both; position: absolute; z-index: 3; margin-right: -1px; margin-left: -2px; color: #FFF;
    top: 155px;}
   
.h1b {font-family: /*24px*/ "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style: italic; font-size:200%; letter-spacing: 10px; text-transform: uppercase; font-weight:bolder;
    display:inline; clear: both; position: absolute; margin-top: -1px; margin-left: -1px; z-index: 4; color: #EEEEEE;
    top: 155px;}
   
.h1c {font-family: /*24px*/ "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style: italic; font-size:200%; letter-spacing: 10px; margin-top: -5px; text-transform: uppercase; font-weight:bolder;
    display: inline; clear: both; position: absolute; z-index: 2; margin-top: -2px; margin-right: 1px; color: #E6E6E6;
    top: 155px;}
   
.h1a-index {font-family: /*24px*/ "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style: italic; font-size:200%; letter-spacing: 10px; text-transform: uppercase; font-weight:bolder;
    display: inline; clear: both; position: absolute; z-index: 3; margin-right: -1px; margin-left: -2px; color: #FFF;
    top: 260px;}
   
.h1b-index {font-family: /*24px*/ "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style: italic; font-size:200%; letter-spacing: 10px; text-transform: uppercase; font-weight:bolder;
    display:inline; clear: both; position: absolute; margin-top: -1px; margin-left: -1px; z-index: 4; color: #EEEEEE;
    top: 260px;}
   
.h1c-index {font-family: /*24px*/ "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style: italic; font-size:200%; letter-spacing: 10px; margin-top: -5px; text-transform: uppercase; font-weight:bolder;
    display: inline; clear: both; position: absolute; z-index: 2; margin-top: -2px; margin-right: 1px; color: #E6E6E6;
    top: 260px;}
   
.h2a /* SHADOW color */
    {font-family: /*18px*/ "Palatino Linotype", "Book Antiqua", Palatino, serif; font-style: italic; font-size: 150%; font-weight: bold; letter-spacing: 6px;    color: #CCC; display: inline; clear: both; position: absolute; z-index: 0; margin-top: 1px; margin-left: -1px;
    top: 185px;}
   
.h2b /* COLOR */ {font-family: /*18px*/ "Palatino Linotype", "Book Antiqua", Palatino, serif; font-style: italic; font-size: 150%; font-weight: bold; letter-spacing: 6px; color: #C80000   /*#D80000*/    /*#000*/;    display:inline; clear: both; position: absolute;     z-index: 3; top: 185px;}

.h2c /* SHADOW tr color */ {font-family: /*18px*/ "Palatino Linotype", "Book Antiqua", Palatino, serif; font-style: italic;    font-size: 150%; font-weight: bold; letter-spacing: 6px; color: #999; display: inline; clear: both; position: absolute; z-index: 0; margin-bottom:5px; margin-top: -1px; margin-left: 1px; margin-right: -1px; top: 185px;}

.h3a /* SHADOW color */    {font-family: /*18px*/ "Palatino Linotype", "Book Antiqua", Palatino, serif; font-style: italic; font-size: 150%; font-weight: bold; letter-spacing: 6px;    color: #CCC; display: inline; clear: both; position: absolute; z-index: 0; margin-top: 1px; margin-left: -1px; top: 200px; padding-left:55px;}

.h3b /* COLOR */     {font-family: /*18px*/ "Palatino Linotype", "Book Antiqua", Palatino, serif; font-style: italic; font-size: 150%; font-weight: bold; letter-spacing: 6px; color: #C80000   /*#D80000*/    /*#000*/;    display:inline; clear: both; position: absolute;     z-index: 3; top: 200px;padding-left:55px;}

.h3c /* SHADOW tr color */ {font-family: /*18px*/ "Palatino Linotype", "Book Antiqua", Palatino, serif; font-style: italic;    font-size: 150%; font-weight: bold; letter-spacing: 6px; color: #999; display: inline; clear: both; position: absolute; z-index: 0; margin-bottom:5px; margin-top: -1px; margin-left: 1px; margin-right: -1px;    top: 200px;    padding-left:55px;}
   
/* DIFFERENT PLACEMENT BECAuse OF INDEX : LARGER HEADER !!! */
.h3a-index /* SHADOW color */ {font-family: /*18px*/ "Palatino Linotype", "Book Antiqua", Palatino, serif; font-style: italic; font-size: 150%; font-weight: bold; letter-spacing: 6px;    color: #CCC; display: inline; clear: both; position: absolute; z-index: 0; margin-top: 1px; margin-left: -1px;    top: 305px; padding-left:55px;}

.h3b-index /* COLOR */ {font-family: /*18px*/ "Palatino Linotype", "Book Antiqua", Palatino, serif; font-style: italic; font-size: 150%; font-weight: bold; letter-spacing: 6px; color: #C80000   /*#D80000*/    /*#000*/;    display:inline; clear: both; position: absolute;     z-index: 3; top: 305px;padding-left:55px;}

.h3c-index /* SHADOW tr color */ {font-family: /*18px*/ "Palatino Linotype", "Book Antiqua", Palatino, serif; font-style: italic;    font-size: 150%; font-weight: bold; letter-spacing: 6px; color: #999; display: inline; clear: both; position: absolute; z-index: 0; margin-bottom:5px; margin-top: -1px; margin-left: 1px; margin-right: -1px; top: 305px; padding-left:55px;}
   
.hbla {    font-family: Tahoma, Geneva, sans-serif;
    font-style:italic;
    font-weight:lighter;
    text-align: left;
    color: #C30;
    text-shadow: #CCC -2px 2px, #999 2px -2px;
    display: inline;
    margin:0; padding:0;
    float:right;
    clear:none;
    overflow: visible;
}
   
.hblab {    font-family: Tahoma, Geneva, sans-serif;font-style:italic; font-weight:lighter;
    width: 20%; text-align: left; color: #060; text-shadow: #CCC -2px 2px, #999 2px -2px;}
   
h9 {font-family: Tahoma, Geneva, sans-serif;font-style:italic; font-weight:lighter;
    width: 20%; text-align: left; color: #060; text-shadow: #CCC -2px 2px, #999 2px -2px;}
   
.oneColLiqCtrHdr #footer {
    padding: 0 0px;
    background: #FFF;
    background-image: url(img-all-pages/paperbackerall.jpg);
    background-repeat: repeat;
    clear:both;
    margin-left:auto;
    margin-right:auto;
    margin-top: 50px;
    margin-bottom: 0px;}
           
#footer-cntrd {margin-left: auto; margin-right: auto; width:540px;}

.footer-top {background: url(footer-img/foot-white.png); background-position: 0 0; padding: 0px; margin:0px; background-repeat: no-repeat; display:inline; width:540px; height:6px; float:left; /*position:absolute;*/ border:0;}

.footer-bottom {background: url(footer-img/foot-two-colors_13.png); background-position: 0 0; padding: 0px; margin:0px; background-repeat: no-repeat; display:inline; width:540px; height:27px; float:left;border:0; /*position:absolute;*/}

.footer-nolink {display: inline; float:left; clear:both; padding: 0px;border:0;}

ul.footer-menu {list-style: none; padding: 0px;border:0;}

.displace/*-footer*/{position: absolute; left: -9000px;}

ul.footer-menu li {float: left; }

ul.footer-menu li a {
    display: inline; width: auto; height: auto; border:0;}

ul.footer-menu li.top {
    background:url(footer-img/foot-white.png); background-position: 0 0; width: 540px; height: 6px; border:0;}

/*ul.footer-menu li.top a:hover {background:url(footer-img/foot-white.png); background-position: 0 0; width: 540px; height: 6px; }*/
ul.footer-menu li.stripe0 {
    background: url(footer-img/foot-two-colors_02.png); height:25px; width:24px;border:0;}

ul.footer-menu li.home a {
    background:url(footer-img/foot-two-colors_03.png); background-position: 0 0; width:67px; height:25px;border:0;}

ul.footer-menu li.home a:hover {
    background:url(footer-img/foot-two-colors-black_03.png);    background-position: 0 0;border:0;}

ul.footer-menu li.stripe1 {
    background: url(footer-img/foot-two-colors_04.png); height:25px; width:21px;border:0;}

ul.footer-menu li.work a {
    background: url(footer-img/foot-two-colors_05.png); background-position: 0 0; width:70px; height:25px; background-position: 0 0;border:0;}

ul.footer-menu li.work a:hover {
    background:url(footer-img/foot-two-colors-black_05.png); background-position:0 0;border:0;}

ul.footer-menu li.stripe2 {
    background: url(footer-img/foot-two-colors_06.png); height:25px; width:21px;border:0;}

ul.footer-menu li.info a {
    background: url(footer-img/foot-two-colors_07.png); background-position: 0 0; width:70px; height:25px; background-position: 0 0;border:0;}

ul.footer-menu li.info a:hover {
    background:url(footer-img/foot-two-colors-black_07.png); background-position:0 0;border:0;}

ul.footer-menu li.stripe3 {
    background: url(footer-img/foot-two-colors_08.png); height:25px; width:19px;border:0;}

ul.footer-menu li.contact a {
    background: url(footer-img/foot-two-colors_09.png); background-position: 0 0; width:116px; height:25px; background-position: 0 0;border:0;}

ul.footer-menu li.contact a:hover {
    background:url(footer-img/foot-two-colors-black_09.png); background-position:0 0;border:0;}

ul.footer-menu li.stripe4 {
    background: url(footer-img/foot-two-colors_10.png); height:25px; width:20px;border:0;}

ul.footer-menu li.links a {    background: url(footer-img/foot-two-colors_11.png);
    background-position: 0 0; width:79px; height:25px;border:0;}

ul.footer-menu li.links a:hover {
    background:url(footer-img/foot-two-colors-black_11.png); background-position:0 0;border:0;}

ul.footer-menu li.stripe5 {
    background: url(footer-img/foot-two-colors_12.png); height:25px; width:33px; background-position:0 0;border:0;}

.footer-roller {display: inline; float: left; white-space: nowrap;border:0;}

a.footer-home {display: inline; float: left; white-space: nowrap; width: 67px; height: 25px; background-image: url(footer-img/foot-two-colors_03.png);border:0;}

a.footer-home:hover {background-image: url(footer-img/foot-two-colors-black_03.png);border:0;}

a.footer-work {display: inline; float: left; white-space:nowrap; width: 70px; height: 25px; background-image: url(footer-img/foot-two-colors_05.png);border:0;}

a.footer-work:hover {background-image: url(footer-img/foot-two-colors-black_05.png);border:0;}

a.footer-info {display: inline; float: left; width: 70px; height: 25px; background-image: url(footer-img/foot-two-colors_07.png);}

a.footer-info:hover {background-image: url(footer-img/foot-two-colors-black_07.png);border:0;}

a.footer-contact {display: inline; float: left; width: 116px; height: 25px; background-image: url(footer-img/foot-two-colors_09.png);border:0;}

a.footer-contact:hover {background-image: url(footer-img/foot-two-colors-black_09.png);border:0;}

a.footer-links {display: inline; float: left; width: 79px; height: 25px; background-image: url(footer-img/foot-two-colors_11.png);border:0;}

a.footer-links:hover {background-image: url(footer-img/foot-two-colors-black_11.png);border:0;}

.oneColLiqCtrHdr #downsite a{font-family: /*10px*/ Tahoma, Geneva, sans-serif; color: #666;}

.oneColLiqCtrHdr #downsite {
    background-image:url(img-all-pages/underfooterbck3.gif);
    border:0;
    height: 150px;
    background-repeat: repeat-x;
    background-color: #000;
    font-family: /*10px*/ Tahoma, Geneva, sans-serif;
    font-size: 60%;
    color: #666;
    text-decoration:none;
    text-shadow: none;
    text-align: right;
    padding-right: 20px;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 5px;
}

.workmenu {font-family: Verdana, Geneva, sans-serif;/*font-weight: bold;*/ /*letter-spacing:1px;*/ display: inline-block; clear:both; font-size:100%; background:none; padding: 5px; margin-top: 25px; margin-bottom: 5px; float:left; white-space: nowrap;}

.workmenu a {text-decoration: none; }

.workmenu a:link {color:#333;background:none;}

.workmenu a:hover {color:#000; text-decoration:underline /*overline*/;background: #F0F0F0  ;}

.workmenu a:visited {color:#999999;background:none;}

.cntrdcontentback {   
    position: relative;
    clear: both;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 75px;
    width: 90%;
    display: inline-block;
    background: #CCC;
    padding:0;
    background-image: url(img-back-grounds/karton-back-mid.png);
    background-repeat: repeat;
    /*font-size: 100%;
    font-family: Verdana, Geneva, sans-serif;
    text-shadow:#CCC -1px 1px, #999 1px -1px; */
        box-shadow: -2px 2px 5px 2px #6c6c6c /*5px 5px 5px #ccc*/;
        -moz-box-shadow: -2px 2px 5px 2px #6c6c6c /*5px 5px 5px #ccc*/;
        -webkit-box-shadow: -2px 2px 5px 2px #6c6c6c;
  /* SAME HERE ONLY FOR IE
  .shadow-ie {               
filter: progid:DXImageTransform.Microsoft.Shadow(color=’#ece8e8′, Direction=45, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=’#ece8e8′, Direction=135, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=’#ece8e8′, Direction=225, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=’#ece8e8′, Direction=315, Strength=3);
*/

-ms-filter:         /* For IE 8 */
/*“progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=45, Color=’#cccccc’)”
“progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color=’#cccccc’)”
“progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=225, Color=’#cccccc’)”
“progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=315, Color=’#cccccc’)”
“progid:DXImageTransform.Microsoft.Blur(pixelradius=1, MakeShadow=’true’, ShadowOpacity=’0.40’)”    */
    “progid:DXImageTransform.Microsoft.Shadow(Direction=135, Strength=2, Color=’gray’)”
    “progid:DXImageTransform.Microsoft.Blur(pixelradius=2)”;


filter:             /* For IE 5.5 – 7   */
/*progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=45, Color=’#cccccc’)
progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color=’#cccccc’)
progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=225, Color=’#cccccc’)
progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=315, Color=’#cccccc’)
progid:DXImageTransform.Microsoft.Blur(pixelradius=1, MakeShadow=’true’, ShadowOpacity=’0.40’);   */
    progid:DXImageTransform.Microsoft.Shadow(Direction=135, Strength=2, Color=’gray’)
    progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}

.txt-no-shadow {
clear: both;
position: relative;
    display: inline-block;
/*    text-align: left;
    width: 90%;
    margin: 5px;
    background: none;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5px;
    padding-top: 10px;*/
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #000;
    font-weight:bold;
}

.cntrdcontent {
clear: both;
position: relative;
    display: inline-block;
    text-align: left;
    width: 90%;
    margin: 5px;
    background: none;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5px;
    padding-top: 10px;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #151515;
    text-shadow: #CCC -1px 1px, #999 1px -1px;
    font-weight:bold;
}

.bordertop {  /* boven cntrdcontent */
    background-image: url(img-back-grounds/karton-back-top.png);
    background-repeat: repeat-x;
}

.borderdown {  /* onder cntrd content */
    background-image: url(img-back-grounds/karton-back-down.png);
    background-repeat: repeat-x;
}

.img-line {
    width: 90%;
    clear: both;
    border: 0px;
}

.sidebarsBorderBckGrnd {
    background-image: url(img-back-grounds/topborder-paper-sidebar3.png);
    padding-left: auto; padding-right:auto;
    background-position: top center;
    background-repeat:repeat-x;
    display: inline-block;
    clear: both;
    margin: 0px;
    padding: 0px;
/*    overflow: hidden;*/
    /*height: 125px;
    width:100%;*/
    width:100%;
    height:24px;
}

.sidebar-l {
    background-image: url(img-back-grounds/sidebar-4ab-fill.gif);
    background-position: center;
    background-repeat: repeat;
    background-color: #FFF;
    float: left;
    width: 40%;
    padding-bottom: 0px;
    padding-left: 0px;   /* 10px */
    padding-right: 0px;
    padding-top: /*5px;*/ 0px;
    margin-left: 5%;
    margin-right: auto;
    margin-bottom: 0px;
    margin-top: 0px;
    visibility: visible;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom:  #FFF 2px;
    border-bottom-style: solid;   
    /* TEST SHADOW BORDER */
    box-shadow: -2px 2px 5px 2px #6c6c6c /*5px 5px 5px #ccc*/;
      -moz-box-shadow: -2px 2px 5px 2px #6c6c6c /*5px 5px 5px #ccc*/;
      -webkit-box-shadow: -2px 2px 5px 2px #6c6c6c;
                              /* SAME HERE ONLY FOR IE */
-ms-filter:        /* For IE 8 */
/*
“progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=45, Color=’#cccccc’)”
“progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color=’#cccccc’)”
“progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=225, Color=’#cccccc’)”
“progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=315, Color=’#cccccc’)”
“progid:DXImageTransform.Microsoft.Blur(pixelradius=1 /* TEST */ /*, MakeShadow=’true’, ShadowOpacity=’0.40’)”   */
“progid:DXImageTransform.Microsoft.Shadow(Direction=135, Strength=1, Color=’#cccccc’)”
“progid:DXImageTransform.Microsoft.Blur(pixelradius=2)”;

filter:     /* For IE 5.5 – 7   */
/*
progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=45, Color=’#cccccc’)
progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color=’#cccccc’)
progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=225, Color=’#cccccc’)
progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=315, Color=’#cccccc’)   
progid:DXImageTransform.Microsoft.Blur(pixelradius=1, MakeShadow=’true’, ShadowOpacity=’0.40’)   */
    progid:DXImageTransform.Microsoft.Shadow(Direction=135, Strength=1, Color=’#cccccc’)
    progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}


.sidebar-r {
    background-image: url(img-back-grounds/sidebar-4ab-fill.gif);
    background-position: center;
    background-repeat: repeat;
    background-color: #FFF;
    float: left;
    width: 40%;
padding:0;
    margin-left: 10%;
    margin-right: auto;   
    margin-bottom: 0px;
    margin-top: 0px;
   
    visibility: visible;
   
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom:  #FFF 2px;
    border-bottom-style: solid;   
    /* TEST SHADOW BORDER */
    box-shadow: -2px 2px 5px 2px #6c6c6c /*5px 5px 5px #ccc*/;
      -moz-box-shadow: -2px 2px 5px 2px #6c6c6c /*5px 5px 5px #ccc*/;
      -webkit-box-shadow: -2px 2px 5px 2px #6c6c6c;
                              /* SAME HERE ONLY FOR IE */
-ms-filter:        /* For IE 8 */
/*
“progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=45, Color=’#cccccc’)”
“progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color=’#cccccc’)”
“progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=225, Color=’#cccccc’)”
“progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=315, Color=’#cccccc’)”
“progid:DXImageTransform.Microsoft.Blur(pixelradius=1 /* TEST */ /*, MakeShadow=’true’, ShadowOpacity=’0.40’)”   */
“progid:DXImageTransform.Microsoft.Shadow(Direction=135, Strength=1, Color=’#cccccc’)”
“progid:DXImageTransform.Microsoft.Blur(pixelradius=2)”;

filter:     /* For IE 5.5 – 7   */
/*
progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=45, Color=’#cccccc’)
progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color=’#cccccc’)
progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=225, Color=’#cccccc’)
progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=315, Color=’#cccccc’)   
progid:DXImageTransform.Microsoft.Blur(pixelradius=1, MakeShadow=’true’, ShadowOpacity=’0.40’)   */
    progid:DXImageTransform.Microsoft.Shadow(Direction=135, Strength=1, Color=’#cccccc’)
    progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}

.sidebar-indent-txt {
    background-image: url(img-back-grounds/sidebar-4ab-fill.gif);
    background-position: center;
    background-repeat: repeat;
    background-color: #FFF;
   
    float: left;
    width: 30%;
    padding-bottom: 0px;
    padding-left: 0px;   /* 10px */
    padding-right: 0px;
    padding-top: /*5px;*/ 0px;

    margin-left: 0;
    margin-right: 10px;
    margin-bottom: 0px;
    margin-top: 0px;
   
    visibility: visible;
   
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom:  #FFF 2px;
    border-bottom-style: solid;   
    /* TEST SHADOW BORDER */
    box-shadow: -2px 2px 5px 2px #6c6c6c /*5px 5px 5px #ccc*/;
      -moz-box-shadow: -2px 2px 5px 2px #6c6c6c /*5px 5px 5px #ccc*/;
      -webkit-box-shadow: -2px 2px 5px 2px #6c6c6c;
                              /* SAME HERE ONLY FOR IE */
-ms-filter:        /* For IE 8 */
/*
“progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=45, Color=’#cccccc’)”
“progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color=’#cccccc’)”
“progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=225, Color=’#cccccc’)”
“progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=315, Color=’#cccccc’)”
“progid:DXImageTransform.Microsoft.Blur(pixelradius=1 /* TEST */ /*, MakeShadow=’true’, ShadowOpacity=’0.40’)”   */
“progid:DXImageTransform.Microsoft.Shadow(Direction=135, Strength=1, Color=’#cccccc’)”
“progid:DXImageTransform.Microsoft.Blur(pixelradius=2)”;

filter:     /* For IE 5.5 – 7   */
/*
progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=45, Color=’#cccccc’)
progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color=’#cccccc’)
progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=225, Color=’#cccccc’)
progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=315, Color=’#cccccc’)   
progid:DXImageTransform.Microsoft.Blur(pixelradius=1, MakeShadow=’true’, ShadowOpacity=’0.40’)   */
    progid:DXImageTransform.Microsoft.Shadow(Direction=135, Strength=1, Color=’#cccccc’)
    progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}


.sidebar-content {
        float: left;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 5px;
        margin-bottom: 0px;
        width: 82%;
        word-wrap: break-word;
        padding-left: 20px;
        padding-bottom: 0px;
        padding-right: 20px;
        padding-top: 0px;
    position: relative;
    display: inline-block;
    background-position: bottom right; */
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 100%;
    color: #2E2E2E;
    text-shadow: #FFF -1px 1px, #CCC 1px -1px;
}

            /* Simple Viewer */
.gallery-container { max-width:100%; width:100%; height:100%; border:thin dotted #CCCCCC; overflow:show;}
.flashcontent {height: 100%; width:100%;}
.sv-container {height: 100%; width:100%;}

  • Registered: 2008-07-06
  • Posts: 6,334

Re: 100% height not working

Your gallery seems to be nested within the following <div>s:
<div class="img">
<div id="backonback">
<div id="mainContent">
<div class="gallery-container">
... so I would start by checking the heights of these <div>s in you CSS.
(1) Make sure that all parent containers (i.e. the <div>s listed above) have a height set. (The 'mainContent' <div> seems to have a 'max-height' but not a 'height').
(2) Make sure, if you are setting the 'body' and 'html' heights to 100% (which you are), that the heights of all the <div>s directly within the <body> tag (i.e. not nested within other <div>s) add up to 100% (and then check that the heights of nested <div>s also makes sense and add up correctly).

You can also check your HTML code by validating your page with the W3C Markup Validation Service. Once you have fixed the errors reported and you page validates, it should be rendered with greater predictability and consistency across all browsers.
You can also check your CSS code with the W3C CSS Validation Service and fix any errors reported.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2012-06-01
  • Posts: 4

Re: 100% height not working

Thanx ! For your quick answer, super!
And thanx for the tips on the validator services. I'll surely use that too.

(Just fixed the main content and threw away the img div.)

Now there's only one thing I don't understand from your answer:

I have to add up the heights? But only with "nested div's"?
Like: 1+1=2 ?

For example:
Div1 = 25%,
Div2 = 50%,
Div3= 25%
------------    +
makes 100%

Because I thought: make everything 100% and it's "fluid" or scalable, etc.
(Stil learning here - sorry).

  • Registered: 2008-07-06
  • Posts: 6,334

Re: 100% height not working

Take a look at the following example (all heights specified via inline CSS for clarity) whose percentages all add up OK:

<body style="height: 100%;">
    <div id="1" style="height: 25%;">
        <div id="4" style="height: 100%;"></div>
    </div>
    <div id="2" style="height: 50%;">
        <div id="5" style="height: 100%;"></div>
    </div>
    <div id="3" style="height: 25%;">
        <div id="6" style="height: 20%;"></div>
        <div id="7" style="height: 80%;"></div>
    </div>
</body>

The 'body' has a height of 100% so the content will fill the browser window.
The heights of <div>s #1, #2 and #3 (all on the same level) add up to 100% so, together, they will fill the 'body'.
The height of <div> #4 is 100% so completely fills its parent container (<div> #1).
The height of <div> #5 is 100% so completely fills its parent container (<div> #2).
The heights of <div>s #6 and #7 add up to 100% so, together, they will fill their parent container (<div> #3).
In order to see this in action, use the following code as an HTML page and open it in a browser.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    body, html {
        height: 100%;
        margin: 0;
    }
</style>
<title></title>
</head>
<body>
    <div id="1" style="height: 25%;">
        <div id="4" style="height: 100%; background-color: #222222;"></div>
    </div>
    <div id="2" style="height: 50%;">
        <div id="5" style="height: 100%; background-color: #444444;"></div>
    </div>
    <div id="3" style="height: 25%;">
        <div id="6" style="height: 20%; background-color: #666666;"></div>
        <div id="7" style="height: 80%; background-color: #888888;"></div>
    </div>
</body>
</html>

I have given the visible <div>s background colors so that you can see what is being displayed.
Try resizing your browser window and although the heights of the <div>s change, the percentages always stay in proportion to each other.

Steven Speirs
SimpleViewer Support Team

9 Reply by benjibones (edited by benjibones 2012-08-04 03:50:04)

  • Registered: 2012-08-04
  • Posts: 2

Re: 100% height not working

Is this thread still open?  I'm having the same problem, I think.

Although the display is set to 100%, and all of the divs and elements involved are set to 100%, I'm only getting a gallery that is 80px high.

It /kinda/ works in IE9. The real problems are with FF and Chrome.

http://retail2.winstonconsulting.ca/liviana/index.php

thanks!

Bb

  • Registered: 2008-07-06
  • Posts: 6,334

Re: 100% height not working

@benjibones

Please see this FAQ:
My gallery does not show in Firefox or gets cropped to a small height. Why?

Also, please see the note for Using Percentage Heights in the 'SimpleViewer Embedding Guide'.

Your gallery is nested within the 'embed', 'main', 'content', 'container' and 'outer-container' divs.
It looks like heights have not been set for the 'main', 'content', 'container' and 'outer-container' divs.
Try setting heights for these divs in your CSS.

Alternatively, you could define the height of your gallery as an absolute pixel value rather than as a percentage, e.g.:

simpleviewer.load("sv-container", "100%", "600", "FFFFFF", true);
Steven Speirs
SimpleViewer Support Team
  • Registered: 2012-08-04
  • Posts: 2

Re: 100% height not working

Thanks Steven, that did the trick.

Lesson: when messing with css, don't rely solely on Chrome's 'Inspect Element' to try modifications. It's not 100%. It worked better when I actually changed the CSS.

Bb