<div class="buttons" id="btnHome">HOME</div>
<div class="buttons" id="btnCon">CONTACT</div>
<div style="clear:both;"></div>
<div id="gallery"></div>CSS
.buttons{
float:left;
padding: 2px 10px 2px 10px;
}
#gallery{
margin:25px 0 15px;
height:70px;
border:thin solid red;
}
This issue is a well-known bug specific to IE8. Fortunately, there are multiple solutions available to address it.
One possible fix is to include overflow:auto in the clearing <div>
You can also refer to this example
To address the issue, consider incorporating display:inline-block; into the styling along with specifying the desired width to see if that resolves the problem.
<div class="btns" id="btnHome">GO TO HOME PAGE</div>
<div class="btns" id="btnCon">GET IN TOUCH</div>
<div style="clear:both;"></div>
<!-- Making use of will address the issue -->
<div id="gall"></div>
That solution seems to be effective.
<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
<div style="clear:both;"></div>
<div id="gall"></div>
.btns{
float:left;
padding:2px 10px 2px 10px;
}
#gall{
margin:25px 0 15px !important;
height:70px;
width:100%;
display:block; /* can revert inline block when long list for IE8*/
border:thin solid red;
}
give this a shot:
<div id="container">
<div class="buttons" id="btnMain">MAIN</div>
<div class="buttons" id="btnAbout">ABOUT</div>
</div>
<div id="gallery"></div>
#container{
overflow:hidden;
}
.buttons{
float:left;
padding:2px 10px 2px 10px;
}
#gallery{
margin:25px 0 15px !important;
height:70px;
width:100%;
display:block; /* can change to inline block when long list for IE8*/
border:thin solid red;
}
check out the demo: http://jsfiddle.net/68myJ/17/
I am currently working on creating a navigation bar with icon-only buttons that display tooltips when touched or tapped. Here is the code I have implemented: $('a[rel="tooltip"]').tooltip({ animated: 'fade', placement: ' ...
I am currently working on a project that involves tabs, and I'm looking to update the style of the badge when the value is 0. Unfortunately, I am unsure how to dynamically change the style of my tabs or adjust the opacity of the badge in the style. M ...
Many CSS templates out there are fixed-width, typically around 900 pixels wide... Right now, I'm in the process of creating an intranet Rails application and I'm seeking a good resource for CSS templates designed specifically for business applic ...
Trying to detect if a navigational element has a specific class upon click. If it has the class, remove it; if not, add it. The goal is to display an active state on the dropdown button while the dropdown is open. The active state should be removed when a ...
How's it going? I've been experimenting with middleware in Express JS, like this: app.get ('/user/:school/:dual', function (req, res, next) { ...... ... ...... }); Everything seems to be working fine so far. But when I na ...
I want to create a div element that disappears on hover using CSS without reappearing when moving the mouse again. While I know this can be achieved using JavaScript, I'm looking for a solution that incorporates CSS transitions for a smoother effect: ...
Two tables are involved in this scenario - one that receives dynamically added rows, and another that stores the data to be included. The illustration above displays these tables. Upon clicking the Edit button, the information from the selected row in Tab ...
When it comes to developing a responsive website, which method is superior: utilizing grid systems, employing media queries, or relying on HTML tables? ...
Solving the Issue Utilizing Ken Wheeler's Slick plugin has allowed me to create a carousel on my website. However, I've encountered an issue where the images inside the <a> tag aren't evenly spaced and are even overlapping in some ins ...
I'm in the process of developing a timeline feature for my website, and I am facing an issue where the addClass function is being applied to all sections, even those that are not currently visible on the screen during scrolling. If you would like to ...
I'm looking for a way to vertically position two images, one on the left and one on the right, so that they are centered between labels and input fields within a containing div. Is it achievable using only relative lengths? Check out this jsfiddle fo ...
I need the second td in my table to appear on top of the first one when I resize the screen. @media screen and (min-width: 200px) and (max-width: 872px) { td :nth-child(1) {display:bottom} td :nth-child(2) {display:top} } <table border="0" cell ...
Currently, I am in the process of developing the front-end for a shopping cart. To organize the content, I have split the container into two columns using Grid container and Grid item. In each column, various components are placed - the left side containin ...
My website looks great on all browsers except for Internet Explorer. I am currently using Internet Explorer 8 to test it. I've tried using a conditional stylesheet (ie.css) to fix some issues, but there are a few problems that have me stumped. I am op ...
Visit my website here: foxweb.marist.edu/users/kf79g/contact.php I'm stuck on the final step needed to deploy my website and finish it. The issue I'm facing is with the social icons when viewed on medium and small screens. I want them to be cent ...
Currently, I am facing an issue where the size of a specific area on my asp.net page changes after a post-back. It seems that the style applied to this area is being altered for some reason. This situation has raised the question in my mind - is there a m ...
There seems to be an issue in the code below where I am struggling to apply a border Can anyone help identify what the problem might be? <!doctype html> <html> <head> <title> My first Navigation Page</title& ...
I am looking to make my CanvasJS background transparent, but I'm having some issues. The backgroundColor property is used in CanvasJS to set the color of the canvas background. When I tried entering "None" instead of a color code, it ended up giving ...
After setting up a pre-configured navbar from the Bootstrap website, I noticed that the dropdown feature is not working. This issue arose with the latest version of Bootstrap 5.2 which was integrated into my Laravel project without any modifications to the ...
Despite finding numerous posts addressing this issue, I am still encountering problems with my code: <div id="product_tabs_description_tabbed_contents" style="display: block;"><img style="margin-left: -10px; opacity: 1 !important;" src="{{media u ...