SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    min-height problems

    I cannot get the min-height property to work for a CSS class. Here is the css:

    HTML Code:
    td.calendar .noavail { font-family: verdana; font-size: 10px; background-color: #C5C5C5; min-height: 100px; height: auto; }
    I have this attached to table td's, but it isn't expanding the height to 100 pixels. I'm confused as to what the issue is. It doesn't work for either IE or Moz.

    Any help would be greatly appreciated.

  2. #2
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    min-height isn't supported by Internet Explorer at all.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  3. #3
    SitePoint Zealot cmorbutts's Avatar
    Join Date
    Apr 2002
    Location
    Sydney, Australia
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  4. #4
    SitePoint Zealot cmorbutts's Avatar
    Join Date
    Apr 2002
    Location
    Sydney, Australia
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was about to say that min-height wasn't supported by IE as well but check out the MSDN article I posted the link to.

  5. #5
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MSDN
    With Internet Explorer 6, this property applies only to td, th and tr elements in fixed-layout tables. Auto-layout tables are the default. To create a fixed-layout table, set the tableLayout property of a table element to fixed. The advantage of fixed-layout tables is they render faster than auto-layout tables.
    Hmm okay, so Microsoft does claim to support it for tables.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  6. #6
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Changed the table tag to include a table-layout: fixed; but it still does not work, in either browser.

  7. #7
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just an update that might make things clearer.

    Here is the CSS I am using:
    HTML Code:
    td.calendar .noavail { font-family: verdana; font-size: 10px; background-color: #C5C5C5; min-height: 100px; }
    And here is how it is used in HTML code:
    HTML Code:
    <table border='1' cellpadding='0' cellspacing='0' width='98%' style='table-layout: fixed;'>
      <tr>
        <td class='noavail' width='14%'>
          &nbsp;
        </td>
      </tr>
    </table>

  8. #8
    SitePoint Zealot cmorbutts's Avatar
    Join Date
    Apr 2002
    Location
    Sydney, Australia
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I assume you're using the CSS you included in your first post. That's the problem.

    You should seperate one with a comma.

    td.calender, .noavail { stuff stuff stuff }

    It should all be good with the fixed table layout then.

  9. #9
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope, it's still not working, so there must be something else that I'm doing that is holding up the process. Here is the complete CSS I am using on the page, along with the complete HTML code. (NOTE: I changed a few things to make it less confusing on my end, so it might look a little different from the above posts)

    HTML Code:
    .col_header { font-family: arial; font-size: 12px; font-weight: bold; color: #000000; background-color: #FCF6E6; padding-top: 1px; padding-bottom: 1px; padding-left: 5px; padding-right: 5px; border: 1px solid #000000; }
    .col_box { font-family: verdana; font-size: 10px; font-weight: normal; color: #000000; background-color: #FFFFFF; padding-top: 1px; padding-bottom: 5px; padding-left: 2px; padding-right: 2px; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; }
    .noavail { font-family: verdana; font-size: 10px; background-color: #C5C5C5; min-height: 100px; }
    HTML Code:
    <table border='0' cellpadding='0' cellspacing='0' width='99%' align='center'>
      <tr>
        <td class='col_header'>
          <img src='images/icons/3orange-tan.gif' border='0' alt=''/>
        </td>
      </tr>
      <tr>
        <td class='col_box'>
          <table border='0' cellpadding='2' cellspacing='0'>
            <tr>
              <td>
                Month: 
              </td>
              <td>
                <select name='month'>
                  <option>January</option>
                  <option>February</option>
                  <option>March</option>
                  <option>April</option>
                  <option>May</option>
                  <option>June</option>
                  <option>July</option>
                  <option>August</option>
                  <option>September</option>
                  <option>October</option>
                  <option>November</option>
                  <option>December</option>
                </select>
              </td>
              <td>
                <input type='submit' name='view_calendar' value='View Calendar'>
              </td>
            </tr>
          </table>
    
          <hr/>
    
          <table border='1' cellpadding='0' cellspacing='0' width='98%' style='table-layout: fixed;'>
            <!-- weekday headers -->
            <tr>
              <td width='14%' valign='top'>
                Sunday
              </td>
              <td width='14%' valign='top'>
                Monday
              </td>						
              <td width='14%' valign='top'>
                Tuesday
              </td>						
              <td width='14%' valign='top'>
                Wednesday
              </td>						
              <td width='14%' valign='top'>
                Thursday
              </td>						
              <td width='14%' valign='top'>
                Friday
              </td>						
              <td width='14%' valign='top'>
                Saturday
              </td>						
            </tr>
            <!-- month of november -->
            <tr>
              <td class='noavail' width='14%'>
                &nbsp;
              </td>
              <td class='noavail' width='14%'>
                &nbsp;
              </td>						
              <td class='noavail' width='14%'>
                &nbsp;
              </td>						
              <td class='noavail' width='14%'>
                &nbsp;
              </td>						
              <td class='noavail' width='14%'>
                &nbsp;
              </td>						
              <td class='noavail' width='14%'>
                &nbsp;
              </td>						
              <td width='14%' valign='top'>
                <table border='0' cellpadding='0' cellspacing='0' width='100%'>
                  <tr>
                    <td align='right'>
                      1
                    </td>
                  </tr>
                </table>
              </td>						
            </tr>
          </table>
        </td>
      </tr>
    </table>

  10. #10
    SitePoint Zealot cmorbutts's Avatar
    Join Date
    Apr 2002
    Location
    Sydney, Australia
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tested your code in IE and it worked for me... if I change the min-height it works accordingly. I tested it in IE6 which is the only version of IE that supports min-height. What version of IE are you using?

    How I tested? I copied and pasted your code into an empty html file and just enclosed your css in <style> tags.

    How are you embedding your css code? In an external CSS file? Do the other things styles work too? I mean in your code do the fonts etc show through?

  11. #11
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, the other styles show through fine with the same tags. It is just the min-height that isn't working properly.

    I am including the css file as an external link.

    I am testing with IE6 and Moz 1.4.

    I tried what you did, simply copying and pasting the code above into a new html file. It works fine.

    It must be something else in my css that is overriding. Any suggestions as to what I should be looking for?

  12. #12
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I removed all my css in my external file except for the statements above and it still didn't work. I'm not sure what I'm doing wrong. Please help me.

  13. #13
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Found The Problem, But Why!!

    Ok, I found the problem. If I have this line at the top of the page:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    The min-height doesn't work. If I remove it, then it does work fine.

    Why is this happening? Why does that line cause it to fail? Isn't that line a standard line to have at the top of every page?

  14. #14
    SitePoint Zealot cmorbutts's Avatar
    Join Date
    Apr 2002
    Location
    Sydney, Australia
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you give me a link to the actual page? I'll have a look at the whole thing.

  15. #15
    SitePoint Zealot cmorbutts's Avatar
    Join Date
    Apr 2002
    Location
    Sydney, Australia
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THat line basically says that your page is conforming to XHTML... one of it's use is for validation purposes.

    min-height is part of the CSS Level 2 standard. I don't understand why that wouldn't work. Let me have a look around and see.

    Do you actually need that line on your page? Yes, if you want to make your page XHTML validated compliant.

  16. #16
    SitePoint Zealot cmorbutts's Avatar
    Join Date
    Apr 2002
    Location
    Sydney, Australia
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Found this post. Not the ideal solution but it may be nice and quick for you.

    http://portal.portland.co.uk/forum/viewtopic.php?t=689

  17. #17
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you don't need it to actually make it XHTML 1.0 compliant? You just need it to have it validated?

    When I remove that line from my code, alot of my CSS goes awry: fonts don't work any longer, spacing isn't correct, etc. But the min-height then works fine.

    I'm really confused as to what's going on.

  18. #18
    SitePoint Zealot cmorbutts's Avatar
    Join Date
    Apr 2002
    Location
    Sydney, Australia
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No I think you need it to be fully compliant.

    When you have the doctype Mozilla doesn't work as well?

  19. #19
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Correct, Moz doesn't work as well. When I remove it, Moz works fine.

  20. #20
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cmorbutts
    Found this post. Not the ideal solution but it may be nice and quick for you.

    http://portal.portland.co.uk/forum/viewtopic.php?t=689
    Sorry, I missed this post you had put up here. I used the suggested "workaround" in that forum and it works for IE, but not for Mozilla. What can be done for Mozilla browsers?


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
  •