HTMLHelp Forums > DIV CSS problem

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

www.cgshelf.com

Apr 6 2007, 04:17 AM

I am facing a problem while creating the layout using CSS and DIV. My code renders properly in IE, but in FireFox and Opera it is a mess? Here is my code

CODE

[color="#000000"][color="#007700"]<style>
body {
background-color: #CCCCCC;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
#container {
text-align: justify;
background-color: #FFFFFF;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
padding-top:10px;
}
#headerTextBar {
background-color: #E9EAEA;
width:100%;

}
#headerTextBar .text {
padding-left: 10px;
padding-right:10px;
float: left;
height:20px;
vertical-align:middle;
padding-top:5px;
}
#headerTextBar img {
vertical-align:middle;
width:2px;
float:left;
}
</style>
</head>
<body>
<div id="container">
<div id="headerTextBar">
  <div class="text">
   <strong>Home</strong></div>
  <div>
   <img src="images/cg_button_line.jpg" width="2" height="23" alt="" /></div>
  <div class="text">
   <strong>Articles</strong></div>
  <div>
   <img src="images/cg_button_line.jpg" width="2" height="23" alt="" /></div>
  <div class="text">
   <strong>Forums</strong></div>
  <div>
   <img src="images/cg_button_line.jpg" width="2" height="23" alt="" /></div>
  <div class="text">
   <strong>HTML</strong></div>
  <div>
   <img src="images/cg_button_line.jpg" width="2" height="23" alt="" /></div>
  <div class="text">
   <strong>About US</strong></div>
  <div>
   <img src="images/cg_button_line.jpg" width="2" height="23" alt="" /></div>
  <div class="text">
   <strong>Contact US</strong></div>
  <div>
   <img src="images/cg_button_line.jpg" width="2" height="23" alt="" /></div>

</div>

</div>
</body>[/color][/color]

I want my output to be looks like IE? What is wrong with my code? Please help me.

pandy

Apr 6 2007, 12:28 PM

You've replaced good, structural markup with DIVs. What Zeldman referred to as "divitis" IIRC. Get the headings and Ps back.

Concerning the rendering, you haven't cleared your floats.
http://css-discuss.incutio.com/?page=ClearingSpace

Darin McGrew

Apr 6 2007, 01:12 PM

QUOTE(pandy @ Apr 6 2007, 10:28 AM)

You've replaced good, structural markup with DIVs. What Zeldman referred to as "divitis" IIRC.

Yep. I've also heard it called "div soup", since it reflects a mindset that isn't that different from the "tag soup" mindset.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.