How to set priority (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

lilblackgirl -> How to set priority (3/25/2004 15:39:12)

I have a situation where using class/id doesn't seem to be working to format something and i think it's because a priority has been set on one of them, but I'm not sure how to fix it. I have a page that defines both font and links specifically (and separately) and then another class for a copywrite line (which is smaller and a different color). In that copywrite line in the HTML, i have a link that I'd like to keep the same size and color as the rest of the line, but unfortunately, the link is defaulting to the link class i set in the style sheet. I've tried setting up a special class to adjust, but it doesn't seem to work. Will an embedded style sheet take priority over the external sheet i'm using or is it how everything is laid out in the external sheet? How can i override the setting in the external sheet for the link default?

And i know your next question will be to show the example, but I'll have to wait to post it when i get home tonight. I hope i've been clear though.

thanks,
Lil



c1sissy -> RE: How to set priority (3/25/2004 16:13:53)

quote:

Will an embedded style sheet take priority over the external sheet


Yes, an embedded style sheet over rides the external and inline will over ride the other two.

LOL yes, my next statement was to show us the code and the style sheets.

I hope that this helps you so far.

And you said that assigning different classes didn't work?



lilblackgirl -> RE: How to set priority (3/25/2004 16:21:37)

See, i do know how you guys think . . . [;)]

Yup, set up a link group (link, hover, etc) to use for it and the linked item still defaulted to the basic link settings defined in the external sheet. So if i use an embedded sheet, could i just use the existing class i have in the external and paste it straight in to the HTML and that should do it? It almost seems to simple. And why is it that it all seems to only make sense when i start posting here and asking my dumb questions? [:@]



c1sissy -> RE: How to set priority (3/25/2004 16:31:09)

First, let me say this,
The only stupid or dumb question is the one that never gets asked[;)]

So stop thinking that your questions are stupid or dumb, and you never know how many other people you will help by asking your question!

Ok. what is your link order? It should be as follows
a:link
a:visited
a:hover
a:active

If you don't have it like this it could be one of your problems

Also if you have different styles for different sets of links, you need to give them a class so that the difference is known by the browser.

I hope that this helps you a bit!



lilblackgirl -> RE: How to set priority (3/25/2004 16:36:31)

I thought hover was always the last. Well that could be part of my problem.

And yes, i'm using separate classes. I have one for the line i'm trying to fix and it's defaulting to the a:link, etc.

Can you explain how i would do inline?

And i know it wasn't dumb, i just get a little worked up and post to much, besides, i knew you'd respond to that knowing your sig. [:D]



c1sissy -> RE: How to set priority (3/25/2004 16:39:59)

quote:

And i know it wasn't dumb, i just get a little worked up and post to much, besides, i knew you'd respond to that knowing your sig
[;)]
I'll be back later with info for you unless someone beats me to it. I just didn't wnat you to think I left you hanging, I'm off to cook dinner for the crew, lol.

I'll check in later on!



lilblackgirl -> RE: How to set priority (3/25/2004 16:57:39)

Actually, no need, i checked around and found some info. It looks like inline would be the most useful for what i needed it for. Now the question of <span> vs. <div> for the inline. I'm guessing that for one or two words (a link in this case), i'd use <span> whereas a <div> would be more useful for, say, a paragraph. I'll give this a try when i get home.

thanks sweet deb, you're a huge help! [:D]



c1sissy -> RE: How to set priority (3/25/2004 17:14:57)

quote:

Now the question of <span> vs. <div> for the inline. I'm guessing that for one or two words (a link in this case), i'd use <span> whereas a <div> would be more useful for, say, a paragraph


You are correct in regards to this. Just think block and inline, that should help you out a bit.

divs are for block level, and span is for inline.

Happy to have helped you. Anymore questions please don't hesitate to ask them!



Nancy -> RE: How to set priority (3/25/2004 17:15:23)

I'm not positive on this, but span may not still accomplish what you want with links. Span usually is applied to a small section of text that is not linked. You might try applying the class to the actual link tag.

