<b>s misaligned

HTML & CSS
1

All my hotel pages accessed from http://pintotours.net/Americas/DomRepublic/Punta.php and then by clicking “Look inside” have a div .notes {}

The bold <b> does not line up properly. I have even deleted the space between the word “Note” and the number, but each page has one number misaligned.

I started to add a .notes b{} but have no idea what to put inside to solve this

If you could have a look, please.

2

That section is fully justified, instead of left-aligned, which is why the lines are being stretched out by different amounts. It’s rare that fully justified text looks good on the web, so get rid of it and just leave it with the standard ragged right edge.

3

The reason for the different space-lenghts is the text is justified.

Try your solution idea; declare left align for the b element, and declare it an inline-block to take effect:

.notes b {
    display: inline-block;
    text-align: left;
}

Edit) Too slow posting. :smile:

Edit 2) Too short text lines that’s fully justified may not look so good, longer lines is fine.

4

Hi

Thank you both

Both options work. I thing I’ll take the last one as I kind of like the justify bit!

5

There is one more option that I skipped, but it would work too:

Declare whitespace for the b. E.g.:

.notes b {
    white-space: pre;
}
6

Thanks Eric_J but I’ve already applied your last suggestion.

7

Wouldn’t that display in monospace font?

8

It will unless you also set a font for it - monospace is the default font for that code but isn’t the only possible font.

1 Like
9

No! That is probably the initial font setting for the seemingly affected elements, like in the default CSS2.1 style for the pre element: http://www.w3.org/TR/CSS21/sample.html

pre {
        display: block;
        unicode-bidi: embed;
        font-family: monospace;
        white-space: pre;
}
10

That is usually the initial font-family in the default style for pre-formatted html elements. It can’t be altered by white-space property.

AFAIK; the css property “white-space” only handles the collapse of whitespace characters in the content and does not affect other properties of the element, but it can be exclusive and override their effects regarding whitespace in code.

The value “pre” preserves all whitespace characters in code like space and line break and tab and can not allow continous inlines in code to wrap (soft-break). Resulting the text-align:justify to only align left because the right edge can not wrap and then adjust lenghts of spaces to fit.

The value “pre-wrap” preserves intermediate whitespace characters and would allow the right edge to wrap and then strips the ending from whitespace characters. Resulting the text can be fully justified and streching the length of spaces while preserving intermediate chains of whitespace characters like tab and space.

The initial value for undefined white-space in all not pre-formatted elements’ is “normal” (collapse sequal white-spaces and wrap lines as necessary)

More info at: http://www.w3.org/TR/CSS21/text.html#white-space-prop

1 Like
11

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