HTML - Wrapping Drop Down Text

Hi all,

I tried posting this under the CSS forum, but didn't get any answers, so I'm hoping for better success here.

I don't know if this is a common issue or not, but it's giving me fits. I am trying to make an in-house employee directory for my company. It is a simple design, with the individual's picture displayed on the left of the page and their name and contact information flowing around it to the right of the image. When I use "float: left" in the style sheet, or even align="left" as an attribute in the img tag, it works beautifully in FF. But IE7 seems to want to make the image the same height as the first line of text, and only shows that much of it. If I use no formatting instructions, FF still displays it properly, but IE7 now displays the full image with the bottom aligned with the bottom of the first line of text and the remaining lines of text (each is produced with a br tag) below the image, rather than wrapped along the side. Unfortunately, although I like FF, my company uses IE7, so I need to find a solution. Any help would be greatly appreciated.

The problem page can be viewed at:
http://skmcbride.com/CHFA/employee_directory.php
The style sheet is at:
http://www.skmcbride.com/CHFA/_styles/mainstyle.css

Thanks for you input,
Steve

Hi there

Anyone know how to force a long piece of link text to wrap on to the next line. Only seems to be a problem in FireFox. Here is the offending page:

http://packlife.co.uk/news.asp

By the way, the content is generated by the client via content management, otherwise I would stick in a <br />.

Thanks,

Kev

I'm making a form that contains three places for the user to enter text. The first two are for taking only one line of text, but the third is a bigger input for taking in multiple paragraphs of text. The trouble is, I can't get this third one to wrap the text!

Is there a way to turn word wrapping on for an input bar? Or should I be using a different form element?

Hello what is the HTML code for text wrapping,

As whenever I put a html banner link to amazon, it puts it on the next line down

And I would like it to appear at the side of text.


So what is the html code for text wrapping?

Thanks James

I've found some help here already, so thanks in advance to the good folks that help us novices.

I have just a couple that need addressing, but they're pretty important to me, so hopefully someone can spell them out.

I'll explain them below but here's a quick rundown first:
1.) Wrapping text around a captioned image
3.) A pop-up text bar when a link is moused over.

1.) When I'm posting an image, a caption is almost always necessary. Here's the code I've been using for the image and caption:
"<table class="image">
<caption align="bottom">CAPTION</caption>
<tr><td><IMAGE LINK></td></tr>
</table>"
But when I post like that, there's a break between paragraphs to show the image, which disrupts the reading flow. I need a code that will let me post an image, add a bottom-aligned caption, and still have the story text appear alongside the image.
NOTE: I've been shown the "align=left/right" code, but where do I insert that in the code listed above?? I've tried right before and right after the image source code, but to no avail. Help, please!!

2.) I'm willing to spend hours to learn this one. Somebody, somebody has to know how to do this one. It's done on this site!
OK, here it is.
You mouse over a post listing, and a text bar appears next to the cursor. In that bar is the first few lines of the person's post.
HOW IS THIS DONE???
For someone looking to find new ways to boost hits on a news site, this is a priceless gem. If anyone knows how to do this or something similar in HTML, PLEASE let me know.


Thanks in advance to each and every person who reads this, and a special thanks to those who take the time to help. It means much.

aefattwotgm@aol.com

hi i need some help with this im not a html wizard
not a drop down nav bar
what i would like is a button that when pressed will show more info

ill be more brief
lets say im selling a box of condoms
i have a picture to the left of the screen
and a bit of info about the product at the right of the screen
if people want to see more info about the product
they click the drop down botton and more info is displayed.

Hello!

I am creating a blog website using Weebly and am trying to insert a code in which an icon at the top of the blog post drops down a hidden bullet list with a summary of what the article is about. I have one that is working, but it has some flaws that I would like to kink out if possible. Here is the code I have:



<meta http-equiv="Content-Type" content="Text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="Text/javascript">
<meta name="Content-Style-Type" content="Text/css">
<title>Karma</title>

<style type="Text/css">
<!--
.hidden {display:none}
-->
</style>

<div>

<img alt="photobucket" onclick="document.getElementById ('karma').className = document.getElementById ('karma').className == 'hidden' ? '' : 'hidden'"
src="http://i1106.photobucket.com/albums/h365/ResourceMJS/shortride.jpg">

