|
CSS - Border Around Fonts
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! Similar TutorialsHi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
a.menu_top:link {color: #000000; text-decoration: none;}
a.menu_top:visited {color: #000000; text-decoration: none;}
a.menu_top:hover {color: #000000; text-decoration: none;}
a.menu_top:active {color: #000000; text-decoration: none;}
td.menu_top_passive {
background-color: #777;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
td.menu_top_active {
background-color: #bbb;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #bbb solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
</style>
<script language="JavaScript">
function change(id, url) {
for (i=1; i<6; i++){
eval("document.getElementById("+i+").className='menu_top_passive'");
}
eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>
</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?
</center>
<br><br><br>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
<tr>
<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td>
<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>
<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td>
<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td>
<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td>
</tr>
</table>
</body>
</html>
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'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? 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'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 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 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 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. 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! 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 Hi all.. i'm new to php... ive got a php genereated page that i need to display in a css generated font... i can kind of get it to work using the normal <class="font"> at the top of the page but it seems to ignore the pixel size. Am i doing it completely wrong? i need a *simple* solution if thats possible, and without too much jargon much appreciated.. adi Hey guys, would you please tell me why I get an error on my web page? Here is the error. Thanks I am wondering how the W3C Markup Validation Service page makes all the text on the page smoothed. I have never seen another web page do this before. This works in Internet Explorer 6, Firefox, and Opera. I'm using Windows XP Professional with the System Properties > Advanced > Performance Options > Visual Effects option of 'Smooth edges of screen fonts' turned on. Disabling this option results in the fonts not being smoothed on the page at all. Usually fonts of 14pt and higher are smoothed out for me, but not when they're lower than this (unless they're bolded)! So how does this page manage to smooth out all the fonts, no matter what the size? I had a look at the page's stylesheets, but couldn't see anything unusual that might be causing this. Does anybody know? I have built a site using css for font styles. On my mac the fonts show up fine but when I view the site on Windows XP using Internet Explorer the fonts look kinda blurry/washed out. I'm using Arial, at 12px or 13px bold, as set in my CSS file. Is this a common problem, a way to fix the problem, or just my own problem? thanks for the 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 I just want a simple way to make all fonts on the page the same. For example, the following does NOT seem to work. Should it? in the style sheet: Code: BODY {font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
}
I also tried putting the font size, color and face in a class and using something like <td class="fontInfo"> But that doesn't seem to work (i get the default browser font--Times.) Any help please thank you. Ok now it isnt a fire fox issue anymore it is a problem in all browsers. Here is the css that is messing up. Code: .forgot {COLOR: #dddddd; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #4d1e09; padding: 2px 0px 2px 0px; width: 655px; display: block;}
.forgot:active {COLOR: #eeeeee; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #8A694E; padding: 2px 0px 2px 0px; width: 655px; display: block;}
.forgot:visited {COLOR: #dddddd; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #4d1e09; padding: 2px 0px 2px 0px; width: 655px; display: block;}
.forgot:hover {COLOR: #eeeeee; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #8A694E; padding: 2px 0px 2px 0px; width: 655px; display: block;}
.meminfol {COLOR: #4D1E09; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #EEEEEE; padding: 2px 0px 2px 0px; width: 180px; display: block;}
.meminfol:active {COLOR: #000000; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #bbbbbb; padding: 2px 0px 2px 0px; width: 180px; display: block;}
.meminfol:visited {COLOR: #4D1E09; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #EEEEEE; padding: 2px 0px 2px 0px; width: 180px; display: block;}
.meminfol:hover {COLOR: #000000; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #cccccc; padding: 2px 0px 2px 0px; width: 180px; display: block;}
.meminfol2 {COLOR: #4D1E09; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #dddddd; padding: 2px 0px 2px 0px; width: 390px; display: block;}
.meminfol2:active {COLOR: #eeeeee; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #8A694E; padding: 2px 0px 2px 0px; width: 390px; display: block;}
.meminfol2:visited {COLOR: #4D1E09; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #dddddd; padding: 2px 0px 2px 0px; width: 390px; display: block;}
.meminfol2:hover {COLOR: #eeeeee; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #8A694E; padding: 2px 0px 2px 0px; width: 390px; display: block;}
Never mind it was just that the font Verdana was spelled wrong. Nick 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;}
I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style. If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all. I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened. How do you fix that problem? Thanks... |
|||||||