Member Avatar for Reliable

Hey Everyone,

I want to replace the following code with it's DIV equivalent.

<body>
<div id="container">
<div id="header">
<table width="901" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2" style="padding-left:20px"><img src="images/thinktankname.png" alt="Think Tank for African American Progress" /></td>
  </tr>
  <tr style="padding-bottom:20px">
    <td style=" padding-right:10px"><img src="images/thinktanklogo.png" alt="think thank logo" /></td>
    <td><img src="images/thinktank.jpg" width="657" height="194" /></td>
  </tr>
</table>

</div>
</div>
</body>

When I tried two floating divs the images are in the right spots but the background color of the containing div doesn't show behind them. I get 2 different incorrect results from both IE and Firefox.

<body>
<div id="container">
<div id="header">
<div><img src="images/thinktankname.png" /></div>
<div style="float:left"><img src="images/thinktanklogo.png" alt="logo" /></div>
<div style="float:right"><img src="images/thinktank.jpg" /></div>
</div>
</div>
</body>

Here is some of the CSS:

body{
background:#faca0a;
background-repeat:repeat-x;
background-image:url(images/background.jpg);
background-position: top;
}

div#container{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10pt;
	color:#660033;
	margin-left:50px;
	margin-right:50px;
	padding:0px;
	background-color: #660066;
	text-align: justify;
	top: 0px;
}


#header {
	padding-left: 20px;
	padding-bottom: 10px;
}
  • 3 Contributors
  • 3 Replies
  • 132 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Troy III
Member Avatar for MidiMagic

If you are expecting the background color to fill the div around the edge of the square image, you need some padding.

If you expect the background color to fill in around an irregularly shaped object in the image, you have to do one of two things, because all images are rectangular:

1. Make the outside edge of the image the same color as the background.

2. Use a .gif file, and make the outside edge of the image transparent. Then the background color will show through.

If the outside edge of the image is white, it will show up as white.

Member Avatar for Troy III

Hey Everyone,

I want to replace the following code with it's DIV equivalent.

<body>
<div id="container">
<div id="header">
<table width="901" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2" style="padding-left:20px"><img src="images/thinktankname.png" alt="Think Tank for African American Progress" /></td>
  </tr>
  <tr style="padding-bottom:20px">
    <td style=" padding-right:10px"><img src="images/thinktanklogo.png" alt="think thank logo" /></td>
    <td><img src="images/thinktank.jpg" width="657" height="194" /></td>
  </tr>
</table>

</div>
</div>
</body>

When I tried two floating divs the images are in the right spots but the background color of the containing div doesn't show behind them. I get 2 different incorrect results from both IE and Firefox.

<body>
<div id="container">
<div id="header">
<div><img src="images/thinktankname.png" /></div>
<div style="float:left"><img src="images/thinktanklogo.png" alt="logo" /></div>
<div style="float:right"><img src="images/thinktank.jpg" /></div>
</div>
</div>
</body>

Here is some of the CSS:

body{
background:#faca0a;
background-repeat:repeat-x;
background-image:url(images/background.jpg);
background-position: top;
}

div#container{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10pt;
	color:#660033;
	margin-left:50px;
	margin-right:50px;
	padding:0px;
	background-color: #660066;
	text-align: justify;
	top: 0px;
}


#header {
	padding-left: 20px;
	padding-bottom: 10px;
}

I invite you to examine this example http://www.daniweb.com/forums/post948604.html#post948604

Member Avatar for Troy III

I invite you to examine this example http://www.daniweb.com/forums/post948604.html#post948604

But I'm sure you already did that with no avail.
Here is my valid cross-browser working code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Table Emulator</title>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<style type="text/css">
*{border:none; padding: 0; margin: auto; overflow: auto}
div, span {border: solid 1px gray}
span {display:inline-block; vertical-align: middle;}
</style>

</head>

<body>
<div id="header" style="width: 901px;">
   <div>
   <span style="height:30px; display:block">
   your content here
   </span>
   </div>
   <div>
   <span style="height:50px; width: 150px;">
   your content here
   </span><span style="height: 194px; width:657px;"> <!-- prevent white-space addition on non-IE agents -->
   your content here
   </span></div>
</div>

</body>
</html>

Advice:
As you already know, -for png transparent images on IE, you will need alphaImageLoader. See my strategy of using AIL in cross-browser compatible way on a document that validates in both tests here :http://www.daniweb.com/forums/post950195.html#post950195

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.