Enhancing the Appearance in Internet Explorer 7

Recently, I decided to check my client's new website on my BrowserStack account. I'm not very experienced in developing for older browsers, but I wanted to make sure the website was at least viewable on them. I tested it on Windows XP with IE 7.

If you'd like to take a look, here is the link to the website.

Below is a screenshot of the website:

Here is the HTML for the 3 boxes that are supposed to be under the banner:

<div id="ez-home-middle-container" class="ez-home-container-area clearfix">

<div id="ez-home-middle-1" class="widget-area ez-widget-area one-third first">
<section id="black-studio-tinymce-4" class="widget widget_black_studio_tinymce"><div class="widget-wrap"><h4 class="widget-title widgettitle">SEO</h4>
Strategic approach, driving traffic with Search Engine Optimization.
<div class="su-button-center">Read More</div></section>
</div><!-- end #ez-home-middle-1 -->

<div id="ez-home-middle-2" class="widget-area ez-widget-area one-third">
<section id="black-studio-tinymce-6" class="widget widget_black_studio_tinymce"><div class="widget-wrap"><h4 class="widget-title widgettitle">Website Audits &amp; Competitive Analysis</h4>
Online health check &amp; how you measure up to your competitors.

<div class="su-button-center"> Read More</div></section>
</div><!-- end #ez-home-middle-2 -->

<div id="ez-home-middle-3" class="widget-area ez-widget-area one-third">
<section id="black-studio-tinymce-5" class="widget widget_black_studio_tinymce"><div class="widget-wrap"><h4 class="widget-title widgettitle">Local Search</h4>


<div class="su-button-center">Read More</div></section>
</div><!-- end #ez-home-middle-3 -->

</div><!-- end #ez-home-middle-container -->

Below is the CSS:

div#ez-home-middle-container {
    margin-top: 27em;
}

#ez-home-middle-1, #ez-home-middle-2, #ez-home-middle-3 { 
    position: relative; 
    text-align: center; 
    background: url(images/melissa-box-bg.jpg) repeat; 
    padding: 1.5em 2em; 
    border-top:.3em solid #d0d0d0; 
    min-height: 250px; 
    margin-bottom: 1.5em;
}

#ez-home-middle-1 .su-button span, 
#ez-home-middle-2 .su-button span, 
#ez-home-middle-3 .su-button span { 
    width: 100px; 
    position: absolute; 
    bottom: 1em; 
    left: 50%; 
    margin-left: -70px;
}

If you'd like to see the website in action, check out my JSFiddle here.

However, I encountered some issues with the layout, especially in IE 7 and IE 8. It seems like the margins and widths are not behaving as expected. Additionally, I noticed a bug in IE related to the "display:none;" property. It's causing my menu to be visible when it shouldn't be until a certain screen size.

Any guidance or assistance on how to resolve these issues would be greatly appreciated!

UPDATE:

Apologies for the delayed response. I've been trying to address the layout issues in IE 7, but even after floating the ez-home-container, the widths are still off. I'm considering using a conditional stylesheet for IE 7 to adjust the widths accordingly. Any further suggestions would be helpful.

Regarding the bounty, I'm unsure if it was awarded automatically or if I need to still select a recipient. If we can resolve these issues, I'm willing to offer additional points for assistance, especially in fixing the "=Menu" problem.

cssinternet-explorer

Answer №1

Your problem seems to be originating from having unbalanced tags, specifically the <div class="widget-wrap"> tags not being properly closed before the </section> tags. Different browsers handle unbalanced tags differently, and it seems that IE7 and IE8 are having trouble with this.

Corrected HTML:

<div id="ez-home-middle-container" class="ez-home-container-area clearfix">

    <div id="ez-home-middle-1" class="widget-area ez-widget-area one-third first">
        <section id="black-studio-tinymce-4" class="widget widget_black_studio_tinymce">
            <div class="widget-wrap">
                <h4 class="widget-title widgettitle">SEO</h4> Strategic approach, driving traffic with Search Engine Optimization.
                <div class="su-button-center">Read More</div>
            </div>
        </section>
    </div>
    <!-- end #ez-home-middle-1 -->

    <div id="ez-home-middle-2" class="widget-area ez-widget-area one-third">
        <section id="black-studio-tinymce-6" class="widget widget_black_studio_tinymce">
            <div class="widget-wrap">
                <h4 class="widget-title widgettitle">Website Audits &amp; Competitive Analysis</h4> Online health check &amp; how you measure up to your competitors.
                <div class="su-button-center"> Read More</div>
            </div>
        </section>
    </div>
    <!-- end #ez-home-middle-2 -->

    <div id="ez-home-middle-3" class="widget-area ez-widget-area one-third">
        <section id="black-studio-tinymce-5" class="widget widget_black_studio_tinymce">
            <div class="widget-wrap">
                <h4 class="widget-title widgettitle">Local Search</h4> Be prominent in you local market.
                <div class="su-button-center">Read More</div>
            </div>
        </section>
    </div>
    <!-- end #ez-home-middle-3 -->

</div>
<!-- end #ez-home-middle-container -->

Before:

After:

Answer №2

Upon investigating the reported error, I was unable to replicate it locally, leading to uncertainty regarding the potential solution. It appears that there are two main issues at play. Firstly, the ez-home-middle-1, ez-home-middle-2, and ez-home-middle-3 divs are not adhering to the margin constraints set by their container, ez-home-middle-container. The second issue revolves around the widths of these divs surpassing one-third of their container's total width, causing them to wrap within the container. Resolution for the First Issue: Removing the position:relative style from the ez-home-middle-1, ez-home-middle-2, and ez-home-middle-3 tags may rectify the problem, as it seems to be overriding the margin properties and setting the top of the divs to 0 by default.

Below is an updated css snippet for ez-home-middle:

If the previous step does not resolve the issue, consider removing the margin from the container and adjusting the relative top attribute of the ez-home-middle-1, ez-home-middle-2, and ez-home-middle-3 tags to 432px or 27em. In this case, the top attribute of ez-home-bottom-container should also be adjusted accordingly to maintain consistency.

Addressing the Second Issue: It appears that multiple css classes are defining the width, with IE7 utilizing the incorrect one. Remove the class with 100%, along with other problematic classes like one-sixth and one-half.

.one-third {
    MARGIN: 0px; WIDTH: 100%
}
.one-third {
    WIDTH: 31.62%
}

The site-inner class specifies the maximum width allowance for the three ez-home-middle boxes as 800px. To resolve this, adjust the width of these divs to be less than 260px (800px/3), as the current width set as 31.6% is expanding based on the total page width instead of the container width. The width specification from the one-third class should be removed from the div, and a new width should be defined in the ez-home-middle classes.

Below is the updated css with the relative position fixed for the first issue and width adjusted for the second issue:

#ez-home-middle-1 {
    PADDING-RIGHT: 2em; BORDER-TOP: #d0d0d0 0.3em solid; PADDING-LEFT: 2em; MIN-HEIGHT: 250px; BACKGROUND: url(images/melissa-box-bg.jpg); MARGIN-BOTTOM: 1.5em; PADDING-BOTTOM: 1.5em; PADDING-TOP: 1.5em; TEXT-ALIGN: center; width:260px;
}
#ez-home-middle-2 {
    PADDING-RIGHT: 2em; BORDER-TOP: #d0d0d0 0.3em solid; PADDING-LEFT: 2em; MIN-HEIGHT: 250px; BACKGROUND: url(images/melissa-box-bg.jpg); MARGIN-BOTTOM: 1.5em; PADDING-BOTTOM: 1.5em; PADDING-TOP: 1.5em; TEXT-ALIGN: center; width:260px;
}
#ez-home-middle-3 {
    PADDING-RIGHT: 2em; BORDER-TOP: #d0d0d0 0.3em solid; PADDING-LEFT: 2em; MIN-HEIGHT: 250px; BACKGROUND: url(images/melissa-box-bg.jpg); MARGIN-BOTTOM: 1.5em; PADDING-BOTTOM: 1.5em; PADDING-TOP: 1.5em; TEXT-ALIGN: center; width:260px;
}

Additionally, the html code should be revised by removing the one-third classes for a cleaner structure.

Given that I do not have access to the files on my local pc, I was unable to confirm the resolution on the actual onlinedraft page due to rendering issues in IE7. Hence, I suggest enclosing the stylesheet changes within IE conditional stylesheet options as advised in the comments to your question.

Answer №3

Implementing specific styles for IE7 using the Paul Irish method or another technique:

  1. One issue with IE7 is that it tends to ignore top margin on elements following an absolutely positioned element. To overcome this, you can apply an IE7-specific style to add padding to the top of the surrounding container:

    .ez-home-middle-container { padding-top: 27em; }

  2. Another problem in IE7 is the lack of support for border-box, which requires a specific style to adjust the width of the .widget-areas to accommodate for padding. A reliable solution is to set the left and right padding as a percentage, for example:

    .ex-widget-area { width: 26%; padding: 1.5em 2.5%; }

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

Various colored backgrounds in a random arrangement on a grid post layout

I'm looking to implement this plugin for displaying blog posts, but instead of using an image as the background, my client wants different colored images. I have managed to figure out the code to achieve this based on a post I found here, but unfortun ...

javascriptcsswordpressbackgroundalternating

Is the code generated by Webflow.com functional and practical?

Recently, I have discovered the wonders of www.webflow.com for creating an admin layout. It excels in generating a flexbox layout based on my PSD design without requiring me to manually code with Gulp. My plan is to further simplify the process by breaki ...

htmlcssflexbox

Mobile Website Blog Page With Dual Sidebars Issue

I have created a blog page using bootstrap 4 that features both left and right sidebars along with the main content section. Everything looks great on Desktop view. However, when viewed on a mobile phone, the order changes to: left-sidebar>content> ...

htmlcssbootstrap-4

Switch between CSS and jQuery styling

Here is a code snippet I'm using to toggle the visibility of content: $(function(){ $('#slider').css('display',''); $('#hideslider').click(function(){ $('#slider').slideToggle('slow&apos ...

jquerycssbackgroundslidetoggle

What is causing the unexpected expansion of the initial column in this table?

Can you figure out why the first column in this sample table is so much wider than the others? <html> <head> <style type="text/css"> table,th, td,{ width:100%; border: 4px solid; border-collapse:collapse; ...

htmlcsshtml-table

Trouble with Bootstrap Modal not closing properly in Chrome and Safari

ISSUE: I'm facing a problem where clicking on the X (font awesome icon) doesn't close the modal popup as expected. https://i.sstatic.net/yXnwA.jpg LIMITED FUNCTIONALITY ON CERTAIN BROWSERS: Currently, the X button for closing the modal works o ...

javascriptcsstwitter-bootstrapbootstrap-4bootstrap-modal

Guide on hosting Google's Material Design Icon-Fonts on your personal server and incorporating them into your website

To access the Material Design Icon Fonts, it is advised to download them in various formats such as ttf, eot, woff, and woff2. These fonts can then be hosted on a server location and integrated into your CSS using the following code: @font-face { font- ...

cssfontsmaterial-designwebfontsicon-fonts

When switching from JavaScript to jQuery, the button values become invisible

Currently, I have a functional app that can dynamically change the values of buttons based on user input. The current implementation is in vanilla JavaScript within the script.js file. However, I am looking to enhance the functionality and user experience ...

javascriptjqueryhtmlcssajax

What method can be used to adjust the tailwind animation based on a specific value

If the value is true, I would like the attribute animation-slide-right to be given, and if the value is false, then the attribute animation-slide-left should be applied. Unfortunately, after the initial rendering, the animation does not happen when the va ...

htmlcssreactjstailwind-css

Can you please explain the primary distinction between these two identification numbers?

Can you explain the distinction between the following two css ids? p#id1 { insert code here } and #id1 p { insert code here } ...

csscss-selectors

Switch the orientation of the unordered list from horizontal to vertical in a dynamic way

Perhaps a repeated inquiry, yet I have been unable to discover a solution for this issue... I am dealing with a div element (referred to as master) that I do not have the ability to adjust in terms of width or height. Contained within the master is anoth ...

htmlcssflexbox

Toggle the menu using jQuery on unordered list items

Below is the HTML code I am using : <ul class="main-block"> <li class="firstLevel"> <a href="#category">EXAMPLE CATEGORY 1</a> <ul class="dijete"> <li class="child"> <a href="some-sub-categ ...

javascriptjqueryhtmlcss

stopping a float-left div from being pushed down by a table

I am facing an issue with two float:left divs that are supposed to stack left-to-right. One div is a fixed width left nav, while the other should span the remaining width of the browser. The problem arises when there is a table in the second div with multi ...

css

Automatically sync textbox width with gridview dimensions

My goal is to dynamically resize a number of textboxes so that they match the width of my gridview's table headers. The gridview will always have the same number of columns, but their widths may vary. However, as shown in the image below, the width va ...

javascriptjqueryasp.netcssgridview

ToggleClass is not being applied to every single div

I am currently designing a pricing table with hover effects. You can view the progress here: Upon hovering on a pricing table, all the divs are toggling classes which is not the desired behavior. I want each element to have its own separate interaction. ...

javascriptjqueryhtmlcss

Tips for Utilizing Border-Radius in Safari

What is the best way to hide a child element's corners within its parent (#div1) Ensuring that the child does not overflow its parent container? ...

csssafari

Covering a secret link with a backdrop image

I have set a background image in a column on my WordPress site. However, I want to make this image clickable by placing a transparent box over it, as background images cannot be linked directly. #container { background-image: url(https://www.quanser.c ...

htmlcsswordpress

Positioning elements next to each other in jQuery on mouse over - while also addressing scrolling issues in a div

After tinkering with this interesting concept of mouseover combined with absolute positioning divs on a jsFiddle, I encountered some unexpected results. The code was inspired by a stackoverflow thread on positioning one element relative to another using j ...

javascriptjquerycssscrollbaronmouseover

iOS devices are not displaying the background image as intended

I've searched through previous answers on the SO platform, but I'm still unable to find a solution that works for me. I have a static Gatsby site with an infinite scrolling background implemented on desktop, and a static image displayed on mobile ...

htmlcssreactjssassgatsby

Can anyone shed some light on why the CSS code is not functioning properly within my HTML file?

My CSS doesn't seem to be working in my HTML. I have linked it correctly, but it's not displaying properly - even showing empty in the CSS tab of Chrome Inspector. The links are there, so I'm not sure why it's not functioning correctly. ...

htmlcss