PDA

Click to See Complete Forum and Search --> : font probs with ie... grrr

luckysixx
08-07-2007, 10:21 AM
ok I finally got the layout looking basically the same in ie and firefox. now the on problem i have is that the fonts dont seem to have the css rules applied. the only way i can make them look the same in ie and ff is to make the fonts a specified pt. plus there is a little white space above the search area. anyone have an idea? thanks.

<html>

<head>

<link rel="stylesheet" type="text/css" href="main.css" title="default">
<link rel="alternate stylesheet" type="text/css" href="print2.css" title="print">
<LINK rel="stylesheet" type="text/css" href="print2.css" media="print">

<script type="text/javascript" src="styleswitcher.js"></script>
<script type="text/javascript" src="crumbs.js"></script>
<title>title</title>


</head>

<body>
<div id="container">
<div id="header">
<img src="images\banner.gif"/>
</div>

<div id="searchbar">
<form name="search" class="search" method="get">
Search:
<input type="text" class="searchbox" name="searchterm">
<input type="submit" class="searchbutton" value="Go!">
</form>
<div id="print">
<a href="#" onclick="setActiveStyleSheet('default'); return false;">default view</a>|
<a href="#" onclick="setActiveStyleSheet('print'); return false;">print view</a>
</div>

</div>

<div id="menus">

<ul>
<li><a class= "MenuCurr" href="index.htm">Home</a></li>
<li><a href="about.htm">About Us</a></li>
<li><a href="contact.htm">Contact Us</a></li>
<li><a href="about.htm">Programs &amp; Services</li>
<li><a href="about.htm">Departments</li>
<li><a href="about.htm">Events</li>
<li><a href="recruitment/empl_home.html">Employment</a></li></ul>
</div>




<div id="content">
<div class="breadcrumbs"><span class="bctitle">You are here: </span> <span class="bchere">

<script language="JavaScript">
<!--
breadcrumbs();
-->
</script></span></div>

<h1>Header 1r</h1>
<p>kjabljkbjiohjabiojio aklbj afb jabsdkl badbji adfiobj ioerqb ioerajbko aerior eqiob badjbf ba dfab b a adf badf bkl adjbka d a adf ad

<div class="picture">
<img class="pic" src="images/aerialphoto.jpg" alt="">
<p>Aerial view of gberah earahc avsd sa.</p>
</div>

</p>
<p>agawe rgerg er erqhw tqw4tn drynmeym etym tym hyet ey enef</p>

</div>

<div id="footer">
<h2>blah balbioa jabio ba footer</h2>
<p>bernherqn nre qgher eragrsea bqerb rb q erer bqwerb</p>
</div>
</div>
</body>

</html>

body {
background-color:#d3dadf;
font-family: verdana, sans-serif;
font:small;
color: #444d61;
text-align:center;

}

a {
color: #a54433;
text-decoration: none;
font-weight: bold;
border: 0;
cursor: pointer;
}


div#container{
width: 700px;
margin-left: auto;
margin-right: auto;
background-color:white;
background-repeat: repeat-y;

}

div#header{
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
float:right;
clear:right;
background-color:white;

}

#header img{
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
clear:right;
background-color:#d3dadf;
background-repeat:no-repeat;
}

div#dhfs {
width: 174px;
height: 37px;
position: absolute;
left: 60px;
top: 80px;
background-image: url(images/dhfs.gif);
}

div#gov {
width: 133px;
height: 38px;
position: absolute;
left: 270px;
top: 80px;
background-image: url(images/wisconsingov.gif);
}

div#logo {
width: 92px;
height: 93px;
position: absolute;
top: -5px;
left: -20px;
background-image: url(images/cwclogo.gif);
}

div#footer {
clear: both;
text-align: center;
width: 700px;
padding: 2px;
margin-top: 50px;
}

#footer h2{
font-size: x-small;
font-weight: bold;
text-align: center;
margin: 0px;
padding-left:0px;
padding-right:0px;
border-top: 1px dashed #999999;
}

#footer p {
font-size: xx-small;
margin-bottom: 20px;
text-align: center;
text-indent:0px;
margin-left:0px;
margin-right:0px;
padding-left:0px;
padding-right:0px;
}

div#content {
width: 480px;
float: right;
clear:right;
margin-left:10px;
margin-right:15px;
padding-bottom:30px;
display: inline;
text-align: left;
font-size:small;


}

div#menus {
float: left;

text-align:right;
width: 160px;
padding-top: 50px;
margin-top:15px;
padding-right: 15px;
margin-right:10px;
padding-bottom: 40px;
border-right: 2px dotted #444d61;
font-size: 14px;
font-weight: bold;
}

