|
HTML - Adjusting Line-height In Mozilla
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? Similar Tutorialshi just a small problem that is bugging me and stopping me from moving on...there is a table at the top of my website here in mozilla it works fine exactly how i want it yet in internet explorer it stretches out too far and looks a mess what could i do about it? is this because ie doesnt accept height tags? 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. 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. I want to use an iframe on my page to another website page but by default I want to show a certain part of that other page within the iframe (which is right in the middle of the webpage). I don't want the person to have to scroll down and to the right just to get to this part of the page within the frame. Here is the page http://www.farmersagent.com/lcopeland/get-a-quote.htm - see the part in the middle "Get a Quote" - I want that showing up on the page I have the iframe on but if I do an iframe you have to scroll to get to that part of the page? Hello, I am new to HTML and have been working on making some changes to a page on our existing web site. I wanted to separate links into separate tables so that the links are grouped by type. I got as far as creating the separate tables and putting in the data as I would like it to appear in the tables but I seem to run across a problem getting them to all line up so that they are the same width and are located underneath each other (lined up vertically). My html coding is attached as a txt file should some fantastic person who I will adore look at the html code and figure it out. I think it has to do with the fact that the page itself was set up with a table and my tables are within the main table??? Hope this makes sense! Thanks much! 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 In mininova.org, when we scroll down the page, ad on the right side is automatically adjusted. How to do achieve this using html? I want to implement the same in my site? I have a website that i created. It loads in in Mozilla, but in IE nothing loads, the page is just blank. my website, an example of this is www.winholdem.info/hoppers.php I dont know why this is happening! P.S. it includes PHP and html How can I get my favicons to show up in Mozilla/Firefox? Thanks~ my tables are not right in mozilla/firefox. it looks perfect in ie. 42% of my viewers are ie users. 37% are mozilla compatible agents, and 8% are firefox. i just downloaded firefox from mozilla and found that none of my tables look white, with the exception of the front page: http://leilanimunter.com/index2.html on all the other pages, the table where the text is should be white like it is on that home page, but instead it is my grey background color. how do i fix that? HELP, thanks!!! Leilani http://leilanimunter.com I used code below to play mp3. Explorer can not play mp3 but mozilla can. What is problem? < A HREF = "MYMP3.MP3".....> OR, <EMBED SRC= "MYMP3.MP3" ...> I have a following html document <html xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <body title="Integrated MedFacts Module"> <span class="normalFont" style="font-size:140%; width:100%; "><b>Tetracycline Capsules and Tablets</b></span><b>Pronunciation: </b>tet-ra-SYE-kleen<br><b>Brand Name: </b> Sumycin<br><br><b>This medicine is used for:</b><p>Treating infections caused by certain bacteria.</p> </body> </html> The above document when seen in IE 7 shows Tetracycline Capsules and Tablets and Pronunciation in separate lines. But the same documetn when seen in Mozilla FireFox or Opera is showing Tetracycline Capsules and Tablets and Pronunciation in same lines without any space between them. Can anyone let me know why this is hapenning? Thanks, Ragha For some reason, using <table align="center" width="85%"> at the following http://amazingfreegraphics.com/webfetti.html correctly shows the content in 85% of the browser in Internet Explorer, but still covers 100% in Mozilla. How do I fix in Mozilla? Hi all, I wanted to learn HTML before 1 year, but I gave up, it was too much too read But now I wanna start again, and I'm searching for the tool I used. But I can't find it, it was so easy, and I was able to use it, and believe me, there's not much I CAN use It was a simple editor tool, and I think it was from Mozilla. That's what it did: I wrote something in HTML, and when I pressed preview he showed me what will display when I add the code on a website. And I was able to save my codes as a file format, but I don't know which, I think something standard... And now I want that tool again, but I searched for 2 hours now and I can't find it... Does ANYONE know the name? I would be very pleased about a helpful answer... Or does anyone know a tool which does, what I described? A simple tool? ______________________________ CuddlyBunny AkA Nico Hi, I am trying to build my daughter's website on geocities and for the videos section I am trying to use page jumps DIVs. I am using mozilla and everytime I go on it the page jumps and the DIVs is all mess up and I don't know what's wrong with it then I tried going on internet explore and my codes worked on there but just not on mozilla. Does anybody know what I can do or change? I am currently using the basic html DIVs and page jumps. Hey, I've downloaded a template to use for my webpage and i changed up the width of the middle section (in grey) within the css, it views perfectly in mozilla, but when viewed in IE it's as if i didn't widen the width of the middle section at all and as a result the text and images i have put in the area are compacted. Does anyone have any ideas of how i can get IE to view my site the same as mozilla is? Mozilla is displaying the site as i want it too look. The text is more spread out wthin the grey area. http://www.revolutionct.com.au/boot_camp_canberra.html Appreciate any help! Thanks. hi i have a bit of a problem i am making a website with html and css and when i want to view it in mozilla i only get the text and when i open it in ie6 i see my whole stylesheet i dont get it html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Visual Basic Tutorials</title>
<link rel="stylesheet" "type=text/css" href="style.css" />
</head>
<body>
<div class="spacer"></div>
<div id="wrapper">
<div class="banner">
<img src="dat.png" /> </div>
<div class="tekst" id="links">
<div>Main content </div>
<hr />
<div class="textboxes">
<div class="textboxspacertitle">
<h3>Title</h3>
</div>
<hr />
<div class="textboxspacertext">
<p>TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst</p>
<p>TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst</p>
<p>TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst</p>
<p>TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst</p>
<p>TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst</p>
<p>TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst</p>
<p>TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst</p>
<p>TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst</p>
</div>
</div>
<div class="textboxes">
<div class="textboxspacertitle">
<h3>Title</h3>
</div>
<hr />
<div class="textboxspacertext">
<p>TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst</p>
<p>TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst</p>
<p>TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst</p>
<p>TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst</p>
<p>TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst</p>
<p>TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst</p>
<p>TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst</p>
<p>TekstTekstTekstTekstTekstTekstTekstTekstTekstTekstTekst</p>
</div>
</div>
</div>
<div class="menu" id="rechts">
<div class="menuspacer">
<h3>Navigation</h3>
</div>
<hr />
<div class="menuspacer">
<div class="list">
<ol>
<li><a href="Index.html">Home</a></li>
<li><a href="Tutorials.html">Tutorials</a></li>
<li><a href="Downloads.html">Downloads</a></li>
<li><a href="Links.html">Links</a></li>
<li><a href="Contact.html">Contact</a></li>
</ol>
</div>
</div>
</div>
</div>
<div class="spacerbottom">
Copyrights by: Kevin 2008 </div>
</body>
</html>
css: Code: *{
margin: 0;
padding: 0;
}
body{
font-family: arial;
color: #333;
size: 12px;
background: #ddd;
}
.spacer{
height: 1.8em;
display: block;
}
#wrapper{
background: #eee;
width: 800px;
height: 900px;
margin-bottom: 20px;
margin: 0 auto;
border: 1px solid #999;
}
.banner{
background: #bbb;
border:2px solid #999;
height: 98px;
width: 717px;
margin-left: 40px;
margin-top: 50px;
vertical-align: middle;
}
.tekst{
border: 2px solid #999;
height: 700px;
width: 500px;
background: #bbb;
min-height: 700px !important;
}
.menu{
border: 2px solid #999;
width: 200px;
background: #bbb;
}
#links{
float: left;
margin-left: 20px;
margin-top: 25px;
}
#rechts{
float: right;
margin-right: 20px;
margin-top: 25px;
}
a:hover{
text-decoration: underline;
}
a{
text-decoration: none;
color: #000;
}
.menuspacer{
margin: 15px 15px 15px 15px;
}
.textboxes{
border: 2px solid #999;
margin-left: 25px;
margin-right: 25px;
margin-top: 15px;
height: 200px;
background-color: #ddd
}
.textboxspacertitle{
margin-left:10px;
margin-top: 15px;
}
.textboxspacertext{
margin-left:10px;
margin-top: 5px;
margin-bottom: 10px;
}
.spacerbottom{
height: 1.8em;
display: block;
text-align:center;
}
img{
border: 1px solid #999
}
I've been doing some html newsletters for a company for a while. I use simple html with tables and this template that the other graphic designer put together. The focus of teh email is made up of spliced images, assembled in a table and then each image is linked to the appropriate website location. The problem I have, is in mozilla and in safari (two of the three browsers I test on) make the <tr> part of the table split? It separates the <tr> cells and causes white lines between the images. This only happens after the email has been sent out, not when I test it in a browser before submitting it to the email newsletter server. I'm trying to figure out ways around it or to fix up the html. Anyone who is willing to help me, I will send you the newsletter so you can see what I am talking about as well as post the code up in this thread. Thank you, -Allie ok then peeps this is the issue... i have created a page and want to play 2 separate flash files on that page... it works on ie7, safari, opera but not Mozilla it plays the 1st one but misses out on the 2nd one and dosen't show at all how mad is that??? as i said it works fine in all other browsers except Firefox... here is the code any pointers really appreciated thanks :-) <----code starts---> <td><center> <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','184','height','220','title','sparkle flash','src','flash/promaflexplus','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/promaflexplus' ); //end AC code </script> <noscript> <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="184" height="220" title="sparkle flash"> <param name="movie" value="flash/promaflexplus.swf"> <param name="quality" value="high"> <embed src="flash/promaflexplus.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="184" height="220"></embed> </object> </noscript> </center></td> </tr> <tr> <td class="style8">Why not try our Sparkle range to make your design's look funky and modern. Give it a try you will see how your design's will change.</td> </tr> </table> <table width="281" border="0"> <tr> <td><div align="center"><img src="images/machinery array.png" alt="Machinery" width="262" height="112" longdesc="../machinery.html"></div></td> </tr> <tr> <td><p class="style8">we can also offer you great deals on your plotters, Printers, and heat presses.</p> <p> <span class="style8"><A STYLE="text-decoration:none" href="../machinery.html" target="_self">View Items</a> or alternatively call a member of our team today to get the best options available for you, on: <span class="style24"></span></span></p></td> </tr> </table> <p align="center" style="padding-center:28px; padding-top:11px;"></p> <table width="275" border="0"> <tr> <td><center> <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','245','height','700','align','absmiddle','title','Forever Advert Flash','src','flash/forever advert flash','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/forever advert flash' ); //end AC code </script> <noscript> <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="245" height="700" align="absmiddle" title="Forever Advert Flash"> <param name="movie" value="flash/forever advert flash.swf"> <param name="quality" value="high"> <embed src="flash/forever advert flash.swf" width="245" height="700" align="absmiddle" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed> </object> </noscript></center></td> </tr> </table> <---code ends----> |
|||||||