Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Margin substitutes

    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:

    Code:
    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

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by farmerjeffe2 View Post
    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 is triggered. (This still happens in IE7).

    You need to ensure float containment. For example you can add overflow:hidden 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.

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

    Code:
    <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

  • #4
    New Coder
    Join Date
    May 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by farmerjeffe2 View Post
    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.

  • #6
    New Coder
    Join Date
    May 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hey thanks that worked. Thanks for the help! =]


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •