...

View Full Version : Margin substitutes



farmerjeffe2
06-03-2007, 11:07 PM
my site: http://www.underoathfans.net/thealmost

Hi, I am having problems with margins. I am using an automated News service and i have the following code to affect the gap between each bit of news:


style="width:400px; margin-bottom:20px; text-align: left; background-color: #261e06;"

its wrapped in divs for each news.

In Firefox the margin isn't that great at all but in iexplorer the margin is relatively large.

How would i allow for browser compatibility?

P.s. Also If i am using div layers how would i keep text close together without using tables? For example, the gap between "site stats" and "webmaster: adam" is great.

Thank you

Adam

koyama
06-03-2007, 11:32 PM
In Firefox the margin isn't that great at all but in iexplorer the margin is relatively large.

How would i allow for browser compatibility?

That's because you have some floats at the bottom of that div with a bottom margin. And floats don't automatically expand the container they are in. Only IE does that due to a bug whenever hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html) is triggered. (This still happens in IE7).

You need to ensure float containment. For example you can add overflow:hidden (http://www.quirksmode.org/css/clearing.html) to the style rules of the container.

Really you shouldn't be using those inline styles. Use classes and id's for the elements and put your style rules in a style sheet.

farmerjeffe2
06-03-2007, 11:41 PM
Ah thanks! I will try those things! But i cant add the styles to a style sheet for the news as each element is edited through the control panel of the news managment system online and its quite confusing for someone like me.
would putting each paragraph of text i want in div containers work for making things tighter?

ie...



<div class="sidebar">
<div class="title">title1</div>
<div class="textbox">
some text
</div>
<div class="title">title2</div>
<div class="textbox">
some more text
</div>
<div class="title">title3</div>
<div class="textbox">
more text
</div>
<div class="title">title4</div>
<div class="textbox">
more text
</div>
</div>


or am i completely incorrect? thanks, adam

farmerjeffe2
06-03-2007, 11:53 PM
would just like to add tht the overflow:hidden worked! thanks. and also would the code i pasted above be acceptable or should i do something else?

thanks

adam

koyama
06-04-2007, 12:46 AM
For example, the gap between "site stats" and "webmaster: adam" is great.
That gap is coming from the margins of the h2 element. To remove it just eliminate its margins: h2 {margin: 0}

I'm not sure if this is what you are asking about in your last post.

farmerjeffe2
06-04-2007, 01:39 AM
hey thanks that worked. Thanks for the help! =]



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum