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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div Height changes - how to control in various browsers?

    Going nuts... website is www.thechinuexproject.org.... looking in particular at a non-linked page (until I get it right)..... resources_rev.html.

    Client has demanded many changes on left side navbars.... which has changed the dynamics when anything is added to the right side (gold) area. I'm seeing it fine in Firefox, etc., but my client is using an older version of Explorer.... and she's seeing a "gap" at the bottom of the gold area.

    I've been re-adjusting the gold area with a line-break with height.... and that works for everything else. [CODE]<br style="line-height:39px;">

    Help!

    My css:
    [CODE]
    body{
    padding:0px;
    margin:0px;
    background:#F6C402;
    text-align:center;
    }

    a:hover{text-decoration:none;}

    img { border:0px;}

    .dt { display:table; width:100%; overflow:auto;}

    .dr { display:table-row; width:100%; height:100%; overflow:auto;}

    .dc { display:table-cell; text-align:justify; vertical-align:top; width:100%; height:100%; overflow:auto;}

    .df { display:table-cell; text-align:justify; vertical-align:top; width:100%; background:#87500C;}

    *html .dc {
    float:left;
    height:100%;
    vertical-align: auto;
    }

    .main_text, input, textarea, body, font, select
    {
    font-family:Tahoma;
    font-size:11px;
    line-height:15px;
    color:#040202;

    }

    ul { margin:0px; padding:0px; list-style: none;}
    li {background:url(images/a2.gif) no-repeat left center; margin: 0px 0px 0px 0px; padding:0px 0px 0px 9px; font-weight:bold}
    li a {font-family:Tahoma; font-size:11px; line-height:18px; color:#040202}

    span strong { color:#040202}

    strong a { color:#040202}


    .h_text{ color:#E8E7E7 font-weight:normal;}
    .h_text a{ color:#E8E7E7; font-weight:normal; text-decoration:underline}

    .f_text{ color:#040202; text-decoration:none}
    .f_text:hover{ color:#AFAFAF; text-decoration:underline}

    .w_text { color:#040202}

    .l_text { color:#040202; font-weight:bold; text-decoration:none}
    .l_text:hover{ color:#9E9E9E; font-weight:bold; text-decoration:underline}

    .c_text { color:#040202;}
    .c_text a{ color:#040202; font-weight:bold; text-decoration:none}
    .c_text a:hover{ color:#858585; text-decoration:underline}

    .c2_text { color:#040202;}
    .c2_text a{ color:#040202;}

    .r_text { color:#AE0200;}
    .r_text a{ color:#AE0200;}

    .main_border { border-left:1px #888888 solid; border-right:1px #888888 solid; margin:auto; width:766px; height:100%;}

    .main { width:766px; height:828px;}

    .header { height:386px; background:url(images/bg-topbrown_stars.jpg) no-repeat;}
    .header_r1 { height:106px;}
    .header_r2 { height:280px;}

    .content { height:333px;}

    .cell_bg1 { background:url(images/leftgreen.jpg) repeat;}

    .cell_bg2 { background:#87500C;}

    .cell_bg3 { background:#D8AC03;}

    .footer { height:105px;}
    .footer .dc { text-align:center;}
    .footer_r1 { background:#87500C; height:5px;}
    .footer_r2 { background:#87500C; height:39px;}
    .footer_r3 { height:61px;}

    .footer .df { text-align:center;}
    .footer_r1 { background:#000000; height:10px; }
    .footer_r2 { background:#87500C; height:39px;}
    .footer_r3 { height:61px;}

    form { margin:0px; padding:0px;}

    .form{height:23px; margin-top:3px;}
    .form input {width:178px; height:20px; padding-left:3px}

    textarea{width:178px; height:153px; padding-left:3px; overflow:hidden; margin-top:3px}
    .input {width:128px; height:17px; background-color:#D6D6D6; padding-left:5px; color:#31312F; font-size:10px; line-height:10px; padding-top:0px;}

    .h_l { background:#41413F; height:1px;}

    .v_l { background:url(images/bg-line.gif) repeat-y left;}

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello a1000w,
    Odd lengths and gaps can many times be caused by missing closing tags. The validator shows this page missing a few.

    It's a place to start anyway.

    When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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