|
CSS - Text Transform Not Working
Hello,
If you visit the page http://tombraiders.net/katie/alison/services.html User: letme Pass: in I'm trying to get the links (in the main body, called "left_side" in the CSS) to do an uppercase transform when rolled over. Currently, when you roll over Facials (the only link I have right now) the colour changes, but it doesn't change to uppercase. In the CSS file, located at http://www.tombraiders.net/katie/alison/style.css the bit of code for this is: Code:
#left_side a{
font-weight: bold;
text-decoration: underline;
}
#left_side: a:hover {
COLOR: #667D8E;
text-transform: uppercase;
}
I'm not sure why it's not working. Any help would be appreciated - thanks Similar TutorialsIs it possible to do this using CSS? See attachment! Thanks! I'm trying to get all the text lowercase on a page (client's wishes, not mine) I thought it was working just fine until I tried IE6 on a PC. I have a "text-transform: lowercase" in the body section of my css file. Visit this URL to see what I mean: http://matthiaslot.com/calendar On a mac, FF/Safari work great. On a PC, FF is great. IE however keeps things capitalized... Any idea? I'm pretty sure IE supports this...not sure what's going on. Thanks. Hi guys I'm having trouble trying to convert a CSS navbar, which renders vertically, into an horizontal navbar. Look, here is the HTML Code, and following, the CSS code Code: <div id="menutoolbar">
<ul>
<li><a href="link1.html">Opcion1</a></li>
<li><a href="link2.html">Opcion2</a></li>
<li><a href="link3.html">Opcion3</a></li>
</ul>
</div>
The CSS Code Code: div#menutoolbar {
height: auto;
width: auto;
}
div#menutoolbar li {
height: 21px;
width: 32px;
margin: 0px;
font-family: Tahoma;
font-size: small;
text-align: center;
line-height: 65px;
list-style-type: none;
background-image: url(http://alf.openu.ac.il/www_eng/icon/button.gif);
background-position: center top;
background-repeat: no-repeat;
}
div#menutoolbar li a {
font-weight: bold;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
div#menutoolbar li a:link {
color: blue:
}
div#menutoolbar li a:visited {
color: #900;
}
div#menutoolbar li a:hover {
font-weight: bold;
color: red;
}
div#menutoolbar li a:active {
color: black;
}
Does any1 know which code I have to modify to transform this vertical toolbar into horizontal ? Or maybe to point me to an easy example for doing an horizontal set of css buttons like this example... Thanks... Hi again, fellas. I have another annoyance. I've added some bullets that I want text right next to. I can't get the text to line up directly next to the bullets. I've bordered the two problem div's to make it easier. Could ya'll have a look, please and tell me what is wrong? http://www.bartlett-family.net/test2 Thanks! Chris Sorry solved problem but can somebody post a definite solution to making a body { text-align:center } style work in both IE and firefox? I would like to delete this thread but I don't know how to, as another thread answered the question somewhat ambiguously. Thanks. Hi there, I have this basic CSS: Code: input.text {
font-size: 11px;
border: 1px #93A6C6 solid;
background-color: #FFFFFF;
color: #3F5674;
font-family: Arial, Helvetica, sans-serif;
}
select {
font-size: 11px;
background-color: #FFFFFF;
color: #3F5674;
padding-right: 3px
}
textarea {
font-size: 11px;
border: 1px #93A6C6 solid;
background-color: #FFFFFF;
color: #3F5674;
font-family: Arial, Helvetica, sans-serif; letter-spacing: 0px; word-spacing: 1pt;
}
The input box style isn't working correctly. The text I type in is coming out black and in a larger font than specified. If I just use style input rather than input.text it does work, but then it will put square borders around radio check boxes, which I don't want. Any ideas why it isn't working? This is the form it is being used on: Code: <form name="Albums Search" method="get" action="searchresults.php">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center">
<input name="searchterm" type="text" tabindex="1" size="50" maxlength="75">
</div></td>
<td rowspan="2" align="center" valign="middle"><div align="center">
<input type="submit" value="Search">
</div></td>
</tr>
<tr>
<td><div align="center">Artist:
<input name="searchtype" type="radio" value="artist" checked>
Title:
<input name="searchtype" type="radio" value="title">
Year:
<input name="searchtype" type="radio" value="year">
</div></td>
</tr>
</table>
<p>
<textarea name="textarea"></textarea>
</p>
</form>
Thanks On the mouseover of text in one table/cell, I'm looking to change the background color of a cell in a different table. The code below works in Chrome & IE 8 but not Firefox (3.6.2) I tried it with javascript also. 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.hlt {
background-color: yellow;
color: black;
}
#testtag {
color: #666;
position: absolute;
top: 44px;
left: 0px;
text-align: center;
}
#maintag {
color: #000;
position: absolute;
top: 100px;
left: 0px;
background-color:#CC6
}
</style>
<script type="text/javascript">
function mouse_event(obj, newClass) {
obj.className = newClass;
}
</script>
</head>
<body>
<div id="maintag">
<table width="900" height="37" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150" id="cellone"> </td>
<td width="150" id="celltwo"> </td>
<td width="150" id="celltre"> </td>
<td width="150" id="cellfour"> </td>
<td width="150" id="cellfive"> </td>
<td width="150" id="cellsix"> </td>
</tr>
</table>
</div>
<div id="testtag">
<table width="900" height="37" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150"><a href="#" onmouseover="cellone.className = 'hlt';" onmouseout="cellone.className = '';">Data 1.1</a></td>
<td width="150"><a href="#" onmouseover="celltwo.className = 'hlt';" onmouseout="celltwo.className = '';">Data 1.2</td>
<td width="150"><a href="#" onmouseover="mouse_event(celltre, 'hlt');" onmouseout="mouse_event(celltre, '');">Data 1.3</td>
<td width="150"><a href="#" onmouseover="cellfour.className = 'hlt';" onmouseout="cellfour.className = '';">Data 2.1</td>
<td width="150"><a href="#" onmouseover="cellfive.className = 'hlt';" onmouseout="cellfive.className = '';">Data 2.2</td>
<td width="150"><a href="#" onmouseover="cellsix.className = 'hlt';" onmouseout="cellsix.className = '';">Data 2.3</td>
</tr>
</table>
</div>
</body>
</html>
OK, I have <h1> and a class .footer_header_link. Both should center the text. But the class code isn't being centered. I thought this would be simple, but I must be overlooking something. Here's my css: Code: h1 {
font-family:arial black;
color:#666666;
font-size:12pt;
margin: 0;
padding: 2px 0;
text-align:center;
}
.footer_header_link{
text-align:center;
font-family:arial black;
color:#666666;
font-size:12pt;
margin: 0;
padding: 2px 0;
}
You can see a sample testhere. Scroll down the 3 column bullet point list. You will see the headers with an underline aren't centered. They have a class of "footer_header_link" Any ideas? thanks 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 Not sure if I'm missing something or if there's a hack for FF (and possibly other browsers), but on hover, text-decoration:underline doesn't seem to work in FF. Here's the HTML: Code: <div class="prod_container"> <div class="leftprods"> <div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_ta.gif" style="border:0;" alt="Time and Attendance" /><div class="prod_text">Time and Attendance</div></a></div><div> </div> <div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_devkit.gif" style="border:0" alt="Development Kits" /><div class="prod_text">Development Kits</div></a></div> </div> <div class="rightprods"> <div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_access.gif" style="border:0" alt="Access Control" /><div class="prod_text">Access Control</div></a></div><div> </div> <div style="text-align:center; margin:auto;"><a href="#"><img src="images/prod_finger.gif" style="border:0" alt="Fingerprint Readers" /><div class="prod_text">Fingerprint Readers</div></a></div> </div> </div> Here's the CSS: Code:
.leftprods { text-align:left; float:left; }
.leftprods a{ text-decoration:none; color:green; }
.rightprods { text-align:left; float:right; }
.rightprods a{ text-decoration:none; color:green; }
.prod_text { font-size:16px; color:green; font-weight:bold; padding-bottom:5px; }
.prod_container a:hover { text-decoration:underline; }
Thanks. I have a <p> tag with text inside of it with a height of 20px and width of 100px. Horizontal text alignment works fine within in, but I want the text to sit in the middle of the tag and I just can't do it. It defaults to sitting at the top. I try vertical-align: middle, but that doesn't work. None of the the vertical aligns do anything in fact When i float my div to the left, i cant seem to get the text to align right, can someone show me a way out of this horriable predicament i have found my self in!! 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 /> Everyone, I'm having an issue with the first DIV intensive site I am doing: IE will not recognize links or allow me to highlight text, or fill in forms in the left side of DIVs that I have on a site I am developing: httP://www.ephire.com/mack If you try and click the "more" link up top, or goto the "contact" link, no joy in IE, but Firefox works just fine: Here is the code I think is the culprit: Code: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_bg.png', sizingMethod=scale); And here is the whole page. I'm seriously stumped...I tried going through and deleting things line by line and jacking with settings, and the only thing that allowed anything to work was messing with the section of code above. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>MACK Insurance</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style>
* html #wrapper {
background: url(images/body_t.gif) 24px 0px no-repeat;
backgro\und: none;
}
* html #ie {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_t.png');
height: 39px;
width: 434px;
position: absolute;
margin-left: 24px;
}
* html #body {
background: url(images/body_bg.gif);
backgro\und: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_bg.png', sizingMethod=scale);
}
.footerie {
display: block;
disp\lay: none;
}
.footer {
display: none;
disp\lay: block;
}
</style>
<![endif]-->
</head>
<body>
<center><table><tr><td> <div id="ie"></div>
<div id="wrapper">
<h1><a href="/"><img src="images/logo.jpg" width="200" height="30" alt="logo" /></a></h1>
<div id="body">
<div class="inner">
<div id="content"><div>
<font face="Arial" size="2"><b>Health, Life, Disability</b></font>
<br>Designed Benefits Associates is dedicated to finding the best health care program to suit the needs of a family or individual. <br><br>Our specialty is paired programs that protect not one, or two, but multiple areas of life. <a href="index_01.html"><img src="images/btn_more.gif" width="52" height="6" alt="more" /></a>
</div></div><!-- end content -->
<div id="page_title">
<img src="images/title_main_page.gif" width="47" height="200" alt="main page" />
</div><!-- end page_title -->
<div id="news"><div><div>
<font face="Arial" size="1"><b>Things to Consider</b></font>
<img src="images/picture_3.jpg" width="96" height="56" alt="picture 3" />
<p>04-20-2006</p>
<p>As your insurance broker, we daily search for the best priced health plans with the optimum benefits, so you can spend time doing what's important.<br><br><br></p>
</div></div></div><!-- end news -->
<div class="clear"></div>
</div><!-- end .inner -->
<div id="footer">
<img src="images/footer.gif" width="435" height="196" alt="footer" class="footer" />
</div><!-- end footer -->
</div><!-- end body -->
<div id="paper">
<div class="inner">
<font face="Arial" size="2"><a href="http://www.ephire.com"><b>Health</b></a></font>
<a href="http://www.ephire.com"><img src="images/picture_1.jpg" width="130" height="74" alt="picture 1" /></a>
<br><br>
<font face="Arial" size="2"><a href="http://www.ephire.com"><b>Life</b></a></font>
<a href="http://www.ephire.com"><img src="images/picture_2.jpg" width="130" height="74" alt="picture 2" /></a>
<br><br>
<font face="Arial" size="2"><a href="http://www.ephire.com"><b>Disability</b></a></font>
<a href="http://www.ephire.com"><img src="images/picture_4.jpg" width="130" height="74" alt="picture 4" /></a>
<p>A single plan can add peace of mind, all three together can insure stability.</p>
<center><font face="Arial" size="1"><a href="contact.html"><b>Contact</b></a> - <a href="index.html"><b>Home</b></a> - <a href="testimony.html"><b>Testimony</a></font></center>
</div><!-- end .inner -->
</div><!-- end paper -->
</div><!-- end wrapper -->
<div style="clear:both;position:relative;display:block;margin-top:530px;" >
</div></td></tr></table></center>
<center><br><table><tr><td> <br><br><br><center>Powered by <a href="http://www.ephire.com">ephire</a></center></td></tr></table>
</body>
</html>
Any help is appreciated~ I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced. any idea ? tutorial? let me know if i need to explain more. Good Morning All, Been having a slight problem with the visual in the screenshot below. The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement. ***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned. text ----------------------------------------------------------- rather than text ------ and obviously by the css, the underline on the headers is a small image, repeated - x. Please see relevant css information. * (line 23) { margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; } h2, h3, h4, h5, h6 (line 101) { font-size: 1.2em; font-weight: normal; padding-bottom: 4px; margin-top: 0.6em; margin-right: 0pt; margin-bottom: 0.8em; margin-left: 0pt; text-align: center; } .contentArea h2, #secondaryNavigation h2 (line 114) { background-color: transparent; background-image: url("../images/h2_gradient_bg.gif"); background-repeat: repeat-x; background-attachment: scroll; background-position: left bottom; color: #0066cc; } Many Thanks in advance. Marc. 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 know how to position regular text using the in-line style "text-align:right", but when I try to do that with a link I get nowhere. Simplified example: Code: <html> <body> <td><p style="text-align:right">Google</p></td> <td><a href="http://www.google.com" style="text-align:right">Google</a></td> <td><a style="text-align:right" href="http://www.google.com">Google</a></td> <td><span style="text-align:right"><a href="http://www.google.com">Google</a></span></td> <td style="text-align:right"><a href="http://www.google.com" style="text-align:right">Google</a></td> <span style="text-align:right"><td><a href="http://www.google.com" style="text-align:right">Google</a></td></span> </body> </html> The first body line works fine to move the text to the right, but the link in lines 2-5 of the body are stuck on the left. Any suggestions? (My actual code invokes a class from a css page in a particular <td> and I'm trying to force a link in that <td> to the right using an in-line style; while I can do that for regular text I haven't found the secret of doing that for a link.) I saw a website that was throwing text that was written and recalling it with a link into a textbox...are there any tuts or anyone help me out with this one thanx aim rpduece i have almost perfected the text wrap for this page.... http://defunctgames.com/helpfix/relevent.php4 problem is, i put a margin-top:50px on the image, and i want the text above the image, to flow all the way to the left. thus fully wraping the text. |
|||||||