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 4 of 4
  1. #1
    New Coder
    Join Date
    May 2005
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    formatting problem with float layout

    I have a couple of problems with the layout in
    http://wsdev.colostate.edu/cwis116/admmock/

    There is an IE6 only problem :-
    A line spacing that appears between the banner and the rest of the content (a white line- background). Is this an IE error due to float? How can I fix this.

    In both IE6 and Mozilla :-
    The Connect Campus image does not align, even though the height and the width of the image match the container. There is a portion of the background that appears below the image (beige color).

    Thanks in advance.

    CSS: body {
    background-color :#003300;
    margin : 0px;
    outline : 0px;
    padding: 0px;
    color: #000000;
    font-family : Verdana, Arial, sans-serif;
    text-align: center; /*for IE */
    font-size: xx-small;
    }

    A:LINK, A:VISITED {
    background-color : transparent;
    color : #003300;
    font-weight : bold;
    text-decoration : none;
    }

    A:HOVER {
    background-color : #003300;
    color : #FFFFFF;
    }


    .pageBorder{
    border : medium ridge #DDC642 ;
    color : #000000;
    padding : 0px 0px 0px 0px;
    width : 760px;
    margin: 0 auto; /* align for good browsers */
    text-align: left;/* counter the body center good browsers*/
    background-color : #ffffff;
    }

    div{
    font-size: xx-small;
    border: 0px;
    margin: 0px;
    outline : 0px;
    padding: 0px;
    }

    .xxsmall{
    font-size: xx-small;
    }
    #logo { height:85px; width:760px; border:0; }

    #mainnavlist
    {
    color: white;
    background: #030;
    border-bottom: 0.2em solid #030;
    border-right: 0.2em solid #030;
    padding: 0 1px;
    margin-left: 0px;
    margin-top : 1.5em;
    margin-bottom : 0px;
    margin-right : 0px;
    width: 26.5em;
    font: normal 0.8em arial, Verdana, sans-serif;
    }

    #mainnavlist li
    {
    list-style: none;
    margin: 0px;
    font-size: 1.47em;
    }

    #mainnavlist a
    {
    display: block;
    text-decoration: none;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    color: white;
    background: #040;
    border-width: 1px;
    border-style: solid;
    /*border-color: #5bd #035 #068 #6cf;*/
    border-color : #393 ;
    border-left: 1em solid #fc0;
    padding: 0.25em 0.5em 0.4em 0.75em;
    }

    #mainnavlist a#current { border-color: #5bd #035 #068 #f30; }

    #mainnavlist a
    {
    width: 99%;
    /* only necessary for Internet Explorer */
    }

    #mainnavlist a
    {
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 15.4em;

    /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */
    }


    #mainnavlist a:hover, #mainnavlist a#current:hover
    {
    background: #050;
    /*border-color: #069 #6cf #5bd #fc0;*/
    border-color : #093 #393 #393 #fc0;
    padding: 0.4em 0.35em 0.25em 0.9em;
    }

    #mainnavlist a:active, #mainnavlist a#current:active
    {
    background: #030;
    /* border-color: #069 #6cf #5bd white;*/
    border-color : #093 #393 #393 white;
    padding: 0.4em 0.35em 0.25em 0.9em;
    }
    #rightsection {height:480px; width : 192px; float:right;background-color : #669966;
    border-bottom : medium ridge #DDC642 ; }

    #rightnavcontainer ul
    {
    position : relative;
    top : 60px;
    margin-left: 18px;
    padding-left: 0;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    text-align : center;
    font-size: 8pt;
    font-weight :500;
    }

    #rightnavcontainer a
    {
    display: block;
    padding: 3px;
    width: 136px;
    background-color: #030;
    color : #DDC642;
    border-bottom: 1px solid #eee;
    }

    #rightnavcontainer a:link, #navlist a:visited
    {
    color: #DDC642;
    text-decoration: none;
    }

    #rightnavcontainer a:hover
    {
    background-color: #e8d980;
    color: #003300;
    }


    #search { position : relative; top : 0px; width : 192px; background-color : #003300; color : #DDC642; }
    #subsearch { position : relative; top : 0px; background-color : #004400; color : #DDC642; }

    input.azsearch {
    margin-left:10px;
    border: black 1px solid;
    font-size: 8pt;
    color : #003300;
    }

    input.azsubmit {
    width:22px;
    border: black 1px solid;
    font-size: 7pt;
    background-color : #DDC642;
    }

    #address { position : relative; top : 150px; text-align:center; color:#003300; }

    #main_content {width:568px; height:480px; float:left; background-color:#efe4a6;
    border-bottom : medium ridge #DDC642 ; }

    #visit_campus_bg { float:right; width:350px; height:250px; background-repeat : no-repeat;color:#fff; }

    #connect_img { clear:both; position:absolute; top:335px;width:568px; height:230px; background-repeat : no-repeat;
    }

    .clear { clear:both; }

    #footer_main { text-align:center; background:#fff; margin:0 auto; width:100%;}
    .box {
    border : 1px solid;
    padding : 3px;
    width : 352px;
    }

    .title{
    font-size: x-small;
    }

  • #2
    New Coder
    Join Date
    May 2005
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have the first problem fixed by adding "vertical-align : bottom" to #logo.

    I still have the second problem where the lower campus image does not fit the container. There is the background color strip (beige) between the image and the golden bar. Any suggestions? Thanks.

  • #3
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Change this:
    Code:
    #connect_img { position:absolute; top:335px;width:568px; height:230px; vertical-align : bottom;background-repeat : no-repeat;
    }
    ... to this:
    Code:
    #connect_img { width:568px; height:230px; }
    Not tested in IE but fixes the problem in Firefox.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #4
    New Coder
    Join Date
    May 2005
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks.

    I still have the problem in IE. There is a margin on the top and the bottom of the connect_img.

    Also, I have a problem with larger fonts of the browser. The left navigation shifts and enlarges. How do I lock this layer in the current layout?


  •  

    Posting Permissions

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