DIV CSS problem |
DIV CSS problem |
www.cgshelf.com |
Apr 6 2007, 04:17 AM
Post
#1
|
Group: Members Posts: 3 Joined: 6-April 07 Member No.: 2,448 |
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
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
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
Post
#3
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
|
Lo-Fi Version | Time is now: 28th April 2024 - 05:57 AM |