WEB need some IE help please

Discussion in 'OT Technology' started by themolsen, Dec 12, 2008.

  1. themolsen

    themolsen New Member

    Joined:
    Sep 29, 2006
    Messages:
    7,414
    Likes Received:
    0
    Location:
    Jacksonville, FL
    I'm having trouble getting a little white bar to be small enough in the header of a site I'm working on. It's actually a header module for Joomla, but I just want it to be a thin white bar so I set the minimum height to 7px and put nothing in the module. As usual, it looks fine in FF but not in IE.

    What did I miss?

    http://www.mattjolsen.com/btci


    Firefox: http://www.otuploads.com/images/8g3uoilecfj9epgy6f.png

    IE6/7: http://www.otuploads.com/images/323qgvg93o4xeiytvh83.png

    I can get around in CSS pretty well, but I always end up running into little quirks like this

    THANKS A LOT:wiggle:

    (lolz oh noes I'm using a CMS to build a site! that's not what a CMS is for! :hsugh:)
     
    Last edited: Dec 12, 2008
  2. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,925
    Likes Received:
    11
    Location:
    Los Angeles
    The min-height attributed isn't supported in IE. You'll need to use height or a hack.
     
  3. themolsen

    themolsen New Member

    Joined:
    Sep 29, 2006
    Messages:
    7,414
    Likes Received:
    0
    Location:
    Jacksonville, FL
    ahhhh I looked over what tags were supported in IE... I must have missed that. thanks a lot
     
  4. themolsen

    themolsen New Member

    Joined:
    Sep 29, 2006
    Messages:
    7,414
    Likes Received:
    0
    Location:
    Jacksonville, FL
    hmm, I change it to "height:7px;" but the problem is still there

    for that header, there's
    Code:
    div#page-headerbar div.page-headerbar-middle {     
            background: url(../images/white/bg_white_middle.jpg) 50% 0 repeat-y;
            height: 7px;
    }
    in the layout.css file
     
  5. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,925
    Likes Received:
    11
    Location:
    Los Angeles
    How come there are three divs to accomplish that 7px height space? Try minimizing the divitus and see if it works.

    Code:
    div#page-headerbar {
            height: 7px;
    	background: #f1f1f1;
    }
    
    Code:
    	<div id="page-headerbar">
    	
    	</div>
    
     
  6. themolsen

    themolsen New Member

    Joined:
    Sep 29, 2006
    Messages:
    7,414
    Likes Received:
    0
    Location:
    Jacksonville, FL
    Ok, in the index.php file, I'm down to just
    Code:
    <div id="page-headerbar">
            </div>
    and the layout.css is down to
    Code:
    div#page-headerbar {
            background: #ffffff;
            height: 7px;
    }
    I just eliminated the headerbar-middle completely because I'm not using it. Still, the IE issue remains, but the bar is definitely shorter now. not quite 7px yet

    there's
    Code:
    div#headerbar {
        width: auto;  
        padding: 20px 10px 20px 10px;
        clear: both;  
        overflow: hidden;
    }
    in the layout.css also. is this part of the problem?

    thanks
     
  7. themolsen

    themolsen New Member

    Joined:
    Sep 29, 2006
    Messages:
    7,414
    Likes Received:
    0
    Location:
    Jacksonville, FL
    any more thoughts?
     
  8. Ender0910

    Ender0910 woot!

    Joined:
    Jun 1, 2004
    Messages:
    3,039
    Likes Received:
    0
    Location:
    Redmond/Bay Area
    I can't reproduce this on IE8 in or out of compatability mode, so I'm just guessing here.

    Try removing the padding from that element or switch it to margin.
     
  9. themolsen

    themolsen New Member

    Joined:
    Sep 29, 2006
    Messages:
    7,414
    Likes Received:
    0
    Location:
    Jacksonville, FL
    ok, the problem is resolved to my satisfaction, thanks a ton.

    now I need help somewhere else in the same menu and site

    www.mattjolsen.com/btci

    notice the subtitles under the main menu items. in IE, the bottom legs of the "p" and "g" in "fontpage & news" gets cut off. I've tried moving the menu text higher up because I thought the shadow image at the bottom of the header was layering over the text, but it still gets cut off.

    any ideas? or should I just come up with a different subtitle like "about BTCI"
     
  10. Ender0910

    Ender0910 woot!

    Joined:
    Jun 1, 2004
    Messages:
    3,039
    Likes Received:
    0
    Location:
    Redmond/Bay Area
    If you look at the class "sub", you'll see that the font size is set to 65% and the line-height is set to 10px. This mixing of measurements can cause those sorts of issues (although I'm not 100% sure if this is what's causing it).

    Try changing the line-height to 1 (line-height: 1; no px or % or anything). This will make the line-height match the height of the font.

    edit: or you can try changing the font-size to 10px; The main reason to use % based font sizes is to make font-scaling work. Now that most modern browsers use full page zooming, font scaling is only really relevant for IE6 and FF2 and earlier.
     
  11. themolsen

    themolsen New Member

    Joined:
    Sep 29, 2006
    Messages:
    7,414
    Likes Received:
    0
    Location:
    Jacksonville, FL
    !!! doooood you rock. thanks so much

    -edit- it was the line-height thing that was upsetting IE
     
    Last edited: Dec 18, 2008
  12. prototism

    prototism Guest

    Noice design btw.

    :bowdown:
     
  13. themolsen

    themolsen New Member

    Joined:
    Sep 29, 2006
    Messages:
    7,414
    Likes Received:
    0
    Location:
    Jacksonville, FL

Share This Page