|
CSS - Style/span Class Not Working In Ff
Hi,
I have this style for font size. I then use span class to use it, but it only works in IE and not FF. Any ideas why? Have i got something wrong with it? PHP Code: .11px { font-family: verdana, arial, tahoma; font-size: 11px; } Similar TutorialsI 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 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 all I've got a styled ul+li element, and I've put a new color class in a span tag, for a link li a, li a:active, etc { color: #00FF00; } li a:hover { color: #00AA00; } spanclass a, span a:active, etc { color: #00FF00; } spanclass a:hover, etc { color: #00AA00; } <li>hello, <span class="spanclass"><a href="#">this is a link</a></span></li> Except it's completely ignoring the span class colors... Anyone know why? 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 all, I have this piece of coding (which I'm pretty new at) that allows a "display:none;" span to appear on a link:hover. It works great in Firefox, but I can't for the life of me find why it isn't working in IE. I did this once with an Unordered List and it worked in IE, but now that I have used a table to structure the menu, it isn't working. here is the site: magicbeanz.blogsome.com I've attached the style sheet and html to this post. The relavent coding should be near the bottom. See #catmenu and the #books, #movies, #other, #hobbies, #games, divs. I really hope someone can help. Thanks in advance!! Oh, and I wouldn't mind some feedback on the coding and design. I'm back to working on my skills after a long break >< Hey there Does anyone know why my code he a.linky:hover .spany{display:block} ...does not work in ie6 but works SWEET in FF? CSS: .linky{z-index:200; display:block; position:relative; cursorointer; } .spany{ display:none; position:absolute; left:0px; top:0px; width:120px; height:120px; background:#ffffff; } a.linky:hover .spany{display:block; } HTML: <a class="linky" href="http://www.domain.co.nz/"> <span class="spany"></span> <img src="http://www.domain.co.nz/thumb.jpg" width="120" height="120" border="0" style="vertical-align:bottom"/> </a> Thanks heaps guys for even looking! I am trying to retrieve the color and background attributes of a CSS class defined in a .css external file. I would like to retrieve the attributes in a JavaScript function, given the class name. I am trying to invert the colors of a table cell background and hyperlink text. --begin style sheet-- table.submenu { background:#66CCFF; position:absolute; visibility:hidden; font:8pt Arial; font-weight:bold; color:#FFFFFF; text-decoration:none; } a.menulink:link,a.menulink:visited,a.menulink:active { color:#FFFFFF; text-decoration:none; font-weight:bold; } --end style sheet- --begin javascript-- function invertmenu(elmntID,elmntClass) { //the first two lines of code do not work var textColor = elmntClass.style.color; var backColor = elmntClass.style.background; document.all[elmntID + "link"].style.color = backColor; document.all[elmntID].style.background = textColor; } --end javascript-- --begin html code-- <tr><td class="submenu" id="techdept1" onmouseover="invertmenu('techdept1','submenu')" onmouseout="invertmenu('techdept1','submenu')"><a href="t40/default.asp" class="menulink" id="techdept1link">T-40</a></td></tr> --end html code-- thanks for your help! - tim I've got a dynamically generated <select> list, where the <option>s are styled using both 'class' and 'style' - like in the following example: PHP Code: <style> .thm_img { height:30px; } </style> <select> <option class="thm_img" style="background: #99CC00;" value="1" >Image 1</option> <option class="thm_img" style="background: #FF3300;" value="2" >Image 2</option> <option class="thm_img" style="background: #CC9999;" value="3" selected="selected" >Image 3</option> </select> No big deal - pretty standard stuff. The "selected" <option> displays in the 'visible' part of the field and also as part of the drop list ... as one would expect. But, and this is where I am baffled - the attributes from both class and style show up in the option listing, whilst only the 'class' attributes show up in the 'visible' part of the list. If I'm not making any sense here, just cut and paste the above code into an html editor to see what I mean. You'd note that 'Image 3' has a white background in the visible part of the field, but a coloured background in the drop list. Would anyone know why the attributes from the 'style' aren't being applied but that from the 'class' is ? ... and how (if possible) would I resolve this without combining the style into the class (since combining them is not an option - no pun intended). Cheers 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 /> Is there a better way to declare custom fonts than doig like such style sheet .bluesmall {font-family: verdana} .bluesmall {color: blue} .bluesmall {font-size: 10px} /style sheet content <span class="bluesmall">example text</span> 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...? Hello, I am trying to do some tweaking on my website to clear up some "standards" issues. For example I get this error "The P ALIGN attribute is deprecated in HTML 4.01". What they want is for me to put the align into a CSS file to correct this. I personally I am NOT found of CSS files I just like putting things into the source... But it now seems if I want things totally error free I am going to need to start using one. If I put the CSS code directly into a HTM/HTML file all works ok. My problem is if I try and use a style.css file NOTHING works. I get NO errors like this in the CSS file or html but the call to p align=justify or center is just ignored. before the </head> just above it I use this line <link href="style.css" rel="stylesheet" type="text/css" media="print"> I try and call the CSS file like this in the html code <p class="j"> My style.css file has this in it p.j { text-align: justify; } p.c { text-align: center; } From everything I read this is 100% correct... yet it does not work. Thanks in advance for any advice you might have. whonoes I'm having a problem getting the text in my nav bar to be formatted with my CSS sheet. ***HTML*** <div id="navbar"> <ul id="nav"> <li class="current_page_item"><a href="">Home</a></li> <li><a href="">Features</a></li> <li><a href="">Purchase</a></li> <li><a href="">Theme Demo</a></li> <li><a href="">Blog</a></li> <li><a href="">Affiliates</a></li> <li><a href="">Support</a></li> <li><a href="">Contact Us</a></li> </ul> </div> ***CSS*** #navbar { width: 960px; height: 47px; do not change Code: Original - do not change Code font-size: 12px; font-family: Tahoma, Geneva, sans-serif; color: #FFF; font-weight: bold; font-size: 12px; font-family: Tahoma, Geneva, sans-serif; color: #FFF; font-weight: bold; margin: 0px auto 0px; padding: 0px; } The text values aren't able to change for some reason, but the width and height values, padding, etc are. If someone could please help me trouble shoot that would be great. Thank you Paul Hello all, I'm modifying Cory LaViska's PHP_File_Tree cascading style sheet, default.css, to remove the round bullets from the LI tags. Browsed through the forums to find a solution to my problem with no luck. Please, take a look at my test website: www seemyinvestments dot com There, you can see what I'm talking about. The webpage lists a directory tree on the left-hand side, and I want to get rid of the bullets (the little dark dots). I've tried a number of ways of implementing 'list-style-type: none;' (You'll see one attempt below labelled 'not working!') Doesn't work for Firfox or IE. Any suggestions? Thanks. Code:
/* PHP File Tree Default Theme
By Cory LaViska (http://abeautifulsite.net/)
Featuring the Silk Icon Set from famfamfam (http://www.famfamfam.com/lab/icons/silk/)
*/
.php-file-tree {
font-family: Georgia;
font-size: 12px;
letter-spacing: 1px;
line-height: 1.5;
}
.php-file-tree A {
color: #000000;
text-decoration: none;
}
.php-file-tree A:hover {
color: #666666;
}
.php-file-tree .open {
font-style: italic;
}
.php-file-tree .closed {
font-style: normal;
}
.php-file-tree .pft-directory {
list-style-image: url(images/directory.png);
}
.php-file-tree .pft-directory-empty {
list-style-image: url(images/directory_empty.png);
}
/* Default file */
.php-file-tree LI.pft-file { list-style-image: url(images/file.png); }
/* Additional file types */
.php-file-tree LI.ext-3gp { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-afp { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-afpa { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-asp { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-aspx { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-avi { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-bat { list-style-image: url(images/application.png); }
.php-file-tree LI.ext-bmp { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-c { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-cfm { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-cgi { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-com { list-style-image: url(images/application.png); }
.php-file-tree LI.ext-cpp { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-css { list-style-image: url(images/css.png); }
.php-file-tree LI.ext-doc { list-style-image: url(images/doc.png); }
.php-file-tree LI.ext-exe { list-style-image: url(images/application.png); }
.php-file-tree LI.ext-gif { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-fla { list-style-image: url(images/flash.png); }
.php-file-tree LI.ext-h { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-htm { list-style-image: url(images/html.png); }
.php-file-tree LI.ext-html { list-style-image: url(images/html.png); }
.php-file-tree LI.ext-jar { list-style-image: url(images/java.png); }
.php-file-tree LI.ext-jpg { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-jpeg { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-js { list-style-image: url(images/script.png); }
.php-file-tree LI.ext-lasso { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-log { list-style-image: url(images/txt.png); }
.php-file-tree LI.ext-m4p { list-style-image: url(images/music.png); }
.php-file-tree LI.ext-mov { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-mp3 { list-style-image: url(images/music.png); }
.php-file-tree LI.ext-mp4 { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-mpg { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-mpeg { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-ogg { list-style-image: url(images/music.png); }
.php-file-tree LI.ext-pcx { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-pdf { list-style-image: url(images/pdf.png); }
not working! ---> .php-file-tree LI.ext-php { list-style-image: url(images/php.png); list-style-type: none; }
.php-file-tree LI.ext-png { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-ppt { list-style-image: url(images/ppt.png); }
.php-file-tree LI.ext-psd { list-style-image: url(images/psd.png); }
.php-file-tree LI.ext-pl { list-style-image: url(images/script.png); }
.php-file-tree LI.ext-py { list-style-image: url(images/script.png); }
.php-file-tree LI.ext-rb { list-style-image: url(images/ruby.png); }
.php-file-tree LI.ext-rbx { list-style-image: url(images/ruby.png); }
.php-file-tree LI.ext-rhtml { list-style-image: url(images/ruby.png); }
.php-file-tree LI.ext-rpm { list-style-image: url(images/linux.png); }
.php-file-tree LI.ext-ruby { list-style-image: url(images/ruby.png); }
.php-file-tree LI.ext-sql { list-style-image: url(images/db.png); }
.php-file-tree LI.ext-swf { list-style-image: url(images/flash.png); }
.php-file-tree LI.ext-tif { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-tiff { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-txt { list-style-image: url(images/txt.png); }
.php-file-tree LI.ext-vb { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-wav { list-style-image: url(images/music.png); }
.php-file-tree LI.ext-wmv { list-style-image: url(images/film.png); }
.php-file-tree LI.ext-xls { list-style-image: url(images/xls.png); }
.php-file-tree LI.ext-xml { list-style-image: url(images/code.png); }
.php-file-tree LI.ext-zip { list-style-image: url(images/zip.png); }
/* You can add millions of these... */
Hi, At my site webpage http://www.pt2fansite.com/demo/monsters.pl there is a list on the middle where after the name of monster the colors changes that table has Code: style="margin-left: 6; padding-top: 2px;" but once i putted it all together it stoped working and is no longer giving the space to it.... What could be possible making it not work ? i have tried to put it into my style.css file and out of it and both ways it does not work. thanks for any help Hi there, I am trying to style a button with inline css, however, it is not working. I think it is the background images and the single quotes. This is my code: PHP Code: $options .= '<input style=\"margin-top: 5px;background-image: url(\'button_bg.jpg\'); background-repeat:repeat scroll 0%;background-color: #71d63e;border:0px #234B69 solid;color:#ffffff;font-family: arial, Verdana;font-size:11px; font-weight: bold;height:26px;padding:5px;width: 40px;vertical-align: middle\" type="submit" name="upgrade" value="Upgrade"></form>'; Any ideas what I have wrong? Hello, My unvisted links within a div section are not working, they default to Red which is set up in the CSS as a catch-all. I see this happenning with IE 6.x and FireFox 1.5 and netscape 7 Example HTML code where the unvisited link appears in Red and it should be in Grey: Code: <div class=medGray> <a href="/data/tmp/E300vV60cB.s5ukal.diblu.tmp">Download</a> extracted device records (4 records). </div> Here's my snippet from my CSS file: Code:
a.medGray:link {
text-decoration: underline;
FONT-SIZE: 12px; COLOR: #666666; FONT-FAMILY: Verdana, Tahoma, sans-serif;
}
a.medGray:visited { color:#666666; }
a.medGray:hover { text-decoration: underline; }
a.medGray:active { color:#666666; }
/*-- Default Red--*/
a:link {
text-decoration: underline;
font-family:Verdana, Arial, Helvetica; font-size:12px; color:#CC0000; }
a:visited { color:#999999; }
a:hover { text-decoration:underline }
a:active { color:#CCCCCC; }
Hi all. Code from the php file: PHP Code: <?php /* If this is a monthly archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?> <p class="browsing">You are currently browsing the <a href="<?php echo get_settings('siteurl'); ?>"><?php echo bloginfo('name'); ?></a> weblog archives.</p> <?php } ?> Page is at http://www.bartlett-family.net/chri...tt/blog2/?cat=1 You can see on the right where the text is right below the blog search. Why is the text not formatted to the left? CSS code: Code:
.browsing {
text-align: left;
}
Simple enough. I've put in other CSS attributes just to test. Absurd things like font-family: Arial, Helvetica, Sans-Serif; & font-size: 8em; just to see if I was missing something small. Nothing, the class just isn't working. Huh? Chris gday i have a bunch of tables that are only to be shown based on a javascript call, but for some reason, firefox is rendering the space of the table, where as IE 7 isn't.. eg. <table style"display: none;"></table> with a whole bunch of rows in it.. the webpage still loads blank space everywhere, rather than just empty space thoughts? I have used several image classes in my css to control the thickness of the border like so .. img.left { border: #FF66CC solid 0.02em; border-left: #FF66CC solid 0em; border-top: #FF66CC solid 0em; } img.right { border: #FF66CC solid 0.01em; border-right: #FF66CC solid 0em; border-bottom: #FF66CC solid 0em; } But for some reason this doesn't sho up in Safari or IE5.2 (on the mac) and also I checked it on Opera 5, and it doesnt show the borders on the image? any ideas? thanks for your time. |
|||||||