I'm attempting to have an element in my layout to change text and background colors onMouseOver, and then revert to their original state when rolled off. The problem is that JS doesn't seem to recognize the nature of my CSS.
The element (#sidebar) has these pieces of CSS code (code of the sidebar itself not relevant):
#sidebar ul {
list-style-type: none;
}
#sidebar li {
width:100px;
border-radius: 25px;
text-align: center;
background-color: #AFCEEA;
border: 5px solid #195A94;
font-weight: bold;
line-height: 50px;
margin-top: 10px;
margin-left: 5px;
}
And it looks like this, prior to OnMouseOver:
This is the JS I'm using to attempt the onMouseOver:
<script type="text/javascript">
function changeColor(myColor) {
var sidebar = document.getElementById('sidebar li');
sidebar.style.fontcolor = "#6588C7";
sidebar.style.backgroundColor = "#6588C7";
}
</script>
With this implementation in the div:
<div id ="sidebar li">
<ul><li onmouseover="changeColor('new color')"><p class="class1">writing<p></li></ul>
</div>
But it does this to my sidebar instead:
How can I get the color to stay in the little boxes?
You can really simplify your code by using :hover instead of onmouseover.
I am using a flexbox for li to make center alignment easy. You do not longer need to suppress the list-style because the list items are no longer displayed as a list-item.
You may no longer need class1 for the paragraphs. I just kept them in.
function changeText(myText) {
//find variable on page called 'myContent' and give it var name display
var display = document.getElementById('content');
display.innerHTML = "";
display.innerHTML = "New content.";
}
#sidebar li {
width: 100px;
height: 100px;
border-radius: 25px;
background-color: #AFCEEA;
border: 5px solid #195A94;
font-weight: bold;
display: flex;
align-items: center; /* Vertical alignment */
justify-content: center; /* Horizontal alignment */
}
#sidebar li:hover {
background-color: red;
}
/* Apply top margin to all list elements except for the first one */
#sidebar li:not(:first-child) {
margin-top: 10px;
}
#content {
border-radius: 25px;
width: 750px;
height: 500px;
margin-top: 50px;
margin-left: 300px;
background-color: azure;
padding: 50px;
}
<div id="sidebar">
<ul>
<li>
<p class="class1">writing<p>
</li>
<li>
<p class="class1">games/art<p>
</li>
<li>
<p class="class1">music<p>
</li>
</ul>
</div>
<div id="content" onclick="changeText()"> <p>Content here.</p> </div>
getElementById accepts id argument, but you are passing it a selector instead. You may want to use document.querySelector instead. Query selector documentation:
Query Selector
Your div id is not correct. It should be like this:
<div id ="sidebar">
<ul><li onmouseover="changeText('new text')" onmouseout="resetText()"><p class="class1">writing<p></li>
</div>
You don't need javascript for something as trivial as this. You could use :hover CSS pseudo-class. Read more about it here
#sidebar ul {
list-style-type: none;
}
#sidebar li {
width:100px;
border-radius: 25px;
text-align: center;
background-color: #AFCEEA;
border: 5px solid #195A94;
font-weight: bold;
line-height: 50px;
margin-top: 10px;
margin-left: 5px;
}
#sidebar li:hover {
color: tomato;
background: #333
}
<div id ="sidebar">
<ul>
<li>
<p class="class1">writing<p>
</li>
<li>
<p class="class1">writing 2<p>
</li>
</ul>
</div>
div id name is incorrect
var sidebar = document.getElementById('sidebar-li');
<script type="text/javascript">
function changeColor(myColor) {
var sidebar = document.getElementById('sidebar-li');
sidebar.style.fontcolor = "#6588C7";
sidebar.style.backgroundColor = "#6588C7";
}
</script>
and
<div id ="sidebar-li">
<ul>
<li onmouseover="changeColor('#ffffff')">
<p class="class1">writing<p>
</li>
</ul>
</div>
Based on your code you could do :
#sidebar ul {
list-style-type: none;
}
#sidebar li {
width: 100px;
border-radius: 25px;
text-align: center;
background-color: #AFCEEA;
border: 5px solid #195A94;
font-weight: bold;
line-height: 50px;
margin-top: 10px;
margin-left: 5px;
}
<div id="sidebar">
<ul>
<li>
<p class="class1">writing<p>
</li>
</ul>
</div>
<script type="text/javascript">
function changeColor(e) {
var sidebar = e.currentTarget;
sidebar.style.color = "#fff";
sidebar.style.backgroundColor = "#6588C7";
}
var li_elements = document.getElementById('sidebar').getElementsByTagName('li');
for (var i = 0; i < li_elements.length; i++) {
li_elements[i].addEventListener('mouseover', changeColor);
}
</script>
But a simpler solution is to remove the JavaScript and to just do it with CSS :
#sidebar ul {
list-style-type: none;
}
#sidebar li {
width: 100px;
border-radius: 25px;
text-align: center;
background-color: #AFCEEA;
border: 5px solid #195A94;
font-weight: bold;
line-height: 50px;
margin-top: 10px;
margin-left: 5px;
}
#sidebar li:hover {
color: #fff;
background-color: #6588C7;
}
<div id="sidebar">
<ul>
<li>
<p class="class1">writing<p>
</li>
</ul>
</div>
Related
With a for loop, I removed the active class inside the a tag. However, when I want to add a class when clicking nothing happens and the class gets added to the li and a tag but without the active class name.
This has been asked so many times but I still cannot figure it out. Any help is appreciated. Thank you!
Here is the example: https://jsfiddle.net/fu5e7946/
Basically you are looping within your loop twice. I have fixed that.
You simply need to remove the previous active class and add new one like this:
document.querySelector(".sidenav a.active-list").classList.remove("active-list");
e.target.classList.add('active-list');
You can this: codepen:link https://codepen.io/emmeiWhite/pen/jOMZRxd
let elements = document.querySelectorAll('div, ul, li, a');
elements.forEach(i => {
i.addEventListener('click', function(e) {
document.querySelector(".sidenav a.active-list").classList.remove("active-list");
e.target.classList.add('active-list');
});
});
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
left: 10px;
overflow-x: hidden;
}
.sidenav ul {
background-color: black;
list-style: none;
padding: 0px;
padding-right: 0px;
}
.sidenav > ul > li {
color: white;
margin: 0px;
}
.sidenav a {
text-decoration: none;
font-size: 18px;
display: block;
line-height: 4em;
color: white;
background-color: black;
}
.sidenav a:hover {
color: grey;
}
.sidenav .active-list {
background-color: #e2c9be;
color: black;
}
<div id="active-buttons" class="sidenav" style="padding-top: 100px;">
<ul class="text-center">
<li>
Profile
</li>
<li>
Experience
</li>
<li>
Projects
</li>
<li>
Skills
</li>
</ul>
</div>
Try with toggle (more info: MDN). There you have working example:
let elements = document.querySelectorAll('div, ul, li, a');
elements.forEach(i => {
i.addEventListener('click', function() {
i.classList.toggle('active-list');
});
});
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
left: 10px;
overflow-x: hidden;
}
.sidenav ul {
background-color: black;
list-style: none;
padding: 0px;
padding-right: 0px;
}
.sidenav > ul > li {
color: white;
margin: 0px;
}
.sidenav a {
text-decoration: none;
font-size: 18px;
display: block;
line-height: 4em;
color: white;
background-color: black;
}
.sidenav a:hover {
color: grey;
}
div ul li a.active-list {
background-color: #e2c9be;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="active-buttons" class="sidenav" style="padding-top: 100px;">
<ul class="text-center">
<li>
Profile
</li>
<li>
Experience
</li>
<li>
Projects
</li>
<li>
Skills
</li>
</ul>
</div>
I'm not very knowledgeable in javascript. But I need a dropdown on a vertical menu that is pure javascript, so I copied/paste the script from W3: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_dropdown
and modified it to fit the page style. This menu needs to be on multiple pages, so it's also an html include. I got it to somewhat work, but you have to double click the drop-drop down in order to close it and this needs to be a single-click. I've been searching for a solution for a couple weeks now and still not sure what I'm doing wrong. I can't use jquery, bootstrap or any outside library since it's not connected to the internet.
HTML:
<div id="content">
<div class="topvert">
<div class="vertheader">
<span class="quicklinks">QUICK MENU LIST</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="quick">
<div class="drop-button active"><div onclick="myButton()">Drop down Menu Item
</div></div>
<div class="dropdown-container" style="display: block;">
Menu Item
</div>
</div>
</div>
</div>
<div class="btmvert">
<div class="vertheader">
<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="vertbtn">
<a class="backhome" href="#">Back to Home Page</a>
</div>
</div>
</div>
</div>
Codepen
The problem is that on your .drop-button element, you have an inline onClick() attribute/event, AND inside the handler function (function myButton()) you you declare another eventListener on top of that.
You should just remove the onclick="myButton()" attribute all together, and then your JavaScript would look like this:
(Run code snippet)
There are a few different ways in JavaScript to declare event listeners. One way is Inline/HTML Event Handlers that you put inline on the HTML element like an attribute, ie- <div onClick="handlerFunction"> But the more modern, and more recommended way is using addEventListener() directly from your JavaScript.
var dropdown = document.querySelector(".drop-button");
dropdown.addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display == "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display= "block";
}
});
#content {
margin: 1.875em 0px 0.625em 0px;
width: auto;
background-color: #002f6c;
border-radius: 0.75em;
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
display: inline-block;
overflow: hidden;
top: 9.375em;
}
.quick {
margin: 0;
padding: 0;
display: block;
overflow: hidden;
font-family: sans-serif;
}
.quick a {
display: block;
height: auto;
padding-top: 0.625em;
padding-bottom: 0.625em;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
text-align: center;
text-decoration: none;
background-color: #888B8D;
}
.quick a:hover {
display: block;
width: auto;
height: auto;
color: #002F6C;
background-color: #FFD300;
}
.topvert {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.btmvert {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.btmverthome {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.vertheader {
width: auto;
padding: 2%;
display: block;
text-align: center;
}
.vertbtn {
width: auto;
cursor: pointer;
display: block;
}
.vertbtn :hover {
background-color: #FFD300;
position: relative;
display: block;
}
a.backhome {
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
font-weight: 600;
color: #fff;
text-align: center;
padding: 2%;
box-sizing: border-box;
}
a.backhome:hover {
color: #002f6c;
background-color: #FFD300;
position: relative;
display: block;
}
.quicklinks {
color: #fff;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
font-weight: 600;
}
.drop-button {
padding-top: 0.625em;
padding-bottom: 0.625em;
text-decoration: none;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
color: #fff;
display: block;
border: none;
background-color: #888B8D;
width: 100%;
text-align: center;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.drop-button:hover {
color: #002f6c;
background-color: #FFD300;
}
.main {
margin-left: 200px;
font-size: 20px;
padding: 0px 10px;
}
.active {
background-color: #06a7e0;
color: white;
}
.dropdown-container {
display: none;
background-color: #b4e4f5;
border-bottom: solid 2px #06a7e0;
}
.dropdown-container > a {
background-color: #50c1e9;
border-bottom: solid 1px #06a7e0;
}
a {
display: block;
position: relative;
color: #f3f3f3;
text-decoration: none;
}
a:hover {
color: #fff;
position: relative;
}
<div id="content">
<div class="topvert">
<div class="vertheader">
<span class="quicklinks">QUICK MENU LIST</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="quick">
<div class="drop-button active"><div>Drop down Menu Item
</div></div>
<div class="dropdown-container" style="display: block;">
Menu Item
</div>
</div>
</div>
</div>
<div class="btmvert">
<div class="vertheader">
<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="vertbtn">
<a class="backhome" href="#">Back to Home Page</a>
</div>
</div>
</div>
</div>
I am working on bus booking website. There are many bus operators lists. When click on book now link, i need to show that particular bus information just below of that row only. In every list i have Book now button. please check my html code
$(document).ready(function(){
$(".ltbrd").click(function(){
$(this).find(".bcont").slideToggle(200);
});
});
.busrowmain {
overflow: hidden;
}
.busrow {
padding: 5px 0px;
width: 940px;
float: left;
text-align: center;
}
.busrow li {
text-transform: uppercase;
text-align: center;
padding: 0 42px;
float: left;
font-size: 14px;
color:#444;
}
.busrow li span {
font-weight: bold;
font-size: 16px;
}
.busrowbtn {
padding-top: 15px;
}
.busrowbtn a {
padding: 10px 35px;
background: #da4f56;
color:#fff;
text-transform: uppercase;
transition: all 0.3s;
border-radius: 2px;
}
.busrowbtn a:hover {
background: #f15a61;
}
.ltbrd {
border-bottom: solid 1px #e8e8e8;
padding-bottom: 13px;
padding-top: 13px;
transition: all 0.3s;
}
.ltbrd:hover {
background: #f8f8f8;
}
.bcont {
width: 100%;
background: #f8f8f8;
border-top: solid 2px #e8e8e8;
min-height: 200px;
padding: 30px;
display: none;
}
<div class="row ltbrd">
<div class="busrowmain">
<div class="busrow">
<li> BUS NO <br/>
<span>TN045</span>
</li>
<li> BUS TYPE <br/>
<span>2*3 AC</span>
</li>
<li> DEPARTURE TIME <br/>
<span>10:00 PM</span>
</li>
<li> ARRIVAL TIME <br/>
<span>2:00 AM</span>
</li>
<li> SEATS <br/>
<span>62</span>
</li>
<li> FARE <br/>
<span>750</span>
</li>
</div>
<div class="busrowbtn">
BOOK NOW
</div>
</div>
<div class="bcont"> Bus Information content </div>
</div>
When i click on bus list row, bus information section is opening. But I need when we click on book now link then only open the bus information div. Please help.
Try this:
$(document).ready(function(){
$(".busrowbtn a").click(function(){
$(this).parents(".busrowmain").next(".bcont").slideToggle(200);
});
});
.busrowmain {
overflow: hidden;
}
.busrow {
padding: 5px 0px;
width: 940px;
float: left;
text-align: center;
}
.busrow li {
text-transform: uppercase;
text-align: center;
padding: 0 42px;
float: left;
font-size: 14px;
color:#444;
}
.busrow li span {
font-weight: bold;
font-size: 16px;
}
.busrowbtn {
padding-top: 15px;
}
.busrowbtn a {
padding: 10px 35px;
background: #da4f56;
color:#fff;
text-transform: uppercase;
transition: all 0.3s;
border-radius: 2px;
}
.busrowbtn a:hover {
background: #f15a61;
}
.ltbrd {
border-bottom: solid 1px #e8e8e8;
padding-bottom: 13px;
padding-top: 13px;
transition: all 0.3s;
}
.ltbrd:hover {
background: #f8f8f8;
}
.bcont {
width: 100%;
background: #f8f8f8;
border-top: solid 2px #e8e8e8;
min-height: 200px;
padding: 30px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row ltbrd">
<div class="busrowmain">
<div class="busrow">
<li> BUS NO <br>
<span>TN045</span></li>
<li> BUS TYPE <br>
<span>2*3 AC</span></li>
<li> DEPARTURE TIME <br>
<span>10:00 PM</span></li>
<li> ARRIVAL TIME <br>
<span>2:00 AM</span></li>
<li> SEATS <br>
<span>62</span></li>
<li> FARE <br>
<span>750</span></li>
</div>
<div class="busrowbtn"> BOOK NOW </div>
</div>
<div class="bcont"> Bus Information content </div>
</div>
Just trigger the click function on the Book Now button and then find the parent element using parents() function and shows the next content of it.
https://api.jquery.com/show/
you can use $.show() and $.hide() for this.
Book Now
instead of using slide toggle function in your Jquery you can always use to separate functions like show() and hide() this will work .
I am attempting to make a tabbed "table" of sorts but I am having trouble making it display the information.
$(document).ready(function() {
$('#orenk ul a').click(function() {
$('#orenk ul a').removeClass('selected');
$(this).addClass('selected');
$('#orenk_changer').html(
('.' + $(this).attr('id') + '_content').html()
);
});
});
body,
html,
div,
ul,
li,
a {
margin: 0;
padding: 0;
}
body {
font-family: arial;font-size:12px; color:#222;}
.clear {
clear: both;
}
a img {
border: none;
}
ul {
list-style: none;
position: relative;
z-index: 2;
top: 1px;
border-left: 1px solid #f5ab36;
}
ul li {
float: left;
width: 12.5%;
}
ul li a {
background: #ffd89b;
color: #222;
display: block;
padding: 6px 0px;
text-decoration: none;
border-right: 1px solid #f5ab36;
border-top: 1px solid #f5ab36;
border-right: 1px solid #f5ab36;
text-align: center;
}
ul li a.selected {
border-bottom: 1px solid #fff;
color: #344385;
background: #fff;
}
h1 {
display: block;
width: 600px;
margin: 0 auto;
padding: 20px 0;
color: #fff;
}
#orenk {
width: 900px;
margin: 0 auto;
}
#tabs {
width: 900px;
margin: 0 auto;
}
#content {
width: 900px;
margin: 0 auto;
height: 270px;
background: #fff;
z-index: 1;
text-align: center;
margin-bottom: 20px;
}
<div class="titlebg" style="padding: 4px; text-align: left; font-size: 20px;">
ORENK PROVINCE
</div>
<div id="orenk">
<ul>
<li>ORENK PROVINCE
</li>
<li>Glass Shores
</li>
<li>Torrid Terrain
</li>
<li>Muculent Plains
</li>
<li>Ambrosial Marsh
</li>
<li>Viscid Expanse
</li>
<li>Opulent Retreat
</li>
<li>Reedy Knolls
</li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
<div id="orenk_changer">
<img src="http://placehold.it/900x270">
</div>
<div id="glass_content" style="display: none;">Glass content test</div>
<div id="torrid_content" style="display: none;">torrid content test</div>
<div id="plains_content" style="display: none;">plains content test</div>
<div id="marsh_content" style="display: none;">marsh content test</div>
<div id="expanse_content" style="display: none;">expanse content test</div>
<div id="Opulent_content" style="display: none;">opulent content test</div>
<div id="knolls_content" style="display: none;">knolls content test</div>
</div>
I am VERY new to javascript and I can get it to display the id where I want the content but when I attempt to get it to show the html inside the container I am trying to call, it does nothing. It's incredibly frustrating. Any one care to point out what I am doing wrong and how to fix it?
jsBin demo
Two things wrong with your ('.' +
$('.' + ›missing $
$('#' + ›you need to target # (Id) elements, not .(class)
$('#orenk ul a').click(function( evt ) {
evt.preventDefault();
$('#orenk ul a').removeClass('selected');
$(this).addClass('selected');
$('#orenk_changer').html(
$('#'+ this.id +'_content').html() // missing $ and # instead of .
);
});
Also, a href="#" (instead of a href="javascript:void(0);") is quite enough if than inside JS you do Event.preventDefault()
I am making a header for a page, but from some point I noticed that the text-family is being changed when the dropdown menu was being launched(Safari 8). Then I tried to open it in Chrome, where it didn't changed when launching jQuery function. But when I tried to change the font, but it didn't make any difference. It did't changed the font at all. So even though I don't have specified the font for the header tabs, it's still formatted. Thanks in advance for help. I am sorry if it's just some manor mistake, I am quite new to this.
$(document).ready(function() {
$('.hdr-drpdwn-menu').hide();
$('.hdr-list-more').hover(
function() {
$(this).find('.hdr-drpdwn-menu').stop(true, true).slideDown('fast');
},
function() {
$(this).find('.hdr-drpdwn-menu').stop(true, true).slideUp('fast');
}
);
});
/* RESETTING ALL MARINGS, PADDING AND TEXT-DECORATIONS */
body {
margin: 0;
padding: 0;
}
ul, li, p, h1, h2, h3, h4, h5, button {
margin: 0;
padding: 0;
border: none;
background-color: transparent;
}
ul, li {
list-style: none;
}
a, a:active, a:visited {
text-decoration: none;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
background-color: #5a5a5a;
font-style: normal;
}
#header .hdr-nav-opt {
float: left;
margin-left: 10px;
background-color: transparent;
}
#header .hdr-nav-soc {
float: right;
margin-right: 10px;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab{
display: inline;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab .hdr-button {
height: 40px;
color: #fff;
font-size: 20px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab .hdr-button:hover {
background-color: #7D7D7D;
}
.hdr-drpdwn-menu {
position: relative;
width: 120px;
margin-left: 40px;
background-color: #5a5a5a;
box-shadow: 2px 2px 10px #888888;
border: 1px solid #888888;
}
.hdr-drpdwn-menu .hdr-button {
width: 100%;
height: 40px;
color: #fff;
font-size: 20px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<!-- The Global Header of the website-->
<div id="header">
<!-- The Left part of the header-->
<div class="hdr-nav-opt">
<ul class="hdr-nav-list">
<li class="hdr-list-tab"><a class="hdr-list-link" href="?page=home"><button class="hdr-button">Home</button></a></li>|
<li class="hdr-list-tab hdr-list-more"><button class="hdr-button">More</button>
<!-- The Dropdown Menu-->
<div class="hdr-drpdwn-menu">
<ul class="hdr-drpdwn-list">
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=about"><button class="hdr-button">About</button></a></li>
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=help"><button class="hdr-button">Help</button></a></li>
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=credits"><button class="hdr-button">Credits</button></a></li>
</ul>
</div>
</li>
</ul>
</div>
<!-- The Right part of the header-->
<div class="hdr-nav-soc">
<ul class="hdr-nav-list">
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Facebook</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Twitter</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Instagram</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Tumblr</button></a></li>
</ul>
</div>
</div>
I don't know which font you are using now, but maybe you need a callback in your styles
.hdr-drpdwn-menu .hdr-button {
width: 100%;
height: 40px;
color: #fff;
font-size: 20px;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;/*like this*/
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
and it will works all the browsers.