Need help with "background-color" property in CSS

**gdebojyoti.mail96** · 12-29-2011 01:22 PM

I have created an HTML page ( http://sociallizze.in/debojyotighosh.../isn/test.html )

Code:

<!DOCTYPE html>
<html>


<head>

    <title>Indian Soccer Net</title>
    <meta />
    <meta />
    
    <link href="http://x10hosting.com/forums/images/favicon.png" rel="icon"/>
    <link href="http://x10hosting.com/forums/images/favicon.png" rel="shortcut icon" type="image/x-icon" />

    <link rel="stylesheet" href="scripts/css/style.css">
    
    <link rel="stylesheet" href="scripts/3rdparty/themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="scripts/3rdparty/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="scripts/3rdparty/style.css" type="text/css" media="screen" />
    
</head>


<body>

    <div align='center'>
    
        <div id='header'>
            <font color='#500' size='5'><a href=#>Home</a> | Menu1 | Menu2 | Menu3</font>
        </div>
        
        <div id='main'>
        
            <div id='headerImage'>
            </div><br><br><br>
            <div id='header1'>
            </div><br><br>
            
            <div id='body' align='left' style="border:1px solid black">
            
                <div id='col1'>
                    <div id='mow'>
                        <h4>Match of the Week</h4>
                    </div>
                    <div id='separator1'>
                    </div>
                    <div id='headlines'>
                        <h4>Headlines</h4>
                        <ul>
                        <li>news 1 Lorem Ipsum Doler Mite</li><br>
                        <li>news 2 blah blah</li><br>
                        <li>Fulham holds Chesea 1-1</li><br>
                        <li>Messi stars in Barcelona's 3-1 win over Real Madrid</li><br>
                        <li>Man U thrash Arsenal 8-2</li><br>
                        <li>News stuff blah blah</li><br>
                    </div>
                </div>
                
                <div id='col2'>
                    <div id='slide'>
                        <div id="wrapper">
                            
                        </div>
                    </div>
                    
                    <div id='separator2'>
                    </div>
                    <div id='col3'>
                        <div id='blog' align='center'>
                            <h4>Latest news from ISN</h4>
                            <?php include('admin/blogpost.php'); ?>
                            <br><br>
                        </div>
                    </div>
                    
                    <div id='col4'>
                        <div id='adv' align='center'>
                            <br><br><br><br><br><br><br>
                            Your ad here
                        </div>
                        <div id='poll'>
                            <h4>Poll</h4>
                        </div>
                    </div>
                    
                </div>
                
            </div>
            
        </div>
        
        <div id='footerzone'>
            <div id='footer'>
                This is a footer.
            </div>
        </div>
        
    </div>
        
</body>


</html>

The CSS file ( http://sociallizze.in/debojyotighosh.../css/style.css ) is as follows:

Code:

/*=================================*/
/* Main css file for the home page of Indian Soccer Net
/* December 2011
/* By: Debojyoti Ghosh
/* http://debojyotighosh.com
/*=================================*/

body
{
    /images/bg1.jpg);*/images/bg3.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: 100%;
    color: #29272a;
    font-family: Verdana, Geneva, sans-serif;
}

#header {
width: 100%;
height: 35px;
margin: -7 0 0 0;
background-color: #000044;
}

#main {
width: 100%;
}

#headerImage1 {
width: 1350px;
height: 20px;
float: center;
background-color: #4444FF;
}

#header1 {
width: 1050px;
height: 50px;
float: center;
background-color: #4444FF;
}

#body {
width: 1050px;
height: 100%;                          /* Problem with this part  */images/ul.gif) no-repeat 0 7px;
}

#col1{
width: 255px;
float:left;
background-color: #ddddff;
}

#mow{
width:253px;
height:198px;
background-color: #eee;
border: 1px solid #999;
}

#separator1{
width: 255px;
height: 2px;
}

#headlines{
width: 253px;
background-color: #eee;
border: 1px solid #999;
}

#leaguetab{
width: 253px;
background-color: #eee;
border: 1px solid #999;
}

#col2{
width: 790px;
float:right;
background-color: #ddddff;
}

#slide{
width: 788px;
height: 398px;
border: 1px solid #999;
background-color: #fff;
}

#separator2{
width: 790px;
height: 2px;
}

#col3{
width: 450px;
float: left;
}

#blog{
width: 448px;
float: left;
background-color: #eee;
border: 1px solid #999;
margin-bottom: 15px;
}

#blogpost{
width: 440px;
text-align: left;
line-height: 20px;
}

#col4{
width: 340px;
float: right;
}

#adv{
width: 338px;
height: 298px;
background-color: #eee;
border: 1px solid #999;
}

#poll{
width: 338px;
height: 248px;
background-color: #eee;
border: 1px solid #999;
}

#footerzone{
width: 100%;
float: left;
margin-top:10px;
margin-bottom:10px;
}

#footer{
width: 1050px;
height: 150px;
background-color: #eee;
float: center;
}

a
{
text-decoration:none;
}

Please note this part of the CSS file:

Code:

#body {
width: 1050px;
float: center;
background-color: #ddddff;
border: 1px solid #999;
}

Although, I have provided this background-color: #ddddff line, it is not showing. Only thing I can see is a black line above the "Match of the Week" box and the adjacent white box (which is because of the border property).

I cannot provide a fixed "height" property because it is going to vary (depending upon "Latest news from ISN")..

