SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    .NET inside archigamer's Avatar
    Join Date
    Jan 2002
    Location
    Strongsville OH
    Posts
    1,534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE/Gecko CSS conflict

    i have the following CSS declartion in my style sheet

    Code:
    #leftBar p
    {
    	margin-left: 10%;
    	position: relative;
    	padding: 0px;
    	margin-top: 10%;
    	margin-bottom: 10%;
    	margin-right: 0%;
    }
    The CSS looks great in NS/FF etc. However in Internet Explorer instead of closing the gap between paragraphs it widens it. can anyone explain why?
    Web Finesse Studios
    Professional, business oriented web hosting and development.

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Lancs, England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by archigamer
    i have the following CSS declartion in my style sheet

    Code:
    #leftBar p
    {
    	margin-left: 10%;
    	position: relative;
    	padding: 0px;
    	margin-top: 10%;
    	margin-bottom: 10%;
    	margin-right: 0%;
    }
    The CSS looks great in NS/FF etc. However in Internet Explorer instead of closing the gap between paragraphs it widens it. can anyone explain why?
    By assigning a value of 10% to a margin, it will take the value of 10% of the containing block it is in. So if you assign margin-top(or bottom): 10%; to an element which has a containing block with a height of 1000px, then the top margin (or bottom) for that element will be 100px!! which will be most undesirable. The same can be said for margin-left or right taking a value of 10% of the containing block width.

    The best way to do it is by using the values of em, px or pt. The default vertical distance between paragraphs is 2em so if i want to decrease the distance between them i just us a value lower than that.

    If you look at
    http://www.lincoln-oxford.com/users/...y/3colexample/
    i have shown 3 columns with different margin-bottom's. The green column has the default paragraph gap of 2em, then red has an assigned margin-bottom of 0.5em and then centre column has the margin-bottom assigned to 10% as you said which gives a massive gap!

    Hope this helps!
    Nick

    ps. you can assign margin-top, margin-right, margin-bottom and margin-left all at once using margin.

    e.g.
    p {
    margin: 0 10px 20px 40px
    }

    assigns margin-top: 0, margin-right: 10px, margin-bottom: 20px and margin-left:40px to the paragraph tag

  3. #3
    .NET inside archigamer's Avatar
    Join Date
    Jan 2002
    Location
    Strongsville OH
    Posts
    1,534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks using ems works great.

    as far as the short hand, i am aware of it, it is just not my style though.
    Web Finesse Studios
    Professional, business oriented web hosting and development.


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
  •