What is the best way to ensure that this image is responsive and not overly tiny when viewed on Internet Explorer

Check out my website:

Here's a snapshot of the problem:

I've been struggling to make my image responsive and prevent it from shrinking on IE 8. The webpage functions well on most modern browsers except for IE 8. I want it to display properly across all browsers.

All my code is stored in external style sheets (you can view the source by right-clicking):

<div id ="about_center">
                <div id="dp_section">
                    <img src="images/Business%20Picture.jpg" id="dp" alt="Leonard Pfautsch"/>
                </div>
                </div>
                <div id = "new_line_about">
                <div id='about_section'>
                    <p>
                    My name is Leonard Pfautsch.
                </p>
                <br/>
                <p>
                    Currently I am an student at Marist College in Poughkeepsie, NY. My area of study is Information Technology, but I am still
                    very interested in the Computer Science field as well. At school and at home, I am always studying and learning new things.  
                </p>
                <br/>
                <p>
                    In my studies, I have really gained a fascination for all aspects of technology. This includes:
                    web development, internetworking, system administration, information security, data management, computer architecture, 
                    cloud computing, gaming, and mobile application development.
                </p>
                <br/>
                <p>
                    In all aspects of work, I always strive for perfection. Whenever I work, I make sure the job is done correctly and efficiently.
                    I always do my best with any challenge I am faced with. In terms of client satisfaction, I will go above and beyond to give
                    people the best experience possible. 
                </p>
                </div>
                </div>
        </section>      


/* ABOUT */
#dp_section {
    float:left;
}
#dp {
    border:10px solid #161616;
    width:200px;
    max-width:100%;
    border-radius:10px;
    box-shadow:0px 0px 15px #272727; 
    margin-bottom:10px;
    background-color:black;
    margin-right:10px;
    margin-left:-10px;
}
#about_section {
    width:100%;
    max-width:100%;
    margin:0px;
}

section{
width:100%;
}


#about_center{
width:200px;
height:auto;
margin:0 auto;
max-width:100%;
}

I've tried every solution I know of to address this issue, but I'm stuck. I even attempted using responsive.min.js which helped resolve some problems, but not this particular one. Any assistance would be greatly appreciated.

Answer №1

Perhaps a solution would be to clear your Browser Cache? While the image displays correctly for me even on IE 7, it seems that the text in IE 7 appears below the image. In your CSS, make sure to set a height and include float: left; like so:

#dp{
  background-color: black;
  border: 10px solid #161616;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 0 15px #272727;
  margin: 0 10px 10px -10px;
  width: 200px;
  height: 279px;
  float: left;
}

Important Note:

Your Picture has dimensions of 1509px width by 2104px height. To ensure optimal loading speed, resize the image using an image editor and upload it to your site at the correct size. You can implement it as follows:

<a id='dpLink' href='images/Business%20Picture.jpg'>
  <img alt='Leonard Pfautsch' id='dp' src='yourResizedImage.jpg' />
</a>

If you wish to link to the full-size image, adjust your CSS accordingly:

#dpLink,#dp{
  width: 200px;
  height: 279px;
  float: left;
}
#dpLink{
  display: block;
  border: 0;
  margin: 0 10px 10px -10px;
}
#dp{
  background-color: black;
  border: 10px solid #161616;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 0 15px #272727;
}

Furthermore, please note that border-radius and box-shadow are features of HTML5 and may not render properly on browsers older than IE 9.

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

Is the HTML templating mechanism compatible with Angular?

Trying to implement HTML templating in my Angular application, my code looks like the following: <script type='text/html' id="sampleId">...</script> However, upon loading the HTML, I noticed that the script block was not present in ...

jquery carousel slider dynamically append

I have been tasked with creating a dynamic carousel using jQuery AJAX, and my supervisor recommended that I utilize the .append() method. Below is the HTML code for my carousel: <div id="myCarousel"> </div> <div cla ...

Using jQuery and AJAX to submit a dynamic form

I am currently facing an issue with cloning a HTML drop down list using jQuery. The main problem I am encountering is that there seems to be no restriction on the number of cloned sections, and I need to store all these sections in a mySQL database. How c ...

Vue.js is not incrementing the counter as expected

