1

I'm having a weird vertical spacing bug in chrome/safari that I missed when setting it up in firefox. It seems some vertical spacing rule is being ignored by one or the other. I've gone through the code but am at a loss - pointing me in the right direction would be highly appreciated - many thanks in advance.

The web site is about teaching kids the importance of eating healthy, the URL is: http://ourgrowingplace.us/

Bob
  • 11
  • 1
  • 1
    I hope I'm not the only one who sees a little irony in a site about child nutrition with the word "growing" in its name. Child obesity in the US being what it is, and all. No offense meant, it just made me snicker. – eyelidlessness Jan 16 '11 at 18:29

3 Answers3

2

If you want to position divs next to each other like you're trying to do, use float:

#left {
  float: left;
  width: 100px;
}
#right {
  float: right;
  width: 50px;
}
.clear {
  clear: both;
}

I also added a .clear class: make sure you clear the floats so any content that follows is positioned underneath these two floats:

<div id="left">left content</div>
<div id="right">right content</div>
<div class="clear"></div>

Also, you can't use left/right/top/bottom on relatively position elements. Use them on an absolute positioned element instead by placing the position:absolute element within a position:relative element. In this case you shouldn't be using this though.

And try to avoid using margin to "push" an element to a certain spot. Now you're adding a negative top-margin to get it to go up. But if you're doing that it usually means you should try another layout setup.

Alec
  • 9,000
  • 9
  • 39
  • 43
  • You absolutely can use `left` etc on elements with `position: relative`. It's not terribly useful except in edge cases, but it does have an effect. You can't use them on `position: static` elements, which is the default, however. – eyelidlessness Jan 16 '11 at 18:27
  • Yes, I am very embarrassed by the need to use negative margins. This is because some changes in the design forced me to start using z-levels which I admittedly never used before and seem to have made a mess of. I thought it was a clever fix but apparently amounts to using chewing gum to fix furniture. – Bob Jan 16 '11 at 18:35
1

I suggest you first make sure that your page conforms to the specification you used in DTD, the page on the address you specified is not valid XHTML 1.0 Transitional, nor does it match the specified character set (iso-88559-1). This effectively means that rendering results could be unpredictable and vary among browsers.

Dennis Kreminsky
  • 2,117
  • 15
  • 23
0

I don't know what vertical-spacing rule you're talking about, but the proper way to set the spacing of elements is through margins.

margin:top right bottom left;
  • Thanks for the quick response, the bug Im referring to is how in chrome/safari everything seems to shift up for no apparent reason. I can fix some of this with margin but then firefox renders it incorrectly. – Bob Jan 16 '11 at 18:03
  • I am not exactly sure what the problem is caused by, then. The only thing that seemed out of place in your stylesheet was this little bit: Â Â Â Â However, that wouldn't cause any problems to my knowledge. Your site looks nice, by the way. With a fixed-width layout like that, are you sure you don't want to use absolute position properties? By the way, I think Alec has the answer. –  Jan 16 '11 at 18:13
  • Thanks for the kind words. W3C css validator also points out these weird     I'll have to look where they came from. It seems some redesigning is needed to fix the layout. – Bob Jan 16 '11 at 18:37
  • True that. Remember, you can always resort to absolute positioning in pixels. There is no possible way for that to go wrong so long as you constrain the size of the text. –  Jan 16 '11 at 18:39