Solved

Div background color issue

Posted on 2011-03-03
6
489 Views
Last Modified: 2012-08-13
I'm trying to create an html layout, but having a problem with the div's and background-color

when I put the div tag withing a table <td> the color does not render
this shows as white "><div style="background-color: #525252"></div>"

I'm sure this is something simple, any help would be greatly appreciated






<table cellpadding="0" cellspacing="0" style="width: 100%">
                  <tr>
                        <td style="width: 212px"><div style="background-color: #525252"></div></td>
                        <td><div style="background-color: #2775f5"></div></td>
                  </tr>
            </table>





 
<!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">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>

<body style="margin: 0">

<table cellpadding="0" cellspacing="0" style="width: 766px">
	<tr>
		<td style="height: 86px"></td>
	</tr>
	<tr>
		<td style="height: 10px">
		<table cellpadding="0" cellspacing="0" style="width: 100%">
			<tr>
				<td style="width: 212px"><div style="background-color: #525252"></div></td>
				<td><div style="background-color: #2775f5"></div></td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td style="height: 245px; vertical-align: top; text-align: left;">
		<table cellpadding="0" cellspacing="0" style="width: 100%">
			<tr>
				<td style="width: 212px; height: 245px; vertical-align: top; text-align: left;"><div style="background-color: #ffffff"></div></td>
				<td style="vertical-align: top; text-align: left">&nbsp;</td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td style="height: 10px">
		<table cellpadding="0" cellspacing="0" style="width: 100%">
			<tr>
				<td style="width: 212px"><div style="background-color: #c0c0c0"></div></td>
				<td><div style="background-color: #d3d3d3"></div></td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td style="height: 357px; text-align: left; vertical-align: top;">
		<table cellpadding="0" cellspacing="0" style="width: 100%">
			<tr>
				<td style="width: 212px; background-color: #e9e9e9; height: 358px;"></td>
				<td>&nbsp;</td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td style="height: 10px">
		<table cellpadding="0" cellspacing="0" style="width: 100%">
			<tr>
				<td style="width: 212px"><div style="background-color: #bebebe"></div></td>
				<td><div style="background-color: #2775f5"></div></td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td style="height: 76px; vertical-align: top; text-align: left;">
		<table cellpadding="0" cellspacing="0" style="width: 100%">
			<tr>
				<td style="width: 212px; background-color: #777777; height: 41px;"></td>
				<td>
				<div style="width: 100%; vertical-align: middle; text-align: center;"></div></td>
			</tr>
		</table>
		</td>
	</tr>
</table>

</body>

</html>

Open in new window

0
Comment
Question by:TheWebGuy38
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
6 Comments
 
LVL 39

Expert Comment

by:Pratima Pharande
ID: 35033753
give some height to it . it is reflection but there is nothing in that div so it is now showing on screen

<div style="background-color: #2775f5;HEIGHT: 10px" ></div>
0
 
LVL 39

Expert Comment

by:Pratima Pharande
ID: 35033758
try this is reflectiong
<div style="background-color: #2775f5;HEIGHT: 10px" >test</div>
0
 
LVL 39

Accepted Solution

by:
Pratima Pharande earned 500 total points
ID: 35033763
set height and width bothe it is reflection without any text

<div style="background-color: #2775f5;WIDTH: 100px; HEIGHT: 10px" ></div>
0
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 

Author Comment

by:TheWebGuy38
ID: 35033773
Oh ya, there we go. silly me. always something stupid, lol. It was rendering, just not using any width or height.

I appreciate your help.
0
 
LVL 39

Expert Comment

by:Pratima Pharande
ID: 35033784
glad to help you :)
can you please close the question
0
 

Expert Comment

by:edavo
ID: 35033975
<table cellpadding="0" cellspacing="0" style="width: 100%">
      <tr>
            <td style="width:212px;background-color:#525252">Content to go here...</td>      
               <td style="background-color:#2775f5">Content to go here...</td>
      </tr>
</table>
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

627 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question