The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> DIV CSS problem
www.cgshelf.com
post 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.


--------------------
Computer Graphics Tutorials | Computer Graphics Community
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 6 2007, 12:28 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 7,207
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. smile.gif

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


--------------------
“Never go to excess, but let moderation be your guide.”
– Cicero
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 6 2007, 01:12 PM
Post #3


WDG Member
********

Group: Root Admin
Posts: 5,144
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
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.


--------------------
Darin McGrew
WDG Member since 1998

My involvement with the WDG is personal. The views I express here are mine alone and not those of my employer.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 21st November 2009 - 07:42 AM
Invision Power Board © 2009  IPS, Inc.
Licensed to: HTMLHelp.com, LLC