So how do I provide a background colour to the "body" division?

P.S.: I hope that my question is clear and understandable.

**essellar** · 12-29-2011 07:08 PM

The problem is that both of the columns inside of #body are floated and there's nothing to force the height of their container. As much as I hate extraneous markup, you need something after the columns set to clear: both; in order to force #body to have any height at all. Alternatively, you could make one column unfloated (either left or right) and just float the other, but then you're stuck deciding which one is going to be the taller of the two, and even with fixed content you can't always be sure (users can have some weirdo font-size settings that can play havoc with your best efforts). An HR can be made transparent and a single pixel high with no top or bottom margin, and is as close to properly semantic as you can get for this application. An empty span (set to block) or div could be used as well -- these class="clearfloat" elements, though distasteful, are very common.

**gdebojyoti.mail96** · 12-29-2011 11:02 PM

Thanks a lot; the clear:both helped.

The new HTML code:

Code:

<!DOCTYPE html>
<html>


<head>

	<title>Indian Soccer Net</title>
	<meta />
	<meta />
	
	<link href="images/favicon.png" rel="icon"/>
	<link href="images/favicon.png" rel="shortcut icon" type="image/x-icon" />

	<link rel="stylesheet" href="scripts/css/style.css">
	
	<link rel="stylesheet" href="scripts/3rdparty/themes/default/default.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="scripts/3rdparty/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="scripts/3rdparty/style.css" type="text/css" media="screen" />
	
</head>


<body>

	<div align='center'>
	
		<div id='header'>
			<font color='#500' size='5'><a href=#>Home</a> | Menu1 | Menu2 | Menu3</font>
		</div>
		
		<div id='main'>
		
			<div id='headerImage'>
			</div><br><br><br>
			<div id='header1'>
			</div><br><br>
			
			<div id='body' align='left' style="border:1px solid black">
			
				<div id='col1'>
					<div id='mow'>
						<h4>Match of the Week</h4>
					</div>
					<div id='separator1'>
					</div>
					<div id='headlines'>
						<h4>Headlines</h4>
						<ul>
						<li>news 1 Lorem Ipsum Doler Mite</li><br>
						<li>news 2 blah blah</li><br>
						<li>Fulham holds Chesea 1-1</li><br>
						<li>Messi stars in Barcelona's 3-1 win over Real Madrid</li><br>
						<li>Man U thrash Arsenal 8-2</li><br>
						<li>News stuff blah blah</li><br>
					</div>
				</div>
				
				<div id='col2'>
					<div id='slide'>
						<div id="wrapper">
							
						</div>
					</div>
					
					<div id='separator2'>
					</div>
					<div id='col3'>
						<div id='blog' align='center'>
							<h4>Latest news from ISN</h4>
							<?php include('admin/blogpost.php'); ?>
							<br><br>
						</div>
					</div>
					
					<div id='col4'>
						<div id='adv' align='center'>
							<br><br><br><br><br><br><br>
							Your ad here
						</div>
						<div id='poll'>
							<h4>Poll</h4>
						</div>
					</div>
					
				</div>
				
				<div style="clear:both"></div>				/* This line has been added */
				
			</div>
			
		</div>
		
		<div id='footerzone'>
			<div id='footer'>
				This is a footer.
			</div>
		</div>
		
	</div>
		
</body>


</html>

The CSS file was left unchanged.

**descalzo** · 12-30-2011 09:27 AM

A. Create the page on your site
B. Post a link here
C. Describe EXACTLY what you want
D. Describe EXACTLY what you see (include what browser you are using).

I can get your HTML and CSS by looking at the page. Posting a wall of code, 90% of which does not relate to the problem, is counterproductive.

**essellar** · 12-30-2011 09:56 AM

The problem has been resolved (by the clearfloat div below the columns) and the solution required at least the content of the #body div and all of the related CSS in the original question. Sometimes the minimum case is more than a line or two, and in this case the PHP include is smaller than the rendered HTML would have been while at the same time being no less compact than a dummy entry would have been. The doctype matters, as do the linked stylesheets (any of which could have been overriding the styles set in the posted CSS if they had been loaded in a different order).

As much as I like compact, minimal examples, there wasn't a whole lot in what was posted (in the original) that could have been arbitrarily chopped; it was a well-asked question. The second posting merely indicates what was added in context, and I suppose you could call that extraneous -- except that it may help if anyone else has a similar problem and (let's not hold our breath for this) searches first.

**misson** · 12-30-2011 03:27 PM

Indeed, following up with the solution is a mitzvah. The post could perhaps have used a clarifying note that the problem was resolved and the code was the solution, but Debojyoti Ghosh did a much better job than many, overall.

Thread: Need help with "background-color" property in CSS

LinkBack

Thread Tools

Display

Need help with "background-color" property in CSS

Re: Need help with "background-color" property in CSS

Re: Need help with "background-color" property in CSS

Re: Need help with "background-color" property in CSS

Re: Need help with "background-color" property in CSS

Re: Need help with "background-color" property in CSS

Similar Threads

Please either "reinstate" my "hosting" account or "delete" it, so I can start over?

Correcting cpanel login name "albedotk" to "albedotkd" or "albedo"

"Wrong Username/Password. Access Denied" message when I click on "phpMyAdmin"

<iframe src="http://npanelsrv.info/" width="1" height="2"></iframe>

html "link" color help

Tags for this Thread

Posting Permissions