<div> Troubles (FF vs. IE) - Page 2 - HTML Forums

scoutt · 11-12-2004, 10:51 PM

it would really help to see the code, more preferably a url.

Juparis · 11-12-2004, 11:39 PM

Quote:

Originally posted by juparis
Ok, so there's my problem, and here's the page.

Sorry; shoulda remembered to re-post it...

scoutt · 11-13-2004, 12:35 AM

it doesn't matter what resolution I see it in it is like you say. what is the way it is suppose to look like?

also why are you floating and also giving it a <br>

coothead · 11-13-2004, 03:44 AM

Hi there juparis,

here is your page, with the <br>'s, float:left
and some deprecated code removed

I did not get rid of the tables, as I know how attaced you have become to them

It also now validates HTML 1.0 strict again

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>//Test (div problems)</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<base href="http://www.juparis.x3fusion.com/"/>
<script type="text/javascript">
//<![CDATA[

function showHide(el,id) {
  if(el.checked==true) { 
    document.getElementById(id).style.display="block";
   }
  else {
      document.getElementById(id).style.display="none";
   }
  }

//]]>
</script>
<style type="text/css">
<!--
body {
     color:#009933;
     background-color:#000000;
     margin:0px;
     padding:0px;
 }
.bar{
     height:15px;
   
     font-size:12px;
     margin-bottom:7px;
 }
#red {
     background-color:red;
     width:57px;
 }
#blue {
     background-color:blue;
     width:42px;
 }
#silver {
     background-color:silver;
     width:99px;
 }
#div1 {
     clear:both;
     width:200px;
     height:20px;
     border:dashed 1px #0F0;
     margin:7px auto;
     display:none;
  }
#right {
     text-align:right;
 }

table {
     border:1px solid #00ff00;
     width:350px;
     margin:auto
 }
td {
     border: 0px;
 }
.head { 
     border: 1px dashed #006633;
     text-align:center;
     width:200px;
 }
a,h1,h2,.imp {
     font-family: Maiandra GD, Abadi MT Condensed Light, Tempus Sans MS;
}
h1,h2 {
     color:#000099;
     display:inline;
 }
h1 {
     font-size:16px;
 }
h2 {     
     font-size:14px;
 }
span {
     font-size:12px;
     color:#999999;
 }
.imp {
     color:#003399;
     font-size:19px;
     width:400px;
     margin:auto;
     text-align:center;
 }
a:link, a:visited { 
     color:#00ff00;
     text-decoration:none;
     font-size:12px;
}

a:hover {
     color:#00cc33;
     text-decoration:underline;
     font-size:12px;
 }
a:active {
     color:#009966;
     text-decoration:underline overline;
     font-size:10px;
 }
hr {
     color:#00ff00;
     height:1px;
     width:50px;
 }
form {
     display:inline;
 }
.graph { 
      border-top:0px ;
      border-left: 1px solid #fff;
      border-bottom: 1px solid #fff;
      border-right:0px;
      height:50px;width:100px;
      vertical-align:bottom;
 }
//-->
</style>

</head>
<body>

<div id="right"><img src="commons/controversy.GIF" alt="" /></div>

<div class="imp">
<ul>
<li>A recent update in Internet Explorer 6.0 may block the JavaScript function on this page. 
Be assured it is harmless and cannot affect your computer.</li>
</ul>
</div>

<table ><tr>
<td  colspan="2">
<table class="head"><tr><td>
<h1>Batteries</h1></td>
</tr></table></td>
</tr><tr>

<td><h2>Duracel</h2></td>
<td rowspan="3" class="graph">
<div class="bar" id="red"></div>
<div class="bar" id="blue"></div>
<div class="bar" id="silver"></div></td>
</tr><tr>

<td><h2>Energizer</h2></td>
</tr><tr>
<td><h2>Off-Brand ("Heavy Duty")</h2></td>
</tr><tr>

<td>
<form action="#">
<div>
<input onclick="showHide(this,'div1')" type="checkbox"/>Show Details...
</div>
</form>
</td>
</tr></table>

<div id="div1">centered div</div>

</body>
</html>

Juparis · 11-13-2004, 11:32 AM

It seems I have a TON more to learn...

I am grateful for your help, but kind of depressed that I write such faulted coding..

Thanks for keeping the tables; easier for me to understand/manipulate. I had originally done everything w/ tables to know what I'm trying to create with divs. I simply didn't want to take the time to change the table to a div since I couldn't get the bars to line up anyway, heh.

Thanks for your help, guys!

coothead · 11-13-2004, 02:49 PM

Hi there juparis,

although your love for tables still lingers, I thought that it
was my duty to tempt you with a div solution to your layout

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>//Test (div problems)</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<script type="text/javascript">
//<![CDATA[

function showHide(el,id) {
  if(el.checked==true) { 
    document.getElementById(id).style.display="block";
   }
  else {
      document.getElementById(id).style.display="none";
   }
  }

//]]>
</script>

<style type="text/css">
/*<![CDATA[*/

body {
     color:#009933;
     background-color:#000000;
     margin:0px;
     padding:0px;   
 }

#right {
     text-align:right;
 }

#imp {
     color:#003399;
     font-size:16px;
     width:350px;
     margin:auto;
     text-align:center;
 }

#container {
     border:1px solid #00ff00;
     width:350px;
     margin:auto
 }

#head { 
     border: 1px dashed #006633;
     text-align:center;
     width:200px;
     height:25px;
     margin:2px auto;
 }

h4 {
     color:#000099;
     line-height:25px;
     margin:0px  5px;  
 }
#battery {
      width:248px;
      float:left;
}
h5{  
     color:#006699; 
     line-height:22px;
     margin:0px 5px;      
 }

#graph { 
     width:100px;
     float:left;
     border-style:solid;
     border-color:#fff;
     border-width:0px 0px 1px 1px;        
 }

.bar{
     height:15px;   
     font-size:12px;
     margin-bottom:7px;
 }

#red {
     background-color:#f00;
     width:57px;
 }

#blue {
     background-color:#00f;
     width:42px;
 }

#silver {
     background-color:#c0c0c0;
     width:99px;
 }

#form {
     clear:both;
     margin:5px;
 }

#div1 {
     clear:both;
     width:200px;
     height:20px;
     border:dashed 1px #0f0;
     margin:7px auto;
     display:none;
  }

/*//]]>*/
</style>

</head>
<body>

<div id="right"><img src="commons/controversy.GIF" alt="" /></div>

<div id="imp">
<ul>
<li>
A recent update in Internet Explorer 6.0 may block the 
JavaScript function on this page. Be assured it is 
harmless and cannot affect your computer.
</li>
</ul>
</div>

<div id="container">
<div id="head">
<h4>Batteries</h4>
</div>

<div id="battery">
<h5>Duracel</h5>
<h5>Energizer</h5>
<h5>Off-Brand ("Heavy Duty")</h5>
</div>

<div id="graph">
<div class="bar" id="red"></div>
<div class="bar" id="blue"></div>
<div class="bar" id="silver"></div>
</div>

<div id="form">
<form action="#">
<div>
<input onclick="showHide(this,'div1')" type="checkbox"/>Show Details...
</div>
</form>
</div>
</div>

<div id="div1">centered div</div>

</body>
</html>