CODEWITHSUNDEEP
htmlcss
rossautomatica
rossautomatica

Reputation: 459

CSS differences between Firefox and Chrome

I'm having some issues getting one particular element to look the same in Firefox and Chrome.

This screenshot is how it looks in Firefox (and how it should look - a box, with a date inside).

Firefox - correct example

This screenshot is how it looks in Chrome.

Chrome - incorrect example

I've been playing with Firebug to try and fix it, but whatever I do, I cannot get the background to work in the same way as it does on Firefox. Anyone able to help with this?

The page is at http://zachlockwood.com/wp - thanks.

HTML/CSS for the element in question:

.bit-events-narrow .bit-date .bit-event-data { text-align: center; text-transform: uppercase; font-size: 16px !important; background: #552412 !important; color: #f0f0e6 !important; line-height: 18px !important; padding-top: 8px !important; padding-bottom:5px !important; padding-left: 3px !important; padding-right: 3px !important; font-family: 'Conv_Haymaker' !important; height: 40px !important; width: 40px !important; } 

.bit-date { text-align: center !important;  line-height: 20px !important; }  

.bit-date a { width: 50px !important; background: #552412 !important; }  

<td class="bit-date">
<a class="bit-event-data" href="http://www.bandsintown.com/event/7082285?app_id=wpjs_zachlockwood.com&artist=Zach+Lockwood&came_from=39" target="_blank" data-bit-event-id="7082285" style="font-family: 'Conv_Haymaker'; font-size: 16px; font-weight: 400; font-style: normal; color: rgb(240, 240, 230); text-transform: uppercase; text-decoration: none; letter-spacing: normal; word-spacing: 0px; line-height: 18px; text-align: center; vertical-align: baseline; direction: ltr; background-color: rgb(85, 36, 18); background-image: none; background-repeat: repeat; background-position: 0% 0%; background-attachment: scroll; opacity: 1; width: 40px; height: 40px; top: auto; right: auto; bottom: auto; left: auto; margin: 0px; padding: 8px 3px 5px; border-width: 0px; border-color: rgb(240, 240, 230); border-style: none; position: static; display: inline; visibility: visible; z-index: auto; overflow: visible; white-space: normal; clip: auto; clear: none; cursor: pointer; list-style: disc outside none; marker-offset: auto;">Nov 16</a>
</td>

**note that the HTML is generated by the BandsInTown plugin, and this was not added by me.

Upvotes: 0

Views: 1625

Answers (1)

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

Seems like your a tag should be block

Try this:

.bit-date a { display: block!important; }

Upvotes: 3

Related Questions