Also, using inline may also not be the answer. It may depend on how you want to validate. Inline styles are being deprecated. I'll have to check a little further on this, as I know they will work for validating HTML transitional, but not for XHTML.

Just personal opinion on inline styles: I think in the long run they are as bothersome as the old font tag was. Should you decide to make changes at any point, you'll have to go back through each and every inline style.

Nancy



c1sissy -> RE: How to set priority (3/25/2004 17:38:34)

quote:

Inline styles are being deprecated

Really? Wow I didn't know that, thanks nancy.

And you are right about having to maintain the links etc..

How about if she put the links into a div? Would that work for her?



lilblackgirl -> RE: How to set priority (3/25/2004 17:38:53)

Excellent information, thanks Nancy and Deb.
I'll stick with just using the embedded style and reference the class.



lilblackgirl -> RE: How to set priority (3/25/2004 18:10:35)

I'm really starting to see why so many people hate IE . . . [:'(]

anyways, that didn't seem to work and i know it's just something that I'm missing, but for the life of me, i can't seem to find it. Can someone help me out?

Page: Silver Screen
CSS: Silver CSS


At the bottom right is what I'm talking about. I want the link to the site to be the same color and font size as the rest of the line.

And while we're at it, I've upped the font sizes on this page (the one that i got the overwhelmingly bad response on) and set them with percentages, but IE seems to show them smaller than the other browsers (Firefox, Opera, NN7) and i can't seem to figure out why. Especially so with the navigation.

I really think i'm starting to lose it. [&:]



c1sissy -> RE: How to set priority (3/25/2004 20:18:20)

Hi,
Ok, I'm going to post a tad of your code to show you what you have, and then I'm going to post what you should have, Also I have a screen print of your page that i took one piece of to show you something.

