too much whitespace over content

lleighh · Post by **lleighh** » Mon Jul 31, 2006 2:52 pm

The other day my client comes back and says to me, 'I broke a page.' I'm thinking no biggie, I can fix it. But now that I look at it, I can't fix it (and can't seem to find a fix on the board). Hope this is quickly fixable. See the code and image below.

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">
<head>

<!-- Type the title of your site here -->
<title>M/WBE Coordinators Network - {title}</title>

{metadata}
{stylesheet}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}

</head>

</__body>

<div id="wrap">

    <!-- start accessibility skip links -->
    <ul class="accessibility">
      <li><a href="#menu_vert" accesskey="s" title="Skip to navigation">Skip to navigation</a></li>
      <li><a href="#main">Skip to content</a></li>
    </ul>
    <!-- end accessibility skip links -->

   <!-- Start Header, with logo image that links to the default start page -->
      <!-- End Header -->

<a href="index.php"><img src="uploads/images/header.jpg" width="765" height="151" alt="Home" /></a>
      <!-- Start Vertical Navigation -->
      <div id="avmenu">{cms_module module='menumanager' template='andreas01 : andreasmenu' collapse='1'}</div>
      <!-- End Vertical Navigation -->

	  
   <!-- Start Breadcrumbs -->
<!--
Breadcrumbs is hidden for now
   <div class="breadcrumbs">
        {breadcrumbs starttext='You are here' root='Home' delimiter='»'}
   </div>
-->
   <!-- End Breadcrumbs -->




<div id="extras">
{global_content name='side'}
<br>
<div class="announce">
{cms_module module="news" number="3"}
</div>
</div>




   <!-- Start Content (Navigation and Content columns) -->
   <div id="content" class="clearfix">

      <!-- Start Content Area -->
      <div id="main">
         <h2>{title}</h2>
         {content} <br />

         <!-- Start relational links -->
<!-- hidden
	 <div class="hr"></div>
	 <div class="right49">
	 	<p><a href="#main">^ Top</a></p>
	 </div>
         <div class="left49">
            <p>{cms_selflink dir="previous"} <br />
            {cms_selflink dir="next"}</p>
         </div>
-->
	 <!-- End relational links -->

 
      </div>
	  <!-- End Content Area -->


   </div>
   <!-- End Content -->


   <!-- Start Footer -->
   <div id="footer" class="clearfix">
Copyright © 2006 | MWBE Coordinators Network | <a href="mailto:contact@mwbecoordinators.org">Contact us</a>
   </div>
   <!-- End Footer -->


</div><!-- end wrap -->


<__body>
</__html>

Code: Select all

/* andreas01 - an open source xhtml/css website layout by Andreas Viklund (http://andreasviklund.com). Made for OSWD.org, free to use as-is for any purpose as long as the proper credits are given for the original design work. For design assistance and support, contact me through my website or through http://oswd.org/email.phtml?user=Andreas

Version: 1.0
(July 25, 2005)

Screen layout: */

/*
This layout depends on modified news summary template

<!-- Start News Display Template -->
{foreach from=$items item=entry}

<h3>
	{$entry->titlelink}
</h3>

<p>

{if $entry->author}
	by {$entry->author}
{/if}

{if $entry->formatpostdate}
<strong>
		{$entry->formatpostdate}
</strong><br />
{/if}


{if $entry->summary}
 {eval var=$entry->summary}
</p>
  <p class="textright">[{$entry->morelink}]</p>

{else if $entry->content}
		{eval var=$entry->content}
</p>
{/if}

{/foreach}
<p> </p>
<p> </p>
<!-- End News Display Template -->

Copy paste this template to your news summary template and delete from here
*/

body {
margin: 0px auto;
padding: 0px auto;
font: 70% Verdana,Tahoma,Arial,sans-serif;
background: #f4f4f4 url(uploads/andreas01/bg.gif) top center repeat-y;
width: 770px;
}

#wrapper {
background: #ffffff;
color: #303030;
margin: 0px 0px 0px 0px;
width: 770px;
}

#wrap {
background: #ffffff;
color: #303030;
margin: 0px 0px 0px 0px;
width: 770px;
}


#header {
clear: both;
margin: 0px 0 0 0;
padding: 0;
height: 45px;
}

#header h1 {
width: 250px;
margin: 0 0 10px 0;
float: center;
}

#header p {
width: 500px;
float: right;
text-align: center;
color: #a0a0a0;
margin: 0 0 10px 0;
font-size: 0.8em;
line-height: 1.2em;
}

#frontphoto {
margin: 0 0 10px 0;
border: 0;
}

#avmenu {
clear: left;
float: left;
width: 148px;
margin: 0px 0px 0px 0px;
padding: 0;
font-size: 0.9em;
}

#avmenu ul {	
list-style: none;
width: 148px;
margin: 0 0 0 0;
padding: 0;
font-size: 1.1em;
}	

#avmenu li {
margin-bottom: 0px;
margin-top: 0px;
}


/* first level */
#avmenu li a {
font-weight: bold;
height: 20px;
display: block;
text-decoration: none;
color: #FFFFFF;
padding: 6px 1px 1px 10px;
background: #8B86A3;
border-left: 4px solid #cccccc;
}	
	
#avmenu li a:hover {
background: #eaeaea;
color: #180D27;
border-left: 4px solid #286ea0;
}

