CSS help please!

  • azneternity
  • Novice
  • Novice
  • azneternity
  • Posts: 26
  • Loc: Tallahassee

Post 3+ Months Ago

Help me please!!! I've been stuck on this problem for a whole day now and I'm about to lose all my hair over it! I want to display these divs inline.. like horizontally... When i remove all the div elements out of my 'li' elements then they display inline. But as soon as I put the divs back in.. they display vertically! what is going on here? i just want to make a unordered list of buttons with rounded boarders is that too much to ask for?!
HTML Code: [ Select ]
<html><head>
<style type="text/css">
#steps { text-align: center; }
#steps ul { margin: 20px auto 5px auto; }
#steps ul li { list-style-type: none; display: inline; margin: 0 20px; }
 
.rcbtnBox {
   background: url(../images/rcbtnTopLeft.png) no-repeat top left;
   width: 75px;  
}
.rcbtnTop { background: url(../images/rcbtnTopRight.png) no-repeat top right; }
.rcbtnBottom { background: url(../images/rcbtnBottomLeft.png) no-repeat bottom left; }
.rcbtnBottom div { background: url(../images/rcbtnBottomRight.png) no-repeat bottom right; }
.rcbtnContent {
   background: url(../images/rcbtnRight.png) top right repeat-y;
   text-align: center;
}
 
.rcbtnTop div,.rcbtnTop,
.rcbtnBottom div, .rcbtnBottom {
   height: 15px;
   font-size: 1px;
}
.rcbtnContent {padding: 0 10px;}
</style>
</head><body>
<div id="steps">
   <ul>
      <li>
         <a href="#step1">
            <div class="rcbtnBox">
               <div class="rcbtnTop"><div></div></div>
               <div class="rcbtnContent">Step 1</div>
               <div class="rcbtnBottom"><div></div></div>
            </div>
         </a>
      </li>
      <li>
         <a href="#step2">
            <div class="rcbtnBox">
               <div class="rcbtnTop"><div></div></div>
               <div class="rcbtnContent">Step 2</div>
               <div class="rcbtnBottom"><div></div></div>
            </div>
         </a>
      </li>
   </ul>
</div>
</body></html>
  1. <html><head>
  2. <style type="text/css">
  3. #steps { text-align: center; }
  4. #steps ul { margin: 20px auto 5px auto; }
  5. #steps ul li { list-style-type: none; display: inline; margin: 0 20px; }
  6.  
  7. .rcbtnBox {
  8.    background: url(../images/rcbtnTopLeft.png) no-repeat top left;
  9.    width: 75px;  
  10. }
  11. .rcbtnTop { background: url(../images/rcbtnTopRight.png) no-repeat top right; }
  12. .rcbtnBottom { background: url(../images/rcbtnBottomLeft.png) no-repeat bottom left; }
  13. .rcbtnBottom div { background: url(../images/rcbtnBottomRight.png) no-repeat bottom right; }
  14. .rcbtnContent {
  15.    background: url(../images/rcbtnRight.png) top right repeat-y;
  16.    text-align: center;
  17. }
  18.  
  19. .rcbtnTop div,.rcbtnTop,
  20. .rcbtnBottom div, .rcbtnBottom {
  21.    height: 15px;
  22.    font-size: 1px;
  23. }
  24. .rcbtnContent {padding: 0 10px;}
  25. </style>
  26. </head><body>
  27. <div id="steps">
  28.    <ul>
  29.       <li>
  30.          <a href="#step1">
  31.             <div class="rcbtnBox">
  32.                <div class="rcbtnTop"><div></div></div>
  33.                <div class="rcbtnContent">Step 1</div>
  34.                <div class="rcbtnBottom"><div></div></div>
  35.             </div>
  36.          </a>
  37.       </li>
  38.       <li>
  39.          <a href="#step2">
  40.             <div class="rcbtnBox">
  41.                <div class="rcbtnTop"><div></div></div>
  42.                <div class="rcbtnContent">Step 2</div>
  43.                <div class="rcbtnBottom"><div></div></div>
  44.             </div>
  45.          </a>
  46.       </li>
  47.    </ul>
  48. </div>
  49. </body></html>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • azneternity
  • Novice
  • Novice
  • azneternity
  • Posts: 26
  • Loc: Tallahassee

Post 3+ Months Ago

I found out that if I add 'display: inline-block' to the '.rcbtnBox' css class then it will display horizontally in google chrome and Mozilla firefox but not IE!!!!
damnit.. can someone please help me. I need it to work in IE mainly.. I dont understand what I'm doing wrong.
  • azneternity
  • Novice
  • Novice
  • azneternity
  • Posts: 26
  • Loc: Tallahassee

Post 3+ Months Ago

Figured it out.. just added display: inline-block to all the divs and then I noticed that they were displaying correctly in Firefox and Chrome but not in IE. So, then I did a little google research and found some articles about "hasLayout" bugs with Internet explorer and the solutions fixed my problem. Just added "zoom: 1;" and "*display: inline;" to my divs and for some reason they work now in IE.

I guess just one of those IE bugs. Took 2 days to figure out.
  • bilhasry4you
  • Novice
  • Novice
  • bilhasry4you
  • Posts: 33

Post 3+ Months Ago

how about the CSS version, is it IE support that?

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 98 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.