PDA

View Full Version : css being overridden??


dsnyder
09-27-2008, 03:49 PM
I can't figure out why my new css div isn't being followed. For some reason it is styling my links to a diff div. Can anyone help?

sample page: http://oblivionproject.com/tad.htm
Julien Labro link on right side - can't remove the padding-left, bkgd image or change the orange color by using a diff div. Going crazy!

here is the html for the problem area:
<div id="band">
<p><font color="#952306" style="font-weight:bold; ">The Oblivion Project</font><br>
<strong><a href="../julien.htm">Julien Labro</a></strong>, bandoneon<br>
<strong>Gabriel Bolkosky</strong>, violin<br>
<strong>Derek Snyder</strong>, cello<br>
<strong>Tad Weed</strong>, piano<br>
<strong>John Holkeboer</strong>, bass<br>
<strong>Alex Trajano</strong>, percussion<br>
</p>
</div>CSS
#band a { text-decoration: none; color: #313131; background-image: none; padding-left: 0em; }
#band a:hover { text-decoration: none; color: #952306; }but the links seem to be stylized by this other CSS:
#links a {
padding-left: 1em;
background: url(images/img08.gif) no-repeat left center;
color: #DB5600;
}site 'default' CSS for links is:
a { text-decoration: none; color: #313131; }
a:hover { text-decoration: underline; color: #DB5600; }Thanks for any wisdom!

domedia
09-27-2008, 04:35 PM
Hi Derek,
.. it is weird.

The quick fix is to be more specific with the link to make sure the Julien link is not included:
#links li a { .. }

I have to say I'm astounded that you're able to take your design and coding skills this far. Are you going to switch careers now? ;)

d a v e
09-27-2008, 05:10 PM
btw do you realise that your header png is nearly 1mb? you could optimise it better or use a good quality jpeg...

nice site though!

domedia
09-27-2008, 08:51 PM
btw do you realise that your header png is nearly 1mb? you could optimise it better or use a good quality jpeg... Holy smokes.. yes. Make sure the image is 72dpi in PS and save it around 60% jpg quality after CTRL+Shift+Alt+S (Save For Web)

It should take it down to around 50kb instead of 900+kb

dsnyder
09-27-2008, 09:16 PM
Thanks Ove & Dave,
Sorry dudes...that pic is freakishly large...this is a draft page and I wasn't paying attention...thanks for noticing. Once i fix that should cut down on load times.

NOW...css issue...
as for the quick fix idea (#links li a { .. }), i should have shown more of the existing code. I am adapting a template with the following code:

#links {}

#links ul {background: url(images/img04.gif) repeat-x left bottom;}

#links li { padding: 5px 0; background: url(images/img04.gif) repeat-x left top; }

#links a {
padding-left: 1em;
background: url(images/img08.gif) no-repeat left center;
color: #DB5600;
}I tried adding the following to format my special links. It seems to disobey my 'a' , but obeys my new 'a:hover' css

#band { }
#band a { text-decoration: none; color: #313131; background-image: none; padding-left: 0em; }
#band a:hover { text-decoration: none; color: #952306; }BTW, what is the #links {} for?

THANK YOU!

dsnyder
09-27-2008, 09:20 PM
ps thanks for the kind words...keeping my day job though...cause there is sooo much money in cello playing :)

domedia
09-27-2008, 11:04 PM
Can you put it up again online on a temporary place? That way I'm sure I have the full picture.

dsnyder
09-27-2008, 11:53 PM
Sure..thanks for looking. Here is the css page:
http://oblivionproject.com/default.css

full html page sample:
http://oblivionproject.com/tad.htm

or the sidebar with the problem link is here:
http://oblivionproject.com/Library/sidebar%20B.lbi

Does this give you what u want? thanks again for the time/help...

domedia
09-28-2008, 07:13 AM
Sorry Derek,
I'm a bit confused. This looks the same as previously.
Did you try my fix above? It will make sure the unneeded style does not get applied to 'Julien'

Cary
09-28-2008, 07:28 AM
You can either increase the specificity of the #band link styling like this:

#links #band a { text-decoration: none; color: #313131; background-image: none; padding-left: 0em; }
#links #band a:hover { text-decoration: none; color: #952306; }

Or you can move the #band link styling so it comes after the #links link styling:

#links a {
padding-left: 1em;
background: url(images/img08.gif) no-repeat left center;
color: #DB5600;
}
#band a { text-decoration: none; color: #313131; background-image: none; padding-left: 0em; }
#band a:hover { text-decoration: none; color: #952306; }

Cary
09-28-2008, 07:47 AM
The quick fix is to be more specific with the link to make sure the Julien link is not included:
#links li a { .. }

Sorry Derek,
Did you try my fix above? It will make sure the unneeded style does not get applied to 'Julien'

Yep, that's simpler than what I suggested.

dsnyder
09-28-2008, 01:26 PM
thanks Ove & Cary,
So, my confusion has confused u?! Nice! :lol:
I seem to not understand the #links li a { .. } idea...
Is this correct? It didn't change things?
#links li a{ padding: 5px 0; background: url(images/img04.gif) repeat-x left top; }But, moving the #band stuff below #links solved the problem...THANK YOU
Why does that work? I didn't realize that CSS order effected things...u guys are so smart! 5,516 posts! HIGH FIVE.

Cary
09-28-2008, 05:53 PM
#links li a {...} will only work with links within an li tag within the #links div. Your #band link isn't in an li tag so it should no longer be affected.

Since your #band div is inside your #links div, both the #links and #band styling could be applied to "#band a". The last one listed is the one applied. You had "#links a" coming after "#band a".

DW is quite helpful with this if you go over the CSS panel and click "Current" in the CSS tab. The top portion will show the cascade of styles being applied to the currently selected tab. What the middle section shows depends on which of the little stair-like buttons to the right is selected. I like using the far right one which shows the cascade of rules for the selected tag. There you can see in what order rules are being applied and overridden.

dsnyder
10-02-2008, 02:31 PM
Cary -
1. didn't notice my #band inside my #links! Wasn't intentional. Damn cellist! Thanks.

2. thanks for the whole "CSS panel and click "Current" in the CSS tab" information. Hadn't noticed that before...quite helpful.

thanks again dom & cary