IE9 causing trouble with CSS vertical alignment

I'm trying to center a button with text using Cuffon for the font, but I can't get it to align vertically and horizontally. The text-align property is working fine, but vertical align isn't.

Here's the code for my div block:

btndownload
{
    background-color: #512c1d;
    background: url('../Images/Btn_Brwn.png');
    background-size: 103px 32px;
    color: #B6BD00;
    width: 103px;
    font-family: 'Century Gothic';
    font-size: 13px;
    font-weight: bolder;
    border: 0 solid #512c1d;
    margin-top: 6px;
    height: 32px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    text-shadow: none;
    padding-top:10px;
    margin-right: -16px;
    line-height:25px;
}

<div id="btnDownload" title="Download Image" class="btndownload">
    <cufon class="cufon cufon-canvas" alt="DOWNLOAD" style="width: 72px; height: 13px;">
    <canvas width="77" height="13" style="width: 77px; height: 13px; top: 1px; left: -1px;"> 
    </canvas><cufontext>DOWNLOAD</cufontext></cufon>

The "Download" button text is vertically centered in Chrome, IE10 and above, and Firefox, but not in IE9.

Possible mistakes could be font-size :13 px, conflicting with line-height:25px. Also, there's padding-top:10px, which should also contribute to the vertical alignment issue.

htmlcss

Answer №1

It seems like this solution should do the trick

#btnDownload {
        position: absolute;
        width: 300px;
        height: 200px;
        top: 50%;
        left: 50%;
        margin-left: -150px; /* Negative half of width. */
        margin-top: -100px; /* Negative half of height. */
}

Make sure to include this code along with your other CSS styles.

*Although not tested in Internet Explorer, it has been proven to work correctly in Chrome and Firefox.

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

Having trouble with the position function in JavaScript?

I'm working on creating a small game, but I've encountered some difficulties at the start. Every time I attempt to obtain the position of track or trackCont, it consistently returns x: 0, y: 0. The DIV doesn't move to the correct position w ...

javascripthtmlcss

Breaking free of the constraints of a 100% height container, UL escapes its

In both Chrome and Firefox, UL list items do not seem to adhere to the parent container's width of 100%. I attempted to use list-style-position: inside;, but unfortunately, that did not solve the issue: <html style="height: 100%"> <body styl ...

htmlcss

Align the bottom of an image with the top of text to achieve perfect vertical alignment

My goal is to arrange numerous images in a row, with text displayed below each image. Each block of text may consist of multiple lines and should be centered. While the heights of the images may vary, their widths will remain consistent. It is important th ...

htmlcss

Adjust the color of the label when the checkbox is marked, and make it red when the checkbox is left

Looking to create a customized checkbox due to challenges in styling the default HTML checkbox, I have attempted the following code. The checkbox functions properly when clicking on the label, but I am unable to change the border color of the label based o ...

htmlcsscheckbox

Eliminating the default inline style automatically

My goal is to hide a table row until a radio button is clicked. I attempted using display:none;, but it did not work. Upon inspecting the code in my developer tools, I noticed that the specific table row has a style attribute style="display: table-row; whi ...

jqueryhtmlcssinline-styles

Implementing a click event on an image in an Angular 4 application

I'm facing an issue with adding a click event to an image within an Angular component. I have tried the following code: <img src="../../assets/add.svg" width="18" height="18" (click)="addItem()"> However, this approach does not seem to work as ...

htmlcssangular

Design a layout consisting of a grid with items that maintain a set maximum width while being evenly distributed across the entire width of the device

I'm trying to create a grid with 2 rows and 3 columns, each cell having an image with a max-width of 512px. I added margin to the grid but now the cells are larger than the content. How can I achieve the same visual appearance as flexbox's justif ...

htmlcsscss-grid

Toggle css comment line using gulp

