Background color <div> not within entire section

M

Maarten

Hi,

Recently I restarted some project I began quite some time ago and now I
am running into some difficulties, for me that is. What I have is one
<div> section with a limited width in which al the data is being put and
is centered in the middle. The background colour of the body is one
colour and the <div> section is another. Somehow, when I assign a colour
to the <div> that colour is used only for some text which is used right
at the beginning but all the other elements within the <div> have the
background colour of the <body>, in Firefox that is because in Internet
Explorer this aspect is working fine. Now this is a little trick which
is being used in quite a few websites these days and when I take one of
them, such as webwereld.nl I can edit it and change the background
colour for the centered <div> section without too much problems,
however, I can't figure out why this isn't working in my own page (I
tried to use the same techniques for positioning the sections etc)

Can somebody please take a look and tell me what I am doing wrong. I
have put a simplified page at the bottom of this email and I have put it
online at: http://home.planet.nl/~koster7/

I hope I have made it a bit clear what the problem is, though it should
be apparent taking a look at it in both FF and IE. Also do I hope the
html is a bit readable.

Thanks in advance, Maarten


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

<head>
<title>Website version 0.1</title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />

<style type="text/css">
body {
background-color:#807539;
font: 15px arial;
}

#mainBody {
// position: relative;
width: 950px;
margin-left:auto;
margin-right:auto;
text-align:left;
background-color:#e7e2c7;
color:black;
}

..header1 {
background-color:#807539;
color:white;
text-align:center;
font-style: oblique; font-variant: small-caps; font-weight:
900; font-size: 15px; line-height: 24px;
}

..header2 {
background-color:#e7e2c7;
color:black;
font-style: oblique; font-variant: small-caps; font-weight:
800; font-size: 14px; line-height: 24px;
}

..header3 {
background-color:#e7e2c7;
color:black;
font-style: oblique; font-variant: small-caps; font-weight:
900; font-size: 15px; line-height: 24px;
}

..bodyText {
border-width: 20px;

}

..leftColumn {
float: left;
width: 450px;
margin: 10px;
}

..rightColumn {
float: right;
width: 450px;
margin: 10px;
}

#mainMenu {
background-color:#807539;
color:white;
border: solid #e7e2c7;
text-align: center;
font-style: oblique; font-variant: small-caps; font-weight:
900; font-size: 15px; line-height: 24px;
}

#mainMenuT {
background-color:transparent;
width:950px;
}

..mainMenuS {
position:absolute;
background-color:#a4a08a;
border: solid #e7e2c7;
color:white;
visibility:hidden;
text-align: center;
z-index:1;
}

..mainMenuST {
width:944px;
border-width: 20px;
}

#maininfo {
width:950px;
}

..evenEntry {
background-color: white;
}
..unevenEntry {
background-color: #dcd5ad;
}

#maininfoMusica {
width: 400px;
table-layout: fixed;
}

#maininfoMusicaTBL {
width: 400px;
white-space: nowrap;
table-layout: fixed;
border-spacing: 0px;
}

.maininfoMusicaTBL-C1 {
width: 15%;
white-space: nowrap;
table-layout: fixed;
padding-right: 0.2cm;
overflow: hidden;
}

.maininfoMusicaTBL-C2 {
width: 40%;
white-space: nowrap;
table-layout: fixed;
padding-right: 0.2cm;
overflow: hidden;
}

.maininfoMusicaTBL-C3 {
width: 45%;
white-space: nowrap;
table-layout: fixed;
padding-right: 0.2cm;
overflow: hidden
}

#maininfoFotografia {
width: 400px;
}

#maininfoCinematica {
width: 400px;
}

</style>

</head>

<body>

<div id="mainBody">
<div id="maininfo">

<div id="maininfoMusica" class="leftColumn">


<div class="header1">Recent Musica Updates</div>


<table id="maininfoMusicaTBL">

<tr class="header2">
<td class="maininfoMusicaTBL-C1">Date</td><td
class="maininfoMusicaTBL-C2">Artist</td><td
class="maininfoMusicaTBL-C2">Title</td>
</tr>

