SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2002
    Location
    Madison, WI
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    #1: 3 column weirdness, #2 Netscape height problem

    Hi,

    #1 Our new site, www.wisconsinsbdc.org, looks fine in IE 6, Netscape 7/Moz 1.x. However, on my boss' machine, the third column (Entrepreneurial Training Program) does not float left against the second one, it wraps all the way below the first two columns. The style sheet is at /wisconsinsbdc2004_style.css.
    See attachment for the problem. Ignore the bad colors, its a crappy screen cap.

    #2 A site I'm developing has a problem in Netscape 7/Mozilla. How do I set the height to something automatic, so I don't get things overlapping the bottom of the #frame div? www.accessglobe.com/hipice/beaded.shtml The style sheet is at /hipice_style.css.

    Thanks,

    Ben
    Attached Images Attached Images
    :::::::::::::::::::::::::::::::::::::::::::::::::::
    Versa Studio
    ExpressionEngine experts
    bas (at) versa studio dot com

  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)
    Hi,

    Problem 1) You didn't say what machine you were having problems with ?? It looks ok on the browsers I checked (ie5 -6 , firefox, mozilla).

    Problem 2) The reason for the content breaking out of the div is mainly because you have set a height of 500px for the div. When content is greater than 500px mozilla will just let the content fall out of the bottom. On the other hand IE gets it wrong and extends the container even though it shouldn't.

    The answer is just not to set a height at all and let the container expand with content. If, however you want it to be 500px high and then expand with content you will need to use the following css.

    Code:
    #frame {
     width:598px;
     margin:0px auto;
     text-align:left;
     padding:0px;
     border:1px solid #939392;
     background-color:#42272B;
     color:#42272B;
     height:500px;
     min-height:500px;
     }
    html>body #frame {height:auto} 
    
    This gives mozilla a min-height (which ie doesn't understand and then counteracts the height 500px with height auto instead. IE still gets 500px which it expands anyway.

    You will also need to add a clear statemtn before the closing frame div in order to keep pushing it down because floated content will float out of containers unless cleared.

    Code:
      <!-- end #main -->
      <br style="clear:both" />
    </div>
    <!-- end #frame -->
    </body>
    Hope that helps.

    Paul

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2002
    Location
    Madison, WI
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Re: problem #1, my boss is using IE 5.5. I cannot replicate the error on other machines with IE.

    Thanks for the tip on #2, I will try that.

    -Ben
    :::::::::::::::::::::::::::::::::::::::::::::::::::
    Versa Studio
    ExpressionEngine experts
    bas (at) versa studio dot com

  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)
    Re: problem #1, my boss is using IE 5.5
    I've tried ie5 and ie 5.5. and I can't replicate the problem (although there are some box model differences in those browsers).

    Your not talking about a mac ie are you ?

    paul

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2002
    Location
    Madison, WI
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    No, its just IE 5.5 on a PC running Win2K.

    No one has replicated the issue elsewhere. Her text size is Medium, though bumping it up or down doesn't make a difference.
    :::::::::::::::::::::::::::::::::::::::::::::::::::
    Versa Studio
    ExpressionEngine experts
    bas (at) versa studio dot com

  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)
    You could try reducing the dimensions of the columns a bit to see if that is the problem but without testing on a machine that shows the problem it's going to be very difficult to offer any real help.

    If the column is wrapping below then it seems likely that the browser thinks somethings too big somewhere so you may need to try making some changes and then testing on the machine that shows the problems in order to find out where the problem lies.

    Sorry I can't offer more specific help but it looks like trial and error

    The way to solve bugs is to strip the page down until the problem disappears and then you can find out what causes it and then produce a solution. Of course this method needs to be done on the machine thats causing the problem if all others seem to be ok.

    Paul

  7. #7
    SitePoint Zealot
    Join Date
    Oct 2002
    Location
    Madison, WI
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,


    Thanks, a little tweaking and it works. I thought that CSS-based design would not involve so many hacks like table-based design used to, but its the same old thing. This design is totally hosed in IE 5.x for Mac.

    Cheers,

    Ben
    :::::::::::::::::::::::::::::::::::::::::::::::::::
    Versa Studio
    ExpressionEngine experts
    bas (at) versa studio dot com


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
  •