You have 
a.wht:link 		{FONT-WEIGHT: bold; FONT-SIZE: 90%; COLOR: #ffffff; FONT-FAMILY: Arial; TEXT-DECORATION: none;}


Try this
a.wht:link {
FONT-WEIGHT: bold;
FONT-SIZE: 90%; COLOR: #ffffff;
FONT-FAMILY: Arial;
TEXT-DECORATION: none;
}

Ok, see how you have soooo many spaces after the { ? You should only have one space there. So after the word link it should be one space example: a.wht:link {

So far, that is the only thing that i see. I have not really looked at the rest of it yet. Try fixing this and see what happens.

Now the screen shot.

Your words are difficult to see as they are sooo close to the viewport border. I only skimmed your code, so I dont know if you have one, but if you don't try putting in a margin so that it isn't soo close to the edge as in the pictrue. Now I used Foxfire to view this and the screen shot is from that.

I'm going to be logging off in a few, so I"ll check in the morning to see how you have made out with this.

Keep working, your doing a great job.

[image]local://upfiles/5813/1749E8FDC26F4EFFB2B3B4CF83B506CD.jpg[/image]



gorilla -> RE: How to set priority (3/26/2004 1:41:44)

Just to clarify something. While you can use inline styles within a block level element You can't use inline styles on a blocklevel element (think about it - it makes perfect sense) So be very careful what you apply them too. Lists are a no no. The deprecation issue is controversial within W3C so "watch this space."

That being said I have to agree with Nancy's points. I use 'em but very very very sparingly. (For things like dropcaps at the start of the page.)



lilblackgirl -> RE: How to set priority (3/26/2004 9:45:27)

I fixed the spacing, but that didn't fix the problem. I had to put it all down last night and call Uncle. I'm going to go back to it tonight with a clear head and take a look at it again. Thanks for your continued patience Deb.



gorilla -> RE: How to set priority (3/26/2004 10:40:17)

Nothing to do with IE it is getting it right (Now now don't all swoon at once) IE gets basic css and since IE6 quite a lot of advanced css reasonaslby well. Your problem lies here:

/* copywrite and site info */
.copy {font-family: Arial; font-weight: normal; font-size: 7pt; color: #c0c0c0;}

Then in your links styles you have FONT-SIZE: 90%;


90% of 7px = bloody small.

It is a seriously bad idea to mix font sizes. You've just found out why [:)]

Also you should put in a full doctype as the partial one forces browsers into quirks mode.



lilblackgirl -> RE: How to set priority (3/26/2004 11:13:06)

Well, that makes sense, but i thought that was the purpose of CSS. To specify something to be/look/act differently than everything else. Shouldn't this work regardless of basic link settings if i've specified full and different link settings (embedded) on the page? Or am i just being ignorant?



gorilla -> RE: How to set priority (3/26/2004 11:19:55)

Your link is part of the paragraph text ergo it inherits the basic attributes of the paragraph. (Thats why its called the cascade) The paragraph attributes are (correctly) cascading down through all the bits of the paragraph. That link is part of the paragraph so it is inheriting the basic font size and then being a good little browser and giving you 90% or close enough to it of the fontsize for the paragraph.

The answer is to create or edit a new linkstyle specially for the purpose that doesn't set the percentage but simply inherits it. Or just edit out the 90% for that particular type of link. (Or wrap it in a span. I wouldn't do the span myself. Too fiddly.)



lilblackgirl -> RE: How to set priority (3/26/2004 11:37:11)

quote:

The answer is to create or edit a new linkstyle specially for the purpose that doesn't set the percentage but simply inherits it.


So, create a new linkstyle, which i've done and placed directly in the html, but don't specify the percentage or don't specify the fontsize, period? If it's inheriting the font size from the basic link/paragraph settings, how does it find the new fontsize if i don't specify it elsewhere?

Or are you just telling me that what i want to do can't be done?



gorilla -> RE: How to set priority (3/26/2004 12:41:20)

<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="760" id="AutoNumber4">
<tr>
<td width="100%">
<p class="copy" align="right">All Photography / Content © 2004 Silver Screen Photography<br>
Site Design by<a class="copy1" target="_blank" href="http://www.xaostwentyone.com">
xaostwentyone.com</a></p></td>
</tr>
</table>
</center>
</div>

This is the html code yes?

and this is the css within the page, your embedded stylesheet?

<style>
<!--

a.copy1: link {FONT-WEIGHT: normal; FONT-SIZE: 7pt; COLOR: #c0c0c0; FONT-FAMILY: Arial; TEXT-DECORATION: none;}
a.copy1: visited {FONT-WEIGHT: normal; FONT-SIZE: 7pt; COLOR: #c0c0c0; FONT-FAMILY: Arial; TEXT-DECORATION: none;}
a.copy1: hover {FONT-WEIGHT: normal; FONT-SIZE: 7pt; COLOR: #c0c0c0; FONT-FAMILY: Arial; TEXT-DECORATION: none;}
a.copy1: active {FONT-WEIGHT: normal; FONT-SIZE: 7pt; COLOR: #c0c0c0; FONT-FAMILY: Arial; TEXT-DECORATION: none;}


-->
</style>



gorilla -> RE: How to set priority (3/26/2004 13:01:58)

And this is the effect you want?

[image]local://upfiles/2870/F6ED4AE8F4E843EF8D55C939956335CC.jpg[/image]

You're very nearly there I'll give you the solution if you insist but your 95% of the way there already.



lilblackgirl -> RE: How to set priority (3/26/2004 13:35:56)

sounds like a challenge.
yes, that's what i want (minus the underline), but don't tell me yet if you're calling me out.

I'll figure it out or eat my hat if i can't.



gorilla -> RE: How to set priority (3/26/2004 13:42:54)

You won't eat your hat because that banana scented detergent used the last time you washed it made it very tempting and my doctor is always yattering on about how I need to up my fibre intake <burp> </burp> [:D]



gorilla -> RE: How to set priority (3/26/2004 13:54:55)

Underline appearance in originals screenshot is because I had link selected for purposes of taking the shot. Sorry my bad.

[image]local://upfiles/2870/E96EA15308C44208B4A772C275960E98.jpg[/image]



lilblackgirl -> RE: How to set priority (3/26/2004 14:38:02)

[:@] [:@] [:@]

Ok, i got the font size right by removing the font-size indicator in the embedded style (as you directed) and i see why, because the line was already set to that font size based on the style set for the line and not the link, but i still can't seem to figure out how to get the font color to do what i want which is initially be grey and hover to white.

CRIPES!



gorilla -> RE: How to set priority (3/26/2004 17:02:16)

Blue = what I did to your style sheet:

/* in-page links */
a:link {FONT-WEIGHT: normal; /* FONT-SIZE: 70%;*/ COLOR: #c0c0c0; FONT-FAMILY: Arial; TEXT-DECORATION: underline;}
a:visited {FONT-WEIGHT: normal; /* FONT-SIZE: 70%; */ COLOR: #c0c0c0; FONT-FAMILY: Arial; TEXT-DECORATION: none;}
a:active {FONT-WEIGHT: normal; /* FONT-SIZE: 70%; */COLOR: #c0c0c0; FONT-FAMILY: Arial; TEXT-DECORATION: none;}
a:hover {FONT-WEIGHT: normal; /* FONT-SIZE: 70%; */ COLOR: #ffffff; FONT-FAMILY: Arial; TEXT-DECORATION: none;}


Red = what I did to your html

<link rel=stylesheet href="style.css" type="text/css" />
<style>

/*
a.copy1: link {FONT-WEIGHT: normal; /* FONT-SIZE: 7pt; */COLOR: #c0c0c0; FONT-FAMILY: Arial; TEXT-DECORATION: none;}
a.copy1: visited {FONT-WEIGHT: normal; /* FONT-SIZE: 7pt; */ COLOR: #c0c0c0; FONT-FAMILY: Arial; TEXT-DECORATION: none;}
a.copy1: hover {FONT-WEIGHT: normal; /* FONT-SIZE: 7pt; */COLOR: #ffffff; FONT-FAMILY: Arial; TEXT-DECORATION: none;}
a.copy1: active {FONT-WEIGHT: normal; /* FONT-SIZE: 7pt; */COLOR: #c0c0c0; FONT-FAMILY: Arial; TEXT-DECORATION: none;}
*/

</style>
</head>

You don't actually need the embedded style. Try the fix I did. Then try commenting out the entire embedded style and see what you can see.



lilblackgirl -> RE: How to set priority (3/26/2004 20:19:59)

ok, well that worked, but you've got me totally baffled as to how or why it worked.

i thought commenting out something meant the code completely ignored it, so if this style is what the basic link will look like for the site, how does it know to . . . GAH!

I should probably just take a break from this and go drink a beer. Or a couple.

Again, i can't even begin to thank you Gorilla, but many thanks.

Lil



c1sissy -> RE: How to set priority (3/26/2004 20:33:05)

quote:

i thought commenting out something meant the code completely ignored it, so if this style is what the basic link will look like for the site, how does it know to . . . GAH!


If you comment something out, how does it manage to show up? If this is what is going on? Since I cant see the page that LIL did, I'm guess that this is working opposite from what it is supposed to? lol, and by LIL's response as well.



d a v e -> RE: How to set priority (3/27/2004 2:33:23)

i think gorilla suggested commenting out the scond set to see what happens when those styles are turned on and off.

there's also a tuturial for different link colours here
http://www.thepattysite.com/linkstyles3.cfm
(DW not required)



lilblackgirl -> RE: How to set priority (3/27/2004 16:17:06)

Deb, you are correct. That's what has me in a quandry. If you take a look at the links i listed further up in the posts, i've updated to show you. If you take a look at the source and the style sheet, gorilla commented out the basic link settings AND the class for the lines in question. NO idea why it worked out this way. Guess that's why he's the Supreme Overlord and not just a grunt. [:D]

And Dave, i think the linkstyles you linked to are specific to setting up particular classes instead of the default. Is there a difference, or is the basic default linkstyles just another style like any other specialized class?

Gorilla, you must have picked up the wrong hat, cause I'm choking mine down right now . . .[:-]



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.1088867