HTML - Wrapping Around Text Left In I.e And Firefox Help Me Please

Hi. I've been trying and failing at wrapping text around a mixpod playlist widget. [The widget is in a draft post I'm working on in a blog, not installed as a sidebar gadget.] I'm not technical, and the widget is "flash" technology which befuddles me even further. Fiddling with <div> and "align" codes, I was able to type in text next to the widget, but only in the editor page of Blogger...once I previewed or published it, the text appeared below the widget.

I would very much appreciate anyone's ideas. The widget code is:

<embed border="0" flashvars="mycolor=5C1400&amp;mycolor2=baac8f&amp;mycolor3=450101&amp;autoplay=false&amp;rand=0&amp; f=4&amp;vol=100&amp;pat=0&amp;grad=false" height="382" name="myflashfetish" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" salign="TL" src="http://assets.mixpod.com/swf/mp3/mff-nano.swf?myid=76126179&amp;path=2011/01/26" style="height: 382px; visibility: visible; width: 165px;" type="application/x-shockwave-flash" width="165" wmode="transparent"></embed>

Thank you.

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

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'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?

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

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

Greetings from Norway!

This is my first post on this forum! I am currently developing my website, and when I checked the page in Firefox, Safari and Chrome it seemed perfectly fine, but when loading it in IE and Opera it looked strange.

the page:
http://aksjefinans.com/bilde.html

In Opera and IE the text in the tables are centered while in the other browsers it is aligned to the left (this is how it should look). Why is the table text centered in IE and Opera? I have looked over my code several times and tried a lot of different moves, but it always ends up like this in IE and Opera. Centered text does not look any good. What should I do to make the page look the same in IE as in firefox?

Hope someone could help me!

I have a BUTTON element in which I am placing and image. It looks fine in IE, but firefox is adding some extra left padding to it. Setting margin and padding to the img does not help. Anyone know of a workaround?

See the page at http://newsite.mortgageisrael.com/sh....asp?pageid=18 (2 places)

HTML:
Code:

<button type="submit" class="formButton" style="width:77px"><img src="images/submit.gif" alt="Submit"/></button>

CSS:
Code:

.formButton{
	font-weight:		bold;
	margin-top:			10px;
	cursor:				pointer;
	height:25px;
	border:1px solid black;
	padding: 0px;
	text-align:center;
}

.formButton IMG{
	padding: 0px;
	margin: 0px;
}

Thanks

Hello. I have text at the top right, "A Site for All Nations to Share their Knowledge!" and I need to move it to the left a bit so its not overlapping the sun image.

I appreciate You!

How can I make the text appear at left bottom...
I have 3 taGS RETURNING DATA FROM sql:
<p> #TOC# </p>
<p> BUSINESS POLICY TRADEMARK REGULATIONS. </p>
<p> #Qry.USERSIGN# </p>



I want the text from this tag to appear one after other at left bottom:
For example:

This is basic algebra lesson.
BUSINESS POLICY TRADEMARK REGULATIONS.
Smith

How to do that? Any advise is appreciated.RosieGp

Hello all-
This is my first post on HTML forums, and I hope ya'll can help me out with this issue. I feel really dumb...and think that my problem is probably a simple one, but I can't figure it out.

I've got a left sidebar, coded to float left in CSS, and in dreamweaver it shows up appropriately. However, whenever I look on firefox or ie, the left shows up on the right. I've also got an orange background image that DOES show up in the correct spot. I'm wondering if my problem could be related to the fact I've got the image listed under main-content, not the left sidebar. I've moved that line in the CSS, but it didn't help.

Here is a link to my problem: http://www.durhamsafekids.org/main.html

Here is my CSS code:
Code:

body {
	font-size: 62.5%;
	background: url(images/top-bdr.jpg) repeat;
}

p, li {
	font: 1.2em/1.8em Sabon, sans-serif;
	margin-bottom: 10px;
}

h1 {
	font: 2.0em "Helvetica Neue", sans-serif;
	color: white;
	height: 0px;
}

h2 {
	font: 1.8em "Helvetica Neue", sans-serif;
	color: #99cc33;
	margin-bottom: 10px;
}

h4  {
	font :Georgia, "Times New Roman", Times, serif;
	color: #0078AA;
}

h3  {
	font :Georgia, "Times New Roman", Times, serif;
	color: #333399;
}

ul {
	margin-left: 25px;
}

