Troubleshooting table alignment problem in Internet Explorer 9

Check out

I'm facing an issue with the alignment of the four small images on the right side. It looks fine in Firefox and Chrome, but in IE9 they are spreading out...

 Here is a snippet of the CSS:

 .fixedtable{
width: 90px;
overflow: hidden;
text-align: right;
vertical-align: top;

}

Any guidance on how to fix this would be greatly appreciated.

Regards, Rich

Below is the HTML code (moved from comments):

<tr>
    <td class="fixedtable">
        <img src="images/service-now.jpg" alt="aga service" width="90" height="150" align="right" />
    </td>
    <td class="fixedtable">
        <img src="images/aga-cosmetics.jpg" alt="aga cosmetics" width="90" height="150" align="right" />
    </td>
    <td class="fixedtable">
        <img src="images/aga-installations.jpg" alt="aga installations" width="90" height="150" align="right" />
    </td>
    <td class="fixedtable" >
        <img src="images/regions-covered.jpg" alt="aga south west" width="90" height="150" align="right" />
    </td>
</tr>

Answer №1

After running a check in browser lab, it appears that the issue has been successfully resolved.

It seems that the problem lies not with the images, but rather with the overall section extending too far. My suspicion is that this may be related to the 'transitional' DTD declaration. I recommend trying 'strict' instead to see if the issue persists. – Aleks G Sep 26 at 19:06

Credit goes to him for providing the solution! It's suggested to either remove this question or answer it yourself.

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

I am currently dedicated to enhancing my background transitions and experimenting with creating smooth fade-ins

I'm almost done with my Weather Forecast page for the FCC challenge. However, I'm not satisfied with how the code for swapping the background works. It just doesn't feel right to me. Unfortunately, I can't figure out how to fix it. Addi ...

Element with a fixed position located inside a column in Bootstrap 4

Is there a way to keep a bar fixed at the bottom of the user's screen, but only within a specific column? Applying position:fixed; bottom:0; stretches the element across the entire screen, so how can I make the bar remain within the column boundaries? ...

Struggling to overlay HTML text on top of the image on the right

I'm having a strange issue with my e-commerce site homepage. I want the line of HTML text that says SHOP BAGS to appear over a specific image, but it's showing up on the wrong one. I've tried wrapping the desired image in its own div and adj ...

items within an unordered list that can be collapsed

Answer: Nikhil was on the right track with his solution, but I had to make some modifications. Specifically, I needed to create and initialize an empty array to display the details properly. Here's the updated code: if (this.name.toLowerCase() == va ...

Adjusting the size of DIVs according to images retrieved dynamically from a database

I am currently in the process of building my online portfolio, and while I am new to JQuery and PHP, I am working through any challenges that come my way. However, I am facing a roadblock that has left me puzzled. My goal is to create a seamless iframe to ...

What is causing my mobile navbar to not collapse when the page loads?

I'm having trouble collapsing the navbar on mobile devices. Currently, the navbar only collapses when I manually resize the tab. It seems like the issue is related to it not checking the screen size when the site initially loads. I've attempted t ...

Enhancing an image with a hover-activated overlay

I'm trying to enhance the setup of my page with three images in columns by adding an extra overlay on top of the main image but beneath the hover effects. However, I seem to be encountering some difficulties while working on it. Take a look at my cod ...

Bottom is not adhering properly to the page (blocking content)

Hey there! I'm using Weebly as a CMS for my website, and I've encountered some issues with a custom footer. Specifically, on this page: The content seems to disappear if you're not using a large monitor and the page height is short. Upon in ...

What could be causing my CSS grid items to overlap each other in a specific arrangement?

I am new to CSS grid layout and currently experimenting with grid-template-areas to create a grid layout. However, I am facing issues with items overlapping because I have set the height of the map item explicitly. When changed to auto, the map disappears ...

Utilizing CSS for multiple carousels while applying unique styles to each one individually

I am currently working on modifying the code below so that it will only execute when a specific class is linked to the carousel. There are multiple carousels present on the same page. @media (min-width: 576px) and (max-width: 768px) { /* Display the 3r ...

Tips for managing the dimensions of a select element in bootstrap

I need assistance with adjusting the width of select tags in my form so that they align properly with the text boxes above. Here is the HTML code: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/& ...

Challenge with the continuity of my Html/CSS coding

I am currently expanding my knowledge in web development with a focus on CSS. While I am familiar with JS and HTML, CSS is proving to be more challenging for me. I have been attempting to create a webpage using Bootstrap, but I have hit a roadblock with th ...

Challenges with the Placeholder and Text Alignment in Angular Material's Text Area

I am currently facing an issue with a textarea in Angular, which is displayed as shown below: https://i.sstatic.net/jjUlT.png My Angular code for the textarea is as follows: <div *ngIf="whetherDisplay()" class="textarea-text"> <mat-form-field ...

Having trouble with Tailwind UI components displaying properly in Next.js?

I tried following the Tailwind UI tutorial, but unfortunately, it doesn't seem to match up with my Next.js project. Take a look at my tailwind.config.ts: export const defaultTheme = require("tailwindcss/defaultTheme"); module.exports = { ...

What distinguishes line-height:1.5 from line-height:150% in CSS?

Does anyone have any information on this? ...

Expansion Issue: Div in Main Section Not Adapting to Parent Width in Bootstrap Flex Layout

I have a Bootstrap 5.2 header/main/footer layout where I want the main section to expand and fill the page between the header and footer completely. The code below is currently working: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a ...

What is the optimal baseline font size for responsive typography using rem units: percentage or pixels?

Currently, I am exploring the implementation of a responsive typography solution using SCSS and rems. The goal is to utilize media queries solely on the baseline font-size in html rather than on each individual element. After researching different approac ...

Element with adhesive properties alters its color at a particular location

I need the sticky element to change colors at specific points and then revert back to its original color. The color should be orange initially, green on block 2, and orange again on block 3. For the complete code and to address any issues with jQuery, pl ...

Adjust the width of this Responsive HTML Newsletter Template created by Charles Mudy

NOTE: You can download the template from https://github.com/charlesmudy/responsive-html-email-template Although I am a fan of the template, I am encountering challenges when trying to adjust the width and ensure it responds correctly. I'm not sure wh ...

Update the item's location and retrieve the latitude

On the previous page, I used setitem(coordinates) to store latitude and longitude information. Now on the next page, I want to use getItem() to retrieve only the latitude, but I'm having trouble getting it. First page function storeCoordinates(locati ...