Issues with the footer on Internet Explorer version 7

I am experiencing some challenges with certain footer elements in IE7. You can view the page I'm working on here.

Firefox:

IE7:

Here is the code snippet:

<div id="footer_container">
  <div id="footer">
    <div class="top_row">
      <div class="link_box">
        <h3>Product</h3>
        <ul>
          <li><a href="../buyers/simple-yet-powerful">Buyers Tour</a></li>
          <li><a href="../suppliers/simple-yet-powerful">Suppliers Tour</a></li>
        </ul>
      </div>
      <div class="link_box">
        <h3>Company</h3>
        <ul>
          <li><a href="../about/our-story">About</a></li>
          <li><a href="../about/contact">Contact</a></li>
         <!-- <li><a href="../about/press-information">Press</a></li> -->
        </ul>
      </div>
      <div class="link_box">
        <h3>Legal</h3>
        <ul>
          <li><a href="../about/terms-of-use">Terms of Use</a></li>
          <li><a href="../about/privacy-policy">Privacy Policy</a></li>
        </ul>
      </div>
      <form method="post">
        <fieldset>
        <h3></h3>
        <input type="text" name="email" id="emailText" maxlength="80" class="input" value="enter your email address..." onfocus="this.className=('input_active')" onblur="this.className=('input')" onclick="this.value='';" />
        <input type="button" name="submit"  value="" class="subscribe_btn" onmouseover="this.className=('subscribe_btn_over')" onmouseout="this.className=('subscribe_btn')" onclick="submitEmail();" />
        <div id="submissionResponse"></div><small>*we will not share your email address</small><span class="clear"></span>
        </fieldset>
      </form>

      <div class="twitter"> <a href="http://www.twitter.com/sample" onclick="window.open(this.href,'_blank');return false;"><strong></strong><span>@sample</span></a></div>
    </div>
    <div class="bot_row">
      <p><i>The premier online marketplace for buyers and suppliers of wholesale seafood.</i> | &copy;2009-2011 Sample, LLC  -  All Rights Reserved</p>
      <a href="../signup" class="join_list_btn1"></a> </div>
    <span class="clear"></span> 
    </div>
    </div>

The CSS styling:

/********************footer starts********************/
#footer_container{ float:left; width:100%; background:url(../images/footer_bg.jpg) repeat-x 0 0; height:122px; padding:30px 0 10px; color:#9d9d9d; overflow:hidden; min-width:989px;}
#footer{ margin:0 auto; width:989px}
#footer .top_row{ float:left; width:100%; height:95px}
#footer .top_row .link_box{ float:left; width:115px; margin-right:40px; display:inline}
#footer .top_row #submissionResponse{ float:left; width:45%;font-size:.9em;color:black;}
#footer ul{ float:left; width:100%; list-style:none; margin-top:2px}
#footer ul li{ float:left; width:100%; text-transform:uppercase; font-size:0.625em; line-height:15px; padding:2px 0 0}
#footer a{ color:#9C9C9C;letter-spacing:0.06em; text-decoration:none;}
#footer a:hover{ color:#0C7FD0;}
#footer .link_box h3{ font-size:0.75em; text-transform:uppercase; color:#7B7B7B; font-weight:normal;border-bottom:1px solid #CDCDCD; padding-bottom:1px;letter-spacing:.05em;}
#footer .twitter{ float:right; padding:0 55px 0 0; width:53px; text-align:center; margin:4px 0 0 0; font-size:0.813em;}
#footer .twitter a{ float:left; width:100%;cursor:pointer;}
#footer .twitter a strong{float:left; width:100%; background:url(../images/home-sprite.png) no-repeat -223px -676px; height:45px}
#footer .twitter a span{float:left; width:100%; color:grey; text-decoration:none;margin-top:-6px;}
#footer .twitter a:hover{color:#0072a7;}
#footer .twitter a:hover strong{background-position:-223px -726px; color:#2f89c9;}
#footer .twitter a:hover span{color:#595959;}
#footer form{ float:left; width:323px; padding:0 15px 0 30px}
#footer form h3{ width:180px;height:12px; float:left;  background:url(../images/home-sprite.png) no-repeat 0 -998px; padding-bottom:7px;}
#footer form .input{ border:1px solid #c4c4c4; width:240px; padding:4px 5px 4px; height:16px !important; border-right:0; margin:0; font-size:0.7em;letter-spacing:0.03em;  color:#bbbbbb; float:left; outline:none}
#footer form .input_active{border:1px solid #A6A6A6; width:240px; padding:4px 5px 4px; height:16px; border-right:0; font-size:0.8em;  color:#555555; float:left; outline:none; }

#footer form .subscribe_btn{ float:left; background:url(../images/home-sprite.png) no-repeat -144px -575px; width:71px; height:26px; border:none; cursor:pointer}
#footer form .subscribe_btn_over{ float:left; background:url(../images/home-sprite.png) no-repeat -144px -601px; width:71px; height:26px; border:none; cursor:pointer}
#footer form .subscribe_btn:active{ float:left; background:url(../images/home-sprite.png) no-repeat -144px -627px; width:71px; height:26px; border:none; cursor:pointer}
#footer form small{ display:block; text-align:right; font-size:0.635em; float:right; width:55%; padding:5px 0;color:#858585;}
#footer .bot_row{ float:left; width:100%; color:#c1c1c1; height:37px; overflow:hidden}
#footer .bot_row p{ padding:13px 0 0 0; float:left; font-size:0.64em;color:#A6A6A6;letter-spacing:.03em; }

#footer .join_list_btn1{ float:right; background:url(../images/home-sprite.png) no-repeat 0 -690px; width:200px; height:36px; margin:14px 0 0 0; cursor:pointer}
#footer .join_list_btn1:hover{background-position:0 -726px;}
/********************footer ends********************/
cssinternet-explorer-7footer

Answer №1

In my opinion, the most effective approach is to first create standards-compliant code and then add IE7 hacks as needed, rather than contorting standards-compliant code in an attempt to make it work well on IE7. I recommend utilizing a separate CSS style sheet specifically for IE7 fixes (refer to http://www.quirksmode.org/css/condcom.htm for guidance on conditional styles).

<!--[if lte IE 7]>
#footer form .input {
padding-top: 0px;
padding-left: 0px;
width: 150px;
height: 26px
}
<![endif]-->

If you're experiencing issues with a missing twitter icon, it's possible that IE7 doesn't support block-display on a < strong > tag. Consider using a < div > tag for the background area, or applying the background directly to the anchor tag.

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

Conceal tab content by clicking outside of the tab or its contents

Here is an example of how Elementor tab works. When you click on a tab, the content section appears. I want to be able to close the content section by clicking on any other part of the page, except for the tabs and tab content themselves. This should not a ...

javascripthtmljquerycss

Fetching data in VueJs before redirecting to a new page

Within the mounted function, I am creating an action that fetches data from a Rest API and populates my table in a Vue.js component mounted() { UserService.getProjects().then( (response) => { this.isProject = true; this.project ...

javascripthtmlcsstypescriptvue.js

Bootstrap dropdown navigation bar menu

I recently delved into learning Bootstrap, and I came across an issue with the dropdown menu. My goal was to make it appear outside of my navbar, but for some reason, it seems stuck. Despite trying various methods, nothing seems to be working. Below is th ...

javascripthtmlcssbootstrap-4

Ways to disable the ability to close a bootstrap modal by pressing the backspace key

How can I enable the backspace button in a Bootstrap Modal form for textboxes and textareas? $('body').keydown(function (e) { if ($('#myModal').is(':visible')) { if (e.keyCode == 8) { retu ...

javascriptjquerycsstwitter-bootstrap

Show a pop-up notification when the user enters invalid input using HTML, JavaScript, CSS, and AngularJS

My HTML input field has restrictions on certain characters, and I want to display a tooltip or message next to the input field when illegal characters are present. The functionality is working fine, but I'm struggling to implement a satisfactory solut ...

javascripthtmlcssangularjs

Can you explain the significance of this HTML code?

While examining some source code, I came across the following: <div class="classname {height: 300px; width: 200px}"></div> I am aware that element styling can be done using the style="" attribute. Could you explain what this code snippet sig ...

javascripthtmlcss

Position the div to the right of a left navigation bar instead of beneath it using Bootstrap 5

After using the code snippet from , I'm struggling to align content to the right of the navigation bar. It seems like a simple issue related to changes in Bootstrap 5 that I can't seem to figure out. <div class="d-flex flex-column vh-100 ...

htmlcssbootstrap-5

Having trouble getting the `nth-of-type` and `nth-child` selectors in CSS to function

I am attempting to apply a green color for the first nth child flag element <div id="axis"> <div class="super"></div> <div class="flag">flag 1</div><!-- I want this text to be green--> <div class="supe ...

htmlcsscss-selectors

Avoiding overlapping of div elements in a stacked div layout

I have a challenge with creating a vertical layout of stacked divs. Everything was going smoothly until I encountered the #resume div, which stubbornly stays hidden beneath the table-containing div above it. Despite trying various adjustments to float and ...

htmlcss

Experience full-screen viewing by double-clicking without the distraction of video controls (WordPress/HTML5)

I've been tasked with creating a video thumbnail that, when clicked, will lead the user to a new page where a single autoplaying and looping mp4 video will be shown. The issue arises when I can't interact with the video because the controls are h ...

htmlcsswordpressvideo

Struggling to understand how to assign a specific color to individual divs within a loop

Featured on the main page of my website are 3 posts, each accompanied by a div link below. I want each of these 3 divs to have a distinct color. Any new posts within this category will appear here as they are published, but only the latest three will be vi ...

phphtmlcsswordpress

Modifying the bullet style for the navigation bar list in Bootstrap 4

Is there a way to remove the bullet point that appears alongside the navigation menu items in Bootstrap 4/Jhipster? Currently, each item has both a bullet and an icon <i class="fa fa-home" aria-hidden="true"></i>, but I want to get rid of the ...

cssnavbarbootstrap-4

Adjusting Image Size with HTML and CSS

UPDATE* I am having an issue with the resizing of images on my website. The problem specifically pertains to the music tab where the image is not fitting within the div size properly. I have provided a screenshot for reference https://i.sstatic.net/Zbwag ...

htmlcssimage

If the option is not chosen, remove the requirement for it

I am in the process of creating a form that offers 3 different payment options: 1 - Direct Deposit 2 - Credit Card 3 - Cash at Office The issue I am facing is with the validation of input fields for Credit Cards. I want to make it so that these field ...

javascriptjqueryhtmlcssforms

When a div slides down on page load, the div will slide up when a button is clicked

I am trying to make a div slideDown on page load. The goal is to have the div automatically slideDown after 2 seconds, which contains a responsive image and a button named "z-indexed". However, I am having trouble getting the same div to slideUp when the z ...

jqueryhtmlcssslidedownslideup

Embedding a Bootstrap Popover

I am struggling to hide the popover when clicking outside the modal. I have been able to hide it on close, but not when clicking outside the modal. Here is the code snippet: $('.close, .close-button').click(function(){ $(".popover.bo ...

javascriptjquerycsstwitter-bootstrap

Modifying the Background Color of the login Page in Bootstrap AdminLTE 3 Theme

Despite my efforts, I am unable to change the colors of adminlte.css elements to match my preferences. The background page remains unchanged despite my alterations. As a newcomer to SASS, I am wondering how I can modify the color and size of the pre-defin ...

csssassbootstrap-4lessnode-sass

The visual effect of SVG feColorMatrix filter appears distinct from that of CSS filter (sepia)

After researching on , I discovered that SVG filters, specifically using feColorMatrix, can be used to create a sepia effect. Despite following the instructions, I encountered difficulty in reproducing the desired image effect and am seeking clarification ...

csssvg-filters

The showdown: JQUERY $(document).click versus $(document).ready

$(document).ready(function(e) { if ($('#sidebar').hasClass('active')) { $('#dismiss, .overlay').on('click', function() { $('#sidebar').removeClass('active'); $('.overlay&apo ...

jqueryhtmlcsstwitter-bootstrap

Align a block at the vertical center above the bottom line of another block

Here is the HTML code I am working with: <div class="image">Image</div> <div class="legend"> Legend<br/> Width can vary, but height needs to be adjustable as well.<br/> The middle of the legend should align exactly at ...

csscentering