|
CSS - Problem With Last Line In Text In <span> Field
I have an alignment issue that is driving me crazy. For whatever reason, the text that I have in a <span> field is dropping too far down for the last line. Here is a screenshot of the relevant text:
Yada yada For whatever reason I can't keep the final "Yada" from dropping farther down. It is in the following <td> field: Code: <td style="height: 200px; width: 150px; vertical-align: top; padding-top: 10px"> And the class for the span has the following characteristics: Code: .announcement_body
{
color: black;
font-size: x-small;
}
I can't see what would cause this. I've already tried adjusting the height of the <td> field without any luck. I did get consistent spacing when I added the characteristics "vertical-align: middle", but that made the distance between every line too large. Any idea what I'm missing here? Stephen Similar TutorialsHi. See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should. Please also read some comments in the code. Code: <html><body><center><br><br> Why does image not force the outermost span to be at least as high as image?<br> If the text are long enough and gets below the bottom border of image it look good though.<br><br> NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br> In my real application I'm using an <a href=" ...> around the outer span in examples below.<br> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;"> <span style="display:block; float:left"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0"> </span> <span style="display: block; color: white;"> Text here. </span> </span> </td></tr></table> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left"> Text here. </span> </td></tr></table> </center></body></html> CSS Definition: span.votelinks { right: 0; position: absolute; padding: 1px 280px 0 0; background: none; font-size: 12px; font-weight: bold; } Its use in a .tag file: <span class="votelinks"> <a href="${pageContext.request.contextPath}/secured/vote.do?id=${article.id}&type=ARTICLE&good=true"><img border=0 src="${pageContext.request.contextPath}/images/good.gif"/></a> ( ${requestScope.UP_VOTES} ) <a href="${pageContext.request.contextPath}/secured/vote.do?id=${article.id}&type=ARTICLE&good=false"><img border=0 src="${pageContext.request.contextPath}/images/bad.gif"/></a> ( ${requestScope.DOWN_VOTES} ) </span> The problem is that the icons are centered perfectly but the text isn't. Is there a way to only pad the text? Thanks in advance, Mark Hey everyone. When I have text in a span and a tag (maybe any inline element for that matter), it would seem the vertical positioning is different from IE than other browsers. The site I'm having trouble with is here... http://jobs4ecps.ca/ It's only a "soft launch" so far, so please go easy on me about other blemishes The problem area I can use as an example is the top black bar. The text is higher in IE than other browsers. Any ideas on how to level it out? Thanks! a div works with this style, but a span does not. i want part to be left (defalut by the css file style applied), and then the inline span style to be to the right. not working: Code: echo "<a title='".$link['desc']."' href='".$linkurl."' class='cmenulink'>".$link['title']."</a>"; echo "<span style='text-align: right; padding: 1px;'>In: ".$link['in']." Out: ".$link['out']."</span><br />"; if you don't know php... Code: <a title='abc' href='abc.com' class='cmenulink'>ABC</a> <span style='text-align: right; padding: 1px;'>In: 999 Out: 999</span><br /> Hi I'm struggeling with the following: I have some span elements inside a td. If I apply padding to a span then the padding is flowing outside the td (above and below the borders of the td). Why does that happen and is there a way to make the td to autogrow to fit all the span's inside? Se example code below Code: <table border="0" cellpadding="0" cellspacing="0" align="center" style="width:300px; margin-top:50px;"> <tr> <td style="background-color:gray; text-align:center; border:1px solid black;"> <span style="margin-right:20px;">First</span> <span style="margin-right:20px;">1</span> <span style="margin-right:20px;">2</span> <span style="margin-right:20px; background-color:orange; padding:10px;">3</span> <span style="margin-right:20px;">4</span> <span style="margin-right:20px;">5</span> <span style="">Last</span> </td> </tr> </table> ******* UPDATE ******* I found this link today: http://css-discuss.incutio.com/?page=FormattingContexts which says (among other things): ************************* Only one thing impacts the vertical space between inline elements: the line height. Normally, the line height is based upon the line height for the text in that line, or the height/padding/border/margin of any replaced items. The element on a line with the largest line height or replaced height is the one to define the vertical space that line takes up. Height, padding, border or margins on text do not impact the line height or the container height. Instead, borders, padding and margins overlap from line to line. If you want to give an inline text element some padding and border, make sure you give it some extra line height, too, or else it will overlap with whatever else is above or below it. ************************* So does that rule mean that I have no way to make my TD autogrow in relation to the padding applied to the SPAN in the example above? Is there any working workarounds for this...? (alas, it's the old problem: works in Firefox, Netscape and Safari ... but not MS IE) I'm attempting to build a series of words with a button-appearance created using span to specify background color and borders and margins. The code checks out at the w3.org validators. In the first 3 browsers it loooks exactly as intended. but in MS IE (v 5.2 Mac) it is completely screwed up: - line is left justified - individual words are right justified - most of the cells are blank - all cells run together (in fact they seem to be overlapped since one cannpt even guess which cell links to what other page) relevant HTML: <div style="text-align:center;"> <p> <span class="buttons"><a href="aboutDG.php">About the Gypsy</a> </span> <span class="buttons"><a href="eventFinder.php" >Find Events</a> </span> ... <span class="buttons"><a href="helpDG.php" >Help</a></span> <span class="buttons"><a href="http://www.thedancegypsy.com/" >Home</a></span> </p> </div> and the relevant css is: .buttons { background-color: #66FFFF; color: #FF6600; vertical-align: middle; text-align: center; padding: 3px; margin-right: 2px; font: bolder smaller medium Verdana, Arial, Helvetica, sans-serif; border: #3399FF; border-style: solid; border-width: 2px; white-space: nowrap; } url: www.thedancegypsy.com/indexBeta.php thanx in advance for any help Hello all! I've problem with firefox rendering's of span tag, the problem is in the width definition, the code is this: Code: <span style="width:100%; background:red">My name is Danny!</span> IE show me a 100% red row with the text instead Firefox show me only text with the backgroud color. Why this? is a Firefox bug or is not possible to assign width definition to the span tag?! I'm trying to figure out how to do something like this: Code: <h6>Lorem Ipsum Dolor <span>jan 10 2006</span></h6> And make the heading line up to the left side and the span on the right. It's close. It's lining up on the right but on the next line down rather than the same line. Take a look. Any bright ideas on why this is happening or how to fix it? Thanks. Hi, first of all i'm a bit new to this, but not a Compleet noob. pls be kind Ok, so my issue is i have a type of image gallery made with spans. I have the span tags enclosed by the <a href> tag. Spans are floating. The reason for this is that I want to have the border change colors on hover, wherever the pointer might be located in the span. It works great in firefox and IE8, but i just discovered this morning, much to my dismay, that it doesn't work in IE7 or below. of course it was the person i'm making the web page for that pointed this out, go figure. The problem is that eventhough IE shows that it is a link, when clicking on the image, nothing happens. text works find, the area around image and text works fine, just not the image. I tried searching google for a couple hours and could not find a fix that didn't involve javascript. I'm trying to avoid JS as much as possible, and so far all has gone well. Ok down to the nitty gritty. I stripped down the html so that it just shows one of the spans, so if you drop the code into notepad and save as htm you can play with it. css link is complete to my hosted css file. honestly im not sure why im using that doc-type, i don't completely unerstand the mechanics, i just thought for no sound reason at all that it would be better than html doc type. xhtml 1.0 validates and css validates as 2.1. Code:
<?xml version="1.1" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Bella Luna Gifts for the Soul - Wands</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.bellalunagifts.net/main.css" />
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;}
#menu ul {text-align:left;}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 12px/16px arial, "lucida console", sans-serif; padding: 3px 2px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-container">
<div id="content">
<a href="http://www.bellalunagifts.net/rose_quartz_healing_wand.htm">
<span class="thumbnailleft"><img class="image" src="products/tn/rose_quartz_healing_wand.gif"
alt="Rose Quartz Healing Wand" width="150" /><br/><br/>Rose Quartz Healing Wand<br /></span></a>
</div>
</div>
</body>
</html>
If you just wanna glance at the css affecting the span and image, here it is. Code:
.thumbnail {
float: left;
width: 150px;
height: 210px;
margin: 0 20px 15px 0px;
padding: 5px;
text-align: center;
border-style: ridge;
border-color: #3333FF;
text-decoration:none;
}
a {text-decoration: none;color: #000000;}
a:link .image {border-style: none;}
a:active .image {border-style: none;}
a:hover .thumbnailleft {
border-color: #00CCFF;}
a:hover .thumbnail {
border-color: #00CCFF;}
a:visited {text-decoration: none;color: #000000;}
a:visited .image {border-style: none;}
and i dont know why my docs are .htm instead of html.....long time ago i had a reason that may or may not have been valid but i should probably change to .html, yeah? well the link to the page im working on is http://www.bellalunagifts.net/wands.htm this is the last immediate piece of foundation code that i need to figure out to start rolling out the rest of the website. this is the first time i've posted for help, i really do try to figure out stuff on my own, but am ready to throw my head through the screen right now. and hell, if i'm goin about this in a silly way, pls tell me. i always welcome criticism. any help would be much much appreciated. i'm gonna keep trying to figure this out, but i'm hoping that one of you already knows what i'm doing wrong. i know my css code is probably redundant in places, but for now i'm just working on getting things to work. thx in advance for any reply. I've quickly created a small website for a friend of mine and it's the first time I've used <div> and <span> tags. It probably shows , because now it's a mixture of all kinds of layout methods. But anyway, it works fine in IE (what a lovely tolerant browser) but it messes up in Firefox. Have a look he www.duikeninegypte.nl The block text in the left column in the middel shows up fine in IE but is moved to the right in Firefox. Both pieces of text are defined in another file, so here it concerns the left part (_HOMEDUUR) and the middle part (_HOMEBODY). Why does it work in IE but not in Firefox? Cheers for any feedback! Gurt PHP Code: echo " <center><div id=\"backholder\" style=\"position: relative; height: 576px; width: 720px;\"> "; // background image echo " <IMG SRC=\"images/homeback.jpg\" style=\"position:absolute; left:0; top:0;\" border=\"0\" title=\"\"> "; //start navigation menu echo " <IMG SRC=\"images/nav-home-sel.gif\" style=\"position:absolute; left:5; top:10;\" border=\"0\" title=\"\"> "; echo " <a href=\"inhoud.php\"><IMG SRC=\"images/nav-inhoud-def.gif\" style=\"position:absolute; left:5; top:70;\" border=\"0\" title=\"\"></a> "; echo " <a href=\"bestel.php\"><IMG SRC=\"images/nav-bestel-def.gif\" style=\"position:absolute; left:5; top:130;\" border=\"0\" title=\"\"></a> "; // end navigation // left panel echo " <span style=\"position: absolute; left: 20; top: 190;\"> "; echo " <table width=\"200\" border=\"0\"><tr><td width=\"100%\"><font color=\"#ffffff\">"._HOMEDUUR."</font></td></tr></table> "; echo " </span> "; // body panel echo " <span style=\"position: absolute; left: 235px; top: 90px;\"> "; echo " <table width=\"480\" border=\"0\"><tr><td width=\"100%\">"._HOMEBODY."<br><br>"._HOMECREDITS."</td></tr></table> "; echo " </span> "; echo " </div></center> "; can someone help me with this? here is the page&css I have been working on... the page file the css file I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site? this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!! I'm basically asking the same question as this post, but hoping that I can press for a better solution. I have an element which contains an image and some text, and I need that element to expand to the width of the image, not the text. The size of the image will change, so I can't set a fixed width on the containing element. The code I have which doesn't work looks like this: Code: <html> <head> </head> <body> <span style="display: inline-block; border: 1px solid black"> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio.</div> </span> </body> </html> The solution proposed in the post I linked to looks like this: Code: <html> <head> </head> <body> <table width="1"> <tr> <td> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> </td> </tr> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio. </td> </tr> </table> </body> </html> The second example gives me the functionality I'm looking for, but I would really like to avoid using tables. I'm hoping there is a CSS solution to this. Thanks. I'm having problems getting my text to show up on the same line. I'm not sure what I'm doing wrong. Here is my code: Code: <div id="subtitle"><b>What Personal Information Is Collected?</b> <div style="font-size:7px"><a href="#whatinfo">SEE MORE DETAILS</a></div></div> The "subtitle" CSS is external: Code:
#subtitle {
font-family:sans-serif, arial, verdana;
font-size:9pt;
background-color:#cccccc;
padding-left:6px;
}
I don't understand why the "SEE MORE DETAILS" link showing up on a second line? I want it at the end of my subtitle. Thanks for your help in advance. i am trying to do something like: <h6>blah</h6><span class="note">*blah</span> but *blah is appearing underneath the h6 which is fair enough but how do i make it appear on the same line? i cant for the life of me think of a css property that lets me do that? Hello, more issues(!) I'm using "text-decoration: line-through" to cross out retail prices - catalogue style. The trouble is, when the effect is used with certain numbers like "8" and "3", the numbers become unreadable and it looks like we're charging more than the retail price on some products. My boss likes the effect, so I need to find out how to raise the height of the line-through. Does anyone know how I can do this, or any other methods (such as border control) that will be more effective. Many thanks! Hi there, How do I make the background of a text field change color upon hover/rollover? Any help would be great! I have a disabled input field that is managed by PHP scripts. I need the fields to appear to the user but to look like just text. The main problem is that I have a patterned background on the page and I don't know how to create the style so that there is a transparent background on the input field. Can someone help? TIA. Can anyone tell me how to make a form text field one solid color? No border or anything, just a rectangle box any color. Thanks! Hi How can I wrap a long line of text inside a fixed width div? i wish to have two bits of text show as described in subject this is the code i have at present. i know that i have used a style for an image but how do i do this for text ? thanks Code:
<style>
img.floatRight {
float: right;
margin: 15px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 3px;
}
</style>
left text here<b class="floatRight"> right text here</b>
|
|||||||