<tr class="evenEntry">
<td class="maininfoMusicaTBL-C1">date</td>
<td class="maininfoMusicaTBL-C2">text text text</td>
<td class="maininfoMusicaTBL-C3">text text text</td>
</tr>



<tr class="unevenEntry">
<td class="maininfoMusicaTBL-C1">date</td>
<td class="maininfoMusicaTBL-C2">text text text</td>
<td class="maininfoMusicaTBL-C3">text text text</td>
</tr>


<tr class="evenEntry">
<td class="maininfoMusicaTBL-C1">date</td>
<td class="maininfoMusicaTBL-C2">text text text</td>
<td class="maininfoMusicaTBL-C3">text text text</td>
</tr>



<tr class="unevenEntry">
<td class="maininfoMusicaTBL-C1">date</td>
<td class="maininfoMusicaTBL-C2">text text text</td>
<td class="maininfoMusicaTBL-C3">text text text</td>
</tr>


<tr class="evenEntry">
<td class="maininfoMusicaTBL-C1">date</td>
<td class="maininfoMusicaTBL-C2">text text text</td>
<td class="maininfoMusicaTBL-C3">text text text</td>
</tr>



<tr class="unevenEntry">
<td class="maininfoMusicaTBL-C1">date</td>
<td class="maininfoMusicaTBL-C2">text text text</td>
<td class="maininfoMusicaTBL-C3">text text text</td>
</tr>


<tr class="evenEntry">
<td class="maininfoMusicaTBL-C1">date</td>
<td class="maininfoMusicaTBL-C2">text text text</td>
<td class="maininfoMusicaTBL-C3">text text text</td>
</tr>



<tr class="unevenEntry">
<td class="maininfoMusicaTBL-C1">date</td>
<td class="maininfoMusicaTBL-C2">text text text</td>
<td class="maininfoMusicaTBL-C3">text text text</td>
</tr>


<tr class="evenEntry">
<td class="maininfoMusicaTBL-C1">date</td>
<td class="maininfoMusicaTBL-C2">text text text</td>
<td class="maininfoMusicaTBL-C3">text text text</td>
</tr>






</table>

</div> <!-- End maininfoMusica -->

<div id="maininfoFotografia" class="rightColumn">

<div class="header1">Recent Fotografia Updates</div>

Not yet available

</div> <!-- End maininfoFotografia -->

<div id="maininfoCinematica" class="rightColumn">

<div class="header1">Recent Cinematica Updates</div>

Not yet available

</div> <!-- End maininfoCinematica -->

<div id="bottombanner">

</div> <!-- End bottombanner -->

</div> <!-- End mainInfo -->


</div> <!-- End mainBody -->

</body>
</html>
 
B

Ben C

Hi,

Recently I restarted some project I began quite some time ago and now I
am running into some difficulties, for me that is. What I have is one
<div> section with a limited width in which al the data is being put and
is centered in the middle. The background colour of the body is one
colour and the <div> section is another. Somehow, when I assign a colour
to the <div> that colour is used only for some text which is used right
at the beginning but all the other elements within the <div> have the
background colour of the <body>, in Firefox that is because in Internet
Explorer this aspect is working fine. Now this is a little trick which
is being used in quite a few websites these days and when I take one of
them, such as webwereld.nl I can edit it and change the background
colour for the centered <div> section without too much problems,
however, I can't figure out why this isn't working in my own page (I
tried to use the same techniques for positioning the sections etc)

Can somebody please take a look and tell me what I am doing wrong. I
have put a simplified page at the bottom of this email and I have put it
online at: http://home.planet.nl/~koster7/

I hope I have made it a bit clear what the problem is, though it should
be apparent taking a look at it in both FF and IE. Also do I hope the
html is a bit readable.
Click to expand...

You can fix it with overflow: hidden on #maininfo.

See http://netweaver.com.au/floatHouse/index.html, especially pages 3
and 8.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Changing a background-color 2
Can anyone please help? HTML - two tables applying different styles 4
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Having trouble centering contents of td ? 3
Filter table rows based on multiple checkboxes value 2
Image shifts to the right when export the page to pdf 4
Angularjs newbie - second JSON datasource does not display 0

Members online

Total: 39 (members: 1, guests: 38)
Robots: 203

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,045
Latest member
DRCM

Latest Threads

Top