CSS - How Do I Align Broken Text Lines?

Hi Guys,

I'm trying to align some text along an image. The problem is, I want two lines of text to the right of the image, aligned to the top. If I put a <BR> tag between the two lines, the second line gets placed below the image.

Here's what I have so far.


img.top {vertical-align:text-top;}

<a href="http://company.com/graphics/thumb.jpg">
<img class="top" src="http://company.com/graphics/thumb.jpg">
</a>
<a href="company.com">sample text</a>
<a href="company.com">second line</a>


Any ideas? I've tried like every switch for the vertical-align property...

Hi there,
ahhhh I have just decided to start using Firefox and now am rreworking my site. All new set up issues to try and fix and i don't even know where to start. Here is my site: www.kohlrbaby.com
The issues:
1) nav bars are no longer positioned correctly vertically, nor can I get the text to center in FF
2) the white box extends longer then it should in FF vs IE
3) the text is extending off the white box in the catalogue area in FF
please please offer me some css insight

here is my .css code:
BODY {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-TOP: 0px;
PADDING-BOTTOM: 0px;
margin:0px auto;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #a1b7d2;
SCROLLBAR-FACE-COLOR: #a1b7d2;
SCROLLBAR-ARROW-COLOR: #003366;
SCROLLBAR-TRACK-COLOR: #cccccc;
FONT-FAMILY: verdana, helvetica, arial, sans-serif;
BACKGROUND-COLOR: #a1b7d2;
TEXT-ALIGN: center;
COLOR: black;
FONT-SIZE: 12px;
}
#menuList {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px
}
#menuList UL {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px
}
#menuList LI {
DISPLAY: inline;
LIST-STYLE-TYPE: none
}
A.actuator {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 9px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
COLOR: #000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: transparent;
TEXT-DECORATION: none
}
A.actuator:hover {
COLOR: #958550
}
.menu {
BORDER-RIGHT: #ccc 1px solid;
BORDER-TOP: #ccc 1px solid;
VISIBILITY: hidden;
BORDER-LEFT: #ccc 1px solid;
COLOR: #000;
BORDER-BOTTOM: #ccc 1px solid;
POSITION: absolute;
BACKGROUND-COLOR: #ffffff
}
.menu LI A {
PADDING-RIGHT: 10px;
DISPLAY: block;
PADDING-LEFT: 10px;
FONT-SIZE: 9px;
PADDING-BOTTOM: 0px;
MARGIN: 0px; COLOR: #000;
LINE-HEIGHT: 1.75em;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #ffffff; T
EXT-DECORATION: none
}
.menu LI A:hover {
COLOR: #eee;
BACKGROUND-COLOR: #a1b7d2

}
SPAN.key {TEXT-DECORATION: underline}
#homeMenu {WIDTH: 100px}
#catalogueMenu {WIDTH: 100px}
#wholesaleMenu {WIDTH: 100px}
#wheretobuyMenu {WIDTH: 100px}
#contactMenu {WIDTH: 100px}

A {FONT-WEIGHT: normal;
COLOR: #000000;
TEXT-DECORATION: none
}
A:visited {COLOR: #000000}
A:hover {COLOR: #958550}
A.set1:link {text-decoration: none; color: #7c8895 }
A.set1:visited {text-decoration: none; color:#990000}
A.set1:hover {text-decoration: none; color:#958550}


#navHeader {
PADDING-TOP: 0;
HEIGHT: 110px;
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
BORDER-LEFT: #000000 1px solid;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
WIDTH: 650px;
POSITION: relative;
BORDER-BOTTOM: #000000 1px solid;
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: center;
z-index: 10;


}
#logoHolder{
position: relative;

}
img.nav_left{
float: left;


}

#smallLogo {

POSITION: relative;
top: 30px;
left: -145px;
font size: 11px;
font-weight: bold;
}

div.gray_layer {
background:#cccccc;
height: 20px;
width: 650px;
border: solid #000000;
border-right-width: 0px;
border-left-width: 0px;
border-top-width: 1px;
border-bottom-width: 1px;
position: relative;
text-align: center;
z-index: 50;
top: 56px;


}
#second_links {
FONT-SIZE: 9px;
TEXT-ALIGN: center;
position: relative;
top: 58px;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
margin:0px auto;

}

#navImageBox{

BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: 0px;
BORDER-LEFT: #000000 1px solid;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
WIDTH: 650px;
POSITION: relative;
BORDER-BOTTOM: #000000 1px solid;
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: center;

}
#verticalLine{
height: 12px;
width: 500px;
border-right:#000000 1px solid;

}
img.banner{
BORDER-TOP: #000000 1px solid;
BORDER-bottom: #000000 1px solid;

}
#contentHolder{
PADDING-TOP: 0;
PADDING-bottom: 0;
PADDING-left: 0;
PADDING-right: 0;
BORDER-RIGHT: #000000 1px solid;
BORDER-Bottom: #000000 1px solid;
BORDER-LEFT: #000000 1px solid;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
WIDTH: 650px;
POSITION: relative;
BACKGROUND-COLOR: #ffffff;
text-align: center;


}
#text{
padding: 10 30 0 30;
line-height: 1.75em;
text-align: left;

}
#catalogue{
padding: 20 30 15 25;
width: 650px;
position:relative;
height: 100%;
background:transparent;
margin-right: auto;
margin-left: auto;


}

