...

View Full Version : A Border Around/Over This



Powered
01-24-2007, 01:11 AM
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?

Arbitrator
01-24-2007, 01:18 AM
div.resourcebox { overflow: auto; }


Containing Floats (http://www.complexspiral.com/publications/containing-floats/) describes how the float model works.
Clearing Space (http://css-discuss.incutio.com/?page=ClearingSpace) describes what I just did.

Powered
01-24-2007, 09:45 AM
Cheers Dude,

This forum is by far the best on the net.

Powered
01-24-2007, 02:26 PM
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

Arbitrator
01-24-2007, 11:40 PM
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 (http://hsivonen.iki.fi/doctype/); 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:


<!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 (http://validator.w3.org/) 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 (http://www.w3.org/QA/2002/04/valid-dtd-list.html).

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.

Powered
01-25-2007, 02:23 PM
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

VIPStephan
01-25-2007, 02:41 PM
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 (http://www.htmlhelp.com/reference/html40/entities/) (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 (http://brainstormsandraves.com/articles/semantics/structure/).

Powered
01-25-2007, 02:53 PM
So if you had this page what would you do?

(Thanks)

Arbitrator
01-26-2007, 12:07 AM
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.

Powered
01-26-2007, 12:38 AM
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.

Arbitrator
01-26-2007, 12:55 AM
But you understand these errors and flaws, Im trying to understand them.You can use the W3C Markup Validator (http://validator.w3.org/) and the CSS Validator (http://jigsaw.w3.org/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.

VIPStephan
01-26-2007, 01:11 AM
Yeah, and now I see that I forgot to put the link to the validator... sorry for that.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum