Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Div Height Issue

    Hi I am creating a site using DIV/CSS. The issue is the overflown contents are hiding. I know that is because of overflow: hidden. but I remove that. the DIV doesn't expand with contents.

    See the example here:
    PHP Code:
    http://www.abhi3d.com/abhi/bee/achleader.php 
    It looks OK in IE but not in FF and Chrome.

    Here is the Code.

    ================================================
    HTML
    ==================================================
    PHP Code:
    <div id="MainContentsFullWidth">
        <
    class="style2 center TopMarginZero"><u>Postcards</u></p>
        <
    table width="100%" border="0" cellspacing="0" cellpadding="0">
      <
    tr>
        <
    td width="33%" align="center" valign="top"><img src="images/teacherhelpercard1.png" width="180" height="120" alt="Teachr Helper Card" class="ImageBorder"><br>
          <
    span class="bold">Order Code TH01</span></td>
        <
    td width="33%" align="center" valign="top"><img src="images/groupworkcard1.png" width="180" height="120" alt="Group Work Award" class="ImageBorder"><br>
          <
    span class="bold">Order Code GW01</span></td>
        <
    td width="33%" align="center" valign="top"><img src="images/hoycard2.png" width="180" height="120" alt="Head Of Year Award" class="ImageBorder"><br>
          <
    span class="bold">HOY01</span></td>
        </
    tr>
      <
    tr>
        <
    td height="10" colspan="3" align="center" valign="top"></td>
        </
    tr>
      <
    tr>
        <
    td align="center" valign="top"><img src="images/achleadercard1.png" width="180" height="120" alt="Achievement Leader Award" class="ImageBorder"><br>
          <
    span class="bold">Order Code AL01</span></td>
        <
    td align="center" valign="top"><img src="images/hardworkercard1.png" width="180" height="120" alt="Hard Worker" class="ImageBorder"><br>
          <
    span class="bold">Order Code HW01 </span></td>
        <
    td align="center" valign="top"><img src="images/backpostacrd.png" width="180" height="120" alt="Back Post Card" class="ImageBorder"><br>
          <
    span class="bold">Postcard Message</span></td>
      </
    tr>
      <
    tr>
        <
    td height="10" colspan="3" align="center" valign="top"></td>
      </
    tr>
      <
    tr>
        <
    td height="10" colspan="3" align="center" valign="top" class="style5 bold">All stickers and postcards have a unique code for pupils to register at (URL address blockedSee forum rules)</td>
      </
    tr>
        </
    table>
        <
    div id="Next" class="clearboth"><a href="#"><strong>Next</strong></a></div>
        </
    div>
      </
    div>

      </
    div>
              <
    div class="clearboth"></div>
      </
    div
    ================================================
    Download CSS Here
    ================================================
    PHP Code:
    http://www.abhi3d.com/abhi/bee/beegifted.css 
    ================================================

    Any Help?

    Thanks in Advance

    Abhi
    Last edited by abhi3d; 11-05-2010 at 02:26 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    To expect a standard output, you need to supply a valid markup, and that requires a valid DOCTYPE at the top. I'd recommend an HTML Strict one.
    Last edited by abduraooft; 11-05-2010 at 03:30 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I Tried... nothing happened..

    Is that really anything to do with this issue. I dont' think so.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by abhi3d View Post
    I Tried... nothing happened..

    Is that really anything to do with this issue. I dont' think so.
    lol Dont look a gift horse in the mouth...you wanted help and the FIRST thing a web page needs in a valid doc type.

    Now, I viewed your page and dont see any content that is hidden or needs an expanding div. Could you be more specific on your issue please?

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok Take a look at these images. You will get what I really mean.

    See in FF or Chrome. IE Shows OK.

    Full Contents here.


    Div Hiding Contents


    Hope this makes sense.

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I think, and I could be wrong, this may be more of a php issue. I think the php script error messages are whats pushing your content down and hiding the lower images.

    I dont know that much about php yet, but im sure someone could tell you whats going on.

  • #7
    New Coder
    Join Date
    Nov 2010
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    No. I am sure it's not because of that php script. I have tested.

  • #8
    New Coder
    Join Date
    Nov 2010
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Any Help Guys???? No one on the site could help me?

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by abhi3d View Post
    Any Help Guys???? No one on the site could help me?
    Please carry what I've asked and then update the online version.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    New Coder
    Join Date
    Nov 2010
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Please carry what I've asked and then update the online version.
    I have just done what you said. see the link now

    http://www.abhi3d.com/abhi/bee/achleader.php

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Now add clear:left; to #Top ul.

    Then apply
    Code:
    margin-left:100px;
    padding-bottom:10px;
    padding-top:0;
    text-align:justify;
    to #MainContentsFullWidth and remove all other properties applied to this selector, such as float,height,width etc.

    PS: 1)The way you've sliced the logo is wrong, I'd say.
    2) Don't you know why using tables for layout is very bad?
    Last edited by abduraooft; 11-06-2010 at 01:43 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    New Coder
    Join Date
    Nov 2010
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Now add clear:left; to #Top ul.

    Then apply
    Code:
    margin-left:100px;
    padding-bottom:10px;
    padding-top:0;
    text-align:justify;
    to #MainContentsFullWidth and remove all other properties applied to this selector, such as float,height,width etc.

    PS: 1)The way you've sliced the logo is wrong, I'd say.
    2) Don't you know why using tables for layout is very bad?
    Oh Wow!!!! You are magician.. It worked like a charm.. thank you very very much...

    Just a small issue there is an around 5px gap under header. I dont' see what causes it. I am new in DIVs. http://www.abhi3d.com/abhi/bee/achleader.php

    the original site is in table format I am converting it into DIVs.. see www.beegifted.com. the images has been cut by my client's coder. I dont' know him. I am just converting it to DIVs. the center part of the page had tabled data so I had to use table tags. Can you tell me how to use divs as tables.. I mean like rows and columns...

  • #13
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Add
    Code:
    a img {
    float:left;
    }
    to your CSS to remove all mysterious gaps in your layout caused by your poor image slicing. Then make the following chages in your CSS
    Code:
    #Header {
    height:138px;
    position:relative;
    width:965px;
    }
    /*
    .TopMenu {
    height:138px;
    }
    */
    .TopMenu ul{
    position:absolute;
    right:0;
    botom:0;
    }
    Then remove float:left; from .TopMenu ul li
    You don't need a wrapper <div> around all the elements, which may yield in divitis! Try to make your markup semantic, with minimum html tags.
    Last edited by abduraooft; 11-06-2010 at 01:45 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #14
    New Coder
    Join Date
    Nov 2010
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Add
    Code:
    a img {
    float:left;
    }
    to your CSS to remove all mysterious gaps in your layout caused by your poor image slicing. Then make the following chages in your CSS
    Code:
    #Header {
    height:138px;
    position:relative;
    width:965px;
    }
    /*
    .TopMenu {
    height:138px;
    }
    */
    .TopMenu ul{
    position:absolute;
    right:0;
    botom:0;
    }
    Then remove float:left; from .TopMenu ul li
    You don't need a wrapper <div> around all the elements, which may yield in divitis! Try to make your markup semantic, with minimum html tags.
    This may be last time I bother you.

    Please see these 3 pages.
    http://www.abhi3d.com/abhi/bee/index.php
    http://www.abhi3d.com/abhi/bee/achleader.php
    http://www.abhi3d.com/abhi/bee/about.php

  • #15
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    When making a layout using floats, you need to put all floated elements before their non floated siblings in markup order. Refer http://bonrouge.com/3c-hf-fixed.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    abhi3d (11-06-2010)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •