|
CSS - Troubleshooting Span Tag
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> 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...? I am fairly new to .css but am trying to make my site 100% css formatted. One of my test pages is up at: http://www.nikdaum.com/artnew/poems.htm The issue lies in the grey navbar at the top. It's container's width is set to scale to 100% of the containing block, the white column, and inside this block is another block that is centered horizontally. Everythng works fine on Safari and Firefox on MAC, but in IE on PC the bar doesn't span the whole width and instead pushed to the left leaving a pretty wide gap on the right side. Any advice would be appreciated. The .css file for the navbar is at http://www.nikdaum.com/navbar.css But the css for rest of the page is in the html file. Thanks alot, Nik Here is my entire code causing this bug. I have simplified it considerably from the actual code where I am experiencing the problem. Code: <!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Lorem ipsum dolor sit amet & Lorem ipsum dolor sit amet</title>
<style type="text/css" media="screen">
div#page {
position: relative;
}
div#branding-main {
position: absolute;
bottom: 14px;
left: 9px;
}
</style>
</head>
<body>
<div id="page">
<div id="branding-main"><a href="#"><img src="https://secure.footprint.net/xscmsn/c/hotmail/hotmail77x19.gif" width="130" height="120" alt="" /></a></div>
<div id="main">
<div class="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <img width="276" height="110" src="http://www.google.com/intl/en_ALL/images/logo.gif" /></p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <img width="276" height="110" src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif" /></p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laboreet dolore magna aliquyam erat. <img width="276" height="110" src="http://www.ctan.org/tex-archive/documentation/visualFAQ/source/lorem-ipsum-logo.png" /></p>
</div>
</div>
</div>
</body>
</html>
Basically what you have there is a main wrapping DIV (div#page) set as relatively positioned, with a DIV inside it (div#branding-main) absolutely positioned near the bottom left of "div#page". It works fine in every browser and (usually) in IE6. The problem is that in 1/30 of page reloads in IE6 the absolutely positioned DIV will be assigned an incorrect value for the BOTTOM property, and will be rendered in the wrong spot on the page. I can't seem to be able to tell what is causing this. It seems like removing one of the DIVs that the content is wrapped in stops it from happening...but I can't say for sure. Also, since this bug is time-dependant, I have added the superflous text and images to give the page a larger profile. The original page I was working on when I discovered this bug is much more graphically rich, and seems to invoke the bug more often than this dumbed down page. I don't think this is directly related to hasLayout, as I am fairly certain I have exhausted that possibility by adding hasLayout to every relevant element. However, giving "div#page" a height larger than the height of the content (ie. an explicit height not dependant on the length of the content) seems to prevent the bug. Giving an explicit width to "div#page" doesn't make a difference. Moving the "div#branding-main" to the bottom of the document seems to prevent the bug as well. However, I'm hoping there is a solution without changing the HTML in such a major way. Please help! I have a three column layout currently. The left and right column contain borders to the central column where all of the website content is planned to be. The problem that I have is that I do not want the left and right border columns to be in the windows scrollable area. For example, If someone views the site using an 1024x768 resolution, the page currently loads with a scroll bar at the bottom. To be able to see all of the central column, you have to scroll over slightly. If the right and left column were not in the scrollable area, the middle column would be 100% visible on load and also you would be able to see half of the right and left border. Any help would be greatly appreciated. I understand that what I am asking for is not that clear and any problems please say and I can draw a diagram. Cheers Ok, well I guess the real problem here is my lack of understanding on exactly how different browsers interpret CSS. I found a tutorial about Swordfish CSS menus, seemed simple enough but when I tired to add some styling to it the whole thing became a huge mess. It looks great in IE, but netscape totally ruins it. Makes me wanna just go back to using tables http://dev.dreamhost.com/test.html If someone can see an immediate problem here, or can suggest a better way of making cross browser pull-downs it would be greatly appreciated. Basic premise: Top of pull down will be a graphic Pull down part will be html/css Pull down part will have a margin of 4px, and the bg color will cover 100% so it looks like a regular roll over. 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 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? 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'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 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 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..... 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 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. (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 I am a 3week knewb to css. I was wondering if anyone could explain to me when I would use: div or display:block div or span span or display:inline thank you 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. Hi, there. I've created a simple 2-column list using a <span> to justify items I want in the right column to the right edge of the containing <div>... everything is working fine in Firefox, but have just noticed that Internet Explorer is punching all the spans down one line. I thought spans were purely inline, so this is a little confusing! Here's the CSS I'm using: Code:
#300px-LIST {
width:300px;
margin:0px auto;
text-align:left;
padding:0;
}
.right {
float: right;
}
...and the HTML: Code: <div id="300px-LIST"> LINE 1 LEFT<span class="right">LINE 1 RIGHT</span><br /> LINE 2 LEFT<span class="right">LINE 2 RIGHT</span><br /> LINE 3 LEFT<span class="right">LINE 3 RIGHT</span><br /> </div> Any pointers gratefully received! |
|||||||