#menus p, #menus h2, #menus a{
text-align: center;
margin-bottom: 8px;
}

#menus p {
color: #8c9ba2;
}

#menus h2{
color: #444d61;
text-align: right;
font-size: 100%;
margin-top: 0;
margin-bottom: 8px;
}

#menus ul{
list-style-type:none;

}

#menus li{
padding-top:10px;
margin-right:5px;
}

h1 {
font-size: 150%;
color: #648d9f;
font-weight: bold;
margin-top: 0px;
margin-bottom: 20px;
text-align: left;
border-bottom:1px solid #444d61;
}

h2 {
font-size: 100%;
color: #444d61;
font-weight: bold;
text-align: left;
}

#content h2{
margin-top: 0px;
margin-bottom: 3px;
}

#content h1{
padding-bottom:10px;
margin-top:15px;
margin-bottom:20;
font-weight:normal;
font-size:150%;
color: #444d61;
}

#content a{
color: #444d61;
text-decoration: underline;
font-weight:bold;
}

div#picture {
text-align: center;
font-size:xx-small;
float:right;
clear:right;
width:250px;
height:150px;
padding: 5px;
background-color: #f2f6f8;
border: 1px solid #d3dadf;
margin-right:10px;
margin-bottom:20px;
}

#picture img{
display:inline;
width:250;
height:150;
margin:3px;


}


li.none {
margin-top:5px;
}

a.MenuCurr {
color: #444d61;
}

p img{
font-size: small;
text-align: center;
margin-bottom: 0;
height:200px;
width:150px;
margin-left;50px;
}

div.breadcrumbs{
font-size: 80%;
text-align: left;
padding-bottom:3px;
border-bottom: 1px dashed #648d9f;
margin-bottom: 10px;
margin-top: 10px;
}

span.bctitle {
color: #8c9ba2;
}

span.bchere {
font-weight: bold;
}

.breadcrumbs a{
font-weight: normal;
}

div.box1 {
background-color: #f1ecd1;
padding: 10px;
margin-right: 20px;
margin-top: 20px;
margin-bottom: 20px;
text-align: left;
}

p {
margin-top: 5;
text-align: left;
padding-left:10;
padding-right:10;
text-indent:25;
}

div#searchbar{
float:right;
clear:right;
display:inline;
width:520px;
height: 30px;
color: #444d61;
font-weight: bold;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
margin-left:25px;
background-color:#DEDF7D;
font-size:small;
}

input.searchbox {
width: 200px;
}

input.searchbutton {
width:50px;
margin-bottom: 0px;
}

img.pic{
width:350px;
height:200px;
margin-left:30px;
padding-bottom:15px;
padding-top:15px;
}

form.search {
float:left;
font-size:10pt;
margin-left: 5px;
margin-top:3px;
margin-bottom:0px;
text-align: left;}



p.newitemtitle {
font-weight: bold;
margin-bottom: 5px;}

p.newitemtext {
margin-left: 20px;
margin-bottom: 15px;}

dt {
margin-left: 20px;}

dd {
margin-bottom: 10px;}

ul {
margin-top: 0;
list-style-type: disc;
}

div.apply{
float: right;
width: 154px;
height: 50px;
margin-right: 30px;
background-image: url(images/buttons/applynow.gif);
}

div.address{
margin-left: 40px;
margin-bottom: 20px;
}

.address p {
margin:0;
}



h3{
margin-bottom: 0;
}

div#print {
padding-top: 10px;
padding-right:5px;
float: right;
font-weight: normal;
font-size: 80%;
}

#print a{
font-weight: normal;
font-size:8pt;
padding-right:5px;
}

#print img{
margin-right: 0px;
}
mactheweb
08-07-2007, 11:21 PM
IE and Firefox have slightly different renderings of font size small, medium, etc..

A trick you can use to make fonts more consistent is with the following:
html {
font-size: 100.01%;
}
body * {
font-size: 62.5%;
}

That sets your base font size at about 10pixels. Now you can define all page elements in ems to make the text resizable in IE 6 and older. The 100.01% tricks IE into standardizing descriptive font sizes. Since you've resized all fonts to the same size you need to define font-size for all page elements. If your write semantic code this should be enough for most sites. If you drop text in table cells without paragraphs you could add td to the list.

h1 {font-size: 2.2em}
h2 {font-size: 1.9em}
h3 {font-size: 1.6em}
h4 {font-size: 1.4em}
p li, li li, dd {
font-size: 1.2em
}

That gives your paragraph and list items a 12 pixel equivalent and headings a sizing in the ballpark of default browser settings. Obviously, they can all be adjusted to your specific situation. I have a default CSS sheet that I start all projects with and adjust to the design.