Web Design Forums

thintin · 10-07-2008, 10:14

Hi.

I've been developing my site for a few months and its getting pretty near where I want it to be.

I'm currently converting pages from my old design to a new one, including a new external CSS.

One page, which is heavy with javascript, is giving me problems because it won't display as it should when viewed in Firefox. IE works out the corrrect layout but I am aware that IE is good at overlooking bad coding an delivering what it thinks the coder intended; whereas firefox is a bit more strict with its compliance.

The page in the 'about' one of my website philtinsley(dot)com

If you view in IE you'll see that the recent blog entries div (div id=blog) should be below the expanding div (div id=below_thisText2), but in firefox it gets shoved to the top of the right-floated container that holds the navigation, promo and links.

can anyone tell me why please?

Here is the external style sheet:

Code:

.style1 {
	font-size: small;
}
.style5 {font-size: 10px}
.style6 {
	color: #C49248
}
body {
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
	background-color: #000000;
	color: #CAAB4E;
	text-decoration: none;
}
a:link {
	color: #C49248;
	text-decoration: none;
}
a:visited {
	color: #896D2A;
	text-decoration: none;
}
a:hover {
	color: #FAF4E9;
	text-decoration: none;
}
a:active {
	color: #C49248;
	text-decoration: none;
}
#main_container {
	width: 820px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(portal/assets/images/container_background_800_wide.gif);
	background-repeat: no-repeat;
	margin-top: 20px;
}
#main_container_home {
	width: 820px;
	margin-right: auto;
	margin-left: auto;
	height: 950px;
}

#main_container_links {
	height: 950px;
	width: 820px;
	margin-right: auto;
	margin-left: auto;
}
#main_container #right_container {
	height: auto;
	width: 200px;
	float: right;
}

#main_container #right_container #nav {
	height: 220px;
	width: 140px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: large;
	background-image: url(portal/assets/images/nav_background/nav_background.png);
	background-repeat: no-repeat;
	padding-top: 40px;
	padding-right: 30px;
	padding-bottom: 40px;
	padding-left: 30px;
	text-decoration: none;
	color:  #FFFFCC;
}
#main_container  #right_container  #nav a:link  {
	color: #FFFFCC;
}
#main_container #right_container #nav a:hover {
	color: #C49248;
}
#main_container #right_container #nav a:visited {
	color: #FFFFCC;
}

#main_container #right_container #promo {
	height: 270px;
	width: 180px;
	padding: 10px;
}
#main_container #right_container #links {
	height: 350px;
	width: 100%;
	font-size: small;
	text-align: center;
}


#main_container #left_container {
	width: 590px;
	float: left;
	padding: 5px;
}
#main_container  #left_container  #content_home  {
	height: 740px;
	width: 590px;
	background-image: url(portal/assets/images/content_backgrounds/content_home_home%20copy.png);
	background-repeat: no-repeat;
}
#main_container #left_container #content_links {
	height: 740px;
	width: 590px;
	background-image: url(portal/assets/images/content_backgrounds/content_links_links%20copy.png);
	background-repeat: no-repeat;
	color: #000000;
	font-family: "Courier New", Courier, monospace;
}
#main_container #left_container #content_about {

	height: auto;
	width: 590px;
	background-image: url(portal/assets/images/content_backgrounds/content_about_aboutme%20copy.png);
	background-repeat: no-repeat;
	color: #000000;
	font-family: "Courier New", Courier, monospace;
}
#main_container #left_container #content_links #upper_links #links_research {
	float: left;
	width: 250px;
	padding-left: 30px;
	padding-top: 30px;
	padding-right: 15px;
	padding-bottom: 15px;
	color: #000000;
}
#left_container a:link {
	font-size: small;
	color: #000000;
	text-decoration: none;
}
#left_container a:active {
	font-size: small;
	color: #333333;
	text-decoration: none;
}
#left_container a:visited {
	font-size: small;
	color: #333333;
	text-decoration: none;
}
#left_container a:hover {
	font-size: small;
	color: #CC9933;
	text-decoration: none;
}
#main_container #left_container #content_links #upper_links #links_Recommendations {
	float: right;
	width: 250px;
	padding-top: 30px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 30px;
	color: #000000;
}

