|
HTML - Dynamically Increasing Select Box Line Height
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. Similar TutorialsIf 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>
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. Hello I'm trying to work out a way of allowing my main content to increase without it stretching my nav and ruining the formatting. I have a table, 2 columns, 10 rows, cell spacing 4 I've set the main content (right) to span all 10 rows. I want to be able to increase the main content without it stretching my rows. Row height set to 40px. My answer so far has been to add an 11th row, turn it white and set the height so that the combined height of the cells in the left had column matches the height of the right hand one. This is fine, but a bit of nuisance if you want numerous pages where the main content takes up a different amount of space. Is there anyway to set the 11th cell on the left hand column to stretch along with my main content, without it messing up the height of the 10 calls above? You'd think you'd be able to set it to height = 100% or something, but apparently not. Many thanks, monki Hello All, I am increasing the font size of the text using javascript. In IE, the div size increases or text get automatically wrapped when font size increased. But in firefox browser, the div size remain same and text flows out of the div. Anybody having any idea to correct his behavior in firefox? Please help. 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 Dear All, I find that I can do that in firefox, ie 9, but not ie 8 and ie 7. anyone knows the answer. HTML Code: <select id="resourceTypeTree" name="resourceTypeTree">
<script type="text/javascript">obj158= new Object;obj158.sid = 158;obj158.seq = 1;obj158.lv = 1;obj158.lvText = "首頁";obj158.upLvSid = 1;obj158.isShown = 1;obj158.isNetvigated = 1;obj158.url = "/cle/landingPage.php";obj158.remarks = "";obj158.lastUpdate = "2011-04-18 16:15:50";obj158.uiNextSeq = 0;obj158.nextSid = 160;</script>
<option value="158" onclick=selectClick('tree',obj158); >→首頁</option>
<script type="text/javascript">obj3= new Object;obj3.sid = 3;obj3.seq = 2;obj3.lv = 1;obj3.lvText = "語文學習基礎知識";obj3.upLvSid = 1;obj3.isShown = 1;obj3.isNetvigated = 0;obj3.url = "/cle/pages/webSiteReferenceList.php?sid=3&upLvSid=1";obj3.remarks = "";obj3.lastUpdate = "2011-04-18 16:28:05";obj3.uiNextSeq = 7;obj3.nextSid = 160;</script>
<option value="3" onclick=selectClick('tree',obj3); >→語文學習基礎知識</option>
<script type="text/javascript">obj10= new Object;obj10.sid = 10;obj10.seq = 1;obj10.lv = 2;obj10.lvText = "漢字形音義";obj10.upLvSid = 3;obj10.isShown = 1;obj10.isNetvigated = 0;obj10.url = "/cle/pages/webSiteReferenceList.php?sid=10&upLvSid=3";obj10.remarks = "";obj10.lastUpdate = "2011-03-16 13:46:44";obj10.uiNextSeq = 10;obj10.nextSid = 160;</script>
<option value="10" onclick=selectClick('tree',obj10); >→→漢字形音義</option>
<script type="text/javascript">obj38= new Object;obj38.sid = 38;obj38.seq = 1;obj38.lv = 3;obj38.lvText = "漢字的演變";obj38.upLvSid = 10;obj38.isShown = 1;obj38.isNetvigated = 1;obj38.url = "/cle/pages/webSiteReferenceList.php?sid=38&upLvSid=10";obj38.remarks = "";obj38.lastUpdate = "2011-03-16 14:25:54";obj38.uiNextSeq = 0;obj38.nextSid = 160;</script>
<option value="38" onclick=selectClick('tree',obj38); >→→→漢字的演變</option>
<script type="text/javascript">obj39= new Object;obj39.sid = 39;obj39.seq = 2;obj39.lv = 3;obj39.lvText = "字形的正體、俗體、異體";obj39.upLvSid = 10;obj39.isShown = 1;obj39.isNetvigated = 1;obj39.url = "/cle/pages/webSiteReferenceList.php?sid=39&upLvSid=10";obj39.remarks = "";obj39.lastUpdate = "2011-03-16 14:25:54";obj39.uiNextSeq = 0;obj39.nextSid = 160;</script>
<option value="39" onclick=selectClick('tree',obj39); >→→→字形的正體、俗體、異體</option>
</select>
Regards, Man Pak Hong, Dave manpakhong@hotmail.com i hav to take an user input in terms of drop down box... n dependin on it the same page shud display certain other drop down boxes or else direct text input . how can it be done ??? as in the user input shudnt hit the server for reloadin the page. Ok, so this is probably a pretty obvious question... But I'm not finding an answer via google... How can I dynamically reposition the footer and enlarge the sandbox so that I don't have to make a new css for every page on the site. This way I can put different amounts of content in the sand box... http://wessell.net/david/project/newdesign/index.php Thanks David! http://www.dynamicdrive.com/dynamici...iframessi2.htm This is the tutorial I followed. I did everything it said to do and it worked on my index page where the iframe is located. The only problem is when I try to load a new page into that iframe the iframe doesn't extend and scroll bars appear. On the tutorial there is an example of what i'm talking about. Does anybody know why the other page doesn't extend? Here is an exmaple: http://www.dejavulifestyle.com/dvsite/example.html It's the video page that i'm trying to open in the iframe. Edit: I meant to type dynamically in the title. I have a table grid whose contents are vast insomuch a horizontal scrollbar is displayed to see the entirety of the text. This text resides in <td> tags. Now, what I want to do is not clip the text inside the <td> tags but word wrap. I thought maybe I could use table-layout:fixed and set the width of the <td> tags. It eliminates the scrollbar, but it clips the text. Is there a way I can word wrap text inside <td> tags? I tried using overflow, but that didn't work. Any help would be really appreciated. Hi, I am creating a multilingual website and would like to know how I can assign name to sumbit button dynamically rather than hard-coding it in the html page. <input type='submit' value=' MyButton '> Is there a way I can assign the value of the button in a javascript variable and call that from html page. (or) Is there a way I can call a javascript method that can assign a value to this button. I have a simple web page which consists of one column of cells, five rows down. I would like to have some sort of hierarchical structure that allows me to click a link in the top-most cell to bring up a set of links in the second row, then click on one of these links to bring up some more links in the third row etc. Clicking on a different link in the top-most cell will then bring up a different set of links in the second row, and so on. Can anyone suggest a method to do this? I've been looking into frames but i've read that this isn't best practise. Thanks. I've a table with table header and table body. Each row in the table body has a delete button. On click of the delete button the whole row is made invisible by a javascript function. Now if the last row of the table body is deleted I want the whole table to be made invisible. Could someone please help me in acheiving the following goal. - To check the visibility of each row in table body. (The row is made invisible by setting display = none). I have a input form i.e: Code: <tr> <td>Enter Salary:</td> <td><input type="text" name="text1" /></td> </tr><tr><td> <input type="button" name="button1" value="Submit" onClick="func(this.form)" /> </td></tr> This takes a input,and user clicks submit and it does some processing.... But I want to take multiple entries from the user before he clicks the submit button.But I dont know how many times he will enter data..so how to display the text field multiple times dynamically???? Hello, I want to add rows and columns on click. So, i have a table with columns and rows and I had a add and remove button. So I want the user to be able to add/remove more rows if they have multiple inputs/outputs. So what I want is when the user clicks on add.png, I want another row of Input and Description to appear underneath the current one. Here is my code.. HTML Code: <img src="images/add.png" width="15" height="15" align="right" >
<div class="open">
<table width="200" border="0">
<tr>
<td class="propertyCol">Input: </th>
<td class="propertyCol"><input class="text ui-widget-content ui-corner-all" value="" style="width:210px"></input></th>
<td class="propertyCol">Description: </th>
<td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea> </th>
<td class="propertyCol"><a href="javascript:removeElement();" ><img src="images/remove.png" alt="" width="15" height="15" /></a> </th>
</tr>
</table>
<table width="200" border="0">
<tr>
<td class="propertyCol">Output: </th>
<td class="propertyCol"><input class="text ui-widget-content ui-corner-all" style="width:200px"></input></th>
<td class="propertyCol">Description: </th>
<td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea> </th>
<td class="propertyCol"><a href="javascript:removeElement();" ><img src="images/remove.png" alt="" width="15" height="15" /></a> </th>
</tr>
</table>
</div
Hello, I am using this script http://www.frontiernet.net/~bambam00.../tooltip_e.htm to have some text appear on top of my images at: http://www.greekconcierge.com/group.php I need a function which can correctly calculate the coordinates in the "FIX" element of that script so that the tooltips are positioned correctly for different screen resolutions. I suppose the function will need to find the center of the screen and then use relative positioning. any ideas? thanks, Andy I'm trying to make a little secret santa auto-emailer thing for my family. I've run into a bit of a problem with some html. I'm trying to superimpose each persons christmas list over the image of a scroll, so it's like it's written on the scroll. (Corny, I know, but it's christmas!) The problem is when people have wishlists that are too long. Attached are two images to illustrated: This is how it should look: Good. but this is what happens when their list is too long: Bad. I'm using tables to do it right now, but I'm open to whatever (except maybe CSS. If it's easy I could, but otherwise I'm a noob). My current approach was to divide the image into 9 sections, put each section into a cell in the table, and superimpose the text over the top of the center cell. (I know I could've divided it into fewer images, 3 probably, I will if I have to reupload the images). Here's the code I'm using right now: Code: <table border="0" cellpadding="0" cellspacing="0">
<TR><TH><img src="http://img380.imageshack.us/img380/9459/101zx7.png"> <!--top left image-->
<TH><img src="http://img208.imageshack.us/img208/9360/102xj5.png"><!--top center image-->
<TH><img src="http://img368.imageshack.us/img368/3449/103xh4.png"><!--top right image-->
<TR height="446"><TH><img src="http://img368.imageshack.us/img368/5594/104du5.png"><!--middle left image-->
<TH width="311" background="http://img368.imageshack.us/img368/5290/105ql2.png"><!--center image-->
{The Christmas List Goes Here}
<TH><img src="http://img368.imageshack.us/img368/3397/106iv7.png"><!--middle right mage-->
<TR><TH><img src="http://img201.imageshack.us/img201/5362/107xc4.png"><!--bottom left image-->
<TH><img src="http://img224.imageshack.us/img224/1498/108jd6.png"><!--bottom center image-->
<TH><img src="http://img526.imageshack.us/img526/8285/109br7.png"><!--bottom right image-->
</table>
I don't need anyone to code it exactly for me, just point me in the right direction. I'm fine with modifying the images so there's a section that can be repeated without looking bad. I'm just not sure how to dynamically "grow" the scroll as the list gets longer. Can anyone help me? I have this div: Code: <div> Last Name <input name="data[Provider][last_name]" type="text" class="input_style" maxlength="100" value="" id="ProviderLastName" /> <input class="submit_style" type="submit" value="Search" /> </div> The way it's being displayed is having the last name string first and then the input and submit (both of them) under that last name string. I would like for all of these values to be on the same line. How can I do that? <p> doesn't work, tried it. Anything I can do in CSS? |
|||||||