I've encountered an issue with a button that has a click event to increment data value by 5, but instead of adding 5 it is appended by 5. Click here for the code example <div id="react"> <button @click='counter += 5'>Increment& ...

I am interested in designing a navigation bar with varying background and hover colors for each individual block

I need help creating a navigation bar with different background colors and hover colors for each block. I can do this separately but not together, so please advise on how to combine both in the li class. Below is the code for the navigation bar: header ...

Guide to integrating the Duda White Label API with an HTML website

Currently, I am in the process of integrating the Duda White Label API into a .html page to ensure that it aligns with my custom CSS. To guide me through this task, I am referring to the instructions provided at: After inserting my API key, Password, and ...

Is there a way to embed an AJAX submit form into a notification without the need for page refresh?

I have integrated the jQuery plugin toastr js () for notifications on my website. I am facing an issue where I want to include a contact form within the notification popup and submit it using AJAX. Despite having the form working fine outside of the toastr ...

Troubleshooting a problem with scrolling functionality while keeping the header in place and ensuring the correct tab is highlighted

I've successfully created a page with a fixed menu that appears when scrolling, and the tabs activate based on their corresponding section IDs. However, I'm encountering some issues: The scrolling behavior is not precise; when scrolling to sec ...

What could be causing the delay in my IP camera image updates?

I have implemented a jQuery script to update the src attribute of an <img> element on a webpage at regular intervals. However, I am facing an issue where the image is not consistently updated according to the specified setInterval. Interestingly, dir ...

Creating an input field within a basic jQuery dialog box is not possible

Can anyone assist me in adding an input box to my dialog box? I am working with jquery-ui.js. Here is the code I currently have: $(document).on("click",".savebtn",function(). { var id = $(this).attr("id"); $.dialog({ ...

placing a vertical bootstrap button along the left border

My goal is to place a vertical bootstrap button on the left side of the screen. Currently, I have implemented the following CSS: #button1 { position: absolute !important; z-index: 10 !important; left: 0px !important; bottom: 20% !important; tr ...

Why is Python BeautifulSoup's findAll function not returning all the elements in the web page

I am attempting to retrieve information from the following URL . Displayed below is the code I have developed. import requests from bs4 import BeautifulSoup url_str = 'https://99airdrops.com/page/1/' page = requests.get(url_str, headers={&apo ...

Having trouble retrieving the toDataURL data from a dynamically loaded image source on the canvas

Currently, I am working on a project that involves a ul containing li elements with images sourced locally from the "/images" folder in the main directory. <section class="main"> <ul id="st-stack" class="st-stack-raw"> ...

Efficiently utilizing CSS classes

My dilemma involves styling a textfield in two different locations on my website, each with its own parent element. The second location requires an additional margin-top that the first does not. What is a clever way to adjust the original margin-top withou ...

What is the best way to update the color CSS property of an element with jQuery?

Can someone explain to me how to modify CSS using jQuery? I am trying to change the font color of "Valid VIN" to red, but my current code doesn't seem to be working: $("#result").html(<font color="red">"Valid VIN"</font>); ...

Deleting various classes (jQuery)

Is there a more effective alternative to rewriting the following code snippet? $('element').removeClass('class1').removeClass('class2'); I am unable to utilize removeClass(); because it would eliminate ALL classes, and that ...

Requesting footer details to be displayed within the header section using jQuery dataTables

I'm currently working with jQuery dataTables and facing an issue. Due to a large number of records, I need to display footer information "Showing 1 to 2 of 2 entries (filtered from 3352 total entries)" in the header section right after the "Show Entri ...

Issue with table displaying correctly within a div container in HTML

Having an issue with displaying two tables next to each other inside a div. Despite my efforts to adjust the CSS, they are stacking on top of each other instead of side by side. Here is the code: #contactdetails_table{ width: 500px; height: 190px; ...

ng-bind-html is having trouble parsing the HTML correctly and binding it

Here is the code for my controller: myApp.controller('actionEditController', ['$scope', '$stateParams', '$sce',function ($scope, $stateParams, $sce) { $scope.table="<p>OOPSY</p>"; $sc ...

Issue with specific selectors causing React CSS module malfunction

Currently, I am a beginner in learning React and have been experimenting with CSS modules. Even though Menu.module.css is mostly functioning correctly, it seems to be having an issue applying styles to the .menu a.last selector for some reason (although i ...