CSS - Ie 7 Pushes Content To Bottom

Greetings, I have a 3 column layout with a header, nav bar, content space and footer on the center column, making the center column have 4 rows. The content div's height is set to auto and it's overflow to auto so that when the browser is maximized on higher resolutions it will expand and contain the text without a scrollbar. alternatively it will give a scroll bar if the content div is shrunk below 300px. however the auto height on the content div is causing it to take up more room than necessary. if the window is shrunken down, the content text will leak out over the footer bar and beyond. Before i post code does anyone have any suggestions on what i should be looking for? If code is wanted lemme know.

Hello,
My first CSS site was going fine; I was learning as I went and drawing from different resources. My code and CSS probably isn't very pretty ( I validated it, I know it needs to be cleaned up) but things were working. Then I went back and made some adjustments concerning the widths of my column divs. Now I find that Firefox is respecting the rightcolumn div (specifically: <div id="contentright">)but IE keeps kicking it to the bottom left. I've tried messing with the column lengths so everything fits accordingly as specified in the frame div width. Can anyone please take a look and offer a suggestion? thanks.
http://www.brinjac.com/test/binnspark.html

Hello - I'm having trouble with the layout of a site I'm working on. Here's the site in question:

http://www.americanidiotsband.com/

If you look at it in anything up to 1024x768, it's fine. But if you go higher than that (say, 1280x1024 resolution), then the main (black) part of the page goes only as far down as the content that is filling it. What SHOULD happen is that the black background should span all the way to the bottom, no matter how much content is inside it...

Here is a link to the stylesheet that I made up:

http://www.americanidiotsband.com/styles.css

I'm sure I'm doing something wrong, and I'm hoping that someone could help me correct this. Thanks in advance for any help that can be offered!...

Hi all,
this is my first post and hope I get help in a hear-tearing problem that I face at this link: (URL address blocked : See forum rules)

ie show the complete page fine but firefox obscure the bottom content, no need for more explanation since it is obvious from looking at the page, I have the same problem when page content get much long as in the above link.
any help would be greatly appreciated.
sorry for my bad english

hi,

I am fairly new to css and working on a website with a complete css layout for the first time, one I got from dreamweaver. I thought things were going great because I did all my testing in Firefox (like a good boy) but then I tried to test it in Internet Explorer 6 and alot if not all of my webpages have the text positioned at the bottom instead of the top of a page.

Here is a link:
http://www.jcstrategies.com/jeff/featured_listings.php


CSS CODE
-----------------------------------------------------------
/***********************************************/
/* emx_nav_left.css */
/* Use with template Halo_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #cccccc url(./images/bg_grad.jpg) fixed;
}

/******* hyperlink and anchor tag styles *******/

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

a:hover{
text-decoration: underline;
}

/************** header tag styles **************/

h1{
font: bold 120% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font: bold 114% Arial,sans-serif;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font: bold 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h4{
font: 100% Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font: 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}


/*************** list tag styles ***************/

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

/********* form and related tag styles *********/

form {
margin: 0;
padding: 0;
}

label{
font: bold 1em Arial,sans-serif;
color: #334d55;
}

input{
font-family: Arial,sans-serif;
}

/***********************************************/
/* Layout Divs */
/***********************************************/
#pagecell1{
position:absolute;
top: 112px;
left: 2%;
right: 2%;
width:95.6%;
background-color: #ffffff;
}

#tl {
position:absolute;
top: -1px;
left: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#tr {
position:absolute;
top: -1px;
right: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#masthead{
position: absolute;
top: 0px;
left: 2%;
right: 2%;
width:95.6%;

}

#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
}

#content{
padding: 5px 10px 5px 5px;
margin:0px 0px 0px 179px;
border-left: 1px solid #ccd2d2;
}

/***********************************************/
/* Component Divs */
/***********************************************/
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #ffffff;
font-weight: normal;
}

/************** utility styles *****************/

#utility{
font: 75% Verdana,sans-serif;
position: absolute;
top: 16px;
right: 0px;
color: #919999;
}

#utility a{
color: #ffffff;
}

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

/************** pageName styles ****************/

#pageName{
padding: 0px 0px 14px 10px;
margin: 0px;
border-bottom:1px solid #ccd2d2;
}

