www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: css vertical bar not stretching

  1. #1
    Join Date
    Jan 2005
    Posts
    446

    css vertical bar not stretching

    I am in the process of creating a website using CSS. I am very new to this, this being my second page I have attempted.

    When you go to my site:

    http://www.sammysosa.pointclark.net/...site/index.htm

    1. you will see that the vertical "bar" on the right doesn't go all the way down to the footer. I have no idea how to do this:

    2. The border is supposed to go around the entire website but it's not (it's the black bar at the top) behind the header logo

    Here is my css sheet:
    http://www.sammysosa.pointclark.net/...site/style.css

    Thanks!

  2. #2
    Join Date
    May 2005
    Posts
    2,040
    Validate your code. You have many, many errors, particularly multiply defined 'id's. You are only allowed one per page, ie, one id of that type.

  3. #3
    Join Date
    Jan 2005
    Posts
    446
    It never occured to me you can't use multiple id's

  4. #4
    Join Date
    May 2005
    Posts
    2,040

  5. #5
    Join Date
    Jan 2005
    Posts
    446
    It now validates, but I still have the same problem.

    It also looks REALLY bad in IE, but decent in firefox (still a lot of things not right though)

  6. #6
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    HTML Code:
    <div id="footer"
    <img src="images/footer.jpg" height="20px" width="750px" alt="footer">
    </div>
    Also the semantics of the markup just aren't there. Don't do this:
    <div class="spotlightheader">
    when what you MEAN is this:
    <h3>
    Never use a div where you can use a meaningful element.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  7. #7
    Join Date
    May 2005
    Posts
    2,040
    For your right bar, google for "clear floats". IE expands floats to the bottom of the box which is incorrect. FF won't, and it shouldn't, so you need to clear the float.

    Check your widths. IE tends to screw up page widths so if your total width is, say 800px, and your divs add up to 800px, IE will drop that right bar down thinking there's no room for it. Just set all your margins and paddings to zero in the body. Then make them what you want throughout the code so all browsers will follow the same rules and not make some up like IE does.

    In your CSS, you have the element 'Body'. Make that all lower case.

  8. #8
    Join Date
    Jan 2005
    Posts
    446
    stupid IE...

    Thanks for the tips guys. I will continue working on this and come back with any further questions I have.

  9. #9
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,178
    Possibly you want to look into using "faux columns". See http://www.alistapart.com/articles/fauxcolumns/ for more info.
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  10. #10
    Join Date
    Jan 2005
    Posts
    446
    Ok. I have worked on my website and implemented the faux columns idea.

    I can get the website to display 100% property in firefox (except for the black border does not go all the way around the page)

    It's a mess in IE. I would appreciate your help in this.

  11. #11
    Join Date
    May 2005
    Posts
    2,040

  12. #12
    Join Date
    Jan 2005
    Posts
    446
    All those validator errors have to do with the link to learn more about firefox. It shouldn't affect the way the page loads, right?

  13. #13
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Well the actual errors bear looking into.
    * Line: 132 Context : .bookstoresale
    Invalid number : padding-top Parse Error - padding-top
    * Line: 132 Context : .bookstoresale
    Parse Error - 15px;
    * Line: 138
    Parse Error - : left; text-align: left; border-style: solid; border-width: 0px; } .sale
    * Line: 147 Context : .advertising
    Invalid number : float center is not a float value : center
    Also, the "px" values are for use in styles, not HTML element attributes. Those assume px is the unit.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  14. #14
    Join Date
    Jan 2005
    Posts
    446
    I don't see where you got those errors. It validates now.

    http://www.sammysosa.pointclark.net/...site/index.htm

    Still have problems in IE. I think that I am just going to try and figure out a way for it to work in IE.

  15. #15
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    I got them from the W3C CSS validator. Maybe you're just validating the HTML. The HTML warnings I got from Tidy.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles