I have a CSS animation with an absolutely positioned wrapper div and 2 sibling child divs with text, but the wrapper collapses in Safari and doesn’t honor the child elements inside of it. Is there a workaround? Here is the page with the issue in the header image. Innovation Grove | Rose-Hulman
Hello there!
I can’t really find the elements you’re referring to by just visiting the site. Is it this element?
<h2 class="header-text">
<div class="top-text">The Nexus of</div>
<div class="bottom-text">Collaboration and Ingenuity</div>
</h2>
In this case I would recommend putting two h2 elements inside a header element, maybe?
Btw, I use Safari, and both of these texts displayed fine for me.
Yes, the h2 “header-text” is the collapsing element, but only in Safari. It should wrap the “top-text” and “bottom-text” elements presenting as a red background behind the text, but it doesn’t.
Okay, thanks for that. Um, it looks like I’m seeing exactly what you want on my machine. Here’s a screenshot, and you can tell me if this is what you’re hoping for:
I would like to point out that using an <h2>
element as a container, as you are, isn’t semantically correct. While it may not be the root cause of your issue, I would fix it before we try anything else.
It’s important for elements like the h1, h2, h3 etc and other text elements like p and span, to only contain textual content. Not other block-level elements, like divs. This is good for SEO and content hierarchy.
My suggestion earlier about putting two h2 elements inside a header element is actually not the best solution, as two h2 elements could confuse search engines and just isn’t good semantics. I think the best way to achieve what you want is using one h2 element, and two span ones inside of it.
<h2 class="header-text">
<span class="top-text">The Nexus of</span>
<span class="bottom-text">Collaboration and Ingenuity</span>
</h2>
Because divs are block-level elements, meaning they take up all available width, and aren’t really meant to contain text, that could be the reason you’re seeing strange results. Change them to spans and see how things work. If there’s still an issue, it might be time to take a look at the CSS.
Hope you get it working soon!
I corrected the bad HTML and the issue was resolved by changing the positioning on the wrapper “header-text”. Removing the “bottom” attribute and replacing it with transform: translateY(-50%);