#pageName h2{
font: bold 175% Arial,sans-serif;
color: #000000;
margin:0px;
padding: 0px;
}

#pageName img{
position: absolute;
top: 0px;
right: 6px;
padding: 0px;
margin: 0px;
}

/************* globalNav styles ****************/

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url(./images/glbnav_background.gif);
}

#globalNav img{
margin-bottom: -4px;

}

#gnl {
position: absolute;
top: 0px;
left:0px;
}

#gnr {
position: absolute;
top: 0px;
right:0px;
}

#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 10px;
z-index: 100;
}


a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}

a.glink:hover{
background-image: url(./images/glblnav_selected.gif);
text-decoration: none;
}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #ffffff;
}

.subglobalNav a:hover{
color: #cccccc;
}

/*************** search styles *****************/

#search{
position: absolute;
top: 5px;
right: 10px;
z-index: 101;
}

#search input{
font-size: 70%;
margin: 0px 0px 0px 10px;
}

#search a:link, #search a:visited {
font-size: 80%;
font-weight: bold;

}

#search a:hover{
margin: 0px;
}


/************* breadCrumb styles ***************/

#breadCrumb{
padding: 5px 0px 5px 10px;
font: small Verdana,sans-serif;
color: #AAAAAA;
}

#breadCrumb a{
color: #AAAAAA;
}

#breadCrumb a:hover{
color: #005FA9;
text-decoration: underline;
}


/************** feature styles *****************/

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
min-height: 200px;
height: 200px;
}
html>body .feature {height: auto;}

.feature h3{
font: bold 175% Arial,sans-serif;
color: #000000;
padding: 30px 0px 5px 0px;
}

.feature img{
float: left;
padding: 0px 10px 0px 0px;
}


/*************** story styles ******************/

.story {
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story h3{
font: bold 125% Arial,sans-serif;
color: #000000;
}

.story p {
padding: 0px 0px 10px 0px;
}

.story a.capsule{
font: bold 1em Arial,sans-serif;
color: #005FA9;
display:block;
padding-bottom: 5px;
}

.story a.capsule:hover{
text-decoration: underline;
}

td.storyLeft{
padding-right: 12px;
}


/************** siteInfo styles ****************/

#siteInfo{
clear: both;
border-top: 1px solid #cccccc;
font-size: small;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: 0px;
}

#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}


/************ sectionLinks styles **************/

#sectionLinks{
margin: 0px;
padding: 0px;

}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url(./images/bg_nav.jpg);
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #21536A;
}

#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #DDEEFF;
background-image: none;
font-weight: bold;
text-decoration: none;
}


/************* relatedLinks styles **************/

.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a{
display: block;
}


/************* relatedLinks2 styles **************/

.relatedLinks2{
margin: 0px;
padding: 10px 0px 10px 1px;
border-bottom: 1px solid #cccccc;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a{
display: block;
}


/**************** advert styles *****************/

#advert{
padding: 10px;
}

#advert img{
display: block;
}

/********************* end **********************/




ANY IDEAS????

Please take a look at this mumbo jumbo example:
Testing page

The objective is to adjust the images of the four round corners of a content rectangle. Now the problem is that the two bottom round corners are not showing properly in Firefox 1.0. They bleed outside the rectangle towards the bottom, with a few pixels. And no matter what I change or try, it won't work.

Second, the corners don't look even close to right in Internet Explorer 6.0.

Do you have any idea how to correct this thing?

Thanks a lot for anyone taking the time to help and give tips.

Hi, I'm working on a website for a church and we're near completion, but I'm having trouble getting the site to display properly in IE7 on Windows XP and a few other browsers according to browsershots.org. CSS and XHTML both validate at w3c.org. I've ripped this thing apart and put it back together with no luck. The really weird thing is the Home page looks fine, but in the rest of the pages the body content gets pushed below the left and right navigation bars. Is it a CSS float problem? Margins or paddings???

Home page: Looks OK in IE7, at least on my machine - http://www.stlukeslutheran.com/index_temp.php
Ministry page: Content is pushed to bottom of page - http://www.stlukeslutheran.com/mini...ns_ministry.php

The CSS files are at http://www.stlukeslutheran.com/css/main.css and http://www.stlukeslutheran.com/css/common.css.

Would anyone be willing to take a look? Thanks in advance.

