Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Padding/Margin-top/spacing Issue

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #30131
    tannercampbell
    Participant

    http://shorelinefg.net/blog

    This is a first attempt designing a WordPress blog from scratch … and wouldn’t you know it, IE7 is f*cking things up. Looks great in Safari, Chrome, FF and IE8 … but in IE7 and in IE8’s ‘compatibility mode’, there is a giant gap between the slider and the content.

    I’ve tried using the !important trick to specify different margin-top and top values. I’ve tried absolute positioning and relative positioning. I’ve tried applying the aforementioned to an external css sheet and within the head.php AND in the DIV tag itself via the style attribute.

    I can’t get it to work. I’m at the point where I might sell my computer, buy a plane ticket and fly to Microsoft HQ just to punch someone in the dick.

    Help please :(

    #80750
    shagzdesign
    Member

    Is it doubling them? If it’s just doubling the space which is common for IE, if you put an underscore and cut the margin in half, IE will interpret it as a typo and make the change, whereas modern browsers will ignore it, what I mean is this

    margin-top: 20px;
    _margin-top: 10px; /* half of original margin for ie7 */

    #80714
    shagzdesign
    Member

    .main_view {
    float: left;
    position: relative;
    overflow: hidden;
    margin-bottom: -300px;

    make this change in your style.css and it works fine, I only checked this with IE7 and IE8 so be sure to check all other browsers of course.

    #80720
    jamygolden
    Member

    Try validating your site. It’s generally a good place to start when browsers are giving troubles.

    I must admit though, I don’t think that gap in IE 7 is a problem at all. It took me quite a while to realize what you were talking about lol. Browsers won’t always display things the same way, and when it comes to IE, be thankful that is only “problem” :p

    #80658
    shagzdesign
    Member

    IE7 was adding a default margin to each div you had inside the mainview div, which was adding a lot of bottom margin, so using the -300 took that margin away for all browsers, adding just that would have caused none of your images to show, so we add the overflow hidden to ensure that the float contains all the images, in the future it’s always a good idea to use a reset.css, you can get them from several places and they will ensure that you have a good starting point for all browsers, however implementing a reset.css once everything is coded up can end up causing more pain and work when it was a simple fix on one div. If you need a reset.css I use blueprint for a lot of designs.

    http://www.blueprintcss.org/

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.