Question

I’ve got an ASP.NET 4 app being developed and tested against http:// localhost/mysite – I spent a while looking into a problem with Twitter Bootstrap buttons in Firefox (v12.0) where they looked weird.

However I noted that, when testing, if I swapped the URL and changed ‘localhost’ for my machine’s FQDN (e.g. http://mymachine.mydomain.com/mysite) then it worked normally and as expected.

This is kinda good news because it means that there isn’t a “bug” as such that I have to fix but I’m curious about why it’s happened in the first place.

The weird behaviour is as follows:

The ‘button’ is marked up as follows (in this case, a <a> to look like a button):

<p><a class="btn btn-success" href="checkout.aspx"><i class="icon-shopping-cart icon-white"></i> Checkout</a></p>

I also have the same behaviour when using a ‘real’ button, marked up as follows:

<p><input type="submit" name="ctl00$cphMainContent$btnProceedToCustomerDetails" value="Next: Your details" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$cphMainContent$btnProceedToCustomerDetails&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="cphMainContent_btnProceedToCustomerDetails" class="btn btn-primary" /></p>

In both cases, the buttons render in a grey, unreadable state and then sort of ‘fill up’ in green colour when you hover over, until it is about 75% filled up and then stops filling up.

Here’s some images

The <a class="btn btn-success">

On load (before mouseover)

When you put your mouse over it, it fills up with colour from the bottom up in about 0.5 seconds, finishing up looking like this:

The <input type="submit" class="btn btn-primary">

On load (before mouseover)

After mouseover, again it fills up with colour from bottom up, in about 0.5 seconds, and looks like this:

Like I say, this only happens when using Firefox, and only when looking at localhost. Other browsers are fine. I am using a freshly downloaded copy of bootstrap.js (downloaded today) with no amendments, I only include one other css file, and even when I don’t include it, it’s the same behaviour.

Answer 1

I ran into this problem earlier today. This link: twitter bootstrap button changes rendering oddly in firefox and chrome helped me.

In my css, I applied the following:

.btn-primary, .btn-danger, .btn-success {    background-image: none;    filter: none;}

It worked. My pages now render correctly in firefox. Chrome worked fine for me.