img {
	border: none;
}

#page-wrap {
	background: white;
    width: 960px;
	margin: 10px auto;
	}
	#page-wrap #inside {
		margin: 10px 10px 0px 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
#main-content {
	background: url(/images/left-sidebar.gif) repeat-y white;
	padding-left: 230px;
	padding-top: 20px;
}
	
#header {
	background: #ffffff;
	text-align: center;
}

#menu {
	background: #ffffff;
}

#left-sidebar {
	width: 185px;
	float: left;
	padding-left: 15px;
	padding-top: 20px;
}

#footer {
	background: #99cc33;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #006699;
	font-size: 12px;
}

.footer a:link    {
  /* Applies to unvisited links in class mainNav */
  text-decoration:  none;
  font-weight:      bold;
  color:            #006699;
  } 
.footer a:visited {
  /* Applies to visited links in class mainNav */
  text-decoration:  none;
  font-weight:      bold;
  color:            #006699;
  } 
.footer a:hover   {
  /* Applies to links under the pointer in class mainNav */
  text-decoration:  underline;
  font-weight:      bold;
  color:            #006699;
  } 


/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_drop_2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.preload1 {background: url(menu/three_1.gif);}
.preload2 {background: url(menu/three_1a.gif);}

#nav {padding-left:217px; margin:0; list-style:none; height:38px; background:#fff url(menu/three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(menu/three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(menu/three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(menu/three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(menu/three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(menu/three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(menu/three_1a.gif) no-repeat right top;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:110px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:110px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:108px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #bbd37e;}
#nav li ul.sub li a.fly
{background:#bbd37e url(menu/arrow.gif) 100px 6px no-repeat;}
#nav li:hover ul.sub li a:hover 
{background:#6a812c; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#6a812c url(menu/arrow_over.gif) 100px 6px no-repeat; color:#fff;}


#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:110px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:110px; z-index:400; height:auto;}

#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#6a812c url(menu/arrow_over.gif) 110px 6px no-repeat; color:#fff; border-color:#fff;} 

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#bbd37e url(menu/arrow.gif) 110px 6px no-repeat; color:#000; border-color:#bbd37e;}

And here is my HTML code:
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" xml:lang="en" lang="en">

<head>
	
    
    <meta http-equiv="Content-Type" content="text/html" />
	
	<title>Durham County Safe Kids</title>
	
	<link rel="stylesheet" type="text/css" href="style.css" />
	<!--[if lt IE 7]>
		<link rel="stylesheet" type="text/css" href="style-ie.css" />
	<![endif]-->
    


</head>

<body>

	<div id="page-wrap">
		<div id="inside">
			
			<div id="header"><!-- #BeginLibraryItem "/library/header.lbi" --><img src="images/Header2.jpg" alt="Durham County Safe Kids" name="headerimage" width="775" height="200" border="1" style="background-color: #CCCCCC">
<!-- #EndLibraryItem --></div>

          <div id="menu"><!-- #BeginLibraryItem "/library/menu.lbi" -->
<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
	<li class="top"><a href="library/index.html" class="top_link"><span>Home</span></a></li>
	<li class="top"><a href="#nogo2" id="safety" class="top_link"><span class="down">Safety</span></a>
		<ul class="sub">
			<li><a href="#nogo3" class="fly">Vehicle Safety</a><ul>
						<li><a href="#nogo4">Car Seats</a></li>
						<li><a href="#nogo5">Spot the Tot</a></li>
						<li><a href="#nogo6">Hyperthermia</a></li>
                        <li><a href="#nogo7">Distracted Driving</a></li>
					</ul>
            </li>

			<li><a href="#nogo8">Poison Prevention</a></li>
			<li><a href="#nogo9">Wheeled Safety</a></li>
			<li><a href="#nogo10">Firearms Safety</a></li>
			<li><a href="#nogo11">Water Safety</a></li>
			<li><a href="#nogo12">Home Safety</a></li>
			<li><a href="#nogo13">Pedestrian Safety</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo54" id="events" class="top_link"><span>Events</span></a></li>
	<li class="top"><a href="#nogo55" id="links" class="top_link"><span>Links</span></a></li>
	<li class="top"><a href="#nogo56" id="photos" class="top_link"><span>Photos</span></a></li>
	<li class="top"><a href="#nogo57" id="about" class="top_link"><span>About Us</span></a></li>
</ul>
<!-- #EndLibraryItem --></div>

<div id="left-sidebar">This Text should be in the Orange Left Sidebar.</div>
			
			<div id="main-content"><img src="images/preventingunintentionalinjury.gif" alt="" width="529" height="127" align="right" /><br /><br />
				<h2>This website is currently under construction.  Please come back soon!</h2>
				
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
			
			<div style="clear: both;"></div><!-- #BeginLibraryItem "/Library/footer.lbi" -->

<div id="footer">
<table align="center" width="50%" border="0" cellspacing="1" cellpadding="1">
  <tr>
    <th scope="col"><span class="footer"><a href="index.html">Home</a></span></th>
    <th scope="col"><span class="footer"><a href="#">Safety</a></span></th>
    <th scope="col"><span class="footer"><a href="#">Messages</a></span></th>
    <th scope="col"><span class="footer"><a href="#">Links</a></span></th>
    <th scope="col"><span class="footer"><a href="#">Photos</a></span></th>
    <th scope="col"><span class="footer"><a href="#">About Us</a></span></th>
  </tr>
</table>
<br>
			<center><font size="+2" color="FFFFFF"><strong>Durham County Safe Kids</strong></font></center>
			</div><!-- #EndLibraryItem --></div>
		
		<div style="clear: both;"></div>
	
	</div>

</body>

</html>

As you can see from the linked screenshot, the text shows up on the right side of the page, not in the orange box.

http://www.durhamsafekids.org/dskscreen.jpg

Thanks all!

~Jeff

Hi.

I can't figure out how to have all the tables on my site aligned to the centre yet have the text in them aligned to the left. In other words I want 2 margins either side of the central body of my site. How can I do this?

Thanks.

hi i'm new to htm, infact new to making websites at all.

i spent ages writting an intoduction, but some one deleted it.

i have started writting my first HTML page :

http://normington.superfreehost.org/...age%204.1.html

so far it's just some embeded movies from youtube.

my first problem is that i want to align text to the left of the video and centered vertically.

my second problem is that when i view the page source through mozilla i find some extra text that i cant see if i view the page in wordpad.

"<!-- Paste this code into the body section, not the head section of the page -->
<script type="text/javascript"><!--
ch_client = "b0redum";
ch_non_contextual = 0;
ch_keywords = "tech,free";
ch_linkStyle= "style3";
//--></script>
<script src="http://scripts.chitika.net/static/linx/chitika_linx.v3.js" type="text/javascript">
</script>
<div id="PaypopupStartCode" style="display:none">
</div>
<script language="JavaScript1.1">
if (typeof(paypopupScriptStart) == 'undefined') {var paypopupScriptStart = false;}
if (!paypopupScriptStart) {
document.write(unescape("%3Cscript")+' src="http://www.bu520.com/popup.php?'+(new Date()).getTime()+'&id=azzamartin&pop=enter&t=1&subid=107931&blk=1&fc=-1"'+unescape("%3E%3C/script%3E"));
paypopupScriptStart = true;
}
</script>
<noscript>
</noscript>"

what does this text do, and how do i move it?

any advice about my page would be apprichiated, items to add etc,
the next thing i want to do is make a comments page.
is this an easy thing?

thanks for your help,
Normington.

I get how to align two sections of text, one at the left of screen and one on the right, but how do I put this line at the bottom of the screen? I tried pretty much every combination now, bottom:0, vertical-align:bottom, vertical-align:text-bottom, with and without a parent div container, nothing works! The moment I try to put the line of text at the bottom of the screen the left/right alignment would be messed up or it wouldn't show at all. It seems html only allows you to align it left/right OR bottom/top, but not both?
Any help is appreciated.

This is what I have so far:

Code:

HTML:
<div style="clear:both;" id="bottom">
  <p class="left">Text to go on left.</p>
  <p class="right">Text to go on right.</p>
</div>

CSS:
#bottom {
bottom:0;
}
.left {
float: left;
}
.right {
float: right;
}

Hi there,

Using fireFox I get the desired result, but when using IE I get the image on the *left* side?!

this is my code (the header is a jsp page that has an image and user's info name and last logged in))


<td width="90%" valign="top" align="right">
<tiles:insert attribute='header'/>
</td>


as you can see the image (header) is align to the right, but IE pushes it to the left (I wrote center - and it still keeps on pushing it to the left) any idea why??