Displaying images on the left side using CSS is causing issues in an ASP.NET project

Having trouble displaying a girl image in asp.net. I'm aiming for the following result:

The problem is that the girl's face is not showing up correctly as shown below:

This is the CSS I have created:

.testimonialstilabel {
    background-image: url(../images/testimonialstilabel.png);
    height: 100px;
}
.testimonialstilabelback {
    background-image: url(../images/testimonialstilabel2.png);
    height: 253px;
    width: 500px;
}
.imgeCoverBack {
    height: 149px;
    width: 107px;
    position: absolute;
    top: 112px;
    left: 22px;
}
.imgeCover {
    background-image: url(../images/testimonialstilabelimg.png);
    height: 216px;
    width: 138px;
    position: absolute;
    top: 109px;
    left: 6px;
}

Below is the asp.net code:

<div class="container clearfix">
    <div class="testimonialstilabel">
        <br>
        <h2 align="center">
            Great things people are saying about us</h2>
    </div>
    <asp:DataList ID="DataListT" runat="server" RepeatDirection="Horizontal" RepeatColumns="2"
        Width="100%">
        <ItemTemplate>
            <div class="testimonialstilabelback">
                <asp:Image ID="Image2" runat="server" ImageUrl='<%#Eval("ImageUrlPath")%>' class="imgeCoverBack"/>                
                <div class="imgeCover">
                </div>
                <p style="width: 300px; margin-left: 150px; height: 175px; margin-top: 0px; padding:17px 0px 0px 0px"">
                    <%#Eval("Description")%>
                </p>
                <p style="text-align: justify; font-weight: bold; width: 300px; margin-left: 150px;
                    color: #74a6a5; padding: 0px 0px 0px 5px;">
                    &#8226; <%#Eval("Name")%>
                </p>
            </div>
        </ItemTemplate>
    </asp:DataList>
</div>

I suspect there is an issue with my CSS. Can someone please help me identify what mistake I might be making? Any insights would be greatly appreciated!

Answer №1

.testimonialstilabelbackward {
    ...
    position:relative;
}

Answer №2

When using position:absolute, the element will search for its closest parent with a position that is not absolute in order to be positioned properly.

To solve this issue, you should make the direct parent of your elements relative. In this case, the parent is:

<div class="testimonialstilabelback">

Update your CSS with the following changes:

.testimonialstilabelback {
  background-image: url(../images/testimonialstilabel2.png);
  height: 253px;
  width: 500px;
  position:relative;
}

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

Stop flex items from expanding larger than their sibling elements

Is there a way to prevent a flex item from growing bigger than its siblings? Check out the example on CodeSandbox: LINK Here is the sample code: <div class='wrapper'> <div class='box one'></div> <div class ...

Learn how to create a horizontally scrollable ToggleButton using MUI when the ToggleButtonGroup exceeds the screen width

Looking to enhance the responsiveness of my web design project, I aim to create a horizontally scrollable ToggleButton using Mui. The goal is to have the buttons adjust when the screen width becomes too narrow to display all three buttons at once, allowing ...

The overlay is larger in size compared to the video positioned beneath it

I'm having trouble placing a video underneath a purple layer as the overlay isn't aligning properly with my video. https://i.sstatic.net/DCzWy.jpg After removing the background-size: cover; in the home section, it appears like this: https://i. ...

The Element should take up the entire page with the exception of a 20px margin

I am struggling to create an element that covers the entire page except for a 20px margin on all sides. I have tried implementing a solution using this code, which works in webkit browsers and Firefox but seems to have issues with Internet Explorer (10) an ...

How to retrieve the width of an unspecified element using JavaScript

Seeking help with a div element that adjusts its size based on the elements it contains. How can I determine the final size of this dynamic div without checking the sizes of its internal elements? I've attempted to parse all the properties of the obj ...

After closing, the position of the qtip2 is being altered

I've successfully integrated the qtip2 with fullcalendar jQuery plugin, which are both amazing tools. However, I'm encountering an issue with the positioning of the qtip. Here's the code snippet I'm using: $(window).load(function() { ...

How can I access a nested FormArray in Angular?

I have a situation where I am trying to access the second FormArray inside another FormArray. Here is an excerpt from my component: registrationForm = new FormGroup({ registrations: new FormArray([this.patchRegistrationValues()]) }); patchRegistrati ...

Is it possible for Susy to output a pixel-based span?

As a newbie to Susy, I hope you don't mind if I ask a seemingly silly question... I'm trying to figure out how to calculate responsive padding within a Susy grid. The standard formula is: (target / context) x 100. Is there a way for Susy to pr ...

Unable to retrieve parameter while making a POST request

Need some help with attribute routing. I'm having trouble getting parameters from the HTTP body. The ConnectionID Class includes a property named CValue. $('#btn').click(function () { $.ajax({ type: "POST", url: "http:// ...

Background image for input button in Internet Explorer 6

Can you create a custom background image for the input type="button" in Internet Explorer 6? ...

My HTML gets rearranged by browsers, causing a change in appearance

UPDATE: I have discovered that the issue lies with Internet Explorer which alters the class attribute of an HTML element from: "<img class="blah".." to "<img class=blah..". This inconsistency only occurs in IE for me. It does not affect other attr ...

Ensure that the bottom border of the nav-item is in line with the

Is there a way to make the bottom border of a bootstrap nav item align perfectly with the bottom border of the navbar? My goal is to use the bottom border as an indicator for the selected element. I managed to achieve this with the default height of the na ...

Debugging a .NET webform session by examining its contents after deployment to a server

Currently, I am working on a set of webforms that store information into a Session when clicked through in a specific order. If a user lands on the page directly, I aim to redirect them back to the initial webform. The code works locally where the Session ...

Stretching Images on Circular Images - Utilizing Bootstrap and SCSS styling

Can anyone assist me with this problem? I am currently utilizing bootstrap cards to create a section on my website. However, I am encountering an issue with the circular images of the cards. I want to prevent my images from getting stretched when placed i ...

Using CSS3 to Display Box-Shadow Behind Adjacent Div Element

I have implemented the following: box-shadow: 0px -1px 0px #333333; However, on my footer, it seems to be obscured or disappearing when there is another div preceding it. It's a bit difficult to explain, but you can see what I mean in this screensho ...

Step-by-step guide for making a CSS triangle design that is compatible across different browsers

Here's a common CSS code for creating a CSS triangle: display: inline-block; vertical-align: middle; content: " "; border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 6px solid black; width: 0; height: 0; Click here ...

The script functions perfectly in jsfiddle, yet encounters issues when used in an HTML

I stumbled upon a seemingly peculiar issue with my script in jsfiddle: https://jsfiddle.net/oxw4e5yh/ Interestingly, the same script does not seem to work when embedded in an HTML document: <!DOCTYPE html> <html lang="en"> <head> & ...

HTML5 Canvas Border

Hey Everyone, I've been working on an HTML5 canvas project where I set the canvas width to $(window).width(). Everything was going smoothly until I added a border, which caused a horizontal scroll to appear. Important: I attempted to use the innerWid ...

Issues with Flexbox not being rendered correctly on Safari 5.1 for Windows

My goal is to design a straightforward box for questions, with the question number on one side and the text on the other. To ensure that the texts are aligned vertically and dynamic, I am experimenting with using flexbox. I have researched both the old an ...

Creating a Cross-Fade Effect in easySlider 1.7 using the Jquery Plugin

Want to achieve a cross-fade effect in easySlider 1.7 Jquery Plugin? Check out this tutorial Easy Slider 1.7 for guidance. Appreciate any help, thanks! ...