A quick Pointer in the Right direction please?

The Page is http://www.c5d.co.uk/1841ed1.php

The table at the top which starts County of is not supposed to have any borders.

The CSS I am using is

#table-4 tr,th,td,#table-7 tr,th,td,.table1841header tr,th,td {
border-collapse:collapse;
border:0 solid #000;
border-bottom-color:#708090;
text-align:left;
border-style:hidden;
}

When I inspect the table via Chrome it tells me that CSS line 1806 is operating (as I understand it) If so, why does the table have borders

As an aside, this CSS is an amalgam of six made via codebeautifier and it looks as though there are duplcate entries. Is it possible to spot them somehow

Where is that table? I can’t see a table-4 on that page?

Is it the right link?

Off Topic

@certificates: when you post code on the forums, you need to format it so it will display correctly.

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

The table is called table1841header

and this is what Chrome tells me

Not for that page.

2 Likes

Apologies everybody I quoted the wrong URL It should be

http://www.c5d.co.uk/description1841ed1.php

I’m really sorry

It’s line 105

As Ron pointed out in another thread you are still messing up your comma separated rules.

Each comma separated value is a new rule and has nothing to do with what else is on the line.

e.g.


#table-4 tr,th,td

That should be:


#table-4 tr,
#table-4 th,
#table-4 td {}

Howvere there is no need to target the tr and you have missed out the actual table which is the only element that border-collapse applies to.

You probably meant this:

#table-4,
#table-7,
.table1841header{
	border-collapse:collapse;
	border:none;
	border-bottom:1px solid #708090;
	text-align:left;
}
#table-4 th,
#table-4 td,
#table-7 th,
#table-7 td,
.table1841header th,
.table1841header td{border:none}

Thanks But the coding you have supplied simply centres the text and leaves the borders

As I said, in the second part of the question. This sheet is an amalgam made by codebeautifier and whilst I initially thought it was fine, errors like this keeper cropping up.

The program also removed the notes which I had added so that I knew what did what which wasn’t helpful and I am sure numerous items have been duplicated.

Is it possible in any way to spot them

I now note in the real page that you have an id not a class in your page so the rule I gave you above should be an id.


#table1841header

Not easily no. I would have avoided code amalgamation tools unless you are confident in what you are doing.

You can see from the web inspector what rules are being applied but it is up to you to spot what they should be (such as the comma separated rules I mentioned above).

Thanks again.

Well I’m not confident as you can tell/know. That’s why I thought that was a better option!

No it doesn’t try again:) I’ve tested on your live site and it clears all borders.

You need to add text-align:left to the second rule if you want all table headers and content to the left.


#table-7,
#table1841header{
	border-collapse:collapse;
	border:none;
	border-bottom:1px solid #708090;
	text-align:left;
}
#table-4 th,
#table-4 td,
#table-7 th,
#table-7 td,
#table1841header th,
#table1841header td{border:none;text-align:left;}

Using the validator (jigsaw) is a good idea, but it won’t be able tell if what you coded is what you want. eg. it will catch syntax errors, but not poorly chosen selectors.

As for redundancy, maybe a ā€œlinterā€ like at http://csslint.net could help?

(rollup)	Disallow too many floats		Too many floats (45), you're probably using them for layout. Consider using a grid system instead.
(rollup)	Disallow too many font sizes		Too many font-size declarations (53), abstraction needed.
(rollup)	Headings should only be defined once	You have 2 h1s defined in this stylesheet.
4 Likes

Yes, I know it can be hard to work out what to do for the best but anything that dramatically changes your code is always a risk. That’s why we have back ups and then can refer to the original to see what we had in place to start with :slight_smile:

It seems that the you have amalgamated disparate rules which makes it hard to make changes or indeed decide if the format is wrong. I’m all for shorter code but readability is vitally important.

I think you will just have to work your way through any issues you see and then we can jump in and try to help.

You’ve ended up with rules like this:

