Text-transform: uppercase not parsing in FF or IE

Hi there,

New to this forum. Have searched for a fix for this and hope somebody can help. Have set up a styles for <h1> and <h2> for an e-commerece site I am working on. The look has to follow a printed catalogue.
The problem is both have text-transform: uppercase; defined in the css. <h1> parsing perfectly. <h2> not so much. Help!

So it is basically two colored boxes with text in them that go accross the top of each page. Have indicated the structure and the main css points.

HTML looks as such

<html>
<head>
<title>Adanmh's example</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="status-bar"> Status Bar with Search and Login Buttons here </div>
<div id="header"> Logo and tagline go here</header>
<div id="content">
<div id="side-menu">
Navigation menu goes here
</div>
<div id="top-menu"> Admin and User tools menu </div>
<div id="page-wrapper">
<h1> Product Catalogue</h1>
<h2> Online Catalogue </h2>
<p> lorem ipsum blah blah blah</p>
</div>
<div style="clear:both"></div>
</div>
<div id="footer"> Have a guess what goes here!</div>
</body>

CSS is as follows



/*reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
  background: transparent;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;

}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
}

/* remember to define focus styles! */

:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */

ins {
text-decoration: none;
}

del {
text-decoration: line-through;
}


/* tables still need 'cellspacing="0"' in the markup */

table {
border-collapse: collapse;
border-spacing: 0;
}



/*html tags */
body { background-color: #ffffff; margin:auto;width: 100%;}

/*template layout */

div#status-bar {background-color: #6f7175; height: 50px; width: 100%;}

div#header {
background: #FFFFFF;
border: #f8f8f8 1px 1px 1px 1px solid;
height: 103px;
margin: 0px auto 0px auto; 
width: 990px;
}
div#content {
background: #ffffff; 
border: #f8f8f8 0px 1px 0px 1px solid;
clear: none;
margin: 0px auto 0px auto;
width: 990px;
}

div#side-menu {
  background:#f8f8f8; 
  display: inline; 
  height: 100%; 
  width: 180px;
}

div#top-menu {
background:#6f7175; 
float: right; 
height: 11px;
padding: 7px 40px 7px 40px; 
width:730px; 
}
div#page-wrapper {
display: inline;
float: right; 
margin: 25px 40px 25px 40px;
width: 730px; 
}

div#footer {
background: #ebebeb;
clear: none;
height: 135px;
margin: 0px auto 0px auto;
width: 990px;
}
/* Heading Styles */

h1 {
background-color: #6f7175;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
height: 25px;
margin-bottom: 5px;
padding-top: 3px;
padding-left: 3px;
text-transform: uppercase;
width: 100%;
}

h2 {
background-color: #b0b0b2;
color: #6f7175;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
height: 20px;
margin: 0px 0px 25px 0;
padding-top: 2px;
padding-left: 3px;
text-transform: uppercase;
width: 100%;
}

/* Paragraph Styles */

p {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
text-transform: none; 
}

Any help appreciated.

Cheers,

Adam

Text-transform: uppercase not parsing in FF or IE

Help for some css that is not working for me.

adanmh

SevenCubed

SevenCubed

Major_Payne

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week