Using inline CSS won't style the H3 element, but including an external CSS file will

I encountered an issue while trying to convert an image grid from using external CSS to inline style. When I moved all the attributes inline, the h3 element disappeared. Can anyone assist with this problem?

Here is the original external CSS:

<script>

.image-zoom-container {
    list-style: none;
    font-size: 0px;
}
.zoom-container {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 33.33%;
    font-size: 16px;
    font-size: 1rem;
    border: 1px solid #fff;
    vertical-align: top;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.zoom-container img {
    display: block;
    width: 100%;
    height: auto;
}
.zoom-container .zoom-caption {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
}
.zoom-container .zoom-caption h3 {
    display: block;
    text-align: center;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.5em;
    font-weight: 900;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: #fff;
    margin: 23% 0 0;
    padding: 10px 0;
}
</script>

The HTML using external CSS:

<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<div class="image-zoom-container">
<div class="zoom-container">
<span style="zoom-caption">
<h3>Text</h3>
</span>
<img src="test.png" />
</div>
</div>

However, when converted to inline style it doesn't work properly:

<html>
<head>
</head>
<body>
<div style="list-style: none; font-size: 0px;">
    <div style="position: relative; overflow: hidden; display: inline-block; width: 33.33%; border: 1px solid #fff; vertical-align: top; box-sizing: border-box; -moz-box-sizing: border-box;">
        <a href="#">
            <span style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10;">
                <h3 style="display: block; text-align: center; font-size: 1.5em;">Costa Rica</h3>
            </span>
            <img style="display: block; width: 100%; height: auto;" src="Selection_009.png" />
        </a>
    </div>
</div>
</body>
</html>

Answer №1

The styles applied directly within the bottom block differ from those defined in the CSS stylesheet.
For example, the div previously labeled as .zoom-container is missing a specified font size. Therefore, it inherits the font size of its parent (which is 0px), resulting in the text inside becoming extremely small. Even though the h3 element has a rule of font-size: 1.5em, multiplying by 0px still renders the final size as 0.

Solution: Make sure to replicate all CSS rules from the .css file.

In addition, avoid nesting a h3 element within a span. Always validate your HTML code before making it live!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to superimpose an image

Struggling to overlay an image over two div columns - I attempted using Z-index and experimented with various positioning properties. What am I missing? The triangle situated behind the two boxes, along with the additional text on JSFiddle, should appear ...

The CSS file I've linked to in my HTML (ejs) document seems to be getting

As I work on developing my app from the backend, I am encountering an issue with loading CSS locally on my page. I am utilizing Node.js, Express.js, and EJS for my pages - part of the MEN/MEAN stack. <link href="../public/stylesheets/style.css" rel="st ...

Utilize JSoup to extract data from HTML div elements

After exploring this platform, I have found answers to most of my queries. Thank you for that! However, I encountered an issue while parsing a file containing Football Stat data. The div tag below appears to have multiple nested elements which are perplex ...

AngularJS: Users must click submit button twice for it to function properly

It's puzzling that I have to click the submit button on my form twice before it triggers the save function below. My HTML is written in Pug format. Below is a snippet of my HTML template: <form ng-submit="save()"> <div class="form-group" ...

How can I open a PDF file on the frontend using the Django framework?

I am attempting to extract content from a PDF file using the Django framework. Here is what I have tried so far: def upload(request): try: if request.method == 'POST': if request.FILES['document'].name.split ...

Optimizing FileReader result for seamless compatibility on all browsers and devices when loading into an HTML5 video player

I want to implement a feature where the selected video file can be loaded into an HTML5 element for users to preview before sending it to the server. However, I am encountering an issue with compatibility on Chrome and Safari browsers, both on desktop and ...

Resizing nested elements while maintaining consistent padding dimensions

If you're looking to create a sleek foundation for a 200px wide, 30px high editable combobox that can be easily used with angular binding or other JavaScript data-binding solutions, consider the following HTML code. However, there's a desire to m ...

Creating a water vessel design using CSS

Despite going through the JS tutorial, I still struggle with it and need some assistance. I believe using a jsfiddle would be helpful. I am attempting to use JS to create a small box that changes color from green to empty based on the fullness of a "wate ...

Modifying a header's properties by incorporating chosen values from a form

I am tasked with creating an HTML form that includes 3 select attributes (color, shadow, background-color). Depending on the user's selections, these attributes will be applied to a h1 element on the page. I need to achieve this without using JavaScri ...

Is there a way to switch the alignment of my text to the left side and move the form over to the right side?

How can I change the layout in Bootstrap 5 so that my text appears on the left hand side of my login page and the login form on the right? I have tried but failed, is there anyone who can help please? Here is my text: <div class="container"& ...

Is it possible to have 1 million links on a single webpage?

Would the performance suffer if I were to fetch 1 million link elements and add them to the DOM? I am looking to create a navigation list at the top of my website, similar to what Apple has on their site where you can scroll left or right using your keybo ...

Tips for implementing fluid transitions between mouse X and Y coordinates using JavaScript

I recently developed a function that enables a DOM element to follow the mouse cursor. You can check out the code here. Currently, I am looking for suggestions on how to add a nice animation to this feature. Ideally, I want to incorporate a slight delay w ...

Trouble Viewing Images on Website

I am currently dealing with a critical issue in my project. I am using the MVC model and have my CSS stylesheet located in the view folder. In this stylesheet, I have included the following code for the body element: body{ margin-left:250px; backg ...

What are some methods for utilizing jQuery or Javascript to dynamically modify CSS styles depending on the current URL?

I'm working on integrating a separate navigation area file with my content using PHP includes. I have this idea where I want the links in the navigation area to change color depending on the active page (current URL). Essentially, I need jQuery or Jav ...

Is there a way for me to make my navigation fill the entire height of the header?

I am trying to create a navigation menu within a header div where the list items are displayed horizontally inside a ul element. I want these list items to be 100% the height of the header. Despite trying to set the height to 100% on various elements such ...

CSS transform: applying the same CSS to multiple divs results in a variety of different outcomes

I am working on creating multiple parallelograms with the same skew aligned horizontally. While the first one looks perfect, additional divs seem to increase the skew more and more. I even attempted this using images and applying transform: rotate() but en ...

Issue with CSS background color not extending to full screen in webkit browsers when using 960.gs grid system

When using 960.gs, I have created a login screen with a div for the login form that has a background image. This div is positioned below a header, which centers it in the browser window. In my CSS, I am setting the body color as follows: body { backgr ...

Numerous images with clickable features

Currently, I am in the process of designing a screen that will showcase around 50 toggle buttons to be displayed on a monitor within a building. My goal is to incorporate a variety of images as toggles to ensure they are easily visible and identifiable. I ...

What are the steps to generate a production build directory in a React project?

Currently, I am developing a website utilizing react for the frontend and node.js for the backend. However, I'm unsure of how to deploy it to the live server. After conducting some research, I learned that I need to create a build folder. To provide a ...

The submission of the form is not functioning correctly when triggered by JavaScript using a button

My website was designed using a CSS/HTML framework that has been seamlessly integrated into an ASP.NET site. Within a ContentPlaceHolder, I have implemented a basic login form. The unique aspect is that I am utilizing the onclick event of an image to subm ...