#Row1, #Row3, #Row5, #Row7, #Row19, #Row26, .table1861 .col1, .workhouse1861 .col1, .table1891 .col1, .table1901 .col1, #Row1, #Row3, #Row5, #Row7, #Row19, #Row26 {
	width:15%;
}
#Row2, #Row6, #Row35, #Row2, #Row6, #Row35 {
	width:50%;
}
#Row4, #Row8, #Row9, #Row10, #Row11, #Row12, #Row13, #Row14, #Row15, #Row16, #Row17, #Row18, #Row20, .barracks1851 .col1, #Row4, #Row8, #Row9, #Row10, #Row11, #Row12, #Row13, #Row14, #Row15, #Row16, #Row17, #Row18, #Row20 {
	width:20%;
}
#Row22, #Row23, #Row24, #Row25, #Row31, #Row36, #Row37, #Row40, #Row22, #Row23, #Row24, #Row25, #Row31, #Row36, #Row37, #Row40 {
	width:25%;
}
#Row27, #Row32, #Row27, #Row32 {
	width:10%;
}
#Row28, #Row29, #Row33, #Row34, #Row28, #Row29, #Row33, #Row34 {
	width:40%;
}

Effectively you would have only need 5 classes to do all that but now you have heavily weighted rules that are not easily over-ridden. I realise these pages have been built over time and this is what you have ended up with but it doesn’t make it any more palatable:)

It becomes a bit of a ā€˜slog’ now.

On a side note your pages are taking a long time to load and it would be worth seeing what the issue is as you don’t have much on that page. I would expect it to load more or less instantly.

3 Likes

Thanks, I tried lint which gave me 216 warnings and no errors

Some of which I understand

92 1 Disallow overqualified elements Element (p.tobefilled) is overqualified, just use .tobefilled without element name.
p.tobefilled {

I guess you don’t need the p in the CSS Sheet

Some of which seem debateable.

30 1 Disallow IDs in selectors Don’t use IDs in selectors.
#navcontainer {

There seems much discussion about this on line.

And some of which I don’t understand

69 1 Require properties appropriate for display margin can’t be used with display: inline.
margin:0;

Is this working or not? As I don’t know what it relates to because the original has disappeared, I’m stumped

And this (rollup) (rollup) Disallow too many font sizes Too many font-size declarations (53), abstraction needed.

I haven’t a clue

Thanks.

I do still have have the original sheets of course, but it would be hard to go back to them

Some of the pages are quite large, They are census tables with about 1000 lines of tabular data. Some are not such as the description or even the homepage (http://www.c5d.co.uk/censuspages.php)

I wouldn’t know how to investigate why they take a long time to load.

That’s correct and you rarely need to qualify the class with a tag name. Keep it short and simple.

These days it is generally regarded as bad practice to hook css into ids because selectors become over-qualified and you have to maintain long paths of rules. Simple classes would have sufficed and then you cut down on specificity issues and don’t have to fabricate long rules just to over-ride an id.

A lot of your tables are the same and one class could have styled them all. If you wanted a specific table modified then you could just add a second class to modify it.[quote=ā€œcertificates, post:14, topic:247003ā€]
margin can’t be used with display: inline.
[/quote]

Vertical margins do no apply to inline elements and are ignored. It will do no harm but is not needed.

Its generally accepted that you only need a few different font-sizes on your page so if you are repeating them 53 times then you are not abstracting the code enough. You need to be consistent and set the main size for your content in your body rule and then you probably only need to set up the differences with a few special classes. Set your headings to the correct size at the start and then no need to repeat them anywhere else.

Too often people treat every element as a new element and start styling it again and repeating the same properties when in fact most of it should already be inheriting the correct properties anyway or have been set as a default.

Of course this is hard for you to do now unfortunately as you have a lot of pages to look after that have grown individually over time.

What I had thought about doing was to go through the sheet and try and find all the items which refered to each table and then redo them as one item for each table, or a couple if other bits needed doing.

Would that be a reasonable thing to do?

If I understand what you are saying then you could end up with loads of blocks of rules that are all effectively the same apart from the id/classname. That would create quite a larger file.

As you have lots of pages then you are limited to making css changes whereas what you really need to do is make html changes to standardise everything but you mention you have 500 pages so this is out of the question now.

I would leave the code as it is and just try to work your way through the conflicts one at a time. Modifying historic css is not an easy (or likeable) task because you can never be sure if a certain rule is needed or not.

Sorry I can’t be more helpful:(

OK I do appreciate the help.

I think I already have lots of blocks of rules that are the same apart from the ID.

I’ll keep working on it.

If you use Firefox I recommend you the Firebug(*) addon, that together with the ā€œCSS Usageā€ extension could be a grate help to log which css rules actually are in use in your site.
https://addons.mozilla.org/en-US/firefox/addon/css-usage/?src=ss

(*) Firebug, is still in use even though users now are asked to migrate to Mozilla’s built in Web Dev Tools.

2 Likes