pnielsen
06-17-2012, 02:49 AM
I created a page in DW CS, specifying font sizes in em. The preview looks fine in IE and DW design view. But in Firefox all the fonts are proportionately enlarged by about 1.5x.
Can someone please have a look at my CSS below and see where the problem might be?
Any other suggestions regarding the code in general would also be appreciated since I am obviously still in the learning stages. Thank you.
@charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
background: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.75em;
letter-spacing: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1.25;
color: #000000;
}
a:link {
color: #8b3514;
text-decoration: none;
}
a:visited {
color: #8b3514;
text-decoration: none;
}
a:hover {
color: #8b3514;
text-decoration: underline;
}
a:active {
color: #8b3514;
}
.italic {
font-size: .75em;
font-style: italic;
color: #000000;
text-decoration: none;
}
h1 {
font-size: 1.5em;
font-weight: bold;
}
h2 {
font-size: 1.25em;
font-weight: bold;
}
h3 {
font-size: .1em;
font-weight: bold;
}
#head-container
{
color: #000000;
background: #000000;
}
#header
{
margin: 0 auto;
width: 980px;
padding: 0 auto;
background: #ffffff;
}
#header h1 { margin: 0; }
#navigation-container
{
float: left;
width: 100%;
color: #000;
background: #000000;
}
#navigation
{
margin: 0 auto;
width: 980px;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 15px;
color: #ffffff;
text-decoration: none;
border-right: 1px solid #ffffff;
}
#navigation li a:hover { background: #7d26cd; }
#content-container
{
float: left;
width: 100%;
color: #000;
background: #ffffff;
}
#content-container2
{
margin: 0 auto;
width: 980px;
}
#content-container3
{
float: left;
width: 980px;
background: #ffffff;
}
#content
{
clear: left;
float: right;
width: 650px;
padding: 40px 50px 40px 15px;
margin: 0;
display: inline;
}
#content h2 { margin: 0; }
#aside
{
float: left;
width: 200px;
padding: 40px 15px 40px 45px;
margin: 0;
display: inline;
}
#aside h3 { margin: 0; }
#footer-container
{
clear: left;
color: #ffffff;
background: #000000;
line-height: 1.5em;
}
#footer
{
margin: 0 auto;
width: 980px;
text-align: center;
padding: 0px;
height: 20px;
}
Can someone please have a look at my CSS below and see where the problem might be?
Any other suggestions regarding the code in general would also be appreciated since I am obviously still in the learning stages. Thank you.
@charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
background: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.75em;
letter-spacing: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1.25;
color: #000000;
}
a:link {
color: #8b3514;
text-decoration: none;
}
a:visited {
color: #8b3514;
text-decoration: none;
}
a:hover {
color: #8b3514;
text-decoration: underline;
}
a:active {
color: #8b3514;
}
.italic {
font-size: .75em;
font-style: italic;
color: #000000;
text-decoration: none;
}
h1 {
font-size: 1.5em;
font-weight: bold;
}
h2 {
font-size: 1.25em;
font-weight: bold;
}
h3 {
font-size: .1em;
font-weight: bold;
}
#head-container
{
color: #000000;
background: #000000;
}
#header
{
margin: 0 auto;
width: 980px;
padding: 0 auto;
background: #ffffff;
}
#header h1 { margin: 0; }
#navigation-container
{
float: left;
width: 100%;
color: #000;
background: #000000;
}
#navigation
{
margin: 0 auto;
width: 980px;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 15px;
color: #ffffff;
text-decoration: none;
border-right: 1px solid #ffffff;
}
#navigation li a:hover { background: #7d26cd; }
#content-container
{
float: left;
width: 100%;
color: #000;
background: #ffffff;
}
#content-container2
{
margin: 0 auto;
width: 980px;
}
#content-container3
{
float: left;
width: 980px;
background: #ffffff;
}
#content
{
clear: left;
float: right;
width: 650px;
padding: 40px 50px 40px 15px;
margin: 0;
display: inline;
}
#content h2 { margin: 0; }
#aside
{
float: left;
width: 200px;
padding: 40px 15px 40px 45px;
margin: 0;
display: inline;
}
#aside h3 { margin: 0; }
#footer-container
{
clear: left;
color: #ffffff;
background: #000000;
line-height: 1.5em;
}
#footer
{
margin: 0 auto;
width: 980px;
text-align: center;
padding: 0px;
height: 20px;
}