Troubleshooting: CSS border-radius issue with embedded iframe

I am struggling to embed an iframe from my Blogger site into a specific section on my website and round its corners using CSS. I followed a tutorial that suggested using overflow: hidden;, but for some reason, it's not working in my case - see the image below.

CSS:

section iframe.dnevnik{
    width: 100%; 
    height: 770px;
    border: 1px solid grey;
}   

section.dnevnik {
    margin-top: 83px;
    margin-bottom: 10px;
    padding: 0px 0px 0px 0px;
    border: 2px solid black;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1.00);
    font-size: 16px;
    font-family: s10;
    text-shadow: 1px 1px 1px #EFEFEF;
    overflow: hidden;
}

HTML implementation:

<section class="dnevnik">
  <iframe class="dnevnik" src ="http://ziga-lausegger.blogspot.com/" frameborder="0" scrolling="no"></iframe>
</section>

I'm unsure why the overflow property isn't taking effect when applied to the parent element containing the iframe. Any insights?

htmlcssiframe

Answer №1

The issue stemmed from mistakenly applying the border-radius: 10px; to the <section> element rather than the <iframe>. The corrected code should be structured as follows:

section iframe.dnevnik{
    width: 100%; 
    height: 770px;
    border: 1px solid grey;
}   

iframe.dnevnik {
    margin-top: 83px;
    margin-bottom: 10px;
    padding: 0px 0px 0px 0px;
    border: 2px solid black;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1.00);
    font-size: 16px;
    font-family: s10;
    text-shadow: 1px 1px 1px #EFEFEF;
    overflow: hidden;
}
<section class="dnevnik">
  <iframe class="dnevnik" src ="http://ziga-lausegger.blogspot.com/" frameborder="0" scrolling="no"></iframe>
</section>

To resolve the issue, simply replace section.dnevnik with iframe.dnevnik.

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

Fluid Grid design showcasing a gap on the right side

After working on the Skeleton Framework and making adjustments to the grid design, I am facing a small gap issue on the right side. Despite things slowly falling into place, this minor gap is causing confusion. Please refer to the image below for clarifica ...

javascripthtmlcssframeworksresponsive

SQL post commenting management system: aggregating all comments to a single post

What I'm Looking for: I am looking to display all comments related to a specific post directly under that post. This can be achieved by using a loop to showcase all the CommentTexts in a list. For instance, if there are 3 comments with PostNr = ...

phphtmlmysqlsql

Creating an error message display function using HTML and JavaScript when incorrect input is detected

I am having trouble creating an HTML5 and JS program that will show an error message if the user input is empty. Despite my efforts, I can't seem to get the "Error Message" to display. As a beginner, the video tutorial I'm following doesn't ...

javascripthtml

Targeting child elements with CSS selectors

In my ecommerce software, I have a menu that I want to customize by making the main categories bold. I have attempted various methods, including the ones shown below, but I am struggling to target the correct elements (specifically those in capital letter ...

htmlcsscss-selectors

Inserting a border both above and below an element may result in the parent overflowing

I am facing an issue similar to the following: div.parent { height: 100px; padding: 20px; box-sizing: border-box; overflow: auto; } div.parent div.thing { height: 20px; width: 90%; border: 1px solid black; } <div class="parent"> ...

htmlcssborder

Transform the radio selection into physical buttons with the Ruby on Rails Simple Form Gem

I've been struggling to achieve the desired layout when using the automatic wrappers generated by the Simple Form gem. I am working with Ruby on Rails and the Simple Form Gem, trying to create radio buttons with a specific design: https://i.sstatic.n ...

htmlruby-on-railsrubysimple-form

Issue with loading CSS and JavaScript following a GET request

I initially used express and the render function to display different pages on my website. However, I've now decided to switch to vanilla JavaScript instead. The objective is to load the HTML file along with all the necessary JS and CSS files. Below i ...

javascripthtmlcssnode.jshttp

Click once to reveal, click twice to conceal the slider

I currently have a web page set up so that a single click on the text displays a slider for selecting a range of values. Now, I want to incorporate a feature where a double click will remove the slider. Below is the HTML code: <!DOCTYPE html> < ...

javascriptjqueryhtml

Menu secured in place within the wrapper

My website is contained in a wrapper with a max width, and I have a fixed side menu that can be toggled with a button. The problem I am facing is keeping the fixed side menu within the page wrapper. Fixed elements are typically positioned relative to the ...

javascriptjqueryhtmlcss

My efforts to resolve the issues in my code have been ongoing, but unfortunately, I have been unable to find a solution

I'm struggling to insert my contact form code into the contact tab without it interfering with the tab bar. I want the form to appear in the middle of the page when the tab is clicked. I've tried various placements for the code but none seem to ...

htmlcss

Utilizing jQuery to Sort Table Rows based on an Array of Class Names

I have a table containing values and a filter option where users can select multiple values to filter the table. I want to create a filter with numbers ranging from 1 to 10, and assign class names like filter_1, filter_2, filter_3, etc. to each table row ( ...

javascriptjqueryhtmlarraystablefilter

Is it possible to combine the index page with the login page for a web project, or is it recommended to create a separate login page?

Would it be a violation of any rules if the index page of my web project is used as the login page for users? Do I have to redirect them to a different page? Is this considered best practice? ...

htmljsp

Utilizing the background-clip property with a gradient overlay

My Objective: https://i.sstatic.net/DscXK.png My goal is to have both the arrow container and the full-width bar share the same gradient. I initially tried creating them separately and applying the gradient individually, but it resulted in a clipped look. ...

htmlcssgradientbackground-clip

Creating an infinite loop of SVG rectangles pulled from a database

As I extract svg rectangles from a database using Python, I find myself hardcoding the process in order to change the colors of each rectangle in my CSS style sheet. With potential scalability issues in mind - if there were 100 rectangles - I am wondering ...

pythoncssmysqlsvg

Issue with QuickSand Script not displaying properly on Internet Explorer 7

My website features an edited version of Quicksand that displays correctly on Chrome, Opera, and Firefox, but runs into CSS issues on IE. Oddly enough, when I was using the static version, the CSS displayed properly even on IE until I added the Quicksand e ...

jquerycssquicksand

What is the correct method in CSS to resize an image while maintaining its proportions within a div container?

I've been struggling to properly insert images into a <div> element on my website. I've experimented with various techniques, such as setting max-width and max-height to 100%, changing the display property of the parent element to flex, and ...

htmlcss

In what situations should the `#` symbol be used to select a DOM element?

There are times when I have to retrieve elements in the following ways: var object = document.getElementById('ObjectName'); Other times, it's done like this: var object = document.getElementById('#ObjectName'); What distinguishes ...

javascripthtmldomgetelementbyid

Comparing transition effects: scale, transform, and all

My goal is to apply transition effects to specific transform functions in CSS, such as scale(), while excluding others like translate(). Initially, I attempted the following code snippet: input:focus + label, input:not(:placeholder-shown) + label { tran ...

csscss-transitionscss-transforms

Can the orientation of the card reveal be customized in Materializecss?

Exploring the card-reveal feature in the materializecss framework on this page: https://codepen.io/JP_juniordeveloperaki/pen/YXRyvZ with official documentation located at: In my project, I've rearranged the <div class="card-content"> to display ...

javascriptcssmaterialize

Tips for activating just a single event, whether it's 'change' or 'click'

I am facing an issue with a number input tag that has two event listeners 'on-click' and 'on-change'. Whenever I click on the arrow, both event listeners get triggered. I want only one event to trigger first without removing any of the ...

javascripthtmlvue.jsevent-handling