|
CSS - Css Over Span Tag
hi,
i have a chunk of dynamic text coming in. it can have html links in it. so something like: 'blah blah blah <a href="site">link text</a> blah blah' im trying to stylize the dynamic text with CSS. i can get the font size and everything to work but i can't get the link text to behave like i want it to. here's what i have: PHP Code: //the css class .articleDesc { font-family: verdana, arial, geneva, sans serif; font-size: 12px; font-weight: none; text-decoration: none; color: #000000; } //trying to make all links red, doesn't work a.articleDesc { color: #FF0000; } //php print '<span class="articleDesc">' . $dynText . '</span>'; the links just come out default, ie. blue and purple... anyone know what's wrong here? Similar TutorialsHi 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...? Hi. 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> Hi, I am currently trying to produce a website using CSS style sheets. I have used 'span' to position and align blocks of text on the page. All looks well, but when I try and validate the page I get an error message that says the <p> and <ol> tags cannot be used within <span> tags. Can anyone suggest anyway round this? Many thanks x Hi, Code: <tr><td colspan="2" height="5"></td></tr> <tr><td width="30%" align="right">City</td><td>This is supposed to be some content</td></tr> How do I imitate structure of the table above. In the example below the text between <span> if too long ends up on new line below <label> How do I make sure that it stay on right side? Code: <div><label>City</label><span>This is supposed to be some content when too long appears below span not below label</span></div> Thank you. I am creating a page where I will list OS names, and when I mouse over the name I would like to display the versions in the database for the corresponding name. The problem I am having is that I'm trying to use span to display the versions but I keep getting a document.all.menu1.style is null or not an object. Here is my code. I don't seewhere it's not working since I got this code from a tutorial and the tutorial code works just fine. <STYLE TYPE="text/css"> #menu1 { display : none } A:link {color:black; text-decoration:none} A:hover {color:blue; text-decoration:underline} </STYLE> <td bgcolor="#DCEBEB"> <SPAN onMouseOver="document.all.menu1.style.display = 'block'" onMouseOut="document.all.menu1.style.display = 'block'"> <img src="../../images/plus.gif">AIX<br> </SPAN> <SPAN ID="menu1" onClick="document.all.menu1.style.display = 'none'"> <img src="../../images/minus.gif"><a href="http://www.test.com">Testing 1</a><br> <img src="../../images/minus.gif"><a href="http://www.yahoo.com">Testing 2</a><br> <img src="../../images/minus.gif"><a href="http://www.cnn.com">Testing 3</a> </SPAN></td> I'm wondering is is it possible to have a <div> tag where a left <span> can stick to the left and a right <span> to stick to the right. What I'm looking for is .... ============================================ =[blah blah] (lot of spaces here) [blah blah]= ============================================ Code:
div.divTop
{
margin: 0px;
padding: 8px 0px;
width: 600px;
color: #000000;
font-weight: normal;
font-family: verdana;
font-size: 10pt;
font-style: normal;
text-indent: 20px;
}
span.spanTitle1
{
font-size: 16pt;
}
span.spanTitle2
{
font-size: 10pt;
}
[code]
[code]
<div class="divTop">
<span class="spanTitle1">blah blah1</span>
<span class="spanTitle2">blah blah2<img src="....."></span>
</div>
Edit: Can't make the ASCII text work here..... Why is this? Code: <div style='margin:0 0px 5px 3px;text-align:center;background-color:#EEEEEE;padding:4px 0;border:2px solid #CCCCCC;'> <span style='color:#888888;font-weight:bold;font-size:10px;'> RECENT BLOGS </span> </div> different than this? Code: <div style='margin:0 0px 5px 3px;text-align:center;background-color:#EEEEEE;padding:4px 0;border:2px solid #CCCCCC;'> <span style='color:#888888;font-weight:bold;font-size:10px;'>RECENT BLOGS</span> </div> Why is IE7 adding its own padding when i don't add a nl between the span and the content within the span? It's the display:block issue that also happens with images. But I just can't understand why IE7 would add spacing there, the 2 above are almost identical. Hi everyone. I would like to change the first letter of an h2 tag thats NOT in a span in the following chunk of code Code: <h2> <span class="subtleHeader">Saskatoon, Regina and Edmonton's</span><br> WEB DESIGN EXPERTS </h2> So in this example I want to change the W. yes I can change the dom, but I'm very very lazy and have this DOM structure in many places and was wondering if there was a css way to do it. Thanks I am trying to make tooltips, using PHP code inside <span>. Is there possibility to control the position in <style>, to avoid possibility for the box (tooltip), not to be completely visible, I mean, when the word that has to be described is at the right bottom of the window, box will change it's position and will be placed at the upper and left position. The box would have to be placed at the position it can have to be readable. I'm a novice with CSS and HTML so the following may seem elementary to most of you. I'm a retail vitamin store owner with a website, (URL address blocked: See forum rules) . We do very well with our store front and are getting better and better with our online discount vitamin store. Our web master has programmed our site so we can easily insert new products. This is done in the <body>. Recently I've wanted to add some spice with color and formatting . At first I was doing this with something like <FONT FACE="Verdana, Helvetica, Arial" size="4" color="006600">. But now as I get into CSS and double checking all code with W3.org, it doesn't like this approach. Now I'm trying <span id="enzymatic" class="prod_description"> in the <body> with span#enzymatic p { color: green; } span#enzymatic h4{ color: blue; } etc. in a CSS definition file. It all works well, but W3.org still doesn't like where I've inserted the code. If you go to our page: (URL address blocked: See forum rules)=country-life-seniority-multivitamin You will get among other "errors" the following message: <h4>Seniority ™ Multi-Vitamin Capsules </h4> The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). Any hints as to what basic rules I'm breaking? Be kind. Many thanks, healthyphil Hello, Well this is a very simple question ... how can Iset the width of a span from CSS? Basically I tried setting the span with from CSS however the span size remained wrapped to the text inside rather then taking the width I desire. I check some interent forums, and found out that if I set the float:left the width is taken, but my span is no longer is place! is there a way to set the span width without having to set thr float:left option? thanks and regards, Sim085 ok, i know that because span is a inline element width cant be applied to it, and a lot of people suggest DIV my problem is that div wont work, because of its auto-break thing.... it being a block element and all... so, how would i apply a width of something like 100px to the span elements in code like this?... Code: <div class="infocontainer"> <span class="infobox">Publisher: <?php print $publisher; ?></span> <span class="infobox">Developer: <?php print $developer; ?></span> <span class="infobox">System: <?php print $system; ?></span> <span class="infobox">Gen <?php print $genre; ?></span> </div> Why doesn't the class applied to the span tag do anything? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style>
body {
font-family: Georgia, Times, serif;
font-size: 12pt;
}
#main p {
padding:0 10px;
}
.newssubhead {
font-size: 124%;
color:red;
}
</style>
</head>
<body>
<div id="header">
<p>
<span class="newssubhead">Test test test test test test test test test test test test </span>
<br>
Something else...
</p>
</div>
</body>
</html>
Hi, I have the following code: <h1>Some text <span class='special'>special text</span></h1> And my CSS: Code:
.special {
font-size: 10pt;
}
h1 .special {
font-size: 20pt;
}
The problem is, the SPECIAL text within the H1 tag above still remains as 10pt I want it to be 20pt only within the h1 tag. Is there a way I can do this? (Worst case: I would need to add a new style and update all my HTML code to use this new style..but I'm hoping there's a quick CSS fix) Many thanks! (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 Let's take a look shall we? my website See the white part in the middle? How can I make that run all the way down to the bottom of the browser? As it is now, I have to set a height for that specific class in the stylesheet, only because firefox says so. If I dont, that part of the page just stays up top, so i now have it set @ height: 400px (i think). I've seen other websites where the top and bottom of the page, the body touches the very margin of the browser window. See this page for example I am having trouble understanding what exactly the CLASS, ID, DIV, and SPAN elements and attributes do. What are there purposes? How do the relate to each other? When should one be used and not another? In laymens terms please. Thanks If I have the following: <span id="span1"></span> <span id="span2"></span> If I set the width of span1, I want to have span2 adjust it's width to be the same automaticly. Something dynamic or a variable. For example in simple terms. span1.width = 150px; alert(span2); would show 150px also. Hope that make sense. Thanks can someone explain why a specific CSS works in IE but not Mozzila? This is the Page and its the word "button" directly below the logo. Code:
.Page_Title {font-size: 13px;
color: #999;
font-weight: bold;
padding-left: 25px;
background-color: #eeeeee;
}
Any ideas? Thanks. |
|||||||