.outline
{border: 1px solid black;}

div.catalogue_pic {
position: relative;
float: left;
padding-right: 8px;



}
div.catalogue_text{
text-align: left;
position: relative;
LINE-HEIGHT: 1.25em;


}
div.float {
position: relative;
float: left;
margin: 5 5 5 5;

}

div.float p {
text-align: center;
}

#bottomText{
padding: 0px;
margin-top: 10px;
margin-bottom: 0px;
margin-right: 20%;
margin-left: 20%; /* opera does not like 'margin:20px auto' */
background: none;
border: none;
border-top: none;
text-align:center;
voice-family: "\"}\"";
voice-family:inherit;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
}

#blueBox{

text-align: center;
position: relative;
height: 27px;
width: 150px;
background-COLOR: #a1b7d2;
top: -26px;


}

I have the following CSS:

Code:

span.title
{
{color:#c38ec7;text-decoration: underline;font-family: forte;font-variant:small-caps;font-weight:bold;font-size:165%}
}

... it works fine but when I try and put 'text-align:center;' that attribute does not seem to work. Is there any way of doing this???

Thanks

OK, I have a few links stacked vertically and I'm trying to get them to align to the right.
You can see the links here
Please look at the sub navigation to the left of the big image.

My CSS looks like this: Code:

a.subnav{
font-family:arial,helvetica, sans-serif;
font-size:11pt;
color:#FFFFFF;
line-height:24px;
text-decoration:none;
text-align:right;
}

what am I doing wrong? How can I get the text to align to the right?

- thanks

I have both Chinese characters and English characters in one paragraph, but they don't align to the bottom with the English characters appearing like <sup>. I have used 'vertical-align' to align the text, but not successful. Pls help.

I'm creating a dynamic calendar and I can't get the numbers in the cells of my calendar table to align top-right!
Here is my unformatted table...
Code:

	<tr height="75">
		<td><div align="right">12</div></td>
		<td><div style="vertical-align:top; text-align:right">13</div></td>
		<td>14</td>
		<td>15</td>
		<td>16</td>
		<td>17</td>
		<td>18</td>
	</tr>

I want the numbers to be aligned top right, but if I put other data in there(currently there is none, but there will be), I'd like it to be aligned left. I tried using the vertical-align property in a div tag, but that didn't do anything... I can get it to align right with a div tag...

sorry if it's such a stupid quesiton...

Also, a side note... I thought that span allows you to align text as well using the style property, but that doesn't work at all (not even just to the right)

OK I have a layer that is described here :


div#footer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:14;
background-color: #EED;
font: 10px Verdana, sans-serif;}


In this layer I wish to have some text in the left of the bar and at the far right (align-right) some text also ... how would i achieve this ???

-Thanks-

I have some text in a DIV that is updated dynamically with removeChild() and appendChild(). I've tried numerous combinations but I can't seem to get it to work correctly.

