CSS problem

KevinCB

KevinCB

KevinCB

Associate
Joined
20 Jan 2005
Posts
386
Location
Crewe, Cheshire
Hi folks,

Can someone help me sort out the CSS for this page, I'm not that brilliant when it comes to CSS and this is a template from our intranet site. As you can see in the images below the header and boxes on the left side don't seem to expand out with the rest of the page.

page displayed correctly

header and boxes overlap

This is the CSS I am using:

Code: 
/*****layout Divs*****/
/*this container centers the content in the browser and fixes the overall width*/
#wrapper {
	width: 100%;
	margin: 0 auto;
	text-align: left;
	border: 1px solid #4b4b33;/*themecolour1$ -21%,-68.6%;*/
	background-color: #ffffec;/*themecolour1$ 46.7%,100%;*/
	font-size: 80%;
	color: #4b4b33;/*themecolour1$ -21%,-68.6%;*/
	line-height: 1.5em;
}

#headertable {
	background-color: #E2E3A9;
	border-bottom: 1px solid #55551F;
}
.centretable {
	margin-right: 10px;
	margin-left: 10px;
}




#holderdiv {
	width: 180px;
	padding-right: 10px;
	padding-left: 10px;
}
.leftcoldiv {
	background-color: #eeeecc;
	border: 1px solid #4b4b33;
	width: 180px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}
#wrapper #holderdiv .rightcoldiv .style1 {
	color: #FFFFFF;
}


.rightcoldiv {
	margin-top: 10px;
	background-color: #eeeecc;
	border: 1px solid #4b4b33;
	margin-bottom: 10px;
}
#rightholderdiv {
	width: auto;
	padding-right: 10px;
	padding-left: 10px;
}



/**Redefined html tags**/

/*defines the pagetitle bar*/
#pagetitle {
	margin: 0;
	background-color: #a7a786;
	color: #ffffec;
	font-size: 110%;
	padding: 1px 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #4b4b33;
	text-align: center;
}

/*defines the font and page background image */
 body {
	font-family: "Trebuchet MS", Arial;
	text-align: center;
	font-size: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
	}
	
.right {
	float: right;
}
.leftcoldiv p {
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	padding: 5px;
	color: #333333;
	font-size: 90%;
	line-height: 1.3em;
}


.left {
	float: left;
}

/*sets margins to 0 */	
p {
	margin-top: 0px;
	margin-bottom: 0px;
}

.leftcoldiv h2 {
	font-size: 110%;
	margin: 0px;
	color: #000000;
	background-color: #a7a786;
	padding-top: 1px;
	padding-right: 5px;
	padding-bottom: 1px;
	padding-left: 5px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #a7a783;
	border-bottom-color: #4b4b33;
}

.leftcoldiv h3 {
	margin: 0;
	background-color: #a7a786;/*themecolour1$ -8.3%,-29.7%;*/
	color: #000000;/*themecolour1%0;*/
	font-size: 110%;
	padding: 1px 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #4b4b33;/*themecolour1$ -21%,-68.6%;*/
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #a7a783;/*themecolour1$ -8.3%,-29.7%;*/
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #a7a783;/*themecolour1$ -8.3%,-29.7%;*/
}
.rightcoldiv p {
	font-size: 90%;
	line-height: 1.3em;
	color: #333333;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	padding: 5px;
}


.leftcoldiv h4 {
	margin: 0;
	background-color: #a7a786;/*themecolour1$ -8.3%,-29.7%;*/
	color: #ffffec;/*themecolour1$ 46.7%,100%;*/
	font-size: 110%;
	padding: 1px 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #4b4b33;/*themecolour1$ -21%,-68.6%;*/
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #eeeecc;/*themecolour1;*/
	
}
.picturelink {
	text-decoration: none;
}

#wrapper p {
	margin-top: 0px;
	margin-bottom: 0px;
	padding-right: 8px;
	padding-left: 8px;
}