#avmenu li a.menuactive {
background: #524A75;
color: #FFFFFF;
border-left: 4px solid #333333;
}


/* second level */
#avmenu li li a {
font-weight: normal;
height: 20px;
font-size: 0.9em;
text-decoration: none;
color: #000066;
display: block;
padding: 6px 0 0 24px;
background: #C5C2D1;
border:0;
border-left: 4px solid #FFFFFF;
}	

#avmenu li li a:hover {
background: #eaeaea;
color: #286ea0;
border:0;
border-left: 4px solid #FFFFFF;
}

#avmenu li li a.menuactive {
background: #eaeaea;
color: #286ea0;
border:0;
border-left: 4px solid #FFFFFF;
}

/* third level */
#avmenu li li li a {
font-weight: normal;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 0 34px;
background: #f4f4f4;
border:0;
}	

#avmenu li li li a:hover {
background: #eaeaea;
color: #286ea0;
border:0;
}

#avmenu li li li a.menuactive {
background: #eaeaea;
color: #286ea0;
border:0;
}

.announce {
margin: 0px auto;
padding: 3px -10px 0px 20px;
width: 120px;
color: #505050;
background-color: #ffffff;
line-height: 1.3em;
}

#extras {
float: right;
width: 100px;
margin: 0px auto;
padding: 0px 20px 0px 20px;
font-size: 0.9em;
line-height: 1.5em;
}

#extras p {
margin: 0 0 1.5em 0;
}


#content {
margin: 0 160px 20px 150px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
padding: 0px auto;  
text-align: left;
}



/*CALENDAR STYLES */
    /* make all links red */
    .calendar tr td a
    {
    color: red;
    }

    /* highlight "today" for the small calendar */
    .calendar-today
    {
    font-weight: bold;
    }

    /* display the "upcominglist" as one line per entry (assuming table_id='cal-upcominglist') */
    #cal-upcominglist .calendar-date-title
    ,#cal-upcominglist .calendar-summary-title
    {
    display: none;
    }

    #cal-upcominglist h2
    ,#cal-upcominglist .calendar-date
    ,#cal-upcominglist .calendar-summary
    {
    display: inline;
    margin-right: 5px;
    }

    /* tidy up text sizes for lists */
    #cal-list h1, #cal-upcominglist h1
    {
    color: red;
    font-size: 120%;
    }
    #cal-list h2, cal-upcominglist h2
    {
    font-size: 110%;
    }

    /** large calendar rules (assuming table_id='big') **/
    /* border on for #big */
    #big{
    margin: 5px;
    border-collapse:    collapse;
    border: 0px solid black;
    }

    /* nice squares for the #big table */
    #big th
    {
    border: 1px solid black;
    padding: 3px;
    width: 75px;
    }

    #big td {
    border: 1px solid #180d47;
    vertical-align: top;
    padding: 3px;
    height: 75px;
    width: 75px;
    }

    /* format summaries nicely in #big */
    #big ul
    {
    margin: 0px;
    padding: 0px;
    padding-left: 5px;
    }

    #big li
    {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    }

    /* background colours for #big */
    #big td
    {
    background-color: #ffffff;
    }

    #big .calendar-day
    {
    background-color: #80ff80;
    }

    #big .calendar-today
    {
    font-weight: normal;
    background-color: #8080ff;
    }

    .calendar-event .calendar-date-title,
    .calendar-event .calendar-summary-title,
    .calendar-event .calendar-details-title
    {
    display: none;
    }

/* END CALENDAR STYLES*/


/* OLD CONTENT CSS
#content {
margin: 0 160px 20px 148px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
padding: 0px 20px 0px 20px;
text-align: left;
}  */

#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
color: #999933;
}

#content img {
padding: 1px;
display:inline;
background: #cccccc;
border: 4px solid #f0f0f0;
}

h3 {
font-size: 1.3em;
margin: 0 0 10px 0;
}

a {
text-decoration: none;
color: #286ea0;
}

a:hover {
text-decoration: underline;
color: #286ea0;
}

a img {
border: 0;
}

#footer {
clear: both;
margin: 0 0 0 0;
padding: 10px 0 20px 0;
border-top: 4px solid #f0f0f0;
width: 760px;
text-align: center;
color: #808080;
font-size: 0.9em;
}

#footer a {
color: #808080;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

.left {
margin: 10px 10px 5px 0;
float: left;
}

.right {
margin: 10px 0 5px 10px;
float: right;
}

.textright {
text-align: right;
}

.center {
text-align: center;
}

.small {
font-size: 0.8em;
}

.bold {
font-weight: bold;
}

.hide {
display: none;
}

[attachment deleted by admin]

Dr.CSS · Post by **Dr.CSS** » Mon Jul 31, 2006 4:38 pm

I think it's an IE problem only, they didn't break it IE is broke

it comes from the content CSS

#content {
margin: 0 160px 20px 150px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
padding: 0px auto;
text-align: left;
}

* html body #content {
margin: 0 10px 10px 10px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
padding: 0px auto;
text-align: left;
}

The margins: this may help, you may have to make some adjustments but IE sees the divs diff. than others, if you take them out all together and start adding small increments till you get what you need may be best.

Also you may find you have to move the content div in your template up in between the menu and news, some times IE puts them on the page in the order they are in the template.

CMS Made Simple Forums

too much whitespace over content

too much whitespace over content

Re: too much whitespace over content