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 3 of 3
  1. #1
    Regular Coder
    Join Date
    May 2006
    Posts
    290
    Thanks
    6
    Thanked 14 Times in 14 Posts

    minor id tag problem

    Hello and thanks in advance,

    I have certain content id tags in my .css file. They go from content1, content2,..., and content5.

    Content5 has no set height value because it is supposed to allow any runoff text to expand further down the page. For some reason using the "content5" id tag cause my "titlebar" image to disappear. The "titlebar" image is what seperates the different categories in my main content area.

    This is what the page should look like HERE except the content3 should be content5 so that the text can expand as need if text is inlarged.

    This is what the page looks like when I try to change from content3 to content5 HERE

    thanks,

    trigger

  • #2
    Regular Coder
    Join Date
    Oct 2006
    Posts
    206
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I had to look through your source code to find the css file (http://harvestwhitecounty.com/bodystyle.css) you referred to . I shouldn't have to do that...Next time, could you post a link to everything you think may be causing the problem?

    Now for the solution, hopefully: One thing I notice is that, in bodystyle.css, #content3 displays inline, floats left, has width/overflow/margin-left declarations, etc..., whereas #content5 doesn't. Try something more like:

    Code:
    #content5 {
    width:480px;
    float:left;
    overflow:auto;
    margin-left:10px;
    padding: 0 10px;
    display:inline;
    }
    in bodystyle.css and see if that helps.

    Another thing I noticed is that you have the <h1 class="title">Our Purpose!</h1> outside of <div id="content5">. I don't think that would cause your problem, but you may wish to fix that...

  • #3
    Regular Coder
    Join Date
    May 2006
    Posts
    290
    Thanks
    6
    Thanked 14 Times in 14 Posts
    Oops, Sorry I actually included the .css code first time. But had to retype the message cause it didnt make sense and never re-added .css sorry.

    As for your solution:

    I cant add those values for my content5 id tag here is why.

    width:480px (this restricts the content in "content5" to only 480px wide when I need it to extend the entire width 700+ px when the text reaches the end of the right column)

    float:left (this causes the content in "content5" to float below the last div tag in the right column.)

    overflow:auto (I already have this added to my "footer" id tag on every page so that the page automatically get extended if needed.)

    margin-left:10px (this value has already been added to another id tag, and would offset text within this "content5" from the other content areas.)

    I am beginning to think that the values for "content5" are correct and that it is something else. The actual problem is that FF doesnt display the "titlebar" image I use to seperate content areas and IE displays it but slides it to the left a few spaces.

    Again this is the problem page HERE

    And this is how the page should display just that "content3" should be replaced with "content5" HERE

    Oh and here is the css page.

    Code:
    html, body {
    margin:0;
    padding:0;
    background:#036;
    color:#000;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    }
    body {
    padding:20px 0;
    }
    #container {
    width:750px;
    margin:auto;
    background:#00C url(images/bg.jpg) repeat-y;
    }
    #header {
    line-height:0px;
    font-size:0;
    height:25px;
    background:#00C url(images/testpic2.gif) no-repeat;
    color:#FFF;
    padding-top:175px;
    padding-left:35px;
    }
    #right-col {
    width:250px;
    float:right;
    margin-right:10px;
    display:inline; /*fixes IE double margin bug*/
    }
    #search {
    height: 75px; 
    padding-left: 50px;
    padding-top: 75px;
    background:#00C url(images/sidebar_search.gif) no-repeat;
    color:#000;
    }
    #search1 {
    height: 75px; 
    padding-left: 50px;
    padding-top: 75px;
    background:#00C url(images/sidebar_search1.gif) no-repeat;
    color:#000;
    }
    #cal {
    height:225px;
    padding-left: 50px;
    padding-top: 50px;
    background:#00C url(images/sidebar_calendar.gif) no-repeat;
    color:#000;
    }
    #cal1 {
    height:225px;
    padding-left: 50px;
    padding-top: 50px;
    background:#00C url(images/sidebar_calendar1.gif) no-repeat;
    color:#000;
    }
    #callegend {
    height: 25px;
    width: 65px;
    background:#00C url(images/clipart_callegend.gif) no-repeat;
    margin: 0px 0px 0px 55px;
    }
    #googlead {
    padding-left: 50px;
    padding-top: 50px;
    background:#00C url(images/sidebar_googlead.gif) no-repeat; 
    height:625px; 
    overflow:auto;
    }
    #googlead1 {
    padding-left: 50px;
    padding-top: 50px;
    background:#00C url(images/sidebar_googlead1.gif) no-repeat; 
    height:625px; 
    overflow:auto;
    }
    #services {
    padding-left: 50px;
    padding-top: 60px;
    background:#00C url(images/sidebar_services.gif) no-repeat; 
    height:390px; 
    overflow:auto;
    }
    #services1 {
    padding-left: 50px;
    padding-top: 60px;
    background:#00C url(images/sidebar_services1.gif) no-repeat; 
    height:390px; 
    overflow:auto;
    }
    #memberlog {
    height: 75px; 
    padding-left: 50px;
    padding-top: 75px;
    background:#00C url(images/sidebar_memberlogin.gif) no-repeat;
    color:#000;
    }
    #memberlog1 {
    height: 100px; 
    padding-left: 50px;
    padding-top: 50px;
    background:#00C url(images/sidebar_memberlogin1.gif) no-repeat;
    color:#000;
    }
    .servicetitle {
    color:#00C;
    font-size:13px;
    font-weight: bold;
    }
    .servicesub {
    font-size:10px;
    font-weight: bold;
    }
    #content1 {
    width:480px;
    float:left;
    height:150px;
    overflow:hidden;
    margin-left:10px;
    display:inline;
    }
    #content2 {
    width:480px;
    float:left;
    height:275px;
    overflow:auto;
    margin-left:10px;
    display:inline;
    }
    #content3 {
    width:480px;
    float:left;
    height:675px;
    overflow:auto;
    margin-left:10px;
    display:inline;
    }
    #content4 {
    width:480px;
    float:left;
    height:875px;
    overflow:auto;
    margin-left:10px;
    display:inline;
    }
    #content5 {
    padding: 0 10px;
    }
    #content2_3 {
    width:480px;
    float:left;
    height:950px;
    overflow:auto;
    margin-left:10px;
    display:inline;
    }
    .contentcolumncontain {
    width:150px;
    float:left;
    display:inline;
    }
    #contentcolumn1 {
    background:#FFF url(images/bg_column.jpg) repeat-y;
    width:480px;
    float:left;
    color:#009;
    margin-left:10px;
    display:inline;
    }
    #contentcolumn2 {
    background:#FFF url(images/bg_column2.jpg) repeat-y;
    width:730px;
    float:left;
    color:#009;
    margin-left:10px;
    display:inline;
    }
    #contentcolumnpic {
    background:#FFF url(images/bg_column3.jpg) repeat-y;
    width:730px;
    float:left;
    color:#009;
    margin-left:10px;
    display:inline;
    }
    #contentcolumn3 {
    background:#FFF url(images/bg_column2.jpg) repeat-y;
    width:730px;
    float:left;
    color:#009;
    margin-left:10px;
    display:inline;
    }
    .contentcolumnmaintop {
    height:25px;
    width:480px;
    float:left;
    background:#FFF url(images/titlebar_columntop.gif) no-repeat;
    margin:0;
    font-weight: bold;
    text-align: center;
    line-height:25px;
    font-size:115%;
    }
    .contentcolumnmaintop2 {
    height:50px;
    width:730px;
    float:left;
    background:#FFF url(images/titlebar_columntop2.gif) no-repeat;
    margin:0;
    font-weight: bold;
    text-align: center;
    color:#00C;
    line-height:50px;
    font-size:175%;
    }
    .contentcolumnmainmid {
    height:25px;
    width:480px;
    float:left;
    background:#FFF url(images/titlebar_columnmid.gif) no-repeat;
    margin:0;
    font-weight: bold;
    text-align: center;
    line-height:25px;
    font-size:115%;
    }
    .contentcolumnmainmid2 {
    height:50px;
    width:730px;
    float:left;
    background:#FFF url(images/titlebar_columnmid2.gif) no-repeat;
    margin:0;
    font-weight: bold;
    text-align: center;
    color:#00C;
    line-height:50px;
    font-size:175%;
    }
    .contentcolumnmainbottom {
    height:25px;
    width:480px;
    float:left;
    background:#FFF url(images/titlebar_columnbottom.gif) no-repeat;
    margin:0;
    }
    .contentcolumnmainbottom2 {
    height:25px;
    width:730px;
    float:left;
    background:#FFF url(images/titlebar_columnbottom2.gif) no-repeat;
    margin:0;
    }
    .contentcolumnsub {
    height:25px;
    width:460px;
    float:left;
    font-weight: bold;
    background:#FFF url(images/titlebar_columnsub.gif) no-repeat;
    font-family:Comic Sans MS, Brush Script MT, cursive;
    color:#fff;
    margin:0;
    padding:0 0 0 20px;
    line-height:25px;
    font-size:100%;
    }
    .contentcolumnsub2 {
    height:25px;
    width:730px;
    float:left;
    font-weight: bold;
    background:#FFF url(images/titlebar_columnsub2.gif) no-repeat;
    font-family:Comic Sans MS, Brush Script MT, cursive;
    color:#fff;
    margin:0;
    text-align: center;
    line-height:25px;
    font-size:100%;
    }
    .contentcolumnr {
    width:324px;
    float:right;
    padding-top: 10px;
    padding-right: 6px;
    display:inline;
    }
    .contentcolumnr_2 {
    width:250px;
    float:right;
    padding-top: 10px;
    padding-right: 6px;
    padding-left: 4px;
    display:inline;
    }
    .contentcolumnl {
    width:144px;
    height:90px;
    float:left;
    font-size:75%;
    padding-top: 10px;
    padding-left: 6px;
    display:inline;
    }
    .contentcolumnl_2 {
    width:460px;
    float:left;
    padding-top: 10px;
    padding-right: 4px;
    padding-left: 6px;
    display:inline;
    }
    .contentcolumnl2 {
    width:144px;
    height:25px;
    float:left;
    padding-left: 6px;
    font-size:75%;
    display:inline;
    }
    .contentcolumnl2_2 {
    width:718px;
    float:left;
    padding-top: 10px;
    padding-right: 6px;
    padding-left: 6px;
    padding-bottom: 10px;
    text-align: center;
    font-size:100%;
    display:inline;
    }
    .contentcolumn3 {
    width:718px;
    background:#00C url(images/bg_column3.jpg) repeat-y;
    float:left;
    padding-right: 6px;
    padding-left: 6px;
    text-align: center;
    display:inline;
    }
    .contentcolumnl1_2 {
    width:698px;
    float:left;
    padding-top: 10px;
    padding-right: 6px;
    padding-left: 26px;
    padding-bottom: 10px;
    font-size:100%;
    display:inline;
    }
    #contentcal {
    float:left;
    margin-top:10px;
    margin-left:6px;
    margin-right:6px;
    display:inline;
    }
    .title {
    height:50px;
    background:#FFF url(images/titlebar.gif) no-repeat;
    color:#00C;
    margin:0;
    padding:0 0 0 20px;
    line-height:50px;
    font-size:175%;
    }
    .title1 {
    height:50px;
    background:#FFF url(images/titlebar1.gif) no-repeat;
    color:#00C;
    margin:0;
    padding:0 0 0 20px;
    line-height:50px;
    font-size:175%;
    }
    .title2 {
    height:50px;
    background:#FFF url(images/titlebar2.gif) no-repeat;
    color:#00C;
    margin:0;
    padding:0 0 0 20px;
    line-height:50px;
    font-size:175%;
    }
    .sub {
    float:left;
    width:460px;
    margin-left:10px;
    display:inline;
    }
    p {
    padding:0 10px 10px 0;
    margin:0;
    }
    p.italic {
    padding:0 10px 10px 0;
    margin:0;
    font-style: italic;
    text-indent: 2em;
    }
    span.ministry {
    font-weight: bold;
    text-indent: 2em;
    font-size: 125%;
    }
    span.columnpad {
    font-weight: bold;
    padding-right: 6px;
    padding-left: 6px;
    font-size: 100%;
    }
    .indent {
    padding:0 10px 10px 0;
    margin:0;
    text-indent: 2em;
    }
    img.floatleft {
    padding:0px 5px 5px 0;
    margin:0;
    float: left;
    }
    .columncenterpad {
    text-align: center;
    padding-right: 6px;
    padding-left: 6px;
    margin:0;
    }
    a img {
    border: 0;
    }
    #footer {
    height:125px;
    clear:both;
    background:#00C url(images/bg_foot.gif) no-repeat;
    }
    #foot1 {
    float: left;
    clear: both; 
    width: 690px; 
    height: 48px;
    color: #ffffff; 
    font-size: 11px;
    font-weight: bold; 
    text-align: center; 
    padding-top: 27px; 
    overflow:auto;
    }
    #foot2 {
    float: left;
    width: 450px; 
    color: #036; 
    font-weight: bold; 
    word-spacing: 5px;
    text-align: center; 
    padding-top: 15px;
    }
    
    #foot2 a:link, #foot2 a:visited {
    text-decoration: none;
    color:#036;
    background-color:inherit;
    }
    #foot2 a:hover, #foot2 a:active {
    color: #FFF;
    background-color: #036
    }
    #foot3 {
    float: right;
    width: 250px; 
    color: #036; 
    font-size: 12px;
    font-weight: bold;
    text-align: center; 
    padding-right: 50px;
    padding-top: 30px;
    }
    #foot3 a:link, #foot3 a:visited {
    text-decoration: none;
    color:#036;
    background-color:inherit;
    }
    #foot3 a:hover {
    color:#FFF;
    background-color:inherit;
    text-decoration: underline;
    }
    Last edited by trigger_tre; 10-27-2006 at 03:42 AM.


  •  

    Posting Permissions

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