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 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jan 2007
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts

    A Border Around/Over This

    Hi,

    I have been trying a number of days now to get a border fitted around a header and 3 columns:

    http://worktips.co.uk/thisover.html

    Basically the idea is that the box surrouding the cell "resource center" stretches over the text below. So it covers about 14 lines of text. Could anyone advise on how to do this?

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Code:
    div.resourcebox { overflow: auto; }
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Regular Coder
    Join Date
    Jan 2007
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cheers Dude,

    This forum is by far the best on the net.

  • #4
    Regular Coder
    Join Date
    Jan 2007
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    Ive tried adding the overflow method along with researching it on the internet, I have reposted the page with the changes I have made on. Could you have another look and advise where Im still going wrong?

    http://worktips.co.uk/thisover.html

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Powered View Post
    Ive tried adding the overflow method along with researching it on the internet, I have reposted the page with the changes I have made on. Could you have another look and advise where Im still going wrong?
    Works fine in Opera and almost in Firefox (right border is missing). Iím guessing that the reason itís not working in Internet Explorer is because that browser (and the others) are rendering your page in backward‐compatibility (quirks) mode; this is because your code is invalid. For example, you have a head tag preceding your document type declaration and outside of the html element. You also have an incorrectly specified document type (doctype) declaration. It should be the following with no element tags preceding the declaration:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
    Iíd advise you to validate your document after you fix those things since you have numerous other errors. If you insist upon using target attributes, you need to downgrade to a Transitional doctype since those arenít allowed under the Strict doctype. I would also use HTML 4.01 instead of any flavor of XHTML since Internet Explorer doesnít understand proper XHTML anyway and HTML is easier to get right. A list of the DTDs can be found here.

    One last thing, since the Validator probably wonít catch this one: <meta http-equiv="Content-Type" content="text/css; charset=utf-8"/>. Your document is not CSS, itís HTML; thus the first part of the value should read text/html, not text/css.
    Last edited by Arbitrator; 01-24-2007 at 10:43 PM. Reason: I made a clarification and adjusted the sentence order.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Regular Coder
    Join Date
    Jan 2007
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I've done te border strecthes over where I want it but now the link coding doesn't work, can anyone advise why?

    Thanks so far.

    http://worktips.co.uk/thisover.html

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Before trying to solve anything please fix your 45 coding errors at first. Many of them are coming from IDs that are defined multiple times. An ID may only be used one time in a document (you can use it again in another document/page). You should use classes if you wanna define a recurring style.
    Also a lot of errors are because you have used the ampersand (&) without encoding it as HTML entity (the entity for & is &amp;).
    Then you don't have a closing head tag and opening body tag. And your code is far from being semantic.

  • #8
    Regular Coder
    Join Date
    Jan 2007
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So if you had this page what would you do?

    (Thanks)

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Powered View Post
    So if you had this page what would you do?
    Why are you even asking this question? It should be standard practice to use correct markup. Neither your XHTML nor CSS markup is correct.

    There are author errors and then there are browser flaws. You can at least make sure that you fix the former. If you canít go through the trouble to fix your own code, then why should any one else? If your code is incorrect, then why should it be rendered correctly?

    The solution to your noted issue is that you defined hexadecimal color references incorrectly in your style sheet; they must be preceded by a number sign (#). Browsers rendering your page in quirks mode will tend to ignore this incorrect code and make an assumption about what you want; this is why the relevant CSS declarations would stop working in the stricter standards‐compliance mode.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    Regular Coder
    Join Date
    Jan 2007
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts
    But you understand these errors and flaws, Im trying to understand them.

    I didn't notice that the colour markers on the A links didn't have # in front of them. Now I can change them.

    Whats frustrating is that Im so close to having the first phase of the design ready.

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Powered View Post
    But you understand these errors and flaws, Im trying to understand them.
    You can use the W3C Markup Validator and the CSS Validator among other tools to help ensure that your documents are correct. If you donít understand the errors produced, well, thatís what forums like these are for. VIPStephan also pointed out some errors with solutions, but you donít seem to have fixed them; of course, Iím just basing that on your live document and response to his post.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Yeah, and now I see that I forgot to put the link to the validator... sorry for that.


  •  

    Posting Permissions

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