</div>
<ul id="karma"><font style="font-family:arial;color:#FF9900;font-size:12px;"><li>Be yourself when dealing with candidate conversations.</li> <li>Don't lie about your interests to make the conversation flow.</li> <li>Recruiting sometimes causes one to have to toughen up and have difficult conversations.</li></font></ul>


The icon does what it is supposed to when clicked, but it has 2 flaws.
1. It doesn't show as clickable. When you mouse over the icon you still get an arrow key instead of the typical button icon.
2. When the page loads, the summary text is already visible and the button collapses it. I want the text to start off hidden and only appear/disappear when the icon is clicked.

Is there anyway to solve these? I am kinda of a novice with HTML and coding, so any help would be greatly appreciated. Thank you!

Hello! I recently started a blog on the weebly website and I want to convert it over to wordpress. The only problem is that wordpress does not allow javascript, so I was wondering if there is a way to generate an html code without javascript that allows the user to click a button to drop down text. I have a custom script on my current site:

http://www.resourceblog.weebly.com

It's the short ride button and it allows the user to click on the button in order to drop down a summary of the blog article. Here is the script:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Bad Rep</title>

<style type="text/css">
#bad {
font-family:arial,sans-serif;
font-size:12px;
color:#ff6600;
}
#rep {
cursor:pointer;
}
.hidden {
display:none;
}
</style>

<script type="text/javascript">

function init(){
var obj=document.getElementById('bad');
obj.className='hidden';

document.getElementById('rep').onclick=function() {
obj.className=obj.className=='hidden'?'':'hidden';
}
}

window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);

</script>




<div>
<img id="rep" src="http://i1106.photobucket.com/albums/h365/ResourceMJS/shortride-2.jpg" alt="photobucket">
</div>

<ul id="bad">
<li>Recruiters often get a bad reputation because many people do not understand what they do.</li>
<li>It is up to the recruiter to build the trust of the candidate by being honest and genuine.</li>
<li>Follow up and keep in contact with your candidates so that they continue to hold a strong value in you.</li>
</ul>


Any help would be appreciated. This forum has answered a lot of my questions and so I love turning to you all for advice

Hi there,

I am trying to align the text of a drop down box , so that it appears in the centre across all browsers.

In the code below I have sucessfully indented the text from the left by 5px and sucessfully aligned it in the centre (vertically)

However as I ahve used padding-top, it has also affected the drop down icon (v).

Is there a way to align the text in the drop down without the drop down icon being affected across IE7, 8 , FF, and chrome ?

I have tried adding line-height to the text and that doesnt work either.

Thanks for your help


HTML Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Text align center</title>
    <style type="text/css">
        #selection
        {
            color: #999999;
            display: block;
            font-family: Arial;
            font-size: 11px;
            height: 24px;
            padding: 0;
            width: 382px;
            line-height:20px;
            padding-left:5px;
        }
    </style>
</head>
<body>
    <select id="selection">
        <option value="0">Selection 1</option>
        <option value="1">Selection 2</option>
        <option value="2">Selection 3</option>
        <option value="3">Selection 4</option>
        <option value="4">Selection 5</option>
    </select>
</body>
</html>