Is it possible to temporarily deactivate a particular CSS comment on a specific line using Gulp and then reactivate it after completing a build task? As an illustration, I am interested in deactivating the @import 'compass/reset'; statement loca ...

cssnode.jsnpmgulpcompass

Dynamic navigation menu shifting when bolded

Looking at my menu, you'll notice the following layout: If one clicks on Recruitment in the menu, it correctly bolds the text as intended. However, an issue arises where the entire menu unexpectedly shifts 1 or 2px to the left. The menu is implemente ...

xhtmlmenudotnetnukecss

One helpful tip for adjusting the size of a UI chip on the fly

I am attempting to adjust the size of a UI chip dynamically based on the font size of its parent elements using the em unit in CSS. My objective is to achieve something like this: style={{size:'1em'}} The issue I'm encountering: The chip e ...

javascripthtmlcssreactjsmaterial-ui

Guide to leveraging clsx within nested components in React

I am currently using clsx within a React application and encountering an issue with how to utilize it when dealing with mappings and nested components. For instance: return ( <div> <button onClick={doSomething}>{isOpened ? <Component ...

javascriptcssreactjstypescriptclsx

Changing date format in Mui DatePicker

I need some assistance with customizing the mui DatePicker. Specifically, I would like to set the date format to display as Day, DD Month. For example: Monday, 10 September Below is the code snippet I am currently working with: <LocalizationProvider d ...

htmlcssreactjsdatematerial-ui

I would like to mention a website without inserting a direct hyperlink, for example, in the Safari browser

Is there a way to prevent a website name from becoming a clickable link in Safari? In my marketing email, I am highlighting the websites of both my client and their competitor. When mentioning the competitor's site "sitename.com," I want to avoid cre ...

csssafarihtml-email

Make a div with absolute positioning overflow outside of a div with relative positioning that is scrollable

I am facing an issue with two columns positioned side by side. The right column contains a tooltip that overflows to the left on hover. Both columns are scrollable and relatively positioned to allow the tooltip to follow the scroll. However, the tooltip is ...

javascriptcssreactjspositionoverflow

Having trouble aligning the image to the center

After researching and trying various solutions suggested for aligning an image, I am still unable to get it to align as desired. Here is the HTML code snippet: <section> <img class="seattle" src="img/Seattle Pier.jpg" alt="Seattle docks"> ...

htmlcss

Tips for activating this effect even when the window is resized during page scrolling

There's a code snippet that enables the header to become unfixed when a specific div reaches the top of the screen and then scrolls with the rest of the content. While this solution works perfectly, I encountered a problem where the calculations for ...

javascripthtmlcsscss-position

Error: The parent selector "&" cannot be used in top-level selectors. $::webkit-input-placeholder

I am facing an issue while trying to run a legacy create-react-app that utilizes Sass. Initially, when I ran npm start, I encountered the error 'Cannot find module sass', which resembled the message found in this stack overflow post. To resolve t ...

javascriptcssnode.jsreactjssass

Using jquery to refresh several backgrounds at once

While I have some knowledge of CSS and various JavaScript libraries, I've encountered difficulty in integrating multiple backgrounds into the code that I found on this link: http://codepen.io/quasimondo/pen/lDdrF. My goal was to overlay a transparent ...

jqueryhtmlcss

How can I design a trapezoid with see-through borders and background?

Using various CSS border tricks, it's possible to create a trapezoid shape. Additionally, setting the border-color to rgba(r,g,b,a) can make it transparent. However, is there a way to create a trapezoid with both transparent borders and background? ...

javascripthtmlcsscss-shapes

Using HTML and CSS to stack a DIV on top of another using z-index

I have 3 main layers on my website: 1) The main view with elements inside (#views in jsbin) - BOTTOM LAYER 2) An overlay (with a white background opacity of .8 #overlay in jsbin) - MIDDLE LAYER 3) A context menu (#contextmenu in jsbin) - TOP LAYER Wh ...

javascripthtmlcssz-index