.rightcoldiv h2 {

	font-size: 110%;
	margin: 0px;
	color: #000000;
	background-color: #a7a786;
	padding-top: 1px;
	padding-right: 5px;
	padding-bottom: 1px;
	padding-left: 5px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #a7a783;
	border-bottom-color: #4b4b33;
}
ol {
	color: #4b4b33;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}


/*link styles*/
 a:link {
	color: #FF6633;/*themecolour1$ -8.3%,-29.7%;*/
	text-decoration: none;
}
 a:visited {
	color: #FF6633;/*themecolour1$ -21%,-68.6%;*/
	text-decoration: none;
}
ul {
	font-weight: normal;
	color: #4b4b33;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 20px;
}
.footer {
	font-size: 90%;
	margin-left: 10px;
	color: #848466;/*themecolour1$ -10%,-44.5%;*/
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #848466;/*themecolour1$ -10%,-44.5%;*/
	padding-bottom: 10px;
	margin-right: 10px;
	text-align: center;
}

h1 {
	font-size: 130%;
	margin-top: 0px;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 6px;
	padding-left: 10px;
}
.recordqtytitle {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
	font-style: italic;
	color: #FF0000;
	padding-left: 10px;
}

h2 {
	font-size: 120%;
	color: #000000;
	margin-top: 4px;
	margin-bottom: 2px;
}


 a:link:hover {
	color: #FF3300;/*themecolour1$ -12.5%,-53%;*/
	text-decoration: none;
}
.NewsTitle {
	font-size: 110%;
	font-style: italic;
	color: #949473;
}
.centrecoldiv {
	margin-right: 215px;
	margin-left: 215px;
	border: 1px solid #4b4b33;
	background-color: #EEEECC;
	margin-top: 10px;
	margin-bottom: 10px;
}
.centrecoldiv hr {
	border-top-color: #8F8F6E;
	border-right-color: #8F8F6E;
	border-bottom-color: #8F8F6E;
	border-left-color: #8F8F6E;
	width: 95%;
}



s
.divider {
	border-top-width: 1px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #4b4b33;
}
.centrecoldiv h4 {

	margin: 0;
	background-color: #a7a786;/*themecolour1$ -8.3%,-29.7%;*/
	color: #ffffec;/*themecolour1$ 46.7%,100%;*/
	font-size: 110%;
	padding: 1px 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #4b4b33;/*themecolour1$ -21%,-68.6%;*/
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #eeeecc;/*themecolour1;*/
}
.centredivider {

	font-size: 90%;
	margin-left: 10px;
	color: #848466;/*themecolour1$ -10%,-44.5%;*/
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #848466;/*themecolour1$ -10%,-44.5%;*/
	padding-bottom: 10px;
	margin-right: 10px;
	text-align: center;
}
.resultstext {
	padding-left: 10px;
}
.rightcoldiv h4 {

	margin: 0;
	background-color: #a7a786;/*themecolour1$ -8.3%,-29.7%;*/
	color: #ffffec;/*themecolour1$ 46.7%,100%;*/
	font-size: 110%;
	padding: 1px 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #4b4b33;/*themecolour1$ -21%,-68.6%;*/
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #eeeecc;/*themecolour1;*/
}

Thanks
 
unknowndomain said:
This would be a lot easier if you would post the html up here
Click to expand...

Good point :rolleyes:

Code: 
<%@ Master Language="C#"%>

<!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" >
<head runat="server">
    <title>MIS Services</title>
    <link href="style/mainstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">

<div style="clear:both" />
    
  <!--contains the main header table logo etc-->
  <div id="headertable">
    <table border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
      <tr>
        <td style="width: 312px;">
            <asp:Image ID="Image2" runat="server" ImageUrl="~/images/logo.jpg" />
        </td>
        <td align="right">
            <asp:Image ID="Image1" runat="server" ImageUrl="~/images/MISLogo.png" />
        </td>
      </tr>
    </table>
  </div>
  
  <!-- contains the page title and date bar-->
  <div id="pagetitle"> 
    Reaseheath MIS Services Intranet Homepage
  </div>
  
  <!--the holder div contains all left-hand column content. The style #holderdiv defines the width of left --hand columns to be 180 pixels. class="left" floats the column to the left of the page-->
  <div class="left" id="holderdiv" style="width: 178px">
  
  <!--to here and paste below-->	  
  <div class="leftcoldiv">
      <h4>Main Menu</h4>
        <p><a href="#">MIS Reporting Services</a></p>
        <p><a href="#">Tuition Fees</a></p>
	    <p><a href="#">Early Enrolment Numbers</a></p>
	    <p><a href="#">HOW DO I - Tutorial Demos</a></p>       
    </div>
  </div>
  
  <!--start of right column content. class="right" floats the column to the right of the page-->
  <div class="right" id="rightholderdiv" style="width: 178px">
  
    <!--the idividual 'text boxes' in the righthand column. To add extra boxes copy from here-->
    <div class="rightcoldiv">
        <h4>MIS Links</h4>
        <p><a href="http://www.lsc.gov.uk" target="_blank">Learning and Skills Council</a></p>
    </div>
    <!--to here and paste below-->
	
    <div class="rightcoldiv">
        <h4>New/Updates</h4>
        <p>A list of News/Updates for the current month</p>
    </div>
    <div class="rightcoldiv">
        <h4>Web Searches </h4>
        <p><a href="http:\\www.google.co.uk" target="_top">Google</a></p>
        <p><a href="http:\\www.yahoo.co.uk/preview" target="_top">Yahoo Preview</a></p>
    </div>
  </div>
  
  <!--start of center column content-->
  <div class="centrecoldiv">
	<!--to add a heading within a 'text box' apply the h2 style-->
    <h4>Main Content</h4>
    <form id="form1" runat="server">
      <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
      </asp:ContentPlaceHolder>
    </form>
  </div>
  <!--end of center column content-->
  
  <div style="clear: both" />
  <!-- Begin laying out the footer  -->
  <div class="footer">
    <p>Reaseheath College, Nantwich, Cheshire, CW5 6DF<br />
      Ph. 01270 625131 Fax.01270 625665</p>
    <p>Copyright © 2006 Reaseheath College All Rights Reserved</p>
  </div>

<!--end of wrapper -->
</div>
</body>
</html>
 
No doubt some one else will have an answer but I havent used tables for layout in i dont know how long because of little bugs like this that you get, you obviously have a grasp of how div's and css work so why dont you use them fully instead of a hybrid mix of tables and div css layouts. sorry I cant be of more use
 
The only table I have used is for the header along the top, so that I can have two pictures in-line with each other, else if I took out the table one picture would be underneath the other one.
 
I did look and i cant see the problem but the two image thing can be solved with two divs set to 'position: absoloute;' and locating like this 'left: 0px; top 0px;' and 'right: 0px; top 0px;' however I cant see whats wrong with it.
 
OK, I tried your suggestion but unfortunately it went worse.

I did however ty it in Firefox and it ran perfectly fine, so could this be an IE bug? Also does anyone know of a hack to get round a similar problem?

I very much doubt the IT Manager will want to install Firefox across the network.
 
Right I've found out why it hasn't been working.

It is because on that particular page I have a table listing items from a database, and I changed the size of the label to make sure that it is displayed all on one line.

Problem is if I take out the width attribute it displays some items on more than one line which is harder to read.

So it seems that the main content box is not growing when the size of the label is increased, is there anyway I can make sure that the content box does grow?

Thanks
 
OK, this is a screen shot of what is currently happening.

Boxes overlapping

This is a screenshot when I take out the width attribute in the label tag.

Without width attribute

But as you can see some of the text goes onto the next line, which is not what a really wanted.

It looks as if the header and the boxes on the right don't seem to fit the page correctly, maybe it's something to do with the float: right; in the CSS for the boxes.

Edit: Here is a better demonstration
 
Last edited:
i've just looked at the links on your previous posts and they seem fine - the right only overlaps the left when you shrink it super small, in both IE and Firefox.

the only thing i can think of is that the right column has a width of "auto", (div #rightholderdiv .right) have you tried setting this to fixed width to see if it sorts it out? then you only have 1 fluid column instead of 2.

hope it works for you....

nin9abadga
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom