|
CSS - A Class Isn't Working... Huh?
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 Similar TutorialsI 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. hi, i am using a navigation bar at the top of my pages (http://sa-ewb.org.uk ) that has been designed with CSS and java (thanks to http://www.gazingus.org ). I have set it up so that visited links have no decoration and do not change colour in the navigation, as opposed to the main body of text where they do behave as normal links. i.e. a:visited {.......normal behaviour and a.actuator:visited {.......no changes to appearance this works fine in firefox (gotta love it!) but in internet explorer, for some reason, it ignores the 'a class="actuator"' and uses my normal link rules. (gotta... errr... not love it!) any ideas? many thanks, jim. 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; } please please somebody help me with this... i have given my links some effects with this code: Code: <style type="text/css">
<!--
a img {border: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; border-bottom:3px double; color: #000000;}
a.head,
a.head:link { text-decoration: none; }
a.head:hover { text-decoration: none; }
//-->
</style>
it works fine on my links, but the class "head" doesn't seem to be effecting the link with that class....it still has the same hover effect as the other links. I have class="head" in the link tag of the element, but it still doesn't work. I want no effect on this link since it is an image and I don't want a double-underline on it. The only thing I can think of is that maybe the head image isnt being effected correctly because it is an include file, but I don't think that really matters. Thanks! I'm not sure if we are allowed to post urls here or not, didn't see anything against it but I'm sure someone will inform me if we can or can't. Anyways I'm having problems getting the "current" class to work for the active page. I want the current page to use the rollover id. This is a code snippet that should be enough to figure out how I am doing my navigation. I am using a single image and shifting it depending on the state it's in. CSS Code: Original - CSS Code .nav1 {float:left; position:relative;display:block;} .nav1 li {margin:0px; padding:0px; display:inline;} .nav1 li a {height:30px; float:left; list-style:none;} a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/ #home a{ float:left; background-image: url(images/nav_main_1.png); display: block; height: 30px; width: 132px; text-decoration: none; background-position: 0px -31px; } } #home a:hover, a.current{ background-image: url(images/nav_main_1.png); background-position: 0px 0px; } #news a{ float:left; background-image: url(images/nav_main_2.png); display: block; height: 30px; width: 131px; text-decoration: none; background-position: 0px -31px; } #news a:hover, a.current { background-image: url(images/nav_main_2.png); background-position: 0px 0px; }
.nav1 {float:left; position:relative;display:block;}
html4strict Code: Original - html4strict Code <ul class="nav1"> <li id="home" class="current"><a href="#"><span>Home</span></a></li> <li id="news"><a href="#"><span>News</span></a></li> </ul> <ul class="nav1"> Any help is greatly appreciated, I would imagine I am missing something simple. i am trying to get the bottom part of a table border to have a thin line below it, but this code does not work can someone please tweak it so it does. Code:
<style type="text/css">
.horizontalline {
border-height: 2px;
border-color: #FFFFFF;
border-bottom-style: solid;
width: 100%;
}
</style>
<table>
<tr valign="bottom">
<td colspan="4" class="horizontalline"><div align="right">Text under image:
<input name="top_left_text" type="text" size="60" value="abcdefg">
</div></td>
</tr>
</table>
hey, I got a table, every <td> in the table got the css class .regular. (<td class='regular'>). When the user moves their mouse over a row, that row should change color. This works with the following code: <tr onmouseover='this.className=\"hoverRow\"'> However, this only works if the td's in that row have no class set yet. And since all td's in my table have a class set allready, i cant use this. How can i overwrite the class of the td's by the class for the whole row? thanks in advance Using the following example: 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>Test</title>
<style type="text/css">
a
{
display: block;
}
a.one.on, a:hover.one, a:hover.one.on
{
color: red;
}
a.two.on, a:hover.two, a:hover.two.on
{
color: orange;
}
a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
</style>
</head>
<body>
<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>
<p> </p>
<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>
</body>
</html>
Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style: Code: a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE. I've read several forums and know that the technique I'm trying to achieve is possible, however I can't seem to get it to work. Basically I'm trying to shift the background positions of both the list item I'm hovering over and the next list item. I'm sure its just a syntax error and not a logic error, anyways the code is below - any help would be greatly appreciated! Code:
HTML Code
<div class="menu">
<ul>
<li><a href="#" class="search"></a></li>
<li><a href="#" class="battery"></a></li>
<li><a href="#" class="cart"></a></li>
<li><a href="#" class="contact"></a></li>
</ul>
</div>
CSS
.search, .contact, .cart, .battery
{
width:100px;
height:30px;
margin-left:-1px;
display:block;
}
.search
{
background-image:url(Images/search.png);
}
.contact
{
background-image:url(Images/contact.png);
}
.cart
{
background-image:url(Images/cart.png);
}
.battery
{
background-image:url(Images/battery.png);
}
ul li a.search:hover
{
background-position:0px 60px;
}
ul li a.search:hover ul li a[class=battery]
{
background-position:0px 60px;
}
Hi, I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser. Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important. I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML Here is my Html PHP Code: <DIV id="nav"> <ul> <li id="1"><a href="Home">Home</a></li> <li id="2"><a href="About-us">About us</a></li> <li id="3"><a href="FlexNews">FlexNews</A></li> <li id="4"><a href="Careers">Careers</A></li> <li id="5"><a href="Contact">Contact</A></li> </ul> </div> Pretty straight forward, now my css PHP Code: #nav { width:1005px; vertical-align: middle; text-align: left; } #nav ul { list-style: none; padding: 0; margin: 0; } #nav li { float: left; text-align: left; } #1 a{ line-height: 20px; float: left; width: 215px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #1 a:hover { line-height: 20px; float: left; width: 215px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #2 a{ line-height: 20px; float: left; width: 211px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #2 a:hover { line-height: 20px; float: left; width: 211px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #3 a { line-height: 20px; float: left; width: 211px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #3 a:hover { line-height: 20px; float: left; width: 211px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #4 a { line-height: 20px; float: left; width: 184px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #4 a:hover { line-height: 20px; float: left; width: 184px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #5 a { line-height: 20px; float: left; width: 183px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; } #5 a:hover { line-height: 20px; float: left; width: 183px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; } Here is an exmple link http://dev.121design.co.uk/flextrade2/ Works fine in IE but not in Firefox, heres hopling someone can help. Thanks in Advance, tried so many different methods and none seem to work. Cheers, Stuart Sorry for the lousy title, can't come up with better wording.... What I'm trying to say is can someone give me an example code of a css syntax that accept one css classname and add a few more properties to it under a different class name. Sort of like merging two classname into one. Thanks... The book i am reading does not clear this up. When would you use class vs id to put elements in different catagories? why not use all id? It seems to make more sense.. ie. make all headers id="header" and divs also class. thank you in advance I'm using ASP.NET 2.0 for my site. I already have a CSS that is working for the site; however, because an ASP.NET lable requires CSS Class, how do I convert my current CSS to a CSS Class? I know that a CSS class start with a period then a unique name. The problem is how do I implement the li, ul, a, and so on. Here is what I have that I want to convert to a CSS Class. #nav { padding: 0; clear: both; } body.main #nav, body.blogger #nav { float:right; width: 220px; \width: 250px; w\idth: 220px; margin: 10px 10px 0 0; padding: 0; } body.second #nav { float:left; width: 200px; \width: 210px; w\idth: 200px; padding:0 0 20px; margin: 0; } body.second #nav img { padding-bottom: 10px; } #nav a { color: #006; } body.second #nav ul { list-style: none; padding: 0 0 0 5px; margin: 0; } body.second #nav ul li { margin: 0 0 7px 0; font-size: 11px; } body.second #nav ul li ul li { margin: 0 0 5px 15px; } .skip { display:none; } /* end #nav */ #content p, #nav p { padding: 0; margin-top: 0; margin-bottom: 10px; line-height: 140%; } #content li, #content ol { margin-top: 0; line-height: 140%; } code, pre { font-family:"Courier New", Courier, mono, monospace; } /* definition lists, all that and a bag of chips! */ #content dl { margin:0px; padding:0; } #content dt { font-weight: bold; } #content dd { margin-top: 0; margin-right: 0; margin-bottom: 10px; margin-left: 0; padding: 0 5px 0 0; } /* end definition list*/ Any help is appreciated. So I want to create a really simple css file that uses a lot of the same styles. For example I may create a box that takes up two fifths of the page, and is floated left or right, similarly I may have a box that takes up three fifths, or four fifths etc. The main thing here is that I'm thinking the specifics will be placed inside an ID like so: Code:
#twoFifths {width:275px; padding: 0px 12px 0px 50px;}
#threeFifths {width:375px; padding: 0px 50px 0px 12px;}
And then to handle the float I'd use a class like so: Code:
.floatRight{float:right;}
.floatLeft{float:left;}
Is this considered good practice? Obviously as I generate layouts I may want to float either right or left so having an ID for every single thing I may want to use would be a little overwhelming. The problem with this of course is that I can't call an ID twice in a page, and I can't have more than one class... so for example: Code: <div id="templateBlueBox" class="floatRight"> <h2>Six free lessons</h2> <p>These free Lessons are great to read online or print out and carry with you.</p> </div> <div id="templateGreenBox" class="floatRight"> <h2>New Features</h2> <p>Some fun, helpful study tools to help you get more out of every Lesson. Check them out!</p> </div> <div id="templateOrangeBox" class="floatRight"> <h2>Sign up for email updates</h2> <p>So we can let you know when you can subscribe to get it every week.</p> </div> <div id="templatePinkBox" class="floatleft"> <h2>Send us feedback</h2> <p>Is it the coolest thing ever (or is it just okay)? Tell us what you think!</p> </div> <div id="templateBlueBox" class="floatLeft"> <h2>Submit photos</h2> <p> You can be part it..</p> </div> So as you can see I'm having to repeat the id templateBlueBox. Is there a better approach for accomplishing this? In CSS, which would be more appropriate (or I suppose semantically correct) to use, p.text or .text p ? P representing the <p> tag, and "text" representing the class "text". Any info or links to pages with info on this matter would be greatly appreciated! Which is better to use id (#) in CSS or to use class (.) ?? does it affect website rank? I am new to CSS and confused about when to use id # and when to use class . Some enlightenment on the benefits/purpose of each would be helpful. I have read several tutorials - but the same pretty much the same to me so I must be missing something Thanks! Problem solved. When defining css in a webpage, it can be done using either a class or id. My understanding is that css uses . notation with classes and # notation with id's, regardless of whether the actual css is in the webpage itself of linked externally. Please correct me in error. My css uses classes and external . notation. When I use id's only and # notation exernally, I lose all my styling. Its only when I use the # notation internally that the styling works. In order to use external css I need to declare both a class and id and dot notation. Internally only an id. Is this correct behaviour? I have a form with a list of things. The number of things in the list is variable, depending on certain factor, different things, different numbers of things. Next to each thing is a radio button. There is a question with two radio buttons, "yes" and "no". When "no" is selected, I want the radio buttons to be disabled, and the color of the text to change to gray. For the radio buttons, I have a simple JS function: javascript Code: Original - javascript Code function enableCFFID() { document.cartform.cffid.disabled=false; } function disableCFFID() { document.cartform.cffid.disabled=true; }
For the test that goes with each thing, obviously I don't want to have to assign unique ID (perhaps in a span tag that encloses the text). I would want a common name for all of them. But this would mean I can't use getElementById. What other method can I use to change the class for a group of span tags who's number is variable? |
|||||||