See the image at http://i187.photobucket.com/albums/x205/vitainf/IEhelp.png
- having trouble to get it showing the image with the bbcodes :S

As you can see the menu to the right, which is known as '.sidebar' in the css followed below, is sort of pushing the main content, which is known as .content in the css below, down.

Anyone has any idea how to fix this?

Style Sheets
Code:

body
{
text-align: center;
  background: #800000;
  color: #fff;
}
* {
  padding: 0;
  margin: 0;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: 700px;
text-align: left;
}

#spacer {
  height: 50px;
}

#header {
  height: 100px;
  width: 100%;
  background: url(ctfiles/logo.png) no-repeat top center #000;
}

#container {
  background: #fff;
  padding: 10px;
}

#main {
  background: #000;
  color: #fff;
  width: 700px;
}

.sidebar {
  float: right;
  text-align: right;
  background: #000;
  color: #fff;
  width: 30%;
  padding-left: 8px
  padding-right: 12px
}

.content { 
  color: #fff;
  background: #000;
  width: 70%;
  margin-left: 2px;
  margin-right: 2px
}

HTML/Template/PHP w/e
Note: It's a template for the MODx CMS, which explains some of the calls like [(site_name)]. The lorum ipsum is in the [*content*] call, the menu in the [[wayfinder...]] one.
PHP Code:
<!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>
    <title>[(site_name)] | [*pagetitle*]</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <link rel="stylesheet" href="[(base_url)]chinatown.css" type="text/css" media="screen" />
        <base href="[(site_url)]" />

<!--[if lte IE 6]>

  <style type="text/css" media="screen, tv, projection">
        body { behavior: url(assets/js/csshover.htc); } /* hover:anything support */
        #content { margin-left: 22px; } /* to avoid the BMH */
        a,  a:link { border-bottom-style: solid } /* becuase IE just doesn't dot */
  </style>

  <script type="text/javascript" src="assets/js/sleight.js"></script>

<![endif]-->

        </head>
<body>

<div id="page">

<div id="spacer">
</div>

<div id="container">

<div id="header">
</div>

<div id="main">
<div class="sidebar">
 [[Wayfinder? &startId=`0`]]
