The appearance of the mock button varies between the development and production environments due to CSS styling

I'm currently using CSS to style a hyperlink in order to give it the appearance of a button. This is for a .NET website.

a.pretend
{
display:inline-block;
border-top:1px solid #CCCCCC;
border-left:1px solid #CCCCCC;
border-bottom:1px solid #999999;
border-right:1px solid #999999;
background-color:#E7F3F1;
padding:3px 8px;
color:Black;
text-decoration:None;
cursor:pointer;
}

When I view pages with these styled buttons on my development machine using IE 9.0, they display with the correct background color.

However, when I publish the site to a production server on our local network and view the site from my development machine using the same browser, the background-color no longer appears.

I'm at a loss for what could be causing this issue. Please refrain from suggesting that I switch browsers, as this is an intranet site and I am required to use IE.

The DocType is XMTML1.0 Transitional.

Any advice or assistance would be greatly appreciated. Thank you!

.netcssinternet-explorer

Answer №1

Implementing cross-browser inline-block style:

display:inline-block;
display: -moz-inline-stack;
*display:inline;
zoom:1;

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

Center the radio buttons regardless of the length of the text

My dilemma lies with 3 radio buttons and their corresponding labels - while 2 of them are aligned perfectly beneath each other due to their matching character lengths, the middle one extends further making it look misaligned. Check out this fiddle. Below ...

htmlcsstwitter-bootstrap-3

What is causing the mouse to malfunction when interacting with this HTML form?

What is causing the mouse to not work with the form on this specific webpage? The issue here is that the mouse does not seem to be functioning correctly when attempting to interact with the input boxes within the Form. Upon clicking any of the input boxe ...

htmlcss

Is there a CSS rule that can alter the appearance of links once they have been clicked on a different webpage?

Just starting out here. Imagine I have 4 distinct links leading to the same webpage - is there a way to modify the properties of the destination page depending on which link was clicked? For instance, clicking on link1 changes the background color of the d ...

javascripthtmlcssfrontend

The data-bs-theme attribute of an element does not take precedence over the global theme

UPDATE: I recently included a placeholder item in my carousel because the local database feed was not working, and now the theme is malfunctioning locally as well. Something seems off with the carousel items causing issues. END OF UPDATE I successfully ...

cssreactjsbootstrap-5react-bootstrapcolor-scheme

What methods can I implement to prevent my boxes from becoming stretched out?

How can I prevent this box from stretching too much? Here is the code snippet along with the output: CSS: .social { padding-left: 1000px; border: 5px inset black; margin: 4px; width: 100px; } HTML: <div class="social"> <p& ...

htmlcssweb

IE9 is causing a bizarre problem where the entire page is suddenly jumping. It's

UPDATE: The client has requested testing to disable the click and drag feature in IE, so replicating the bug may be difficult at this time. I apologize if this hinders the community's ability to help fix the root issue. Here's the issue: It occu ...

javascriptjquerycssdebugginginternet-explorer-9

Optimizing loading times for mobile banners through media queries

I currently have a standard size banner that loads when my page is accessed on a computer. However, I would like to optimize the loading speed by having a smaller version specifically for mobile devices using a media query. My main question is how does t ...

cssmobilemedia-queriesloadingbanner

HTML/JavaScript - Ways to show text entered into an input field as HTML code

One dilemma I'm facing involves a textarea element on my website where users input HTML code. My goal is to showcase this entered HTML code in a different section of the webpage. How should I approach this challenge? The desired outcome is similar to ...

javascriptjqueryhtmlcssnode.js

What is the best way to ensure that all rows in flexbox have the same number and dimensions as the first row?

My objective with flexbox was to evenly distribute the text across the width of the page. When I say 'evenly distributed', I mean: If there are 3 sections, the center of the text in each section should be at fifths of the webpage width. This is ...

htmlcssflexbox

Material-UI - Switching thumb styles in a range slider

Looking for a way to style two entities differently on the Material-UI Slider? Entity A as a white circle and Entity B as a red circle? While using data-index can work, there's a flaw when sliding. Is there a better approach? if (data-index === 0) { ...

javascripthtmlcssreactjsmaterial-ui

Tips for changing the CSS properties of input elements in iView

Exploring Vue's single file components and experimenting with the iView UI framework. Here is a snippet of code I am working with: <template> <div> <i-input class="cred"/> </div> </template> I want to adjust the ...

cssvue.jsiview-ui

The art of styling <li> elements compared to <a> elements

While these inquiries may lean towards being subjective, I am interested in learning about the industry's generally accepted best practices: 1) With responsive design and collapsible menus becoming more common, should a nav or nav menu element be sty ...

htmlcssnavigation

Different ways to adjust the appearance of table borders in HTML

I find myself at a standstill, hence why I am reaching out with this question. This Table presents itself with various border sizes and colors, along with similar complexities in the background of its cells. Could anyone provide me with guidance on how t ...

htmlcsscolorshtml-tableborder

The plugin's element is not compatible with jQuery methods

This particular plugin is designed to enhance the appearance of checkbox inputs. It creates a more visually appealing version of standard checkboxes. However, I have encountered an issue with one of the variables in the code. Let's discuss the theLab ...

javascriptjqueryhtmlcssjquery-plugins

DateTimePicker with the functionality to select specific days on a weekly basis

Is it possible to restrict the selection of days in a DateTimePicker to only Monday through Friday, disabling Saturday and Sunday options? I am looking for a solution that automatically prevents users from choosing weekends without needing pop-up message ...

c#.netwinforms

Utilize custom {tags} for replacing strings in a CSS file using str_replace in PHP

My code consists of a script that updates a CSS file based on user input from an html form. The script executes a str_replace function, scanning the CSS file for specific "tags". For example: html,body { background: {bgcolor} url(../images/bg.jpg) re ...

phphtmlcssstr-replace

Is it possible to create a regular expression that identifies and returns instances of repeated characters within a string?

Exploring the world of .NET regular expressions. Imagine a scenario where you have the following text: ddddddddddd You want to check for multiple repetitions of more than 2 for any character. The regex should not give a match if there are double lett ...

.netregex

Is there a way to change an element's display to 'block'? (see more information below)

I'm having an issue with my event listener for a button that is supposed to change the css of #popUpForm. It seems to only work when I add inline css directly to #popUpForm. Is there a way to achieve this without using inline css and instead setting t ...

javascripthtmlcssdomwebpack

Handling HTTP timeouts with HTMLAgilityPack

I am currently using HTMLAgilityPack in a parser running on a server, but I've encountered an issue with one specific website that I parse. Each day around 6am, they perform maintenance which causes their servers to shut down. This disrupts the Load() ...

c#.netvb.nethtml-agility-pack

Tips for positioning a Div element in the center of a page with a full-page background

I am trying to center align my div containing login information on the webpage. The static values seem to work fine, but I am looking for a way to position it dynamically. Additionally, the background is only covering a strip with the height of the div... ...

htmlcss