The main page boxes are not properly aligned on Internet Explorer

While developing a photo portfolio website using wordpress and modifying an existing theme, everything looked fine in Firefox. However, upon checking the styling in IE after finishing the site, it was completely messed up. The boxes on the main page were not lining up properly.

I attempted to use code in the header to force IE to render as IE7, which somewhat fixed the issue but caused other minor problems. I am unsure if the problem lies with my doctype or if I inadvertently changed something along the way that caused the issue.

The website functions perfectly in all other browsers I have tested.

You can view the site here:

Thank you.

cssinternet-explorer-9css-float

Answer №1

It seems like your <h3> tags are not properly closed. Interestingly, Internet Explorer is one of the rare cases where it displays things correctly in this situation :) Other browsers may overlook errors like this, but IE enforces stricter rules.

Always remember the importance of validating your code!

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 Bootstrap's Mobile Menu Compatible with Tablets?

I'm struggling to modify my code in order for the navigation to collapse on mobile and tablet devices, but I can't seem to make it work. I attempted to adjust the @grid-float-breakpoint to 992px, however that did not have the desired effect. Any ...

csstwitter-bootstrapnavigationresponsive

Space between an image and a div element

While creating a website in Dreamweaver CC, I noticed a significant gap between my image and a div tag. Here is a screenshot for reference: Below is the code from my index file: <!doctype html> <html> ... </div> Additionally, here is a ...

csshtmltagsspace

Tips for automatically adjusting the height of the footer

Is there a way to dynamically adjust the height of the footer based on the content length inside the body? I've been exploring solutions like setting the position of the footer as "fixed," but it seems to stay at the bottom of the screen, which is no ...

htmlcss

Is there a way to show the text within a div tag in a tooltip without relying on jQuery?

Is there a way to display the text content of an HTML element inside a tooltip? I am struggling to achieve this, as I would like to have the word test appear in the tooltip, but it's not working. Unfortunately, we are not using jQuery in our code bas ...

javascripthtmlcsstooltip

Ways to ensure the active :hover element is positioned above all other elements within a class uniform in style

I'm attempting to design a basic bookshelf using only CSS and HTML. However, I'm finding it challenging to have the book currently being hovered over appear with the highest z-index. Is this achievable without JavaScript? Maybe through some clev ...

htmlcsscss-selectorshover

When working with basic shapes such as "rect" or "circle," the inline SVG may not be displayed

This is the code we are using to style our checkboxes: .checkbox-default { display: inline-block; *display: inline; vertical-align: middle; margin: 0; padding: 0; width: 22px; height: 22px; background: url('data:image/ ...

csssvg

Responsive issue identified with Bootstrap navbar hamburger menu upon clicking

My website has an issue on mobile where the hamburger menu appears but doesn't respond when clicked. I'm unsure what's causing this problem in my code. <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a ...

htmlcsswebbootstrap-4navbar

How can I achieve this particular design using flexbox?

Check out the image here: . I'm struggling to understand the examples and live flex configurators. Are they only showing simple examples, or am I just not grasping it? Is it possible for me to use media queries to hide a4 when the screen is less than ...

cssflexboxmedia-queries

How can I incorporate checkboxes and crosses for validation in AngularJS?

I've been searching through the documentation for angularjs and online resources, but I can't seem to find any information regarding a specific aspect of form validation. You know when you input something in a form field (like a name, phone numbe ...

cssangularjs

Is it not possible to use a hyperlink and the general sibling combinator simultaneously?

Hi everyone, I'm completely new to CSS so please bear with me as I try to explain my issue. I'm attempting to create an image hyperlink using the .link class. I want the images for both .link and .picture to "change" when I hover over the hyperl ...

htmlcsshyperlinkcss-selectors

An easy guide to scrape CSS styles using Scrapy

When it comes to web scraping, I am skilled in using both scrapy and selenium webdrivers. However, I have noticed that selenium webdriver tends to be quite slow. Despite this, I find it convenient for extracting CSS properties of a webelement, such as: we ...

cssseleniumselenium-webdriverweb-scrapingscrapy

Strategies for Updating Backgrounds on Individual WordPress Pages

I am looking to revamp a WordPress blog with 5 different pages, each requiring a unique background image. Is there a method to achieve this without altering the background element, but instead changing the background image of the #main element in my CSS? ...

htmlcsswordpresswordpress-theming

utilize an additional style.css file for a particular section within the HTML document

Is it possible to use two different style.css files in the same HTML document, where a specific block will only get its styling rules from one of them? <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-widt ...

javascripthtmlcssbootstrap-4

Verify the position of the scrollbar without triggering any reflow

Here is a function I have: is_bottom: function() { if (settings.scrollBottomOffset === -1) { return false; } else { var scroll_height, scroll_top, height; scroll_height = ...

javascripthtmlcssperformance

Is there a way to eliminate the default bootstrap stylings?

Currently working on a project where I am utilizing bootstrap scripts to simplify things. However, upon adding everything along with the CSS, bootstrap ends up changing parts of my page that I did not intend for it to do. Is there a way to remove these u ...

javascripthtmlcssbootstrap-4

Applying CSS to prevent elements from overlapping by adjusting their vertical positioning

I need some help with a CSS formatting question. My current setup works well, the menu's position adjusts based on screen size to be centered both vertically and horizontally. However, I'm facing an issue where elements start overlapping if the v ...

htmlcss

The button should only be visible on an iPhone device

Currently, I am utilizing the Twitter Bootstrap layout and facing an issue. When I reduce the browser window size, a menu should appear only for iPhone layout when clicking a button. However, the button is showing up for desktop as well. How can this be fi ...

javascripthtmlcsstwitter-bootstrap

Auto-layout malfunctions when .col contains a child .table-responsive

Utilizing Bootstrap's auto-layout grid allows for the explicit specification of width for select columns, with the remaining columns evenly splitting the space. However, when an auto-.col contains a child with .table-responsive, the system appears to ...

htmlcsstwitter-bootstrapbootstrap-4

Shadow border added to each div creates a unique navigation tab for easy access

#container { position: fixed; height: 100%; left: 0px; right: 0px; top: 0px; width: 10%; background-color: blue; } #container>div {} <html> <div id="container"> <div>up</div> <div>down</div> <d ...

htmlcss

defiant underscore refusing to function

I'm currently working on a text editor, but I'm facing an issue with the remove underline functionality that doesn't seem to be working as expected. For reference, you can check out a working code example here: jsfiddle Below is the part of ...

javascripthtmlcssunderline