CSS Code:
Original - CSS Code div.chatlayer { position: absolute; top: -50px; left: 50px; border: 1px solid black; -moz-border-radius: 10px; padding: 5px; background-color: white; min-width: 100px; width: auto; text-align: center; visibility: hidden; }

  

 div.chatlayer {


   position:             absolute;


   top:                  -50px;


   left:                 50px;


   border:               1px solid black;


   -moz-border-radius:   10px;


   padding:              5px;


   background-color:     white;


   min-width:            100px;


   width:                auto;


   text-align:           center;


   visibility:           hidden;


 } 

Hi all if you look here -> http://www.prxa.info/gol2/community.php to the right where it has status updates i wish the update itself to align to the top of the avatar images to the left of it?

hi. i'm trying to have some text in a div, but also i want the text align to the bottom of the div. something like. but i don't know how... have a look at http://www.desorden.net/prueba.html

any ideas? thanks in advance

Please look at this page - http://www.tmhdesign2.com/home-payment-calculator.asp

Why can I not justify the paragraph of text on this page for Firefox???

Thanks for taking the time to read my question.

I have a tree menu on my page www.pierced.ca/pierced-events.htm that has long text in it. I have wrapped the text so that the page does not stretch and look bad.

I am wondering how to move the wrapped text to the right so that it does not write over the dotted line. I would also like to extend the dotted line downward (I guess that would be another image)

Thanks for your help.

Brad

CSS file:

.dtree {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #CCCCCC;
white-space: normal;
}
.dtree img {
border: 0px;
vertical-align: middle;
}
.dtree a {
color: #999999;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
white-space: normal;
padding: 1px 2px 1px 2px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
color: #333;
text-decoration: underline;
}
.dtree a.nodeSel {
background-color: #c0d2ec;
}
.dtree .clip {
overflow: hidden;
}

I have a row of icons (for navigation, with a text description underneath them) I am trying to break out of table design so I want these divs aligned next to each other, with the image/text centered.

Everything looks pretty peachy... but in FF the text such as "Candidates" underneath the icon floats to the left because of the parent float.. it ignores the text-align: center. In other browsers it works but not in FF any help? Also if anyone has a better way of writing this code I would be open to suggestions since I am slowly breaking away from table design.

Thanks!


Code:

.main #header {
	background: #FFFFFF;
	padding: 0 10px 0 10px;  
	border-bottom: 1px solid black;
	border-top: 1px solid black;
}
.icon_nav{
	font-size: 12px;
	float: left;
	text-align: center;
	margin-right: 12px;
	border: 1px solid black;
}

Code:

<div id="header">
    <div style="float: left">
        <img src="images/logo.png"  align="left" style="margin-right: 4px"/>
        <div style="color: #992204; font-size: 18px">XYZ Company</div>
        <div style="color: #992204; font-size: 14px">Professional Company</div>
        <div style="color: #992204; font-size: 12px">481-555-5555</div>
    </div>
    
<div style="float: right;">
    <div class="icon_nav"><img src="images/icons/home.png" /><br />Home</div>
    <div class="icon_nav"><img src="images/icons/employers.png" /><br />Employers</div>
    <div class="icon_nav"><img src="images/icons/candidates.png" /><br />Candidates</div>
    <div class="icon_nav"><img src="images/icons/directions.png" /><br />Directions</div>
    <div class="icon_nav"><img src="images/icons/event_planning.png" /><br />Event Planning</div>
    <div class="icon_nav"><img src="images/icons/contactus.png" /><br />Contact Us</div>
</div>
    
    <br style="clear: both;" />
    <!-- end #header -->
</div>

How do I align the text in my navbar vertically?

I'm trying to do this.

edit.... I can't post the link

by adding vertical-align:middle; to my navbar tag and its not working.

Do you see where i'm going wrong?

I have a footer image on a site and I want to line up some of the text on the left and some of the text on the right. The relevant css footer code is this:

Code:

#footer { 
	clear:both; 
	background:url(images/footer.jpg); 
	width:780px;
	height:71px;
	color:#ffffff;
	font-size:xx-small; 
}

#footer .notover {padding-top:54px;}

The xhtml is this:

Code:

<div id="footer">
	<div class="notover">All this stuff is left aligned 54px from the top of the image.</div>
</div>

Now, how do I add some text on the same line as the class="notover" text that is right aligned? I thought it would be as simple as creating another div that specified text-align:right; but the text shows up right aligned and way below the footer image.

Thanks in advance.