Three column layout in Firefox and Chrome

Forum Moderators: not2easy

Message Too Old, No Replies

Three column layout in Firefox and Chrome

tuxandpucks

11:16 pm on Jan 15, 2011 (gmt 0)

I have a css question. This relates to firefox.

In Google-Chrome my webpage looks how I want it. It has the three column wrapper background-color on the left and right and it doesn't intrude on the rest of the content in the middle. However, in firefox, the three column wrapper takes over the whole site and the background-color fills in all over where there are not pictures and it is a background for the text.

Does anyone know a firefox hack I could use?

thanks in advance,
Randy

tuxandpucks

11:17 pm on Jan 15, 2011 (gmt 0)

Sorry, forgot to add the doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Fotiman

1:25 am on Jan 16, 2011 (gmt 0)

Can you provide some markup and css? It's hard to tell what you mean without seeing some code.

tuxandpucks

2:00 am on Jan 16, 2011 (gmt 0)

Certainly. Thanks for trying to help. I had taken out the problem background color for now because I wanted my site to look decent, so I am going to re-add it back in, into this code so you will have a better opportunity to help me. Thanks!

Here is the xhtml:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="description" content=" linux tips and HOWTOs"/>
<meta name="keywords" content="Example"/>
<title>Example</title>
<link rel="StyleSheet" type="text/css" href="index.css">
</head>

<body> 
<div id="threecolwrapper">
<div id="twocolwrapper"> 
 <div id="header">
 <i>A linux fan welcomes you to...</i> 
 <h1>Linux </h1>
 </div><!--header-->
<!-- End Header Stuff-->


<div id="navleft">

I think that should be enough html and here is the css:

body
{
margin:0; padding:0;

}
#threecolwrapper
{
float:left;
width:100%;
background-color:#772953;
}
#twocolwrapper
{
float:right;
margin-left:20%;
margin-right:20%;
background-color:#white;
font-family: �Ubuntubeta�, �Ubuntu�, 
�Bitstream Vera Sans�, �DejaVu Sans�, 
Tahoma, sans-serif
}
/*header stuff*/
#header
{
width:100%;
background-image:url("/images/banners/gradient.jpg");
background-repeat:repeat;
padding-bottom:8px;
padding-top:14px;
}
i
{
text-align:left;
padding-left:2%;
}
h1
{
text-align:center;
font-size:1.5em;
}
h2
{
text-align:center;
font-size:1.2em;
margin-top:0px;
}
h4
{
font-size:137.5%;
border-top: solid 2px purple;
border-bottom: solid 2px orange;
text-align:center;
}

/*end of header stuff*/

/*start of navleft stuff*/
#navleft
{
float:left;
margin-top:24px;
background-color:#F5F5DC;
height:1100px;

[edited by: alt131 at 1:49 am (utc) on May 17, 2011]
[edit reason] Thread Tidy [/edit]

Fotiman

2:25 pm on Jan 17, 2011 (gmt 0)

Your markup is incomplete. Also, you've got an XHTML DOCTYPE, though your markup is not all XHTML (for example, the link element is missing the closing /). I can't tell from the code what the desired appearance is. Also, some of your CSS was invalid too, like background-color:#white.

the background-color fills in all over where there are not pictures

When you define backgrounds, perhaps you need to do something like:

background: #fff url('...');

In other words, you're defining a background color and a background image. If the background image doesn't exist or isn't big enough to cover the entire background area, the background color specified is the one that will show. Otherwise, the background color will be transparent and the background color of whatever layer is underneath it will show through.

tuxandpucks

4:29 pm on Jan 17, 2011 (gmt 0)

OK. thanks for the reply I will give your tip a try. thanks, again.