Bizarre IE7 float bug disrupting child elements

<div style="float:right;">
    <a href="#" class="button2" title="Upgrade now">Upgrade now</a> 
    <a href="#" class="button2" title="Buy more credits">Buy more credits</a>
</div>

When the float:right|left property is applied (either inline or in the stylesheet), it appears to cause the links to lose both their vertical padding and their bottom border. Removing this property resolves the issue.

Below is the CSS code for the links:

.button2 {
    color: #fff;
    font-size: 18px;
    text-shadow: 0 -1px 0 #064687;
    border: 0;
    border-bottom: 2px #0B5BAC solid;
    border-radius: 8px;
    background: #1E88F2;
    background: -moz-linear-gradient(top, #6BB0F7, #2089F2);
    padding: 9px;
    cursor: pointer;
    box-shadow: 0 2px 2px #999;
    text-decoration: none;
    width: 270px;
}
htmlcssinternet-explorercss-float

Answer №1

One potential solution is to use the 'hasLayout' fix by including zoom: 1; in your CSS.

.button2 {
    zoom: 1;
}

Click here for more information on this technique

While I prefer not to resort to hacks like this, it appears to accomplish the desired outcome in this case.

Answer №2

The reason for this issue is that you are attempting to style an inline element with properties that do not typically apply to it, such as vertical padding, widths, and borders. To resolve this, try using display:inline-block or display:block; float:left;. Additionally, if you are encountering issues in IE7 when using display:inline-block, be sure to look for a fix specifically designed for IE 7. You can view the updated jsFiddle example here: http://fiddle.jshell.net/wUD9q/5/show/light/

It's important to note that utilizing the float property does not solve this problem. Even removing the float from the outer div will not fix it. The original jsFiddle example demonstrating this issue can still be found here: http://fiddle.jshell.net/wUD9q/1/show/light/

Answer №3

Less than 1% of internet users worldwide still rely on IE7 for browsing. It's time to switch to a more modern browser!

SOURCE:

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

What is the trick to have a CSS element overflow the boundaries of its containing div entirely?

Currently, I have a JS Fiddle project where I am attempting to achieve a specific effect. In the project, there is a circle positioned at the center of a div. When the script runs, the circle expands evenly in all directions until it reaches the borders on ...

javascriptjqueryhtmlcss

Contrast between Identification and Category

As I delved into the topic of CSS :Class and ID, I couldn't discern any noticeable differences between them when I attempted the provided examples. <!DOCTYPE html> <html> <head> <style> #para1 { text-align:center; color:red; } ...

htmlcss

transferring a model or numerous parameters to another action using an anchor tag or hyperlink functionality

Displaying data in a grid-like table can be achieved using the code shown below: Column1 Column2 Colum3 Siva 1200 200 Ram 2000 300 To make specific row values hyperlinks, such as all values in Column2, you can use the following ...

c#htmlasp.net-mvcasp.net-mvc-4

In order to preserve the data inputted by the user within a file

Check out this HTML code snippet:- ` AngularJS | $http server <div ng-controller="people"> <ul> <h2> Names and Ages of programmers: </h2> <li ng-repeat="person in persons"> { ...

javascripthtmlangularjs

Ajax request unable to load Image Slider

I'm currently implementing an Image Slider from this source For the site structure, I've set up an index.html file to display all the pages, allowing navigation by changing the content within <div id="isi">. Here's a snippet of the in ...

javascripthtmlcssajaxslider

I'm puzzled as to why the root-relative link is not functioning

One challenge I am facing in improving the portability of my web app is creating root-relative links within a sub-directory. /website - This is the main directory for my website. /inc - Here lies the includes directory housing header, footer, and po ...

phphtmlapachedirectoryxampp

Difficulty in Validating Forms

In the JSP page where I applied validation, if I leave the username/password fields empty, I am prompted to enter those values. However, the issue arises when after pressing OK on the validation prompt, the page redirects to 2_control.jsp. My requirement i ...

htmljsp

"The JavaScript code included in the index.html file is not functioning as expected when called in the main.js file within a

Here is the index.html code for a simple VueJS app that includes a widget from netvibes.com. The widget code is added in the html file and functioning properly. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC " ...

javascripthtmlvue.jsjspwidget

What could be the reason behind the repeated console messages when utilizing jquery to replace the src attribute of images?

Overview: An HTML page with two images, identified as #me1 and #me2 The images initially display 1.jpg and 2.jpg Clicking #me1 triggers a GET request to "randim.php" using jQuery to fetch a random filename, which is then set as the src= attribute ...

javascripthtmljqueryajaximage

I must create a dropdown and lift up feature similar to the one provided in the example

I am looking to implement a drop-down navigation bar on the top right and a pop-up button/links on the top left. The drop-down menu should appear when the screen size reaches a certain pixel width. If you can't see the drop-down navigation (NAV), adju ...

javascriptandroidjqueryhtmlcss

Switch back and forth between two tabs positioned vertically on a webpage without affecting any other elements of the page

I've been tasked with creating two toggle tabs/buttons in a single column on a website where visitors can switch between them without affecting the page's other elements. The goal is to emulate the style of the Personal and Business tabs found on ...

javascripthtmlcsstabstogglebutton

The close button is not functioning properly

I created a script to close my div element by clicking on the 'x' icon, but instead of deleting the div only, the whole page gets deleted. I'm not sure where I went wrong, can anyone help me? HTML <div class="note"> <span id ...

javascriptjqueryhtmlcss

Deselect all checkboxes other than the daily selection

I recently designed an E-commerce website that includes a package customization feature where users can modify their packages. The initial question presents three radio button options: 1. Daily 2. Weekly 3. Monthly If the user selects 'daily&apos ...

javascriptjqueryhtmljquery-ui

Generating HTML Tables Using PHP Arrays

Is there a recommended approach for creating a table in PHP that mimics the structure of an iOS table view or an Android ArrayList? I am looking to implement a functionality where a row can be selected and the value from that row can be retrieved, similar ...

javascriptphphtmlarrays

angular 2 checkbox for selecting multiple items at once

Issue I have been searching for solutions to my problem with no luck. I have a table containing multiple rows, each row having a checkbox. I am trying to implement a "select all" and "deselect all" functionality for these checkboxes. Below is an example o ...

javascripthtmlangulartypescript

Creating a masonry layout with uniform row heights

I am trying to achieve a masonry style layout for these cards in Bootstrap. The current setup has columns with the same height, but I want them to have fluid height and consistent margin spacing like the blue line shown below. I attempted to use .card-colu ...

csstwitter-bootstrap

Unleashing the power of ::ng-deep to access CSS in an Angular child component

I'm attempting to modify the CSS class of a child component by using ::ng-deep. Despite my efforts with various iterations of the code provided below, I have been unsuccessful in accessing the CSS. The structure of the HTML component is depicted in th ...

cssangularsassng-deep

The image remains unchanged in the JavaScript function

My attempt to swap images using jQuery has hit a snag. Upon running the page, it appears that the chase() method finishes executing before the animation has completed. The goal was to create an illusion of chasing between two images by repeatedly replaci ...

javascriptjqueryhtml

What is the best way to apply CSS max-left or min-left positioning to an absolute element?

I currently have an element with the CSS properties: position:absolute; left: 70%; Is there a way to restrict this element from moving more than 900px from the left side? Similar to max-width but for positioning? ...

htmlcssmarkup

Tips for increasing the size of a parent div when a child div is displayed with a set width?

Is there a way to make the parent div automatically expand when the child div with a fixed width is displayed onclick? Goal: I want the child div to show up when I click the link, and at the same time, I need the parent div to expand or scale to fit the ...

jqueryhtmlcss