|
CSS - Fonts Much Larger In Broswer
Hey gang,
I'm trying to make a website for Dad and I'm a little rough with my CSS, and I'm having troubles getting my fonts to show up correctly. I am working in Dreamweaver CS4, and the font looks great, but when I view it in FF/IE/Safari, H1 and H2 look WAY too big. Here is what it looks like in DW (top) and in Firefox (bottom): And here is the CSS: Code:
/* --------------------------------------------------
1.0 RESETS
-------------------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
/* --------------------------------------------------
2.0 GLOBAL STYLES
-------------------------------------------------- */
body {
background-color: #636c08;
background-image: url(images/background.gif);
background-repeat: repeat-x;
background-attachment: fixed;
font: 62.5%/1.4 'Lucida Grande', Verdana, sans-serif;
color: #666;
}
html {
overflow: -moz-scrollbars-vertical;
}
a, a:link {
color: #689E21;
text-decoration:none;
}
a:visited {
color: #687C05;
}
a:hover {
color: #ff6600;
}
h1 {
font: bold 1.3em;
color:#ff6600;
}
h2 {
font: bold 1.25em;
color:#5B6C07;
}
h3 {
font: bold 1.1em;
color:#5B6C07;
}
p{
padding: 0 0 .2em 0;
line-height: 1.3em;
font-weight:normal;
}
/* --------------------------------------------------
3.0 LAYOUT STYLES
-------------------------------------------------- */
#container {
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
width: 772px;
margin: 0 auto;
}
#header {
position:realtive;
left:0px;
top:0px;
width:772px;
}
#topbar{
clear: both;
padding: 0;
width: 100%;
height: 16px;
line-height: 16px;
background: #C1CF2B;
border-bottom: solid 1px #5B6C07;
}
#content {
width: 772px;
margin: 0 auto;
padding: 0;
background:#FFFFFF;
}
#left {
float: left;
margin: 0;
padding: 16px 7px 0 10px;
width: 221px;
}
#right {
float: right;
margin: 0;
padding: 16px 8px 0px 8px;
width: 517px;
border-left: solid 1px #5B6C07;
}
.left_header {
padding: 0px 0px 0px 0px;
margin-bottom: 0px;
}
.left_content {
text-align: left;
}
#bottombar{
clear: both;
padding: 0;
width: 100%;
height: 16px;
line-height: 16px;
background: #C1CF2B;
border-top: solid 1px #5B6C07;
text-align: center;
}
#footer {
font: bold 9px Arial, Verdana, sans-serif;
color:#FFF;
text-align:center;
padding: 1px;
}
/* --------------------------------------------------
4.0 NAVIGATION STYLES
-------------------------------------------------- */
#nav {
width: 772px;
background: url("images/navigation-matrix.png") no-repeat;
height:27px;
overflow:hidden;
position: relative;
}
ul#main-nav { background: url(images/navigation-matrix.png) no-repeat 0 0; float: left; width: 775px; height: 27px; margin: 0 0 0; padding: 0; }
ul#main-nav li { display: inline; }
ul#main-nav li a, ul#main-nav li a:visited { float: left; display: inline; height: 27px; line-height: 27px; background: url(images/navigation-matrix.png) no-repeat 0 0; text-indent: -999em; }
ul#main-nav li#home a, ul#main-nav li#home a:visited { background-position: 0 0; width: 148px; }
ul#main-nav li#home a:hover { background-position: 0 -27px; }
ul#main-nav li#home a.active { background-position: 0 -27px; }
ul#main-nav li#home.selected a { background-position: 0 -27px; }
ul#main-nav li#about a, ul#main-nav li#blog a:visited { background-position: -148px 0; width: 125px; }
ul#main-nav li#about a:hover { background-position: -148px -27px; }
ul#main-nav li#about a.active { background-position: -148px -27px; }
ul#main-nav li#about.selected a { background-position: -148px -27px; }
ul#main-nav li#garden a, ul#main-nav li#videos a:visited { background-position: -273px 0; width: 218px; }
ul#main-nav li#garden a:hover { background-position: -273px -27px; }
ul#main-nav li#garden a.active { background-position: -273px -27px; }
ul#main-nav li#garden.selected a { background-position: -273px -27px; }
ul#main-nav li#where a, ul#main-nav li#photos a:visited { background-position: -491px 0; width: 143px; }
ul#main-nav li#where a:hover { background-position: -491px -27px; }
ul#main-nav li#where a.active { background-position: -491px -27px; }
ul#main-nav li#where.selected a { background-position: -491px -27px; }
ul#main-nav li#contact a, ul#main-nav li#tour a:visited { background-position: -634px 0; width: 141px; }
ul#main-nav li#contact a:hover { background-position: -634px -27px; }
ul#main-nav li#contact a.active { background-position: -634px -27px; }
ul#main-nav li#contact.selected a { background-position: -634px -27px; }
ul#main-nav li#home a em{ background-position: -0px 0;}
ul#main-nav li#about a em{ background-position: -148px 0;}
ul#main-nav li#garden a em{ background-position: -273px 0;}
ul#main-nav li#where a em { background-position: -491px 0;}
ul#main-nav li#contact a em { background-position: -634px 0;}
Similar TutorialsI always have this same issue with the Opera browser, it is always the same thing when i test on all platforms. If you have a look at http://cies.loadedtech.com.au/ the top margin is stuffed on the Opera broswer, but fine on all others... Please help, it has haunted me for long enough THANKS please see following code. (i want myHeight becomes dynamis, that mean when user resize the browser, it will be changed automatic w/o refresh the page). thank you. waitting online for the answer. <html> <head> </head> <body > <table> <tr><td>tasd</td></tr> <tr><td> <script type="text/javascript"> var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } //var height = myHeight *.8; document.writeln("<div style='HEIGHT:" + myHeight *.8 + "; WIDTH:100%; OVERFLOW:auto'>"); //return height; </script> <table> <tr><td> msg </td></tr> </table> </div> <td> msg </td> </table> </body> </html> Ok im not sure if this is possible the way i want to do it however, is it feasible to have a <div> of say 200x200 and and image of say 100x300 inside the division but overlapping the edges where it is too tall? i will attempt to demonstrate Image ??? ??? ??? ??? ??? Div ##### ##### ##### Desired effect Code: ??? #???## #???## #???## ??? Is it possible to make a checkbox larger with CSS or something else? Jeff I have the following HTML and I am wanting to make the link larger. Code: <div id="user4"> <div class="moduletable"> <ul class="menu"> <li class="item53"><a href="http://rss.com"><img alt="rss" src="/joomla/images/stories/rss-64x64.png"></a> </ul> </div> </div> I have tried the following CSS: Code:
.moduletable li a{
height:50px;
}
I am reading and trying alot of code i find on the web about this problem but it doesn't work. I've changed and tried different stuff and it all doesn't work, right now i've got this CSS: Code:
/* main nav */
#tabs {
border: medium solid Fuchsia;
position: relative;
height: 100px;
}
#tabs1 {
border: thin solid Lime;
font: 1px Arial, Verdana, Helvetica, sans-serif;
text-transform: uppercase;
line-height: normal;
}
#tabs2 {
float: right;
border: thin solid Red;
font: bold 12px Arial, Verdana, Helvetica, sans-serif;
text-transform: uppercase;
line-height: normal;
margin-right: 0px;
position: absolute;
bottom: 0;
}
#tabs2 ul {
margin: 0;
padding: 0px 0px 0 0px;
list-style: none;
}
#tabs2 li {
display:inline;
margin:0;
padding:0;
}
#tabs2 a {
float: right;
background: transparent url(mega-bgv14.png) -188px -70px no-repeat;
margin: 0;
display:block;
padding: 10px 0px 0px 0px;
text-decoration: none;
text-align: center;
}
#tabs2 a:hover {
background: transparent url(mega-bgv14.png) -332px -70px no-repeat;
}
and the code on the page is: Code: <div id="tabs">
<div id="tabs1">
<div id="tabs2">
<ul>
<li><a href="<?php echo"http://$site_url";?>/"><span>Home</span></a></li>
<li><a href="<?php echo"http://$site_url";?>/category.php"><span>Categories</span></a></li>
</ul>
</div>
</div>
</div>
IE8 places the tabs2 div at the bottom of the container (tabs) but on the right, outside of the container. FF does place the tabs2 div inside the container and on the bottom, but aligns it to the left... someone has any input on how i can change it to get it how i want it? Code: #navbar {
text-align:right;
background-image: url('images/menu.gif');
background-repeat: repeat;
color: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16;
height:26px;
padding-top: 5px;
line-height:0px;
}
i took out the font-size of the classes used over it but still a no go. look here to see it. I have a thumbnail image with a link below. When hovering over the link, I want the enlarged image to pop up. I've tried it 2 ways. Both are close, but neither works the way I want it. Perhaps someone can help tweak one of these options? Option 1 is he http://concrete-creative.com/temp/print/1.html **What I don't like here is that you can hover over a big, blank area below the link and the larger image pops up. I only want the linked text [JACK IT UP] to pop the larger image up. Option 1_B is he http://concrete-creative.com/temp/print/1_B.html **The problem here is the the larger image while INVISIBLE is sitting below the text [JACK IT UP] which is pushing my HTML table too wide. Can someone help me find the happy medium between these 2 solutions so it works the way I want it to? THANKS! Ive seen some sites using fonts i dont have on my computer how is this done and whats it called ? any help would be great. Hi all, I'm trying to use my own hosted font for my website, namely Futura Light. I had been using the Google Font API, so to host my font I change the URL in the CSS from the google hosted font to a local address where my font is. This worked really well on Firefox, safari and Chrome, but IE8 is still showing my generic fonts. Why would IE8 not show my hosted font, while other browsers do? Help is very much appreciated! Ray Each browser keeps displaying my website with a different font. It makes no difference to the layout of the page, but I'd like it to be the same font in all of them just for the sake of consistancy. Are there any fonts out there that work for all of them? Can I upload a font type to my server to send to browsers? I want a kind of 'courrier new' , 'arial' or 'tahoma' font really. Any help is greatly appreciated I was wondering how I can set a font that others may not have on there computer. I know I can set a font folder for my site but how do I link to that so that if the viewer doesn't have the font so it will still display correctly for them too? What type of font extension should I put in there? Should it be just the .ttf? Are there any special css rules that I must include? Thanks for the help! if i upload a load of different fonts to my web server, i presume i need to link them to CSS, before i can use them. how do i do this? if not, what do i need to do instead? I've been looking at some CSS templates over at the Yahoo Developer Network. Link: http://developer.yahoo.com/ypattern...hp?pattern=grid They define font sizes as percentages (13 pt. is about 100%), and I had never seen this. See he http://developer.yahoo.com/yui/fonts/index.html Is this common? Uncommon? Is there a reason I haven't seen it before, or am I blind? Also, in general, have anyone here used these templates as a basis for anything? style { #test{ margin-left: 5px; margin-top: 9px; font-family: arial; color: black; font-size: 9px; } } <!-- html --> <div id="test"> <span> X Y Z </span> </div> Here is my problem. I am trying to make "Y" bold. but it appears in regular font. I tried following code which doesn't work for me. <span> X <span style="font-weight: bold;">Y</span> Z</span> Thanks can I load a special font to my server and then call to it through css? If I want to use the font Made_In_China.tff can I actualy load it to my server and then call to it through css? Nick Is it possiable for me to add an external font family on a certain text? I mean.. Is it possible for me to use ttf fonts on css to modify my html page? P.S: I hope It makes sense.. because I'm tired I'm pretty certain you can do this - but for the life of me I can't remember where I read this. Code:
<style>
@import font("fonturl")
</style>
or Code:
<style>
@font url("fonturl")
</style>
I'm still searching online. Anyone else have any ideas? thanks hello, what's the best way to create a border around txt (i mean the letters themselves not around a block of txt)? i've seen some people do this with glow but in most cases it looks awful and even worse, it doesn't seem to work in other browsers other than IE. is there some trick that i can use to achieve this effect? thanks for any help! I am having some difficulty getting text to render how I want it. The page in question can be viewed he http://www.cbo4edu.org/who.html The column of text on the left is bolded for some reason and I want it match the text on the right (unbolded). I have setup an External style sheet and the only code I've applied to type is: PHP Code: .footer { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; } body,td,th { color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } body { background-color: #000000; margin-left: 0px; margin-right: 0px; The HTML code: PHP Code: <th colspan="4" rowspan="24" align="left" valign="top"><p>College Bound Opportunities (CBO) is a not-for-profit organization centered in the five communities within Deerfield and Highland Park High School District 113. CBO identifies high-achieving young people who without support would likely forgo post-secondary education and assists them in applying to and completing college. CBO goals are achieved through a program of one-on-one coaching between volunteers and scholars. Additional aid provided by CBO includes tutoring, training services, laptop computers, and up to $4,000 per year in scholarships. </p> Thanks, Rebecca |
|||||||