SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: i.e 5.1 borders

  1. #1
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    i.e 5.1 borders

    I'm hitting few very tiny but annoying problems:

    1) in I.E 5.1 submenu has extra 14px bottom padding. NOT good!
    2) the vertical line b/w submenu and text has different locaiton in Firefox and IE. It's b/c I applied such code to get the text even in IE. You can also see it in relations to the title.

    Code:
    #content {
    	padding: 0 40px 5px 20px;
    	margin-right: 20px;
    	margin-left: 235px;
    	margin-bottom: 15px;
    	border-left: 1px solid #B2B2B2;
    }
    * html #content {
    	height: 1%;
      	margin-left: 235px;
    	}
    any help?
    janis

    link : http://geliu-fabrikas.emotion.lt/index_new.html
    layout css : http://geliu-fabrikas.emotion.lt/layout.css

  2. #2
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's not as big a problem as you might think, because saying you're having problems with IE5.1 is like saying you're having problems with a 1928 model A Ford.

    It's pretty much an obsolete browser, so unless you're running a site deticated to IE5.1, you won't be loosing much traffic if you decide to not code for IE5.1

    I can't remember what the exact stats are, but IE5.1 has something like 0.001 % market share, and loosing ground at the speed of a cable connection.

  3. #3
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    true, but if there is a way that it can also show in IE 5.1 ...why not!? I'm just picky and like to get my layout pixel-perfect is most of browsers LOL

    anyhow, then any suggestion on the second point that differs b/w Firefox and IE?

  4. #4
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure, but what's this do?

    * html #menu_links {margin-right:122px;height:49px;he\ight:32px;}

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

    This will fix ie5 and sort out the 3 pixel jog on the float as well.
    Code:
    /* mac hide \*/
    * html #content{margin-left:232px}
    * html #submenu{margin-right:-3px;} 
    * html ul#navlist li a,ul#navlist li{height:1%}
    /* end hide */
    Hope that helps.

  6. #6
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    my goodness! it's just great!

    btw...note to DocType...that code is more a hack for the menu. b/c it has height and padding...well...for IE you need to hack it.

  7. #7
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes you sometimes need to hack for IE; However, since the "* html" hack feeds the rule to IE only, theirs no need for the "he\ight" hack within the "* html hack".

    When IE encounters the \ it stops parsing code, so it'll skip that part of the rule, and begin parsing again after it encounters a semi-colan ;

    Other browsers ignore the backslash and parse that part of the rule anyway, which is what makes the he\ight hack work.

    So theirs no need to place the he\ight hack inside a rule that only IE gets.

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    he\ight gived IE6 a different setting than older versions of IE.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As Kravvitz said above the backslash is a way of separating ie5 and 5.5. for ie6. IE6 parses the backslash with no problems but ie5 and ie5.5. choke on it and go to the next line. This makes it useful for the box hack where ie5 and 5,5, need different sizes from ie6 when in standards mode.

  10. #10
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I never thought about it before, but that makes sense, well in an IE sort of way.

  11. #11
    SitePoint Zealot janislanka's Avatar
    Join Date
    Sep 2004
    Location
    Lithuania
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so, after this discussion, can sombody tell me which is the correct code that had to be used?

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

    As your page is in standards mode the then the code bleow is correct.

    Code:
    #menu_links {
    height: 32px;
    background-image: url(bg_menu.gif);
    background-repeat: repeat-x;
    background-position: left;
    padding: 17px 0 0 0;
    margin-right: 125px;
    background-color: #C3C3C2;
    text-align: center;
    }
    * html #menu_links {
    margin-right:122px;/* all ie gets this*/
    height:49px;/*ie5 and 5.5. get this*/
    he\ight:32px;/* ie6 gets this*/
    }
    The faq on the broken box model goes into detail on this


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
  •