</div>
<div class="content">
            <h4>[*longtitle*]</h4>
                [*#content*]
</div>
</div>

<div id="footer">
        [(site_name)] is powered by
        <a href="http://modxcms.com/" title="Powered by MODx"><strong>MOD</strong>x Content Management System</a>
        <br /><a href="[~11~]" title="Link to our Blog RSS Feeds">Blog Entries (RSS)</a><br />
MySQL: [^qt^], [^q^] request(s), PHP: [^p^], total: [^t^], document retrieved from [^s^].
</div>

</div>
</div>

</body>
</html> 

I am having problems with my xhtml (css here). As you can see, the frog is pushing the menu (vert1 in the css) down. I am also told that the news (vert2) is being pushed down in IE6...can anyone help?

Hello,

I have a table with two columns and I want it a certain distance from the left side and right side. The distance on the left is a lot more than the right. I added a margin to it and it pushed it off the screen to cause a horizontal scroll.

I tried putting a width on the table, but it wouldn't work for some reason and then tried a negative and positive margin on the right side with no avail.

I am stuck. Any ideas on how to negate the pussing of a margin?

this is bugging the hell out of me, cant find a working answer anywhere (i've tried a bunch of things)

So I have 3 images for the top of my page and 3 images for the bottom.

The page is enclosed in a div frame titled "frame"

each of the 3 columns is enclosed in a frame "leftframe" "centerframe" and "rightframe"

Each of the 3 columns has a top which is a fixed size image at the top, a middle which is just empty space for content to go, and a bottom which is a fixed size image at the bottom.

Problem: I can't get any of the 3 column's bottoms to stick to the bottom of "frame"

I've tried some code in here to do it and it doesn't work..


any help here?

thanks!

Code:

<style type="text/css">
	
	body {
		text-align:center;
		height:100%;
		min-height:100%;
		padding:0px;
		}
	
	#frame {
		width:800px;
		height:100%;
		min-height:100%;
		margin-right:auto;
		margin-left:auto;
		margin-top:0px;
		padding:0px;
		text-align:left;
		position:relative;
		}
		
	#contentlefttop {
		width:155px;
		height:282px;
		padding:0px;
		float:left;
		background-image: url(images/layout_01.gif);
		background-repeat:no-repeat;
		}
	
	#leftframe {
	float:left;
	width:155px;
	position:relative;
	height:100%;
	min-height:100%;
	}
	
	#contentleft {
	clear:left;
	float:left;
	padding:0px;
	width:155px;
	padding-bottom:270px;
	}
	
	#contentleftbottom{
	width:155px;
	height:270px;
	/*clear:left;
	float:left;*/
	padding:0px;
	position:absolute;
	bottom:0;
	background-image: url(images/layout_07.gif);
	background-repeat:no-repeat;
	}
	
	#contentcenter {
		width:486px;
		padding:0px;
		clear:left;
		float:left;
		text-align:center;
		min-height:100%;
		height:100%;
		padding-bottom:53px;
		}
		
	#rightframe {
	float:left;
	position:relative;
	height:100%;
	min-height:100%;
	width:159px;
	}
	
	#centerframe {
	float:left;
	position:relative;
	height:100%;
	width:486px;
	}
	
	#contentrighttop {
		width:159px;
		height:282px;
		padding:0px;
		clear:left;
		float:left;
		background-image:url(images/layout_03.gif);
		background-repeat:no-repeat;
		background-position:top;
		}
		
	#contentright {
	clear:left;
	float:left;
	width:159px;
	padding:0px;
	height:100%;
	padding-bottom:270px;
	}
	
	#contentrightbottom{
	width:159px;
	height:270px;
	/*clear:left;
	float:left;*/
	position:absolute;
	bottom:0;
	padding:0px;
	background-image: url(images/layout_08.gif);
	background-repeat:no-repeat;
	background-position:bottom;
	}
	
	#contentheader {
	width:486px;
	height:135px;
	float:left;
	background-image: url(images/layout_02.gif);
	background-repeat:no-repeat;
		}
		
	#contentfooter {
	/*clear:left;
	float:left;*/
	width:486px;
	height:53px;
	background-image: url(images/layout_09.gif);
	background-repeat:no-repeat;
	position:absolute;
	bottom:0;
	}
	
	#sitemessage {
	margin-left:17px;
	margin-right:31px;
	height:90px;
	text-align:center;
	font-size:12px;
	}
	
	#wisemanquote {
	margin-left:22px;
	margin-right:24px;
	height:85px;
	text-align:center;
	font-size:12px;
	}
		
	p,h1,pre {
		margin:0px 10px 10px 10px;
		}
		
	h1 {
		font-size:14px;
		padding-top:10px;
		}
		
	#contentheader h1 {
		font-size:14px;
		padding:10px;
		margin:0px;
		}
	
	#contentright p { font-size:10px}
	
</style>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">

<div id="frame">
  	<div id="leftframe">
        <div id="contentlefttop">
        	<div id="sitemessage"></div>
        </div>
        <div id="contentleft">Left</div>
        <div id="contentleftbottom"></div>
    </div>
    <div id="centerframe">
    	<div id="contentheader"></div>
        <div id="contentcenter">
          <p>Center</p>
        </div>
        <div id="contentfooter"></div>
    </div>
    <div id="rightframe">
        <div id="contentrighttop">
        	<div id="wisemanquote"></div>
        </div>
        <div id="contentright">Right</div>
        <div id="contentrightbottom"></div>
    </div>
</div>

Hi there,

I have a content glider script, but I have added it to a wrapper with a background image.

The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath....

If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read.

Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide?

This is my CSS:

PHP Code:
.glidecontentwrapper{
position: relative; /* Do not change this value */

height: 230px; /* Set height to be able to contain height of largest content shown*/

overflow: hidden;
}
/*
    Total wrapper width: 350px+5px+5px=360px
    Or width of wrapper div itself plus any left and right CSS border and padding
    Adjust related containers below according to comments
*/


.glidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
background: white;
visibility: hidden;
width: 330px;
}
/*
 Total glidecontent width: 330px+10px+10px=350px
    Or width of wrapper div itself (not counting wrapper border/padding)
*/

.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
width: 360px;
margin-top: 6px;
text-align: center; /*How to align pagination links: "left", "center", or "right"
background: white; /*always declare an explicit background color for fade effect to properly render in IE*/
} 





Any help would be great!
Thanks.