CSS - Allowed To Define Multiple Classes Of The Same Name? (.some_class, #nana.other_class)

Hi all, I'm a newbie to CSS but I'm giving it a good crack and trying to learn all I can, reading and experimenting etc.

I'm currently building a website for my wife's cake baking business and can't seem to get multiple CSS link classes working and I don't know why. I've been reading various websites on CSS for the last couple of hours but honestly can't see what I've done wrong. Any help would be appreciated.

If you look at the site Ladybirdbakery co uk the top navigation has a .top_nav class that makes it white and the links are supposed to turn yellow and underline when you hover but they just don't. Similarly the small print links at the bottom, the mailto link underlines but the external link to my marketing website doesn't. I've tried re-writing the CSS a few times and put it through the W3 validation and it doesn't pull up any errors on my link classes that seem to be causing this issue. Could anyone offer me some advice so I can get this right and not make the same mistakes in the future?

The CSS lives at the above address /ladybird.css

Thank you very much.

Ant

Hi all

I just wonder why IE6 (and I guess previous versions, too) does not allow a background-image on the <tr> tag of a table?

Code:

tr {
  background-image: url(...);
}

This does just delegate the background image to the child-td-tags, it's not really displayed on the tr tag!

So the following works in Firefox, but not in IE6:

Code:

tr {
  background: transparent url("red.gif") bottom left repeat-x; /* A 50*50px image */
}

td {
  height: 100px;
  background: transparent url("blue.gif") top left repeat-x; /* A 50*50px image */
}

Firefox displays the table cells as expected with red bottom (on the tr tag) and a blue top (on the td tag).

IE6 only displays the blue top.

Is there a clean hack for this? Or do I have to help myself with additional tags (e.g. a div within the td)?

Thanks for help
Josh

This may be a pretty vague question, so I'm sorry in advanced.

But I'm working on one of those recipe websites that you get as an assignment during school. Everything seems to be working, like adding comments, writing up recipes, etc. But for some reason, I'm having a huge issue with apostrophes.
Whenever I want to add a comment to a recipe that involves an apostrophe in any way, it says "Sorry, there was a problem with your comment."

I mostly want to know why this happens on websites instead of getting the direct "this-is-how-you-fix-it" answer, because i've seen this happen on other websites.

I am looking for a robust drop down menu solution. Javascript is fine for controlling the functionality but the items must be positioned with CSS so that they are SEO. At the moment we have full javascrip menu's but the links don't get picked up by the search engines as they are encapsulated.


I have tried the suckerfish stuff and it's a nightmare to be honest. Horrible to customise and very difficult to get a result you actually want.

Hi,

I was just wondering whether it is valid to use the following names in CSS for classes or ID's

Code:

.class1

.class2

#id3

#id4

Are alphanumeric names allowed?

So I have a myspace, and I like things neat and compact. And I like filling out lots of long surveys that most likely no one will ever read, and posting them on my myspace. But when I do that, my page becomes very long and I don't like that. So my idea was something like this:

There would be a series of links across the top that would correspond to the various surverys and/or other content that I deem necessary to share with the world. The many users who visit my page looking for more details about my life click on the link of their choice. The box below all the links shows that particular survey. They read it all, and of course want more, so they click the next link. And poof, a new survery shows up right where the other one was. Compact and efficient.

I've seen sites use a slightly similar system before, often in the help/faq sections. You find the topic you need help with, click on it, and it pops up below it. However I'm pretty sure they used javascript, which isn't allowed on myspace. ("Security" or some other overrated matter). Therefore I would have to do it with CSS. I was thinking have each survey in a different table, all absolute positioned in the same place. Then when you click the link, either all the rest get visibility turned to not visible, (and that one turned to visible), or perhaps the z-index is changed. However I'm not sure you can do that in a link, especially without javascript. So I may need to find an alternative. Unfortunately, I'm not very good with CSS at all, and I'm also not very creative in problem solving.

Does anyone have any ideas on how I could implement this system without javascript or using other pages? (I just get my one little myspace homepage, although I guess I could cheat and use blog pages too. But then all the other blog crap like comments would show up on it).

I apologize if this has already been covered, I tried to look through the more recent posts for something similar and found nothing, and I wasn't really sure what to search for, since it isn't really something concrete I'm working with. I don't necessarily need code, mostly just ideas right now.

Thanks in advance to anyone who helps, and if you don't know what I'm talking about/thought it was too long, tell me and I'll try to clear it up or shorten it up, respectably (and respectfully, as it were).

PS. My myspace account, if you care and didn't already guess, is www.myspace.com/mynameismolotov. Althought it's basically empty right now.

I have a page I'm working on, and while my right column appears correctly in IE (for a change) in FF the right column gets pushed out just a little bit too far.

How do I define, in css, that if the browser is FF to use a certain style, but if not to use my default setting?

Thanks!

Anyone able to guide me to find where to edit form elements?

I want to change the 'check box' and 'drop down menu's'

The picture you can see is part of a PSD which I'm now "converting" into html... anyway, I'd like to know whether there is a CSS attribute that can define the exact width of borders?

Hello,

I am still gettin to grips with CSS, and came across a CSS defenition which looked like this...

Code:

html>body #content {
    ...
    ...
    ...
}

