Issue with Relative Div Rendering Correctly in Firefox and IE

Question

Issue with Relative Div Rendering Correctly in Firefox and IE

I have a picture nested in two divs and I wanted to overlay a piece of tape in the corner of the picture.

I created a div for the tape image and positioned it at the bottom of the document with the following attributes:

#tape {
    width: 100px;
    height: 65px;
    position:relative;
    left: 25px;
    top: -662px;
}

Here are the attributes of the picture:

#character-spotlight {
    margin-left: 50px;
    width: 250px;
    height: 250px;
    float: left;
    z-index: 1;
}

Both of these divs are nested into:

#content {
    width: 800px;
    height: 1360px;
    background-image: url(Cork.Board.png);
    background-size: 100%;
    float: left;
    display: block;
}

Which is nested into:

#container {
    width: 1024px;
    height: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    display: block;
}

You can view the webpage here.

It works fine in Chrome but has issues in IE and Firefox. Any help would be appreciated.

css internet-explorer html

Answer 1

Answer №1

(Your post does not contain any hyperlink) It is quite surprising to hear about the situation you described and how the provided CSS managed to work. It seems like having it function in Chrome is pure luck or perhaps you were adjusting the numbers to make it fit.

Fortunately, the solution is actually quite simple.

<div class='picture-wrapper'>
 <img class='picture' src='picture.../>
 <img class='tape' src='tape... />
</div>

Then, in the CSS:

.picture-wrapper {
 position: relative;  /* This sets the reference for the absolute position of the children */
}
.tape {
 display: block;
 position: absolute;  /* Position based on its parent */
 top: 0;  /* Top position */
 left: 0; /* Left position */
 z-index: 5; /* Bring to the front */
}

That should resolve the issue.

Edit: I just noticed that you included the link. If you want the tape element to overflow the edges of the picture, a simple method would be to add some padding to the top and left of the wrapper. Like this:

padding: 8px 0 0 8px;

Answer 2

(Your post does not contain any hyperlink) It is quite surprising to hear about the situation you described and how the provided CSS managed to work. It seems like having it function in Chrome is pure luck or perhaps you were adjusting the numbers to make it fit.

Fortunately, the solution is actually quite simple.

<div class='picture-wrapper'>
 <img class='picture' src='picture.../>
 <img class='tape' src='tape... />
</div>

Then, in the CSS:

.picture-wrapper {
 position: relative;  /* This sets the reference for the absolute position of the children */
}
.tape {
 display: block;
 position: absolute;  /* Position based on its parent */
 top: 0;  /* Top position */
 left: 0; /* Left position */
 z-index: 5; /* Bring to the front */
}

That should resolve the issue.

Edit: I just noticed that you included the link. If you want the tape element to overflow the edges of the picture, a simple method would be to add some padding to the top and left of the wrapper. Like this:

padding: 8px 0 0 8px;

Answer 3

Answer №2

If you prefer the absolute positioning of the element in relation to the page container:

#tape {
    height: 65px;
    left: 325px;
    position: absolute;
    top: 300px;
    width: 100px;
}

(Although, I must confess that I find PeterVR's code more appealing as it maintains a relative positioning, which can be useful if you are placing new elements above the #tape div).

Answer 4

If you prefer the absolute positioning of the element in relation to the page container:

#tape {
    height: 65px;
    left: 325px;
    position: absolute;
    top: 300px;
    width: 100px;
}

(Although, I must confess that I find PeterVR's code more appealing as it maintains a relative positioning, which can be useful if you are placing new elements above the #tape div).

Issue with Relative Div Rendering Correctly in Firefox and IE

Answer №1

Answer №2

Similar questions

The drop-down items on the navigation bar disappear too quickly

The battle between CSS and jQuery: A guide to creating a dynamic zebra-style table without relying on additional plugins

Using image paths in CSS for styling purposes

An issue has occurred while parsing the XML data, causing the document to not be properly formatted. As a result

What is the best way to reset form after submission in Next.js?

Create the columnHeader to match the width of the CSS column

Tips for preventing images from stretching the width and height of my HTML

Troubleshooting problem with Angular 2 in Internet Explorer related to the use of [style]="

Tips on dynamically looping the formcontrolname and implementing validation strategies

The CSS styles for a React component in Rollup are not being incorporated into the server-side rendering document in NextJS

A step-by-step guide to setting up a Slick Slider JS slideshow with center mode

Unable to access the following element using jQuery's next() method

Adjust the CSS within a <style> element using jQuery or javascript

Error encountered at /edit-menu/edit/: The 'Product' object does not contain the attribute 'is_valid'

Drop down list not showing array values

Achieving bottom alignment for a button in Bootstrap 4

React cannot be utilized directly within HTML code

What is the best way to link various stylesheets to a Rails project?

Ways to delete an image from a batch file uploading feature

Troubleshooting problem with autoplay on a Parallax Content Slider in IE8