6 replies [Last post]
binargs
Offline
Enthusiast
Last seen: 7 years 32 weeks ago
Timezone: GMT-4
Joined: 2005-07-21
Posts: 85
Points: 8

hi all i am adding new pages and this error occured.

in the exact same html and same css, i originally had a id for css that have the margin set for a table so it does not look aligned and stickes out to the left, which i want. but i found that i need multiple instances of this id so i changed it to .bookmark instead of #bookmark and same in the html file.

how ever, with the minor change from # to . and id to class, the margin-left selector no longer works, i have absolutely no idea why, i tried pixels and all but nothing works.

<table class ="bookmark" cellpadding="10">
			<tr>
				<th colspan="2">Reference</th>
			</tr>
			<tr>
				<th>Site Name</th>
				<th>Description</th>
			</tr>
			<tr>
				<td><a 

href="http://en.wikipedia.org"><img 

src="http://upload.wikimedia.org/wikipedia/meta/9/9f/Wikimedia-button1

.png"></a></td>
				<td>Wikipedia, the ultimate free 

online encyclopedia, is available in more than 100 languages and have 

more than 12,000 active contributors. It is an encyclopedia that will 

never be outdated.</td>
			</tr>
			</table>

.bookmark
{
	font-family: "tahoma", "arial", sans-serif;
	font-size: 85%;
	text-align: left;
	border: 1px;
	border-style: solid;
	border-color: #c0c0c0;
	margin-left: 2em;
}

the first one is wrong and with class, the second picture is right and when it's id, and yes i did change the html as well

so anyone can get me to get the class to work since i need multi-instance for it?

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 33 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

.class and #id makes all the difference?

Sounds like an specifity problem, Do you have the full CSS/HTML?

If you have

<div class="one">
     <div id="two">
          <h1>Hello!</div>
     </div>
</div>

With

#one h1
{
    color: indianred;
}

.two h1
{
     color: goldenrod
}

The title will me redish because ID's have a higer weighting when working out rule specifity.

but if you change the two from a class to an ID it'll go golden as it's then has an equal about of weight as one but comes after it in the code.

If that makes sense....

udi
Offline
Regular
London
Last seen: 12 years 29 weeks ago
London
Joined: 2005-09-20
Posts: 38
Points: 0

.class and #id makes all the difference?

If you could show us the code

That would help

binargs
Offline
Enthusiast
Last seen: 7 years 32 weeks ago
Timezone: GMT-4
Joined: 2005-07-21
Posts: 85
Points: 8

.class and #id makes all the difference?

ok i uploaded the wrong html and the updated css file

honestpc.com/htmls/resources/internet.html

honestpc.com/htmls/layout.css[/url]

udi
Offline
Regular
London
Last seen: 12 years 29 weeks ago
London
Joined: 2005-09-20
Posts: 38
Points: 0

.class and #id makes all the difference?

I ran your page through the w3c validator and found some errors.

Maybe after you rectify that, you might not have a problem...

Check the link below:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.honestpc.com%2Fhtmls%2Fresources%2Finternet.html

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

.class and #id makes all the difference?

Briski was correct with his take on specificity.

You have these two rules:

.content p, .content table
{
margin-left: 85px;
}

and :

.bookmark
{
font-family: "tahoma", "arial", sans-serif;
font-size: 85%;
text-align: left;
border: 1px;
border-style: solid;
border-color: #c0c0c0;
margin-left: 2em;
}

In the first you are giving any table that has an ancestor of the class .content a left margin, in the second you are saying any element with a class of .bookmark should have a left margin of 2em. .bookmark is a class of table but the first rule is far more specific in your requirements and so carries more importance it has two selectors as opposed to one.

If you add .content to the .bookmark rule you will regain control with that rule set i.e

.content .bookmark
{
font-family: "tahoma", "arial", sans-serif; << quotes not needed
margin-left:2em;
}

Incidentally you do not need to quote font family names unless they are separated names i.e 'trebuchet ms' it's just to ensure they are read as a string.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

binargs
Offline
Enthusiast
Last seen: 7 years 32 weeks ago
Timezone: GMT-4
Joined: 2005-07-21
Posts: 85
Points: 8

.class and #id makes all the difference?

thanks so much, and thanks especially for the lesson. i always thought inheritence in css are judged by assign location, which in my case, since bookmarks was cloest thing assigned to the table, it will be most dominant.