12 replies to this topic

[iPsyko]

Hey guys, i'm back again.


This time i have a bit of trouble with my content not expanding the full width of the page. here's a link.

http://www.fusionds.net/portfolio/

It doesnt quite make it all the way down the page. but on the home page, it does:

http://www.fusionds.net/index.php

What is wrong with my coding? here is my css document.

body,td,th {
	text-align: center;
	background-color:#25cee7;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
}
body {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-image:url(images/bg.gif);
	background-repeat:repeat;
}
.container {
	width: 718px;
	height: 100%;
	padding:0px;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:0px;
	background-image: url(images/maintd.png);
	background-repeat: repeat-y;
	vertical-align: top;
} 
a:link {
	color: #0099CC;
	font-weight: bold;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #0099CC;
}
a:hover {
	text-decoration: none;
	color: #333333;
}
a:active {
	text-decoration: none;
	color: #0099CC;
}
hr {
	background: #FFFFFF;
	border: 2px dashed #DEF3FF;
	margin: -10px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
/* - Image Viewer - */

.container_viewer {
	width: auto;
	height: 100%;
	margin-top: 25px;
	margin-bottom: 25px;
	margin-left:auto;
	margin-right:auto;
	background-color: #DEF3FF;
	border: solid;
	border-width: 10px;
	border-color: #FFFFFF;
	padding-left:15px;
	padding-right:15px;
	padding-bottom:15px;
	padding-top:15px;
} 

/* - Divs - */

#header {
	height: 100%;
	width: 680px;
}
#header_under {
	background-color: #FFF;
	height: 0px;
	width: 680px;
}

#side {
	height: 100%;
	width: 205px;
	float: left;
}
#Main {
	height: 100%;
	width: 471px;
	float: right;
	margin: 0px auto 0px auto;
}
#content {
	position: relative;
	width: 680px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}
#footer {
	height:50px;
	width:680px;
	margin-top:5px;
}

/* - Styles - */

.footer {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	font-style:bold;
	text-align:center;
	font-weight:bold;
	color:#CFCFCF;
	background-color:#FFF;
	padding:10px 0px 0px 0px;
	height:50%;
}	

.footer2 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	font-style:bold;
	font-weight:bold;
	text-align:center;
	color:#464646;
}	


.leftnav {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.leftbottom {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color:#FEFEFE;
	background-color: #FF7595;
	background-image:url(images/left_bt_x.jpg);
	background-repeat:repeat-x;
	background-position:top;
	float: left;
	height: 100%;
	width: 195px;
	margin-top:4px;
	padding:5px 5px 5px 5px;
	font-weight: bold;
}

.leftbottom2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color:#FEFEFE;
	background-color: #FFBA82;
	background-image:url(images/left_bt2_x.jpg);
	background-repeat:repeat-x;
	background-position:top;
	float: left;
	height: 100%;
	width: 195px;
	margin-top:4px;
	padding:5px 5px 5px 5px;
}

#news {
	float: right;
	height:100%;
	width: 471px;
	margin-top:3px;
}

.main {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #333333;
	background-color:#FFF;
	background-image:url(images/bg_top_x_2.jpg);
	background-position:top;
	background-repeat:repeat-x;
	float: right;
	height: 100%;
	width: 461px;
	margin-top:5px;
	padding:5px 5px 5px 5px;
}

.adsense {
	background-color: #DEF3FF;
	float: right;
	height: 100%;
	width: 471px;
	margin: 0px;
	padding-top:5px;
	padding-bottom:5px;
	text-align:center;
}

Regards.

[coolaid]

what arreeeee you talking bout? show some screenshots cause of right now, it looks the same in FF and in IE it's broken.

[liveman]

on the main table put the height = "100%", it should solve your problem

[iPsyko]

it didn't work.

The portfolio page isn't expanding the total height of the browser.

see on http://www.fusionds.net/portfolio/ ... the main content part isn't going all the way to the bottom.

[coolaid]

it is for me..

[Matthew.]

I am on my laptop so i cant go higher, but coolaid, try a higher resoloution.

Its fine for me on 1024x768.

[iPsyko]

yea, i'm on 1280x1024

[coolaid]

ok, well first off, php includes aren't replacements for iframes look at your end result code.

the fix for this is to get that background image (the main one that holds the content and everything) and have it repeat vertically down the center of the webbrowser.

[iPsyko]

how would i make it do that? what would the code be? it is already the BG for the container.

[coolaid]

body{
background: url("url-to-image.gif") 50% 0 repeat-y;
}

like that

Edited by coolaid, 23 May 2006 - 07:46 PM.

[iPsyko]

that doesn't work, because i have another background image.

[coolaid]

hmmmmm.. that is a tricky situtation.... but its the only 100% working method.


what you could do is create a 3000 px wide background using the main background along with the white content background in the center of the image. then you could use the method i posted, and the filesize shouldn't be too large, maybe like 30kb

[iPsyko]

yea, but i dunno, that is kinda cheap. I guess it's all good, so, dont worry about it guys. Thanks for the help!