I wondered what the html>body defines? I know the # defines an ID label.

thanks,
JT

I have a table as specified:

Code:

<div id="box"> // 800px set to center it with the rest of page
<table id="box"> // for the rest check the css code
  	<tr>
    	<td id="box_top"></td> 
  	</tr>
  	<tr>
    	<td id="box_left"></td>
    	<td id="box_middle"></td>
    	<td id="box_right"></td>
	</tr>
  	<tr>
    	<td id="box_bottom"></td>
  	</tr>
</table>
   </div>

Code:

div#box {
width: 800px;
height: auto;
}

table#box {
table-layout: fixed;
width: 761px;
height: auto;
border-collapse: collapse;
}

#box_top {
background-image: url(images/table_02.png);
width: 761px;
height: 27px;
}

#box_left {
background-image: url(images/table_05.png);
background-repeat: repeat-y;
width: 19px;
min-height: 200px;
}

#box_middle {
background-image: url(images/table_06.png);
width: 761px;
min-height: 200px;
background-repeat: repeat;
}

#box_right {
background-image: url(images/table_07.png);
background-repeat: repeat-y;
width: 18px;
min-height: 200px;
}

#box_bottom {
background-image: url(images/table_12.png);
width: 761px;
height: 26px;
}

The table is collapsed (not at the minimum height), and the middle BG is not repeating, not even showing up. Is there anything wrong here? I've tried making a table using <div> tags but I can't really get the float / clear down yet. I've been doing CSS for a whole 2 days .


Here is a view of the website. (the first table is using <table>), the 2nd I was trying <div> with floating elements.

heya this doesnt seem to work the second class complety overwrites the first ? id like it to append the second one ? any ideas eg

main.css
.main-header-back {
background-repeat: no-repeat;
background-position: 793px 0px;
overflow: hidden;
}

index.php
.main-header-back {
background-image:url('/images/main/image.gif');
}

I've been trying to clean up my code and in the past I never seemed to make use of predefined html element tags like the H1-H6...and instead I just find that I just make a new class but I was wondering if there is anything wrong with using the H-tags in place of a few classes? Obviously it would have to make logical sense to use, but I'm wondering if there has been any changes in how browsers use those tags in the past few years as I wouldn't want to be using an outdated, soon to be phased out element.

Hi people,

critique this piece of code for a yellowheader and a blue id and tell me what the problem is. It seems both end up as black

<style type="text/css">
h3.Big Bird{color:yellow;}/*Class
Font#CookieM{color:blue;}/*Id*/
</style>

<h3 class="BigBird">Big Bird</h3>
<font Id="CookieM">Cookie Monster</Id>

Hope to hear from you soon.
kaz