Help - Search - Members - Calendar
Full Version: DIV CSS problem
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
www.cgshelf.com
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
You've replaced good, structural markup with DIVs. What Zeldman referred to as "divitis" IIRC. Get the headings and Ps back. smile.gif

Concerning the rendering, you haven't cleared your floats.
http://css-discuss.incutio.com/?page=ClearingSpace
Darin McGrew
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.
Invision Power Board © 2001-2009 Invision Power Services, Inc.