overriding a href css

gallery css overiding header css

[dkunce]

I am having a problem getting the font in my header to reflect those in the header and top container divs. I am trying to put my header into gallery. It worked except that the gallery link css is overriding that of the desired css in the header. Any help would be great. This has been bugging me for a few weeks.

Here is the code for the header
/*-------------------------------------------------
Header
-------------------------------------------------*/
#header
{
padding: 0;
margin: 0;
}
#header h1
{
font: 30px Arial, Verdana, sans-serif;
padding: 10px;
margin: 0;
}
#header a:link, #header a:visited
{
color: #383828;
border: none;
}
#header a:hover, #header a:active
{
color: #CC0000;
}
/*************************************************************************
Header main navbar
*****************************************************************************/
#top_container
{
height: 30px;
background: #656549;
padding: 0;
margin: 0;
}
#top_container ul
{
padding: 0;
margin: 0;
}
#top_container ul li
{
list-style-type: none;
display: block;
float: left;
font: 11px/30px "Lucida Grande", verdana, sans-serif;
text-align: center;
padding: 0;
margin: 0;
}
#top_container a
{
display: block;
width: 106px;
color: #F8F2E5;
text-decoration: none;
border-top: none;
border-right: 1px solid #A8B090;
border-bottom: none;
}
#top_container li#active
{
background: #474733;
color: #fff;
border-bottom: none;
}
#top_container a:hover
{
background: #83835F;
color: #fff;
border-bottom: none;
}

And here is the code for the links throughout the site

/*************************************************************************
links
*****************************************************************************/
font-weight: bold;
text-decoration: none;
color: #0F4002;
}
#gallery a:hover {
text-decoration: none;
color: #ff0000;
}
#gallery a:active {
text-decoration: none;
color: #0F4002;
}
#gallery a:visited {
text-decoration: none;
color: #0F4002;
}

[doodlebee]

>> font-weight: bold;
text-decoration: none;
color: #0F4002;
} <<

What is this? It's right below the /****links****/ area. You have the end - but the beginning is missing. Would that be due to funky copy/pasting, or does it actually look like this in the CSS file?

If it's meant to start out as #gallery a { ...then oops! on your part ;)

And if it's meant to start out as that, then where is your #gallery div? I sit located inside the #header div, or is the #header inside the #gallery? The #gallery seems to have a default font set, but your #header does not - so it may be taking on the font of the #gallery because it has not font set.

as for your #top_container, I see a *big* glaring error here:

font: 11px/30px "Lucida Grande", verdana, sans-serif;

I don't know what "11px/30px" is - I've never seen anything like that before. I don't know what you're trying to do there. But you *can't* use apostrophes in the CSS for your font. So it should be written:

font: Lucida Grande, verdana, sans-serif;

It's a start!

[createErrorMsg]

dkunce, could we see the html markup for the header and gallery? What I want to see is whether the header is contained inside of the gallery. If it is, whether intentionally or accidentally due to an unclosed tag, the gallery styles could be overriding the header styles because the two style blocks have the same specificity but the gallery styles come last (meaning they win). This is very easy to fix, but isn't worth getting into here if the header is not contained in the gallery.

---

I don't know what "11px/30px" is - I've never seen anything like that before. I don't know what you're trying to do there. But you *can't* use apostrophes in the CSS for your font. So it should be written:

font: Lucida Grande, verdana, sans-serif;

Just for clarity:

11px/30px

In the font shorthand property [w3.org], the above code indicates a font-size of 11px and a line-height of 30px.

you *can't* use apostrophes in the CSS for your font

When specifying fonts that have a space in their names, the quotes are proper syntax. See the last two paragraphs of the font-family [w3.org] specs. The way font names are parsed makes this a technicality, but there are font types that could cause a problem if unquoted.

cEM

[dkunce]

I goofed up copying the css here is the correct portion that was previously discussed.

/*links*/
#gallery a {
font-weight: bold;
text-decoration: none;
color: #0F4002;
}

createErrorMsg
Do you want the whole page or just the header?

[createErrorMsg]

Just the relevant html for the #header and #gallery portions of the page; i.e., the stuff that the problematic CSS is applied to.

Make sure you remove any site specifics from the code before you post and try to simplify it as much as possible.

cEM

[dkunce]

Here is the markup for the header. I only included stuff from the theme.tpl file as this is the only section with the header.

<head>
{* Let Gallery print out anything it wants to put into the <head> element *}
{g->head}

{* If Gallery doesn't provide a header, we use the album/photo title (or filename) *}
{if empty($head.title)}
<title>{$theme.item.title¦default:$theme.item.pathComponent¦markup:strip}</title>
{/if}

{* Include this theme's style sheet *}
<link rel="stylesheet" type="text/css" href="{g->theme url="theme.css"}"/>
</head>
<body class="gallery">
<div {g->mainDivAttributes}>
{*
* Some module views (eg slideshow) want the full screen. So for those, we
* don't draw a header, footer, navbar, etc. Those views are responsible for
* drawing everything.
*}
{if $theme.useFullScreen}
{include file="gallery:`$theme.moduleTemplate`" l10Domain=$theme.moduleL10Domain}
{else}
<h1>
<a href="../index.php" title="Home page">my site</a>
</h1>
<div id="top_container">
<ul id="top_navbar">
<li><a href="../index.php" title="Home page"><font color="ffffff">Home</font></a></li>
<li><a href="../?archives=1" title="Site archives">Archives</a></li>
<li><a href="../gallery2" title="GAllery">Gallery</a></li>
<li><a href="http://last.fm/user/me" title="Audio Scrobbler from me">Music</a></li>
<li><a href="../?memberid=1" title="Contact page">Contact</a></li>
</ul>
</div>

I have since moved the header css below the gallery css and that seems to have fixed most of my issues, with some formating issues left unresolved. I would rather not do this the ghetto way though.

Thanks again

[createErrorMsg]

<body class="gallery">

The fact that the gallery element is the <body> tag is the reason why the gallery styles were overriding the header styles when they came last in the CSS.

The selector syntax you used was the descendant selector (#gallery a:hover), which tells the browser to apply the styles to any anchor which is a descendant of the #gallery element. Since that gallery element is the <body> tag, everything on the page is a descendant of it, so all of the anchors on the page match to the selector.

At the same time, the header styles match to the anchors in the #header element, too. Browsers follow a strict set of rules when two selectors match to the same element but present conflicting CSS values. First, the specificity [w3.org] of each selector is determined, with the styles in the more specific selector being applied. In this case, however, the selectors have equal specificity...

#header a:link ... 111
#gallery a:link ...111

In this case, where two selectors of equal specificity attempt to apply different values for the same property, the order of the selectors in the CSS code becomes the determining factor, with the one that comes last in the code winning.

Therefor, moving the #header styles after the #gallery styles is not a hack or a kludge but a perfectly reasonable way to establish precedence in your CSS file.

cEM

[dkunce]

Thanks a lot its working perfectly.