#main_container #left_container #main_site_title {
	background-image: url(portal/assets/images/main_title.gif);
	background-repeat: no-repeat;
	height: 200px;
	width: 100%;
}
#main_container #left_container #page_title {
	height: 100px;
	width: 100%;
	text-align: center;
	vertical-align: middle;
}
#main_container #left_container #upper_home {
	height: 200px;
	width: 90%;
	font-size: medium;
	background-repeat: no-repeat;
	background-position: right bottom;
	padding: 15px;
	color: #000000;
	margin-top: 0px;
	margin-right: 15px;
	margin-bottom: 0px;
	margin-left: 15px;
	text-align: center;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-decoration: none;
}
#main_container #left_container #upper_links {
	height: 550px;
}
#main_container #left_container #content_about #about_top_text {
	font-size: small;
	width: 92%;
	padding-top: 1%;
	padding-right: 4%;
	padding-bottom: 1%;
	padding-left: 4%;
	height: 230px;
}

#main_container #left_container #upper_about {

	height: 180px;
}
#main_container #left_container #upper_about_left {
	float: left;
	width: 46%;
	padding-top: 1%;
	padding-right: 3%;
	padding-bottom: 3%;
	padding-left: 0%;
	height: auto;
}
#main_container #left_container #upper_about_right {
	float: right;
	width: 46%;
	padding-top: 1%;
	padding-right: 3%;
	padding-bottom: 3%;
	padding-left: 0%;
	height: auto;
}
#main_container #left_container #lower_home {
	height: 200px;
	width: 510px;
	background-image: url(portal/assets/images/promo/free_sample_promo%20copy.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 200px;
	padding-right: 40px;
	padding-left: 40px;
	text-align: center;
	color: #000000;
	padding-bottom: 0px;
}
#main_container #left_container #lower_links {
	height: auto;
	padding-top: 0px;
	padding-right: 30px;
	padding-bottom: 15px;
	padding-left: 30px;
}
#main_container #left_container #lower_about {
	height: auto;
	width: 92%;
	text-align: center;
	padding: 4%;
	font-size: small;
}
#main_container #main_container_about #left_container #content_about #above_thisText2 {
	background-image: url(portal/assets/images/content_backgrounds/scroll_repeat/scroll_top_long.png);
	height: 47px;
	width: 600px;
	margin-top: 20px;
}
#main_container #main_container_about #left_container #content_about #below_thisText2 {
	background-image: url(portal/assets/images/content_backgrounds/scroll_repeat/scroll_bottom_long.png);
	height: 33px;
	width: 600px;
	margin-bottom: 20px;
}

#main_container #main_container_about #left_container #content_about #thisText2_container {
	color: #000000;
	font-size: small;
	background-image: url(portal/assets/images/content_backgrounds/scroll_repeat/scroll_middle_long.png);
	background-repeat: repeat;
	height: auto;
	width: 530px;
	padding-right: 35px;
	padding-left: 35px;
	padding-bottom: 15px;
}


#main_container #left_container #shouts_container {
	height: 47px;
	width: 600px;
	background-image: url(portal/assets/images/content_backgrounds/scroll_repeat/scroll_top_long.png);
	background-repeat: no-repeat;
}

#shouts_left    {
	height: 33px;
	width: 600px;
	background-image: url(portal/assets/images/content_backgrounds/scroll_repeat/scroll_bottom_long.png);
}
#shouts_centre    {
	padding: 5px;
	height: auto;
	width: 190px;
	float: left;
}
#shouts_right    {
	padding: 5px;
	height: auto;
	width: 190px;
	float: left;
}

#footer_container {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
}
#footer {
	height: 180px;
	width: 100%;
	background-image: url(portal/assets/images/new_footer_800_wide.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
	padding-bottom: 20px;
}
#footer  #blog  {
	height: 100%;
	width: 70%;
	font-size: small;
	overflow: hidden;
}

#textnav {
	height: 100px;
	width: 100%;
	text-align: center;
}

Thanks for any help ;-)

Phil.

p.s. I've also attached the CSS seperately.

karmedic · 10-07-2008, 11:38

I took a quick look. I think what may be happening is that because your main content is floated your footer is snapping up to the top of the page. Try setting position: relative; on your main container and then clear: both; on footer_container ... that should push the footer down to the bottom (works for me through firebug).

thintin · 11-07-2008, 09:29

Cheers. I did something similar that worked. I extended the main_container to include the footer and floated it auto left and right to centre it. Then I added float left to the footer_container and it works now.

Thanks for the help :-)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

10-07-2008, 11:38	#2 (permalink)
karmedic id Join Date: May 2008 Location: Ottawa Posts: 212	I took a quick look. I think what may be happening is that because your main content is floated your footer is snapping up to the top of the page. Try setting position: relative; on your main container and then clear: both; on footer_container ... that should push the footer down to the bottom (works for me through firebug).

11-07-2008, 09:29	#3 (permalink)
thintin Registered User Join Date: Apr 2008 Posts: 6	Cheers. I did something similar that worked. I extended the main_container to include the footer and floated it auto left and right to centre it. Then I added float left to the footer_container and it works now. Thanks for the help :-)

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)