Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Doubled border/phantom box for images with block display style #332

Open
bblhd opened this issue Dec 29, 2024 · 3 comments
Open

Doubled border/phantom box for images with block display style #332

bblhd opened this issue Dec 29, 2024 · 3 comments
Labels
bug Something isn't working render

Comments

@bblhd
Copy link

bblhd commented Dec 29, 2024

Hello! When styling an image in dillo, if you give it the property display: block; and also a border, such as border: 1px solid black;, it will draw two borders around the image, one around the image itself, and one where the image's margin should be, also doubling the margin.

It seems to be creating a box around the image with the same style properties as the image?

Minimal demonstration:

<!DOCTYPE html>
<html>
<head>
<title>Demonstation</title>
<style>*{margin: 10px; padding 10px; border: 5px solid black; display: block;}</style>
</head>
<body>
<div style='border-color: blue;'>
<img style='border-color: red;' src='https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Youngkitten.JPG/320px-Youngkitten.JPG'/>
</div>
</body>
</html>

How dillo renders it (for me):

doubledborder
@rodarima
Copy link
Member

Thanks for the report, it is hard to find a proper issue nowadays, even less
with a working reproducer.

This seems to be coming from the current implementation for block and
display-block, which is internally done by wrapping the image in another
container which seems to be also getting the same style.

I'll try to find a quick workaround. Otherwise I'll probably address this after
3.2.0, as this may require changing the way the block elements are implemented.

@joshas
Copy link

joshas commented Jan 2, 2025 •
edited
Loading

Are you aware, that by using CSS universal selector *, you are styling all HTML elements on the page, including <html> and <body> ? Interesting to note, that Dillo does not render <head>, <title> and <style> elements, when they get display: block style applied.

@bblhd
Copy link
Author

bblhd commented Jan 3, 2025

Are you aware, that by using CSS universal selector *, you are styling all HTML elements on the page, including <html> and <body> ?

Yes, hence the differently coloured borders, though I didn't know that some browsers could interpret head/title/style tags as block elements until today

@rodarima rodarima added bug Something isn't working render labels Jan 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working render
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@joshas @rodarima @bblhd