SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Blaine. WA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying again - erratic left column in MSIE

    I haven't rec'd any responses to my first post and am wondering if everyone else who read it is as stumped as I am. Have been searching many sites, reading of known bugs and workarounds, etc., and still not finding any answers. If anyone has a clue what is causing this, or can point me to someone who may be able to help, I'd be forever grateful!

    It's a three-column site with text links on the left column. All is well in other browsers, but in MSIE, when the browser window is shrunk down, the part of the left column that has text on it shoots over top of the middle column, and stays there, even when the window is maximized. Once refreshed, it goes back to normal. And, this only happens to some of the people some of the time, but even some of the people is too many.

    The page is here and I'll certainly re-post the CSS if anyone wants to see it.

    Thanks for any help, my head is getting quite sore from beating it against this brick wall!
    Peace.
    rt

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd be happy to help, but I think this is one of Paul's layouts and I still haven't got my head around them... I don't know what all the negative margins are about. If you'd like to know how I'd do it - have a look here.

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2004
    Location
    Chelsea, MA-USA
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I took a very cursory look at your style sheet and noted that you are using the property "min-width." This may be the cause of your problem. Neither "min-width," or its related property "max-width," are supported by IE. There are a couple of work-arounds. You can put the document in quirks mode, and feed IE its proprietary " expressions" for those properties via an ie only style sheet using conditional comments. Or use js to feed those properties.

  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,

    Sorry I missed your post first time around

    This layout isn't one of mine its one of Doug Livingstones but has similar properties.

    In ie6 i see the left menu only jump only when the screen is resized smaller and then top header right floats drops down to avoid the logo. At this stage the page reflows and ie6 looses its positioning for an instant.

    If you resize smaller or larger by 1 pixel the page springs back to normal. I don't really think this is much of an issue unless you are seeing some sort of other behaviour.

    The simple solution is to stop the header from dropping by making the logo position absolute as below.

    Code:
    #header img.logo {
    position:absolute;
    left:0;
    top:0;
    height:150px;
    }
    Now the right header floats slides under the logo and the page is fine. A much better effect I think than the header splitting down.

    You also have a horizontal scrollbar cause by extra padding in a 100% footer so take out the padding or place it on an inner element. Or take out the 100% as i don't think you need it anyway.

    Code:
    #footer{
    height:50px; 
    width:100%; 
    background-color:#F6981C; 
    font-size: .8em;
    font-weight: bold;
    color: white;
    text-align: center;
    border-top: 2px solid red; 
    padding: .5em 0;
    }
    If you want an alternative solution then look at my 3 col demo or for a simpler solution use bg images for the columns as in bon rouges example

    Hope that helps.

    Paul

    Edit:


    You could also use an ie expression to force a min-width (as suggested by Willneea above) on ie so that the layout doesn't get small enough to break. I can give you the code for that also if you want.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Blaine. WA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Trying again - it works!!

    Bless you my friend, it works and you make it look so simple! Thank you!!

    I was not getting a horizontal scrollbar so am glad you pointed that out, too.

    And yes, if you have time, I'd be interested in the code to force a min-width, I was unaware that it's not recognized by IE (thank you, too, willneea!) But does it come with instructions on how to use it?

    Thank you again!
    Peace.
    rt

  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,

    Here is an ie expression that imitates min-width. Expressions aren't valid css and olnly apply to ie however they will do no harm. Js needs to be working for this to work.

    Code:
    <link rel="stylesheet" href="http://www.angelponds.com/pflag2.css" type="text/css" >
    <!--[if IE]>
    <style type="text/css">
    #pagewidth {width:expression( documentElement.clientWidth < 710 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 710 ? "710" : "auto") : "710px") : "auto" );}
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="pagewidth" >
    The expression is put in ie's conditional comments to hide it but the actual style could go in the stylesheet if you wanted although it will stop it validating.

    Paul

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Blaine. WA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying again - IE Expression

    Thank you, Paul.

    You said "The expression is put in ie's conditional comments to hide it" - I don't know what "conditional comments" means!

    Do I add this code to my existing code, or replace what's already in the head? If I put the style in a style sheet, do I still add the remaining code to the head in my HTML?

    I hate sounding this stupid, but thanks to you and people like you who are willing to help, at least I'm learning! You all have my gratitude.
    Peace.
    rt

  8. #8
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do like Paul's done there - just add it to the head (just before you close the head.
    This will only be read by IE. It's kind of like javascript but embedded into css. It's conditional in the sense that it uses 'if'. That is, 'if IE'...
    I think if you put it in your css instead, it won't validate - putting it in conditional comments like this gives your page a clean bill of health.

    I hope this helps.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    Blaine. WA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying again - thank you!

    Thank you, BonRouge, it's there now, doing whatever it is it does ;-)
    I appreciate your help!
    Peace.
    rt


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
  •