Odd behaviour on image height

HTML & CSS
1

I have a site with a divider image displayed after each <section>. The CSS for this is thus:

section::after {
  content: url('../images/h-line.jpg');
  display: block;
  text-align: center;
}

The image is 280px x 2px. It works okay except the height of the image seems to vary if there is more than 1 section on a page. I can’t work out the actual height it’s dispayed at. The height seems to vary depending on the width of the browser window.

I get the same problem in FF, Chrome and Edge.

The live page that is giving me most grief is at https://www.williamstewartfoundation.org/news.php

2

Could you post a couple of comparitive screen shots? I don’t see any change in the height or width of the image at any browser width or number of sections. It doesn’t seem to be influenced by any css. I could be missing something.

1 Like
3

I wondered whether to post a screenshot! I hope this helps. What is odd is it doesn’t exactly show what I see on screen although it does demonstrate the problem (I think).

What I see on screen is the first divider is “short” and the other 2 are “taller”; what the screenshot shows is the 1st and 2nd are short and the 3rd is taller. :upside_down_face:

Screenshot_2018-07-28%20Our%20News%20The%20William%20Stewart%20Hope%20for%20the%20Hopeless%20Foundation%20Malawi
Screenshot_2018-07-28%20Our%20News%20The%20William%20Stewart%20Hope%20for%20the%20Hopeless%20Foundation%20Malawi1435×852 278 KB

1 Like
4

I don’t know if I trust my vision when it comes to spotting a pixel difference. (I would have never noticed without that screen capture and looking for it) Does it look like they become the same height when you zoom in?

2 Likes
5

It does indeed. It’s odd how it changes. I had thought of making the image just 1px high and seeing if I still had the problem, but I would like to understand what is happening…

6

Sometimes it does, and sometimes not. In this case, I will guess that the issue is being caused by rounding, because I do not see it from your site… just on the screen shot. Can you replace the image with a gradient or create another image that is twice those dimensions? The larger image should scale down smoothly on an Apple O/S monitor.

7

The image shouldn’t be being scaled. It’s just displayed as is (or should be). The width (280px) was chosen so it wouldn’t need scaling, even on an iPhone 4. The after pseudo element has a height of 22.4px on my machine, and I’m not aware how that comes about.

8

OK. Test rule:

section::after {
    background-image: url("../images/h-line.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
    content: "";
    display: block;
    height: 4px;
}

Give this a try. See what happens. You can reduce the height.
(Sorry, I’m having a hard time typing)

1 Like
9

Hmmm. Thanks Ron. It’s getting weirder. That works fine with a height of 4px or even 3px, but I get the same problem if I set the height to 2px. Even resizing the image to 1px high doesn’t change it.

If I use the 1px high image with my original CSS the separators are all the same. The problem just seems to be with a height of 2px.

10

Does anyone else actually see the problem, in the live site?
To me the lines are the same, in 3 different browsers.
I only see it in the screen shot where it looks to be 1px bigger.
The first thing that comes to mind is that you don’t originally specify any height, which Ron has addressed.
If it’s only you seeing it, it may be a rounding issue specific to your video hardware.

3 Likes
11

Thanks Sam. I’ll try it on another machine later. I’m beginning to think I’m the only one…

Edit: Looks like it is my new laptop. Probably accounts for why I didn’t notice it before.

12

That’s the line-height.

I wouldn’t use the content property for the image as it seems unreliable but use a background image and set height and width and hide the overflow.

e.g.

section::after {
    background: url(../images/h-line.jpg);
    display: block;
    text-align: center;
    content: "";
    height: 2px;
    overflow: hidden;
    width: 280px;
    margin: auto;

You may still have the same issue but at least you have ruled out the discrepancies in how the content uri handles images.

2 Likes
13

Thanks Paul.

I hadn’t thought of using a background image till I saw Ron’s suggestion; that seems a better bet.

1 Like
14

I spent some time giving my best effort at reading documentation for ::after, content:, <img>, etc. and got a bit lost. The best I got from it is that ::after is not in the DOM, and the image is a replaced element subject to the sizing algorithm. I’m most unclear about the algorithm. Something like when there are intrinsic dimensions they are used within the constraints of their containing element and in the case of a pseudo element the constraints of the element that is in the DOM are used.

My guess was that (as Paul has posted) line height is involved with the computed values used to paint the image and as the line height changes it affects the images height.

It is very interesting, but gaining a deeper understanding of the workings probably has little value except for educational reasons. At least in cases where there are ways to force the dimensions and not rely on the algorithm.

3 Likes
15

Pseudo elements are display: inline by default, so will be affected by line height for their overall size.
This is why Paul overrides that with display: block and an explicit height.

3 Likes
16

And not only that, the <img> was removed from the content: property and was set up as background image.

Even if you have a pseudo block element you would still have line-height effecting it if you injected an inline <img> by way of content:" "; . As was seen in the code from post #1

4 Likes
17

Another reason for using display: block is so that it falls underneath the section.

1 Like
18

It may be easier to understand if you refer to what the specs have to say about pseudo elements.

12.1 The :before and :after pseudo-elements

The :before and :after pseudo-elements interact with other boxes as if they were real elements inserted just inside their associated element.

That means that we can style them as any other html element.

It’s not that “the constraints of the element that is in the DOM are used” , it’s the constraints that you set on the pseudo itself that get used.

A pseudo ::after element set as display:block;, with fixed width and heights set on it, could have content spilling out. If you set a height of 5px and then placed 1000 characters of text in the content property. It would overflow just as any other fixed height block element would. That is unless you set overflow:hidden on it.

So in a nutshell you can make a pseudo behave in the same manner as you can any div. You can only fill it with content via the content property though.

Unless your using them as counters, pseudo before and after are mainly used for decoration without needing to add extra markup in the html. They are still used a a float clearing method though.

4 Likes
19

[off-topic]
Perhaps consider a SVG script which would eliminate a HTTP Request and be more versatile.

Edit:
Or even try this:

or this:

https://css-tricks.com/examples/hrs/

[/off-topic]

1 Like
20

Gradients were mentioned already, which is probably the way I would do this.
Certainly an SVG would be good for more complex shapes.

2 Likes