Jump to content

two-column layout... trouble with background colors

boo_lolly

By boo_lolly
in CSS Help

 Share

Recommended Posts

boo_lolly Regular Member

boo_lolly

Posted
Posted

I'm having a lot of trouble with this page i'm working on. for some reason i cannot get the background color to show up in Firefox. the background color works in IE, but the text inside it is in the wrong position. it's a simple header, footer, two-column layout and i don't know what the hell is wrong. can somebody please help me?

 

'content' is where i'm having trouble. you'd probably just say 'why don't you just make the left and right column have a background color?' well, because they have to be transparent since the left and right column will be overlapping the header and footer a little bit. this is my dillema. pleaase help =\. i don't know what to do.

 

html:

<!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" lang="en" xml:lang="en">
<head>
	<title>piratebeachhouse.com</title>
	<link rel="stylesheet" type="text/css" 

href="stylesheet.css" />
</head>
<body bgcolor="#CBCACA">

<div id="leftborder">
<div id="rightborder">

<div id="header">

</div> <!-- header -->
	<div id="content">

	<div id="leftbody">
		left body
		left body<br /><br />
		left body
		left body<br />
		left body
		left body<br />
		left body
		left body
	</div> <!-- leftbody -->

	<div id="rightbody">
		right body<br />
		right body
		right body<br />
		right body
		right body
		right body
		right body
		right body<br /><br />
		right body
		right body
		right body
	</div> <!-- rightbody -->

	</div> <!-- content -->

<div id="footer">
footer footer footer footer
</div> <!-- footer -->

</diV> <!-- rightborder -->
</diV> <!-- leftborder -->

</body>
</html>

 

IE stylesheet

/*
#container {
padding: 10px;
color: #000;
border: 3px solid black;
width: 643px;
background: #fff;
}
*/

#leftborder {
background-image: url('images/beachhouse_gradientleft.gif');
background-repeat: repeat-y;
background-position: left;
width: 667px;

}

#rightborder {
background-image: url('images/beachhouse_gradientright.gif');
background-repeat: repeat-y; 
background-position: right;
width: 665px;
}

#header {
margin-left: 11px;
margin-right: 9px;
width: 643px;
height: 400px;
color: #000;
position: center;
background: url('images/beachhouse_header.gif');
background-repeat: no-repeat;
background-position: top;
}


#content {
margin-left: 11px;
margin-right: 9px;
color: #000;
width: 643px;
background: #fff;
border: 1px solid blue;
position: relative;
}


#leftbody {
margin-left: 5px;
margin-right: 5px;
padding-left: 15px;
padding-right: 10px;
float: left;
color: #000;
width: 225px;
position: relative;
top: -200px;

}

#rightbody {
margin-left: 5px;
margin-right: 5px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: -300px;
color: #000;
width: 350px;
position: relative;
top: -200px;

float: right;
}


#footer {
clear: both;
margin-left: 11px;
margin-right: 9px;
padding: 10px;
width: 623px;
height: 190px;
color: #000;
background: url('images/beachhouse_footer.gif');
background-repeat: no-repeat;
background-position: bottom;
}

 

Firefox stylesheet

/*
#container {
padding: 10px;
color: #000;
border: 3px solid black;
width: 643px;
background: #fff;
}
*/

#leftborder {
background-image: url('images/beachhouse_gradientleft.gif');
background-repeat: repeat-y;
background-position: left;
width: 667px;

}

#rightborder {
background-image: url('images/beachhouse_gradientright.gif');
background-repeat: repeat-y; 
background-position: right;
width: 665px;
}

#header {
margin-left: 11px;
margin-right: 9px;
width: 643px;
height: 400px;
color: #000;
position: center;
background: url('images/beachhouse_header.gif');
background-repeat: no-repeat;
background-position: top;
}

#content {
margin-left: 11px;
margin-right: 9px;
color: #000;
width: 643px;
background: #fff;
border: 1px solid blue;
}

#leftbody {
margin-left: 5px;
margin-right: 5px;
padding-left: 15px;
padding-right: 10px;
float: left;
color: #000;
width: 225px;
position: relative;
top: -200px;

}

#rightbody {
margin-left: 5px;
margin-right: 5px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: -300px;
color: #000;
width: 350px;
position: relative;
top: -200px;
bottom: -400px;
float: right;
}


#footer {
clear: both;
margin-left: 11px;
margin-right: 9px;
padding: 10px;
width: 623px;
height: 190px;
color: #000;
background: url('images/beachhouse_footer.gif');
background-repeat: no-repeat;
background-position: bottom;
}

 

the problem is in 'content'. it has a white background in IE but no background in Firefox. Is there a better way to do this??? what is wrong here?

Link to comment
Share on other sites
dbrimlow Member

dbrimlow

Posted
Posted

It is hard to replicate, then debug,  your problem without the images.

 

Just using standard css layout concepts and straight up semantic markup (using color as background for testing) the layout itself does not hold up on its own.

 

This is usually how we judge the soundness of a layout.

 

You shouldn't leave text just sitting alone and naked within a class or id ... text should be in a block level element (paragraph, list, heading, etc.). So when testing your layout, don't forget to include them because your layout will not be true ... and will blow up when you add them later.

 

If you have a test version online with the background images that will help a lot.

 

Dave

Link to comment
Share on other sites
obsidian Member

obsidian

Posted
Posted

This is all sorts of hokey:

#leftbody {
margin-left: 5px;
margin-right: 5px;
padding-left: 15px;
padding-right: 10px;
float: left;
color: #000;
width: 225px;
position: relative;
top: -200px;

}

#rightbody {
margin-left: 5px;
margin-right: 5px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: -300px;
color: #000;
width: 350px;
position: relative;
top: -200px;

float: right;
}

 

You're declaring static positioning with your top declaration, relative positioning literally and attempting to float all at the same time. It will be nearly impossible to get things to display as wanted with all that rolled together. The strict definition of why your content doesn't have a background color in firefox is that your columns have a float applied which causes the content to collapse beneath it. You need to have your content div clearing the columns. To do so, add a class of "clearfix" to your content div and then add the following CSS to your page (fixes for IE and FF):

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.