Page 1 of 1
Layout problem - content not stretching page
Posted: Tue Aug 07, 2007 10:27 am
by truslack
I see a couple of people have had this problem before, but I didn't seem to be able to fix it with the solution in earlier threads.
In IE, the news and upcoming events stretch the page so that they fit, this is how it should be:
But in firefox, the boxes show off the bottom of the page:
Cheers for any help
Mark
Re: Layout problem - content not stretching page
Posted: Tue Aug 07, 2007 11:00 am
by RonnyK
Do you have a link, or can you post the template/stylesheet.
Ronny
Re: Layout problem - content not stretching page
Posted: Tue Aug 07, 2007 4:25 pm
by truslack
Template:
Code: Select all
<!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" lang="en">
{* Change lang="en" to the language of your site *}
<head>
<title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}
{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}
{stylesheet}
{* This is how all the stylesheets attached to this template are linked to *}
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}
{literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Left sidebar + 1 column" *}
</head>
</__body>
<div id="pagewrapper">
{* start accessibility skip links *}
<ul class="accessibility">
<li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
<li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
</ul>
{* end accessibility skip links *}
<hr class="accessibility" />
{* Horizontal ruler that is hidden for visual browsers by CSS *}
{* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet "For template: Left menu + 1 column" *}
<div id="header">
<h1>{cms_selflink dir="start" text="$sitename"}</h1>
<hr class="accessibility" />
</div>
{* End Header *}
{* Start Search *}
<div id="search">
{search}
</div>
{* End Search *}
{* Start Breadcrumbs *}
<div class="breadcrumbs">
{breadcrumbs starttext='You are here' root='Home' delimiter='»'}
<hr class="accessibility" />
</div>
{* End Breadcrumbs *}
{* Start Content (Navigation and Content columns) *}
<div id="content">
{* Start Sidebar *}
<div id="sidebar" class="hascontent">
{* Start Navigation *}
<div id="menu_vert">
<h2 class="accessibility">Navigation</h2>
{menu template='simple_navigation.tpl' collapse='1'}
</div>
{* End Navigation *}
{* Start News *}
<div id="news">
<h3>News</h3>
{news number='3' detailpage='news'}
</div>
{* End News *}
<div id="Calendar">
{cms_module module="Calendar" table_id="small" display="upcominglist"}
</div>
</div>
{* End Sidebar *}
{* Start Content Area *}
<div id="main">
<div style="float: right;">{print showbutton=true script=true}</div>
<h2>{title}</h2>
{content} <br />
{* Start relational links *}
<div class="hr"></div>
<div class="right49">
<p>{anchor anchor='main' text='^ Top'}</p>
</div>
<div class="left49">
<p>{cms_selflink dir="previous" label="Previous page: "} <br />
{cms_selflink dir="next"}</p>
</div>
{* The label parameter doesn't need to be there if you're using English, but is here to show how it's used if you don't want the English text "Previous page" *}
{* End relational links *}
<hr class="accessibility" />
</div>
{* End Content Area *}
</div>
{* End Content *}
{* Start Footer. Edit the footer in the Global Content Block called "footer" *}
<div id="footer">
{global_content name='footer'}
</div>
{* End Footer *}
{* end pagewrapper *}
<__body>
</__html>
Code: Select all
* {
margin : 0;
padding : 0;
}
body {
text-align : left;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 75.01%;
line-height : 1em;
}
div {
font-size : 1em;
}
img {
border : 0;
}
a, a:link a:active {
text-decoration : underline;
background-color : inherit;
color : #18507c;
}
a:visited {
text-decoration : underline;
background-color : inherit;
color : #18507c;
}
a:hover {
text-decoration : none;
background-color : #c3d4df;
color : #f59eb3;
}
body {
background-color : #ffcccc;
color : #f59eb3;
margin : 1em;
}
div#pagewrapper {
border : 1px solid black;
margin : 0 auto;
max-width : 80em;
min-width : 60em;
background-color : white;
color : black;
}
div#header {
height : 80px;
background : #f59eb3;
}
div#header h1 a {
background : #f59eb3 url(images/cms/logo1.gif) no-repeat 0 12px;
display : block;
height : 80px;
text-indent : -999em;
text-decoration : none;
}
div#search {
float : right;
width : 23em;
text-align : right;
padding : 0.6em 0 0.2em 0;
margin : 0 1em;
}
div.breadcrumbs {
padding : 1em 0 1.2em 0;
font-size : 90%;
margin : 0 1em;
border-bottom : 1px dotted #000;
}
div.breadcrumbs span.lastitem {
font-weight : bold;
}
div#content {
margin : 1.5em auto 2em 0;
}
div#main {
margin-left : 29%;
margin-right : 2%;
}
div#sidebar {
float : left;
width : 26%;
display : inline;
margin-left : 0;
}
div#footer {
clear : both;
color : #fff;
background-color : #f59eb3;
}
div#footer p {
font-size : 0.8em;
padding : 1.5em;
text-align : center;
margin : 0;
}
div#footer p a {
color : white;
}
div.hr {
height : 1px;
padding : 1em;
border-bottom : 1px dotted black;
margin : 1em;
}
div.left49 {
width : 49%;
}
div.right49 {
float : right;
width : 49%;
text-align : right;
}
div#content h1 {
font-size : 2em;
line-height : 1em;
margin : 0;
}
div#content h2 {
color : #294b5f;
font-size : 1.5em;
text-align : left;
padding-left : 0.5em;
padding-bottom : 1px;
border-bottom : 1px solid #f59eb3;
border-left : 1.1em solid #f59eb3;
line-height : 1.5em;
margin : 0 0 0.5em 0;
}
div#content h3 {
color : #294b5f;
font-size : 1.3em;
line-height : 1.3em;
margin : 0 0 0.5em 0;
}
div#content h4 {
color : #294b5f;
font-size : 1.2em;
line-height : 1.3em;
margin : 0 0 0.25em 0;
}
div#content h5 {
color : #294b5f;
font-size : 1.1em;
line-height : 1.3em;
margin : 0 0 0.25em 0;
}
h6 {
color : #294b5f;
font-size : 1em;
line-height : 1.3em;
margin : 0 0 0.25em 0;
}
p {
font-size : 1em;
margin : 0 0 1.5em 0;
line-height : 1.4em;
padding : 0;
}
blockquote {
border-left : 10px solid #ddd;
margin-left : 10px;
}
strong, b {
font-weight : bold;
}
em, i {
font-style : italic;
}
code, pre {
white-space : pre-wrap;
font-family : "Courier New", Courier, monospace;
font-size : 1em;
}
pre {
border : 1px solid #000;
background-color : #ddd;
margin : 0 1em 1em 1em;
padding : 0.5em;
line-height : 1.5em;
font-size : 90%;
}
div.templatecode {
margin : 0 0 2.5em;
}
div#main ul, div#main ol, div#main dl {
font-size : 1em;
line-height : 1.4em;
margin : 0 0 1.5em 0;
}
div#main ul li, div#main ol li {
margin : 0 0 0.25em 3em;
}
div#main dl dt {
font-weight : bold;
margin : 0 0 0 1em;
}
div#main dl dd {
margin : 0 0 1em 1em;
}
div#main dl {
margin-bottom : 2em;
padding-bottom : 1em;
border-bottom : 1px solid #c0c0c0;
}
The template is W3C Valid XHTML. the CSS Fails on 1 error that's annoying me!
Cheers
Mark
Re: Layout problem - content not stretching page
Posted: Tue Aug 07, 2007 4:37 pm
by Dr.CSS
You might want to get the free PSPad editor...
http://www.pspad.com/en/
I used it and it told me you were missing a for pagewrapper, if you paste your code in it then click on a , it turns blue if it has an end div, it will hilite the end div , so I clicked the and it was red, no ...
So here is where it needs to be...
{* end pagewrapper *}
Re: Layout problem - content not stretching page
Posted: Tue Aug 07, 2007 4:55 pm
by truslack
Don't think it's that, it doesn't change the layout, but I removed it due to that failing the XHTML validation
Cheers
Mark
Re: Layout problem - content not stretching page
Posted: Tue Aug 07, 2007 5:48 pm
by aozuas
I think you need the property 'overflow' in your CSS:
Overflow determines the display of child elements that do not fit within the content area of the element.
Value: visible | hidden | scroll | auto
Initial value: visible
Inherited: No
Applies to: Block-level and replaced elements
Supported by: Firefox, Safari, Opera, Internet Explorer
Try overflow: hidden; on #pagewrapper
Aleph Ozuas
www.dzo.com.br
www.ciberarte.com.br
Re: Layout problem - content not stretching page
Posted: Tue Aug 07, 2007 7:10 pm
by aozuas
Or... you can use the clearfix hack
Include this class in your CSS:
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
And add this in your pagewrapper DIV:
I didnt test, but this is the right way.
Aleph Ozuas
www.dzo.com.br
www.ciberarte.com.br
Re: Layout problem - content not stretching page
Posted: Tue Aug 07, 2007 7:14 pm
by mbaksa
truslack wrote:
Don't think it's that, it doesn't change the layout, but I removed it due to that failing the XHTML validation
It it fails XHTML validation, the cause of this is somewhere else - you've removed an obligatory tag and you shouldn't do that - all tags must be closed.
About your problem... aozuas gave you a couple of possible solutions, another one is this:
try adding
{* End Content *}
Read this also:
http://www.quirksmode.org/css/clearing.html