I have web page
www.turie.eu
There are some facebook comments at the bottom. What do I have to change to dynamically change the height and display all 16 comments?
I have tried to change height of every single css selector that have something to do with the comments part from single value to 100% or auto, but with no effect.
Thank you!
This is because:
#contenwrap {overflow: hidden}
When you remove this rule, you´ll get some other design issues to solve, but you are on the right path :-)
Update!
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #FFF url(pozadie04.jpg) no-repeat scroll center top;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
width: 960px;
margin: 280px auto 0; /* the auto value on the sides, coupled with the width, centers the layout */
box-shadow: 0 0 40px black; /* Not supported in IE7 and IE8 */
}
.header {
width:960px;
height:280px;
position:absolute;
top:0;
}
.headerPic {position:absolute;}
.Logo {bottom: 35px; left:98px}
.Church {bottom: 0; right:70px}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
*/
.content {
padding: 10px 0;
background:rgba(255,255,255,0.9); /* Not supported in IE7 and IE8 */
border:1px solid #fff;
}
.forum {
height:130px;
}
.maps {
height:523px;
}
.fb {
width:600px;
background: #FFF url(facebookcomments_nadpis.png) no-repeat left top;
padding-top: 70px;
margin-left:15px;
}
.mb {
width:300px;
background: url(mikroblog-nadpis.png) no-repeat left top;
padding-top: 70px;
margin-right:15px;
}
.footer {
width:960px;
height:237px;
background: url(footer.png) no-repeat bottom;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style></head>
<body>
<div class="container">
<div class="header">
<img class="headerPic Logo" src="maco07.png" width="277" height="185" alt="Logo">
<img class="headerPic Church" src="kostol03.png" width="170" height="230" alt="church">
<!-- end .header --></div>
<div class="content">
<div class="forum">
<p>Place your forum in this DIV</p>
<!-- end .forum --></div>
<div class="maps">
<p>Place your Google Map in this DIV</p>
<!-- end .maps --></div>
<div class="hero">
<h1>Vitajte!</h1>
<p>Turie.eu je komunitný web s cieľom prezentovať obec Turie formou interaktívnych panoramatických fotografií. Vzhľadom na všeobecne nízku úroveň interaktivity na stránkach obcí, bude možnosť spoluvytvárať obsah Turie.eu jej návštevníkmi našou prioritou.</p>
<p>Stránka funguje vo všetkých moderných prehliadačoch a v IE8+. Ak nájdete nejaké chyby, máte návrhy na zlepšenie, alebo sa chcete podieľať na vytváraní obsahu, napíšte nám.</p>
<p>Chystané zmeny: užívateľská fotogaléria, kalendár udalostí, filtrovanie markerov, hlasovania, rezervácie..</p>
<!-- end .hero --></div>
<div class="wrap">
<div class="fb fltlft">
<h2>Facebook </h2>
<p>sdlkfjsdf kjsadf slkødfj sødlfkj sadlkfj sad flkj</p>
<p>sdlkfjslkdjflksjdflkjsdf</p>
<p>sdflkjsdlfkjsdlkfj</p>
<p>sldkfjlkdsfj</p>
<p>Float is cleared in this DIV</p>
<!-- end .fb --></div>
<div class="mb fltrt">
<h2>Mikroblog</h2>
<p>sdkfljøslkdfjlkjdsfølkj</p>
<p>sdlkfjølskdjfølksjdf</p>
<p>sdlkfjøsldkfjølskdfj</p>
<p>sdlfkjøsldkfj</p>
<p>sdlkfjøsldkfj</p>
<p>sdflkjsdøflkj</p>
<p>slskdjfølksdjf</p>
<p>Float is cleared in this DIV</p>
<!-- end .mb --></div>
<br class="clearfloat">
<!-- end .wrapper --></div>
<!-- end .content --></div>
<div class="footer">
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
you can use scrolling div, Use css overflow property or overflow:auto for scroll
Here is the IE fix for rgba issue. I used Kimili´s generator on his site (great tool).
<!--[if IE]>
<style type="text/css">
{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF); /* IE6 & 7 */
zoom: 1;
}
</style>
<![endif]-->
Related
I am building a login form for my web application using bootstrap for the styling. I have used the below "Meta Tag" to make the screen responsive
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and multiple combinations of bootstraps col class of the grid system but to no avail.
<style>
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 0;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(51, 51, 255, 0.9); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 20%; /* 25% from the top */
width: 100%; /* 100% width */
text-align: center; /* Centered text/links */
margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
/* The navigation links inside the overlay */
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block; /* Display block instead of inline */
transition: 0.3s; /* Transition effects on hover (color) */
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
/* Position the close button (top right corner) */
.overlay .closebtn {
position: absolute;
}
/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<div id="myNav" class="overlay">
<div class="overlay-content">
<div class="container">
<div class="row">
<div class="col-12"> // column which contains the login form code
<div id="loginform">
// login form code
</div>
<div id="signupform">
// signup form code
</div>
</div>
</div>
</div>
</div>
This is my output - Output Image
Appreciate any insight as to what I am doing wrong and how to go about this.
Thanks a ton.
Try using the class form-group rather than login form and signup form.
It may make the web form mobile responsive.
Check: Bootstrap Form Document
I am providing this as an answer because it's too much to put in a comment.
Make sure you're using <!doctype html>
In order to make sure Bootstrap 4 works correctly in Safari, use shrink-to-fit=no - see What does the shrink-to-fit viewport meta attribute do?
Use the bootstrap class for text-center instead of the HTML attribute align - see Text - Bootstrap
Since your class is always going to have col-XX-12 based on your example, just use col-12. See Grid system
As mentioned in the above example, this is a good place to use form-group - see Forms - Boostrap
Overall, please start with Introduction - Bootstrap
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="col-12 text-center"> // column which contains the login form code
<div id="loginform">
// login form code
</div>
<div id="signupform">
// signup form code
</div>
</div>
</body>
</html>
My window is split into 3 parts, the header, Section and footer. the section part is not being fully sized in the browser, instead it's cut off half way down the page.
I have tried changing the height attribute to 100% or 'Auto' but it doesn't seem to help. I've included the entire code as I am not sure what affects the sizing.
<!DOCTYPE html>
<html>
<head>
<style>
header {
background-image: url("53.12-Day-1600x1200.jpg");
color:white;
text-align:left;
padding:5px;
width:100%;
height:20%;
}
nav {
line-height:20px;
background-color:#B0D4DB;
height:auto;
max-height:initial;
width:10%;
float:left;
color:;
}
**
*section {
width:90%;
background-color:#E9E9E9;
float:left;
text-align:center;
color: black;
height:auto;
max-height:initial;
font-family:courier;***
}
footer {
background-color:#CDCDCD;
color:black;
clear:both;
text-align:left;
width:100%;
height:10%;
}
</style>
</head>
<header>
<h1> Find Break </h1>
</header>
<body>
<nav>
<p>About</p><br>
<p>Search Break</p><br>
<p>Contact us</p>
</nav>
<section>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<style type="text/css">
#tfnewsearch{
float:center;
padding:20px;
}
.tftextinput{
margin: 0;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
border:1px solid #0076a3;
border-right:0px;
border-top-left: 5px 5px;
border-bottom-left: 5px 5px;
}
.tfbutton {
margin: 0;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #ffffff;
border: solid 1px #0076a3; border-right:0px;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
}
.tfbutton:hover {
text-decoration: none;
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
}
.tfbutton::-moz-focus-inner {
border: 0;
}
.tfclear{
clear:both;
}
</style>
<br>
<p1> Search for your favourite surf spots below </p1>
<br>
<div id="tfheader">
<form id="tfnewsearch" method="get" action="http://www.google.com">
<input type="text" class="tftextinput" name="q" size="21" maxlength="20"><input type="submit" value="search" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<!-- Google Map -->
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
<div style='overflow:hidden;height:200x;width:500px;'>
<div id='gmap_canvas' style='height:200px;width:500px;'></div>
<div><small>embed google maps</small></div>
<div><small>auto huren</small></div>
<style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
</div>
<script type='text/javascript'>function init_map(){var myOptions = {zoom:11,center:new google.maps.LatLng(-33.598169871799726,151.3341166752075),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(-33.598169871799726,151.3341166752075)});infowindow = new google.maps.InfoWindow({content:'<strong>Title</strong><br>Palm Beach, NSW<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>
</section>
</body>
<footer> <small>© Copyright 2101, PSX </small> </footer>
</html>
To make the section 100% in height, you'll need the parent to be 100% height too. In other words, your body has to be set at height:100% with the section set as the same.
You could also use vh (vertical height) units like so, which wouldn't require the 100% height on the body
section{
height:100vh;
}
Any time you have a float:_____, the floated element loses its height. It is visible, but it is as if it has zero height. Stuff will overwrite it -- sizing does not work.
So what to do?
There is a simple fix. Ensure the floated element is inside another container (a div, usually) and style that container overflow:hidden or overflow:auto. There are other solutions that involve creating pseudo-elements, and those work great and are a bit "more elegant", but this method works just fine.
References:
Customising Insightly HTML contact form (aligned, spaced fields)
CSS container div not getting height
Align <ul> center with others
For a percentage-based height setting to work for an element, its parent element needs to have a height definition. In your case, that's <body>, so you need to add
body {
height: 100%;
}
...and don't float it - it will loose its height setting if you do
Hi my code works correctly in Firefox, but in IE I'm getting the default vertical scrollbar. When I minimize the page I get the vertical and horizontal scrollbars I want, but in IE I get an additional vertical scrollbar. How can I get rid of it just in IE? I am using a CSS Reset. Here is my CSS:
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
margin:0;
padding:0;
border:0;
outline:0;
/*font:inherit;*/
font-size:100%;
vertical-align:baseline;
text-decoration:none;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
display:block;
}
body{
line-height:1;
}
ol,ul{
/*list-style:none;*/
}
blockquote,q{
quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
content:’’;
content:none;
}
/* remember to define visible focus styles!
:focus{
outline:?????;
} */
/* remember to highlight inserts somehow! */
ins{
text-decoration:none;
}
del{
text-decoration:line-through;
}
table{
border-collapse:collapse;
border-spacing:0;
}
/*CUSTOM*/
a {
/*color:#365C8C;*/
}
a:hover {
text-decoration:underline;
/*color:#365C8C;*/
}
p {
font:.85em arial,regular;
}
ul {
font:.85em arial,regular;
}
.bar {
background-color:#365C8C;
height:30px;
width:100%;
position:relative;
padding:0 0 0 0;
margin:0 0 0 0;
/*overflow-x:hidden;*/
min-width:1225px;
}
body {
position:relative;
padding:0 0 0 0;
margin:0 0 0 0;
overflow:auto;
height:100%;
width:100%;
background-color:#ADCCEB;
/*background-color:black;*/
/*background: url(background.png);*
/*background-size:100%;*/
}
.bold {
font-weight:bold;
}
.contentcontainer {
width:825px;
height:910px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding-top:0px;
/*background-color:red;*/
}
.extcontentcontainer {
width:825px;
height:645px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding-top:0px;
/*background-color:red;*/
}
img.fullbackground {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
min-width:1225px;
height:100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
img.extfullbackground {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
min-width:1225px;
height:100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
And here is some of the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pathfinder Outage Page</title>
<link rel="stylesheet" href="boilerplate.css">
</head>
<body class="fullbackground">
<img class="fullbackground" src="background.png" />
<div class="topbackground">
<div class="top">
<div class="topleft">
<img class="pf_logo" src="pathfinder_logo.png"/>
</div>
<div class="topmiddle">
<h1 class="title">Pathfinder is Temporarily Unavailable</h1>
</div>
<div class="topright" ></div>
</div>
</div>
<div class="bar"></div>
<div style="width:1225px; height:910px; padding-top:0px; margin-top:0px; margin-left:auto; margin-right:auto;">
<div class="contentcontainer">
Remove:
overflow: auto;
From the body in the CSS.
That should fix it.
It looks like both your body and your div are producing scrollbars because you set the height to 100%, the div inside the body is larger than the body, and the body itself is larger than your window, so you have two overflowing elements inside each other. Just get rid of height: 100% in your div nad you should be fine.
Use the "if IE" built in HTML to put in custom css files to fix the issue in IE like:
<!--[if IE]>
<link rel="stylesheet" href="ie-specific.css">
<![endif]-->
Check to see if Compatibility Mode for Intranet Sites is on. I had this issue and when I disable Compatibility Mode the second scroll bar went away.
I think there is another way to fix this without getting rid of the overflow: auto style.
My understanding of the issue and the workaround suggested is based on this nice article you could check for more details: https://remysharp.com/2008/01/21/fixing-ie-overflow-problem
The way I understood the problem is that in Chrome and Firefox, the scroll-bars are drawn outside the containers, so they don't affect the container width when shown.
While in IE the scroll-bars are drawn inside the containers and their width/height is what's causing the container to overflow and display a second scroll-bar.
A typical use case where this would happen is on tables with vertical scroll (too many rows) and horizontal scroll (too many columns):
the table body which already has a horizontal scroll because of the long list of columns, will add a second horizontal scroll because of the x-overflow that the vertical scroll width will add will add when drawn inside the table body (for the long list of rows).
One of the tricks I tried and that seemed to work is to add a padding to the container to allow it to draw the scroll bar without overflowing:
To fix a double horizontal scroll-bar:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.container-overflowing-vertically-class {
padding-right: 20px;
}
}
To fix a double vertical scroll-bar:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.container-overflowing-horizontally-class {
padding-bottom: 20px;
}
}
Okay so this is a subscription box with fancybox that I'm making and everything is going well.
Just a little problem here.
the image that I'm using is stuck to the left and even margin property is of no use.
<style type="text/css">
body{
background-image:url(../../images/subscribe.png);
background-repeat:no-repeat;
background-position:left bottom;
margin-bottom:85px;
line-height:2px;
margin-left:10px;
margin-right:10px;
}
#h1_1 {
something;
}
#h1_2 {
something;
}
#h1_3 {
something;
}
/*
#img1_1 {
background-position:left bottom;
margin:0px;
background-repeat:no-repeat;
}
*/
</style>
</head>
<body>
<p id="h1_1">
<b>Subscribe Us</b>
<br>
<p id="h1_2"> Sometext</p><!-- end h1_2 -->
<p id="h1_3"> sometext</p><!-- end h1_3 -->
</p> <!-- end h1_1 -->
<!-- <img src="../../images/subscribe.png" id="img1_1"> -->
</body>
</html>
If the margin propety is applied the whole body gets shifted
and if i don't put the image in the background, creatig in the body, this way i can't write the exact text right besides the image.
I think this gets you in the right direction:
if you use the img tag then this should work
#img1_1 {
margin-left: 20px;
}
if you use the background-image you should use background position:
body {
background-position: 20px 20px;
}
No offence, but I recommend you further dive into CSS and HTML, because this is a pretty basic CSS question.
I've got a dialog box made of a series of divs for the header, body and footer which are further subdivided into left, center and right sections each. Picture a tic tac toe board and you'll get the idea. For some reason, as soon as I put a textarea in the body center it overlaps the left and right body divs. The problem is occurring somewhere in the div section that uses the "con" classes.
Here's a picture of the problem: http://s8.postimage.org/fvlt9qi51/Dialog_Overlap.jpg
Edit: I managed to make it work by replacing height: 100% with height: 175px in the .con section of CSS. What I don't understand is why that looks ok, but height: 100% doesn't? The top level div that contains all the sub divs that make up the dialog has it's dimensions specified in pixels, as does the dialog header and footer. Why does the middle have to have an exact value specified as well? I'd rather not do it this way as it means I'll need a special CSS class for each dialog box so that a specific height value can be added to the middle of the dialog.
The HTML is below, CSS is after that.
<div class="ttl">
<div class="ttlt">
<div class="ttlt-l"></div>
<div class="ttlt-m">
<a class="close" href="javascript:void(0);" onclick="cancelNotes();this.blur();return false;"></a>
<span>Create Note</span>
</div>
<div class="ttlt-r"></div>
</div>
<div class="ttlb">
<div class="ttlb-l"><span></span></div>
<div class="ttlb-m"><span></span></div>
<div class="ttlb-r"><span></span></div>
</div>
</div>
<div class="con">
<div class="con-l"></div>
<div class="">
<input type="hidden" id="hdnNoteID" />
<textarea id="txtNote" rows="11" cols="50"></textarea>
</div>
<div class="con-r"></div>
</div>
<div class="ftr">
<div class="ftr-l"></div>
<div class="ftr-m">
<a onclick="cancelNotes();this.blur();return false;" href="javascript:void(0);" class="btn"><span>Cancel</span></a>
<a onclick="addNotes();this.blur();return false;" href="javascript:void(0);" class="btn"><span>Add Note</span></a>
</div>
<div class="ftr-r"></div>
</div>
CSS
/* Title Bar */
.ttl { width:100%;height:38px; }
/* Close button */
.ttl a { margin-top:4px;display:block;float:right;width:23px;height:21px;background:transparent url("img/dialog/static.png") no-repeat -18px 0;cursor:default; }
.ttl a:hover { background-position:-18px -21px; }
.ttl a:active { background-position:-18px -42px;outline:none; }
.ttlt { width:100%;height:30px; }
.ttlt-l { width:9px;height:30px;background:transparent url("img/dialog/static.png") no-repeat;float:left; }
/* ttlt-m width is dialogue width (450px) - 18px (the left & right divs are 9px each) */
.ttlt-m { width:432px;height:30px;background:#000 url("img/dialog/horizontal.png") repeat-x;float:left; }
.ttlt-mWide { width:632px;height:30px;background:#000 url("img/dialog/horizontal.png") repeat-x;float:left; }
.ttlt-mExtraWide { width:930px;height:30px;background:#000 url("img/dialog/horizontal.png") repeat-x;float:left; }
.ttlt-r { width:9px;height:30px;background:transparent url("img/dialog/static.png") no-repeat -9px 0;float:left; }
.ttlt span { cursor:inherit;margin-left:4px;line-height:30px;color:#fff;font-weight:bold;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;font-size:11px; }
.ttlb { width:100%;height:8px; }
.ttlb span { display:none; }
.ttlb-l { width:9px;height:8px;background:#000 url("img/dialog/static.png") no-repeat 0 -30px;float:left; }
/* ttlb-m width is dialogue width (450px) - 18px (the left & right divs are 9px each) */
.ttlb-m { width:432px;height:8px;background:#fff url("img/dialog/horizontal.png") repeat-x 0 -67px;float:left; }
.ttlb-mWide { width:632px;height:8px;background:#fff url("img/dialog/horizontal.png") repeat-x 0 -67px;float:left; }
.ttlb-mExtraWide { width:930px;height:8px;background:#fff url("img/dialog/horizontal.png") repeat-x 0 -67px;float:left; }
.ttlb-r { width:9px;height:8px;background:#000 url("img/dialog/static.png") no-repeat -9px -30px;float:left; }
.tabbed .ttlb-l { background-position:0 -38px; }
.tabbed .ttlb-m { background-position:0 -75px; }
.tabbed .ttlb-r { background-position:-9px -38px; }
/* Body */
.con { width:100%;height:100%;background-color:#fff;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;font-size:11px; cle}
.con-l { width:9px;height:100%;background:#000 url("img/dialog/vertical.png") repeat-y;float:left; }
/* con-m width is dialogue width (450px) - 18px (the left & right divs are 9px each) */
.con-m { width:432px;height:100%;background-color:#fff;float:left; }
.con-m .top { margin-top:2px; }
.con-mWide { width:632px;height:100%;background-color:#fff;float:left; }
.con-mExtraWide { width:930px;height:100%;background-color:#fff;float:left; }
.con-r { width:9px;height:100%;background:#000 url("img/dialog/vertical.png") repeat-y -9px 0;float:left; }
/* Dialogue footer */
.ftr { width:100%;height:37px;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;font-size:11px; clear: left;}
.ftr-l { width:9px;height:37px;background:transparent url("img/dialog/static.png") no-repeat 0 -75px;float:left; }
/* ftr-m width is dialogue width (450px) - 18px (the left & right divs are 9px each) */
.ftr-m { width:432px;height:37px;background:#eee url("img/dialog/horizontal.png") repeat-x 0 -30px;float:left; }
.ftr-mWide { width:632px;height:37px;background:#eee url("img/dialog/horizontal.png") repeat-x 0 -30px;float:left; }
.ftr-mExtraWide { width:930px;height:37px;background:#eee url("img/dialog/horizontal.png") repeat-x 0 -30px;float:left; }
.ftr-r { width:9px;height:37px;background:transparent url("img/dialog/static.png") no-repeat -9px -75px;float:left; }
It is hard to help there without access to real thing.
Block .con and its left and right parts have height:100%. This will work only if they parent have height in pixels. Now this left and right parts invisible, because they have height 0. It will be simpler to help if you will provide html and css for outer div for this blocks. Try to set fixed height for it like 300px.
Also I can suggest dirty workaround. Add this css after your styles:
.con {
border:9px solid #000;
border-width:0 9px;
padding:0 9px;
width:auto;
}