|
HTML - Deprecated <font> Element And Line-height Dont Play Nice, Possible Fix
Hi all, long time no post for me, good to see still a vibrant forum.
I have been helping a friend with their existing site they built with Weebly. Weebly uses the deprecated html <font> tag to set the size of text the user sets via the GUI. Ive found the font tag does not play nice with line-height, I.e. when line-height is set to a value other than "normal", the actual size of the font in the <font> tags does not figure in the line-height calculation and if the font tag has a large size set, you get major bleeding - i.e. the line-height is too small. At least in Opera Chrome FF. I came up with a solution which seems to work but I thought this should be a known problem but could not find anything. Thought Id check see, may be there is a better fix, or I m missing something. Current solution is: font[size="1"] { font-size:xx-small; line-height:100% } font[size="2"] { font-size:small; line-height:100% } font[size="3"] { font-size:medium; line-height:100% } font[size="4"] { font-size:large; line-height:100% } font[size="5"] { font-size:x-large; line-height:100% } font[size="6"] { font-size:xx-large; line-height:100% } font[size="7"] { font-size:40pt; line-height:100% } Can you see any problem with this. Cheers, Sam. Similar Tutorialsok well like the title states... i have a basic framed website for my division 2 paintball team and i cannot get the frames to line up. The top frame (like for the banner and buttons) will not line up. Im using an html editing software and i have both of them centered and both are 750 pixels across but the bottom frame is too far to the left. tell me what information you need. I dont have it uploaded to the web yet because we have an existing website there until this one is done (for sponsorship reasons we dont want to take it down). just tell me what info you need and ill get it for you! thanks in advance! Hi Everyone, I'm slightly confused by this one. But i'm sure theres a hack out there to fix it. Basically, in firefox and konqueror, running on kubuntu, the top navigation bar at http://www.tendervendors.com/dev/payroll.html displays correctly, and when you hover over it, it fills the li with a semi-opaque background. This is correct. Its done, by filling the a element, with a background-color and then applying opaque: 0.5; The a element also has padding, which makes it fill out to the size of the li element, so the a element fills its portion of the ul, and looks like the li has the affect applied to it. However, in opera, the right and left padding is correct, but the height padding doesn't work. Does anyone know of a bug in opera that would be causing this problem, and possibly a code fix for it? TIA Matthew Millar hi, as shown in the pic, the line and the word "Hello" has a gap in between, how can i remove the gap or space to allow the line to sit directly on top of the word Hello ?? Hi, I have an album which has 5 to 6 audio files(wma). I used checkboxes to list the audio files. I want to select one or more of the audio files by ticking in checkbox and play those selected using a button. How can I do that using html? I see that many music sites use this functionality, but not sure how to code this using html? Can someone help? Note: I have already hosted the audio files and have the web url for all the wma files. If you follow this link http://www.mm-theory.com/preliminary/preliminary.htm in Mozilla Firefox and scroll down the page (about 9 paragraphs), you'll see a large asterix-like image on the left-hand side with the caption "A Different Kind of Electric Current". The caption spans two lines and in Mozilla, these lines are spaced apart a little too much for my liking. Compare it with Explorer and you'll see what I mean. I know I can adjust the line-height attribute in certain tags but it doesn't seem to have any effect no matter what tag I place it in. The code for the asterix is as follows: Code: <tr><td class="margin_icon">
<a class="margin_icon" target=_blank onclick="winOpen('a_different_kind_of_electric_current.htm','',600,420);return false;" href="enablejs.htm">
<img class="margin_icon" src="../icons/side.gif" alt="side.gif" border=0><br>
<span class="margin_icon">
A Different Kind of Electric Current
</span>
</a>
</td><td class="paragraph">...
The CSS for this code is as follows: Code: td.margin_icon {width: 10%; text-align: center; padding-right: 1%;}
img.margin_icon {}
a.margin_icon {text-decoration: none;}
span.margin_icon {font-family: times new roman; font-size: 8pt; font-style: italic;}
I tried adding line-height with various values in td.margin_icon and span.margin_icon but neither seem to have any effect. Putting it in span.margin_icon seems to work with Explorer. Why not Mozilla? I'm using tables and I have text inside one table. When I add line height to text so it looks good in IE6, Safari and Google Chrome, it looks wrong in FireFox and Opera. Every line is over each other. How could I fix this? Here is the code from start to end of the text part: Code: <html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
<title>my site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-image:url('tausta.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
line-height: 5%;
}
.style2 {color: #
color: #999999;
color: #999999;
}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #999999; line-height: 5%; }
.style5 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #999999; line-height: 5%; font-weight: bold; }
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="page">
<table id="Table_01" width="912" height="543" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="14" width="176" height="542" valign="top"><div align="right" class="style1">
<p class="style2"> </p>
<p class="style2"><strong><u>FILES:</u> </strong><u><br>
</u><br>
<br>
<br>
<br>
</p>
</div>
<p align="right" class="style5">Images: </p>
<p align="right" class="style4">images1 <br>
<br>
<br>
<br>
</p>
<p align="right" class="style5">Videos: </p>
<p align="right" class="style4">video1 </p>
<p align="right" class="style4">video2 </p>
<p align="right" class="style4">video3 </p>
<p align="right" class="style1"><span class="style2">1 - video4 </span></p></td>
I have a html form drop down menu, and I wanted to increase the line height dynamically on load of drop down. How can I achive this? Thanks in advance. Is it possible to simply add the word "Play" to an html web page, which, when selected, would play an audio file stored in my web page directory? If possible, can you provide the code? i'm guessing the web visitor would simply need audio player software on his/her computer? Which is on most if not all computers today. Correct? thanks. Anyone knows of a good one? It needs to look professional! Something like this would be awesome: http://www.adriantnt.com/products/pixel_menu/ I am a graphic designer trying to teach myself html, this may be a basic question for you genius's but I need help chaning 2 scroll bars on my page. I would like to put in fancy, colored scroll bars.. here is the page im working on : http://www.fashionfreakers.com/samplesite.html any input would be great. Thanks, C First of all, I have only just started this site, and it's only ever going to be a very basic HTML site. It's going to be a ground guide for Non-League football. Here is one of the completed ground pages so far. Most of the links don't actually take you to anything in perticular, so don't shout! I'd just like a couple of ideas on how to improve the general look of the site. Thanks! Code: http://79.170.43.200/adp-design-demos.com/nlgg/wadham_lodge.html Don't worry about the ugly domain, it's only going to be like that during testing Does anyone know of a font face generator that can convert a TTF or OTF font file into the 4 formats (woff, svg, eot, ttf), that's not font squirrel? That site only supports English fonts with a very low file size limit, and can't convert any foreign fonts. Already tried http://onlinefontconverter.com as well, doesn't work either as I waited like an hour then the server simply deleted my uploads without so much as an error pop-up lol, and now the website is not responding. This is for usage in CSS using the @font-face function. Thanks. please help choose a nice background color theme for my site... I'm not savy with html...I'm trying to find the code so I can change this "plain jane" background color of my "template made site". Can I get some opinions on a color theme and ALSO where I would insert the color codes. Not looking for a "in your face" attack..just anything better than the blah brown/tan colors! TIA Hello, When I try to set a font in HTML it works, but if I set a rule in my CSS to set the same font, it doesn't. Here are the three things I do (not at the same time of course): <font face="Verdana, Tahoma, Arial, Helvetica"> ... ... ... </font> vs body { font-family: Verdana, Tahoma, Arial, Helvetica; } or even... body { font: Verdana, Tahoma, Arial, Helvetica; } Out of all of those, only the first can change the font in my browser...is this a CSS issue because, somehow, the browser has superiority over CSS, and HTML has superiority over the browser? I would appreciate input. Thanks. this issue has been solved Am I right in this: instead of <i>, use <em> instead of <center>, use CSS instead of <b>, use <strong> This is what I do now because it works and the above codes are shorter than if one had to write it with inline CSS. What else than these 3 tags can you recommend that I use instead of the old HTML tags?? I am trying to make my code more standards compliant and use the "strict" DTD. But when I try to validate using the W3C validator, there are a few things that I'm having trouble with. Target: I was using <a href target="blank" ....> to open some external links in a new window, but this isn't allowed in HTML 4 strict or XHTML 1 strict. What is supposed to be the replacement? The only thing I could find on a web search was a javascript, which I know little about. Is that the only alternative? (Seems a bit silly if it is, as this must be a commonly used feature.) Align: I used this to centre graphics, but this isn't allowed either. Are we supposed to set up different image classes in the CSS to allow centering, left, etc? br: Use of the <br> tag is allowed in HTML 4 strict, but there seem to be some paces where it isn't allowed. Does anyone have a reference to the rules for this? Thanks When <b> and <i> aren't? I mean, aren't they are all equal at a semantic level? And considering as for better semantic syntax you should be using <strong> and <em>... Just wondering - anyone else have thoughts? I spent 2 hours trying to figure out why one of my pages is not centered! I am loosing hope. Please, can someone take a look? The culprit: http://www.denimdujour.com/evisu_guide.html Is it possible to create a page with a video on it that will come up for like 10 seconds, while the page that was clicked on loads and then redirect/go to the page that was loading? Thanks for the help if this can be done. Any comments would be greatly appreciated! |
|||||||