Puzzled about a line break

HTML & CSS
1

I have a problem understanding why a phrase will work with one CSS name and not another, when the CSS is the same in both

My web page is http://www.c5d.co.uk/1939NTHB.php
Style sheet www.c5d.co.uk/censusstyle.css

The entty is Number 246. If I use the CSS P class=“herboyninetynine” it works fine If I use p class="herboyninetynineb it doesnot yet I have specified the same coding in both. If I can get it to work I will change the line height and font sizes in due cours in the second one.

What I really want is for the entry to look like the entry in row 249 but with the d
Upsidedown V to be very small and fit in the top row if that is clear

Thanks for any help you can offer me

2

First stop is the css validation service :slight_smile:

.herboyninetynineb {
	display:inline-block;
	vertical-align:middle;
	font-size:.875em;
line-height:.875/*    padding-left:8px; /* if desired */ margin:0;
}

Value Error : line-height attempt to find a semi-colon before the property name. add it

See if you can spot the error:)

Also I note that your page container is set at 950px wide but your table is much much wider causing the whole page to be offset incorrectly and looks very awkward to me. Either remove the table for the container and center it on its own. Or make the rest of that page as wide as the table by setting .container to display:table.

1 Like
3

I’m really sorry but I don’t understand what you are trying to tell me.

This is the extract. One works, one doesn’t

.herboyninetynineb { display:inline-block; vertical-align:middle; font-size:.875em; line-height:.875;/*    padding-left:8px; /* if desired */ margin:0; }
.herboyninetynine  { display:inline-block; vertical-align:middle; font-size:.875em; line-height:.875;

I know the page are off centre but that is a later problem, I have 500 of these pages, so it’s not a minor task

Thanks

4 
.herboyninetynineb { display:inline-block; vertical-align:middle; font-size:.875em; line-height:.875;/*    padding-left:8px; /* if desired */ margin:0; }
.herboyninetynine  { display:inline-block; vertical-align:middle; font-size:.875em; line-height:.875;

And what’s different? And don’t say they are the same, because they are not. They may be intended to be the same, but what is actually typed there? (here’s a hint, the code highlighting here should point you in the right direction…)

5

Add a semi colon before the property name!

e.g. before margin:0 add a semi-colon:

.herboyninetynineb {
display:inline-block;
vertical-align:middle;
font-size:.875em;
line-height:.875/*    padding-left:8px; /* if desired */ ;
margin:0;
}

The semi colon was missing after your comment tags so effectively you had this invalid rule:

line-height:.875 margin:0;

I’m sure that you could have spotted that for yourself :slight_smile:

It may actually be a minor task if you have followed the same format on all pages then all you would need to do would be to add display:table to .container.

Just because you have hundreds of pages doesn’t diminish the fact that things need to be correct although I agree in some case it can be very awkward if all pages are constructed incorrectly/awkwardly to start with.

6

Thank you both. I’m sorry though I just can’t see what’s wrong. I actually copied and pasted the CSS and just change the name. Even now it still does not seem to work.

I did validate the CSS via Lint and it said it was OK

5 lines 0 errors 0 warnings
1 .herboyninetynineb { display:inline-block; vertical-align:middle; font-size:.875em; line-height:.875; margin:0; }
2 .herboyninetynine { display:inline-block; vertical-align:middle; font-size:.875em; line-height:.875; margin:0; }

7

I’m not sure what you mean?

You have removed the css comments and added the missing semi-colon and now you have a valid rule:

.herboyninetynineb { display:inline-block; vertical-align:middle; font-size:.875em; line-height:.875; margin:0; }

That rule is now valid and if you add that class to the element in the html concerned those rules will apply (you still have the old class name in the html). You can then fiddle with that rule to make the changes you want. I’m guessing you want to reduce the line-height to bring the ‘n’ in line with the other text but I’m not quite sure if this was your goal exactly?

8

I have now uploaded it with herboyninetynineb as the class and you will see that it does not work.

My goal is to have the two lines half the height, like entry 249 (col 12) That was the class her boy ninetynine does.

Then I want to halve the height of the n and the upside down v so that it looks like the original entry made by the enumerator in his book, ie squeezed in.

9

No, I actually see the rule working and being applied exactly as you have written it. Feel free to modify it to make it do what you need.

Again I already told you to manipulate the line-height to bring the n and the v closer together but you ignored that bit of advice so I assumed that was not what you wanted?

If you reduce the line-height to .4 you may get close to the display you want (although that’s not the way I would have written that section but it should get you close to what I think you want).

Of course your code is semantically incorrect and that inline fragment shouldn’t be a p element anyway but that is a question for another day.

Please test out the code I suggest before saying it does not work and then if its not what you wanted then we have something to work on :slight_smile:

10

Are you inserting just the letter ‘n’ or is the word ‘underhand’ the insertion?

Note that html has an ins tag for this purpose.

11

Thanks for your patience. I have cleared out the cache, reloaded the page completely and it now looks as I want it

I have adjusted the CSS a little (650 was more the mark 4 was a bit too small

.herboyninetynineb { display:inline-block; vertical-align:middle; font-size:.650em; line-height:.650; margin:0; }
.herboyninetynine { display:inline-block; vertical-align:middle; font-size:.875em; line-height:.875; margin:0; }

And this is the HTML in the table

Underhan
ʌd Steel Furnaceman Steel &
Iron Rolling Mill (Heavy Worker)

The tag isn’t really what I want. It’s because the n has been inserted above the word and an upside down v below it.

How would you have done it out of interest?

And I note your point that the p tag is semantically incorrect, Should it be a span?

Again there’s just too many to alter with all the pages.

You referred to the container looking odd. I shall post that as a new topic.

12

If the whole word had been inserted then I would have done it like this:

<td><ins class="insert-word">Underhand</ins> Steel
  Furnaceman Steel &amp;<br>Iron Rolling Mill (Heavy Worker)</td>

.insert-word {
	display:inline-block;
	vertical-align:baseline;
	position:relative;
	text-decoration:none;
	margin:0 0 .3em;
}
.insert-word:after {
	content:"ʌ";
	position:absolute;
	bottom:-.55em;
	left:50%;
	color:red;
}

If it was just a typo you were correcting where the n was missed out then I would do it like this:

<td>Underha<ins class="insert-word">n</ins>d Steel
  Furnaceman Steel &amp;<br>
  Iron Rolling Mill (Heavy Worker)</td>

The arrow is added with pseudo content because its not part of the actual text.

.insert-word {
	display:inline-block;
	vertical-align:baseline;
	position:relative;
	text-decoration:none;
	margin:0 0 .2em;
}
.insert-word:after {
	content:"ʌ";
	position:absolute;
	bottom:-.55em;
	left:0;
	color:red;
	font-size:.8em;
}

The meaning of the word is unchanged but readers, screen readers and assisted devices know that the letter ‘n’ has been inserted. It’s all about using html n the way that it was designed. In most cases good html will describe exactly what the content is and what it does.:wink:

2 Likes
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.