Programs
-----------------------
Photoshop CS4
Dreamweaver CS3
-----------------------
Anyways I used photoshop to make most of the site image, slice it up made it to a HTML and images file. I have trouble get text to go in the right place. Im not to sure if im even doing it right. Drop down menu im not sure where to start there.(but mostly having truble with textso any thing will help



( what I need help with. Is how to do text with my work with photoshop. I know how to it with out just not with.)

What I have is a text box for a user to change the back ground & text for a generated page
------------------------------------------------------------------------------------------------------
<font color="#003300">
<b>Color for background</b><BR> </font><font face="Arial,Helvetica" color="#003300"><input type="text" size="6" maxlength="6" name="color1" value="ffffff"></font><font color="#003300"><BR>
<b>Color for text </b><BR> <input type="text" size="6" maxlength="6" name="color2" value="000000"></font><font color="#003300"><br>
<b>Color inside</b><BR> <input type="text" size="6" maxlength="6" name="color3" value="ffffff"><br>
<b>Color outside</b><BR> <input type="text" size="6" maxlength="6" name="color4" value="000000"></br>
</font>
-------------------------------------------------------------------------------------------------------
I would like to change the text box with a drop down box with pre selected colors for the 4 options any help would be greatly appreciated above is the text Im using

Hi All,

first post in the forum.
I would like to know if it is possible to create a drop down list from which the user could select a value but could also decide to enter a new one ?

What I want is to offer the user to select an existing company name or enter a new one, but I would like to have only one field to do it instead of two.

Is this possible

Thanks for helping.

ALex

Hi All,

I'm trying to create an information page with HTML whereby people can find an address of a store based on the conditional dropdown boxes selected. Based on the choices selected, it would display the results.

E.g.
Dropdown 1: Select State
Dropdown 2: Select Retail Store

Output: Address of the retail store (displayed on the same page)

I came across a solution in one of the threads for making multiple conditional dropdowns for a form. The code given works extremely well but I'm not sure how to have a text output result on the same page. Can anyone help? Thanks a bunch in advance!


HTML Code:

<script type="text/javascript">
// Place in this array the ID of the element you want to hide
var hide=['the_minutemen','Planet_Smashers','crass','Madonna',
'the_misfits','next','id2'];
function setOpt()
{
resetOpt(); // Call the resetOpt function. Hide some elements in the "hide" array.
for(var i=0,sel=document.getElementsByTagName('select');i<sel.length;i++)
	{
	sel[i].onchange=function()
		{
		if(this.parentNode.tagName.toLowerCase()!='div')
			resetOpt(); // Hides the elements in "hide" array when the first select element is choosen
		try
			{
			document.getElementById(this.value).style.display='';
			}
		catch(e){} ; // When the value of the element is not an element ID
		}
	}
}

window.addEventListener?window.addEventListener('load',setOpt,false):
window.attachEvent('onload',setOpt);

function resetOpt()
{
for(var i=0;i<hide.length;i++) 
	document.getElementById(hide[i]).style.display='none'; // Hide the elements in "hide" array
}
</script>
Artist:
<select>
<option value="the_minutemen">The Minutemen</option>
<option value="Planet_Smashers">Planet Smashers</option>
<option value="crass">Crass</option>
<option value="Madonna">Madonna</option>
<option value="the_misfits">The Misfits</option>
</select>

<div id="the_minutemen">
The Minutemen  Album:
<select>
<option value="album">The Minutemen album1</option>
<option value="next">Show next 'select' element</option>
<option value="album">The Minutemen album3</option>
<option value="album">The Minutemen album4</option>
<option value="album">The Minutemen album5</option>
</select>
</div>

<div id="Planet_Smashers">
Planet Smashers Album:
<select>
<option value="album">The Planet Smashers album1</option>
<option value="id2">Show element with the id of 'id2'</option>
<option value="album">The Planet Smashers album3</option>
<option value="album">The Planet Smashers album4</option>
<option value="album">The Planet Smashers album5</option>
</select>
</div>

<div id="crass">
Crass Album:
<select>
<option value="album">Crass Album1</option>
<option value="next">Show next 'select' element</option>
<option value="album">Crass Album3</option>
<option value="album">Crass Album4</option>
<option value="album">Crass Album5</option>
</select>
</div>

<div id="Madonna">
Madonna Album:
<select>
<option value="album">madonna Album1</option>
<option value="id2">Show element with the id of 'id2'</option>
<option value="album">madonna Album3</option>
<option value="album">madonna Album4</option>
<option value="album">madonna Album5</option>
</select>
</div>

<div id="the_misfits">
The Misfits Album:
<select>
<option value="album">the_misfits Album1</option>
<option value="album">the_misfits Album2</option>
<option value="album">the_misfits Album3</option>
<option value="id2">Show element with the id of 'id2'</option>
<option value="album">the_misfits Album5</option>
</select>
</div>

<div id="id2">
Element with an ID of "id2"
<select>
<option>Opt1</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>

<div id="next">
"Next" element
<select>
<option>Opt1</option>
<option>Opt2</option>
<option>Opt3</option>
</select>
</div>

I've looked all over the web and can't find an effective way to do this. Can someone please help?

I need to make text drop down menus when you mouseover my links. This is a perfect example: http://www.stpatrick.org/

Thanks a lot!

Hello!

I've pasted this piece of html into my mainPage.
<body>
<div id="featureBox">
<div class="imageTop"><br></div>
<ul class="featureBoxes">
<li></li>
<li></li>
<li></li>
</ul>
<div class="imageBottom"><br></div>
</div>
</body>
</html>
However I can't make the last part <div class="imageBottom"><br></div> render at the bottom of featureBox. Instead it is rendered directly after imageTop.

I cannot really figure this one out so any help is greatly appreciated !

Here's the link to my site: http://test.soundfactory.nu/dividum

Thanks.