By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,568 Members | 1,688 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,568 IT Pros & Developers. It's quick & easy.

Shouldn't these two boxes have a vertical space separating them in Firefox?

P: 7
I am a CSS newbie, but do not understand why Firefox 2.0.0.13 (win) does not honor the margin-bottom in the following code when IE7 and Safari 3.1 do.

Shouldn't the two boxes have a vertical space in-between?

Perhaps someone can help? Thanks...!

Expand|Select|Wrap|Line Numbers
  1. <style>
  2. .container {
  3.     width:300px;
  4.     height:300px;
  5.     border: 1px solid #0f0;
  6. }
  7.  
  8. .box {
  9.     width: 100px;
  10.     height: 100px;
  11.     border: 1px solid #000;
  12.     margin-bottom: 10px;
  13. }
  14.  
  15. .rel {
  16.     background-color:#f00;
  17.     position: relative;
  18. }
  19.  
  20. .abs {
  21.     background-color:#00f;
  22.     position: absolute;
  23. }
  24. </style>
  25.  
  26. <div class="container">
  27. <div class="rel box">1</div>
  28. <div class="abs box">2</div>
  29. </div>
  30.  
Mar 31 '08 #1
Share this Question
Share on Google+
8 Replies


P: 2
Hello,

Do you really need position:absolute; in the second div?
Mar 31 '08 #2

drhowarddrfine
Expert 5K+
P: 7,435
An absolutely positioned element is removed from the normal flow and rises up the stacking order to the "content" of the next positioned element.
Mar 31 '08 #3

P: 7
So is this a case when IE and Safari are handling positioning incorrectly? Does this mean I need to use some browser specific code to handle this properly in all cases?

Here is more detailed example of what I am trying to accomplish. The blue box is meant to be an overlay. In all cases, I would like the blue box to cover the lower red box, when it is visible (and not cover the gap). Sometimes the top red box is not there (as you can simulate by clicking the toggle button on the bottom). The heights of the red boxes are dynamic, as simulated by the example.

Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript">
  2.     function toggleDisplay(me){
  3.         if (document.getElementById(me).style.display=="none"){
  4.             document.getElementById(me).style.display="block";
  5.         } else {
  6.             document.getElementById(me).style.display="none";
  7.         }
  8.     }
  9.     function generateRandomWords() {
  10.         var str = "";
  11.         var numWords = 5 + parseInt(Math.random() * 15);
  12.         while (--numWords >= 0) str += "random words ";
  13.         document.write(str);
  14.     }
  15. </script>
  16. <style>
  17. .container {
  18.     width:300px;
  19.     border: 1px solid #0f0;
  20. }
  21.  
  22. .box {
  23.     width: 200px;
  24.     border: 1px solid #000;
  25.     margin-bottom: 10px;
  26. }
  27.  
  28. .abs {
  29.     z-index:1000;
  30.     background-color:#00f;
  31.     position: absolute;
  32. }
  33.  
  34. .rel {
  35.     background-color:#f00;
  36.     position: relative;
  37. }
  38. </style>
  39.  
  40. <button onclick="toggleDisplay('bluebox')" />toggle blue box</button>
  41. <div class="container">
  42. <div class="rel box" id="topredbox">Top red box<br />The red boxes are of variable size.<br /><script>generateRandomWords();</script></div>
  43. <div class="abs box" id="bluebox" style="display: none;">This should just cover the top part of lower box. Not the gap too.<br /><br /></div>
  44. <div class="rel box">Bottom red box<br /><script>generateRandomWords();</script></div>
  45. </div>
  46. <button onclick="toggleDisplay('topredbox')" />toggle top red box</button>
  47.  
  48.  
Mar 31 '08 #4

P: 7
drhowarddrfine, point well taken, but then why does the sample code I provided work as expected when changing the margin-bottom references to margin-top?

This seems like inconsistent behavior to me...
Mar 31 '08 #5

drhowarddrfine
Expert 5K+
P: 7,435
Today is opening day in baseball so I'm late getting back to this.

Generally, the only "cross browser" issues are between IE and the rest of the world. Always write your markup for the rest of the world because IE is flat out wrong almost every time.

I'll look at this in a bit (since the game is in rain delay :) )
Mar 31 '08 #6

drhowarddrfine
Expert 5K+
P: 7,435
The problem is partly due to the invalid markup. You want to always keep in mind that the absolutely positioned element will go all over the place until it finds that next positioned element. In order to contain that element, you'll see I set one of the boxes to 'position:relative'.

In your javascript, there is no such thing as 'language=Javascript', and every script/style must be set as 'type="text/......" Note my changes.

I didn't finish this completely cause I have something to do but perhaps this will give you a start. I think the top box might be getting toggled properly.

EDIT: Well, no it's not. Need a second.
Mar 31 '08 #7

drhowarddrfine
Expert 5K+
P: 7,435
Perhaps the easiest thing to do is just add 10px to the top of the blue box. An alternative is to wrap the red boxes in another div and position them to contain the blue box. Then just insert the blue box into those.

If it wasn't the end of the day I could probably think of something simpler/better.
Mar 31 '08 #8

P: 7
drhowarddrfine, I really appreciate your assistance.

Your first suggestion of adding the 10px to the top of the blue box doesn't work for me because for the design of the page I need the top of the blue box to be flush with the green outline of the container DIV when the top red box is not there. (You can see that case if you click each toggle button once).

But your second suggestion is simple and works like a charm.

So, here is the full (working) cross-browser solution for anyone who might find it useful:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.     function toggleDisplay(me){
  3.         if (document.getElementById(me).style.display=="none"){
  4.             document.getElementById(me).style.display="block";
  5.         } else {
  6.             document.getElementById(me).style.display="none";
  7.         }
  8.     }
  9.     function generateRandomWords() {
  10.         var str = "";
  11.         var numWords = 5 + parseInt(Math.random() * 15);
  12.         while (--numWords >= 0) str += "random words ";
  13.         document.write(str);
  14.     }
  15. </script>
  16. <style>
  17. .container {
  18.     width:300px;
  19.     border: 1px solid #0f0;
  20. }
  21.  
  22. .box {
  23.     width: 200px;
  24.     border: 1px solid #000;
  25.     margin-bottom: 10px;
  26. }
  27.  
  28. .boxwrapper {
  29.     border: 1px solid #f0f;
  30. }
  31.  
  32. .abs {
  33.     z-index:1000;
  34.     background-color:#00f;
  35.     position: absolute;
  36.     height: 200px;
  37. }
  38.  
  39. .rel {
  40.     background-color:#f00;
  41.     position: relative;
  42. }
  43. </style>
  44.  
  45. <button onclick="toggleDisplay('bluebox')" />toggle blue box</button>
  46. <div class="container">
  47.  
  48. <div class="rel box" id="topredbox">Top red box<br />The red boxes are of variable size.<br /><script type="text/javascript">generateRandomWords();</script></div>
  49.  
  50. <div class="boxwrapper">
  51. <div class="abs box" id="bluebox" style="display: none;">This should just cover the top part of lower box. Not the gap too.<br /><br /></div>
  52. <div class="rel box">Bottom red box<br /><script type="text/javascript">generateRandomWords();</script></div>
  53. </div>
  54.  
  55. <div class="rel box">Extra red box<br />The red boxes are of variable size.<br /><script type="text/javascript">generateRandomWords();</script></div>
  56.  
  57. </div>
  58. <button onclick="toggleDisplay('topredbox')" />toggle top red box</button>
  59.  
Apr 1 '08 #9

Post your reply

Sign in to post your reply or Sign up for a free account.