SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru okrogius's Avatar
    Join Date
    Mar 2002
    Location
    US
    Posts
    622
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Spacing (margin?) issue in IE

    Currently working on a full CSS based layout. The site looks nice in Firefox, but whenever rendered in IE it seems to receive significantly more spacing. As if all display: block; items just got a double top/bottom margin sort of.

    The difference is notable on all pages, but particularly on pages with forms. Examples:
    http://www.cgshock.com/temp1/spacing-firefox.jpg (firefox, as intended)
    http://www.cgshock.com/temp1/spacing-ie.jpg (ie - )

    You can see the source of that page at http://www.cgshock.com/temp1/spacing-source.txt

    Primary stylesheet is at http://www.cgshock.com/assets/styles/main.css
    There are two alternate sheets, but they do nothing but change font-sizes.

    I'd greatly appreciate any help with this.
    Last edited by okrogius; Aug 29, 2004 at 18:33.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Haven't had time to look at your page but there's a few things you can try first

    All elements have default margins (and sometimes padding) and its up to you to control them explicitly as browsers vary greatly in the amount they apply.

    IE adds large margins around its forms and you can set all browsers on an even level by specifying.
    Code:
    form {margin:0;padding:0}
    You also gave to control elements such as <p> and <h1> h2 etc.... These have greatly differing defaults between browsers.

    Just set them to zero or to the exact amount of margin as required.

    If this doesn't cure it then post again and I will look later.

    Paul

    Edit:


    Had a quick look and this should help.
    Code:
    form {margin:0;padding:0}
    form p {margin:0}

  3. #3
    PHP Otaku Gibb's Avatar
    Join Date
    Jul 2004
    Location
    Texas
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm trying to get this to work with div tags and it's not removing the newline after the /div. I have two buttons at the bottom of a page for "Download" and "Print". I want them to be on the same line, and i have a specific code of CSS block for the buttons. Code looks like this:
    HTML Code:
    <div class="btnBorder">
    <input type="submit" class="hoverBtn" value="Download" ...etc />
    </div>
    <div class="btnBorder">
    <input type="submit" class="hoverBtn" value="Print" ...etc />
    </div>
    the btnBorder class just puts a 2px solid border around the buttons. The above code will put the Print btn on a newline tho, and i need them to be on the same line. I've tried putting margin: 0; padding: 0; into my CSS for DIV, as well as in my btnBorder and hoverBtn classes, but i still get the newline.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    A div is a block level element and will insert a newline automatically. That's its job so thats what it does

    Why don't you just put them on the same line in the same div?
    Code:
    <div class="btnBorder">
    <input type="submit" class="hoverBtn" value="Download" ...etc />
    <input type="submit" class="hoverBtn" value="Print" ...etc />
    </div
    Alternatively if you have them styled in some other way as well then you can add display:inline to the class or add float:left to the styles.

    Paul

  5. #5
    SitePoint Guru okrogius's Avatar
    Join Date
    Mar 2002
    Location
    US
    Posts
    622
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, your fix worked wonderfully . Rather unfortunate that there is no standard "defualt" browser css settings though .

    On a related note it seems I have more margin/padding issues. This time the issue in un-ordered lists on a sidebar (right of the screenshots). I tried alterint margin/padding for both the ul and li items, but it didn't seem to produce much results. If you can help that would be much appreciated.

    Source: http://www.cgshock.com/temp1/spacing-source2.txt
    Picture in firefox: http://www.cgshock.com/temp1/review.jpg
    Picture in IE: http://www.cgshock.com/temp1/review-ie.jpg
    (Note things in the 3rd column sidebar, under "Game Info". <li> items appear to have very large padding or margin values set, yet I tried altering that as I mentioned above and it didn't seem to change much) [Ignore the <h3> size discrepancy, I fixed that already.]

    Thanks

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Agaian this is margin/padding issues. Mozilla uses padding for its bullet spacing and ie use margin so you need to set both.

    This will collapse all the spaces in the list.
    Code:
    ul.nav, ul.nav li {margin:0;padding:0;}
    Now you can just set the exact spacing that you require.

    Paul


Bookmarks

Posting Permissions

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