Simple question: where does the extra whitespace come from?, 1 of my images suddenly has extra whitespace |
Simple question: where does the extra whitespace come from?, 1 of my images suddenly has extra whitespace |
profoundDmd |
Dec 3 2020, 08:55 AM
Post
#1
|
Group: Members Posts: 5 Joined: 3-December 20 Member No.: 27,666 |
https://jsfiddle.net/rgz90kc3/
As you can see on the fiddle, there are 2 images (laptops), the first image is more right-aligned that the 2nd one, why/how? Thnx in advance! |
pandy |
Dec 3 2020, 03:23 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
No, I don't see that. What browser do you use?
|
profoundDmd |
Dec 4 2020, 03:20 AM
Post
#3
|
Group: Members Posts: 5 Joined: 3-December 20 Member No.: 27,666 |
Hm, browser should be irrelevant, occurs on Chrome and FF.
So you're saying those 2 images are vertically aligned? That is strange (well, actually it isn't, because they should), what browser are you using? |
pandy |
Dec 4 2020, 10:32 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
It should, but often isn't when something goes wrong.
But I misread, I thought you said horizontally aligned. Apologies. So is the goal that one image should totally cover the other? |
profoundDmd |
Dec 4 2020, 10:38 AM
Post
#5
|
Group: Members Posts: 5 Joined: 3-December 20 Member No.: 27,666 |
I just want them vertically aligned, they are both in another div and should not overlap/cover or anything like that. They reside in different parts of the website.
I'm strictly speaking about their position on the x-axis, so to speak. They need to be on the same position x, not the same position y. Hope i'm making myself clear. Like our avatars next to our posts (if i had one). They have they same x-position, not the same y-position. And without specifying the css property 'left', that is not the case for the images in the fiddle. |
pandy |
Dec 4 2020, 10:59 AM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
So one over the other? Over as in above, not on top of.
I'll try to get your HTML and CSS out of the fiddle thing and have a look. |
pandy |
Dec 4 2020, 11:18 AM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Have you looked at it directly in a browser? The images aren't on top of each other when the window isn't that small. But they do move around when the browser window is resized. It has to do with your positioning scheme.
To begin with remove what I've commented out below. CODE .workTemplate img { width: 210px; /* position: relative; top: 250px; */ And to avoid browser discrepancies, do use a doctype. I'm not sure how you want it to look, so I'm confused about what to suggest. Positioning everything is generally not a good idea though. And if you don't do it right, the result can be just this, things move around when the window is resized and look good only in the window size the page was designed in. |
profoundDmd |
Dec 4 2020, 03:47 PM
Post
#8
|
Group: Members Posts: 5 Joined: 3-December 20 Member No.: 27,666 |
So one over the other? Over as in above, not on top of. Yes, correct. It seems like one image is behaving unlike the other, and i don't know why... And that fiddle is merely to reproduce the problem i'm having on my site, so yes i checked in a browser, used doctype, ... |
profoundDmd |
Dec 5 2020, 02:58 AM
Post
#9
|
Group: Members Posts: 5 Joined: 3-December 20 Member No.: 27,666 |
I would like to add a question, since you seem to know your way around css/html.
As the sidebar scrolls in, you'll notice it gets sticky. The green and yellow div don't get sticky but show normal behavior. What I would like is for the sidebar to start scrolling again, as the footer comes in, is this possible without js you think? |
pandy |
Dec 5 2020, 08:48 AM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I don't know. I haven't looked into position: sticky, really.
|
Lo-Fi Version | Time is now: 24th April 2024 - 06:01 AM |