CSS experts, please show me what I'm missing... [SOLVED]

skottish · 2009-12-21 05:39:56

I want to know how Firefox knows the difference between certain code surrounding Arch's stuff. For instance, the time and date stamp above every post here. This is an example:

<h2><span><span class="conr">#1 </span><a href="viewtopic.php?pid=674509#p674509">2009-12-19 12:26:19</a></span></h2>

and from the wiki:

<a name="Getting_Started" id="Getting_Started"></a><h2> <span class="mw-headline"><a href="/index.php/Getting_Started" title="Getting Started">Getting Started</a></span></h2>

Both of these pick up on the h2 settings I have in a CSS file that I'm putting together:

h1,h2 {   
   font-family:"DejaVu Sans" !important;
   font-weight:bold !important;
   font-size:14px !important;
}

Firefox doesn't apply the bold settings to the first example but does to the second. This is exactly what I want. If I add another entry:

h2 span {
   font-family:"DejaVu Sans" !important;
   font-weight:normal !important;
   font-size:13px !important;
}

Then the bold goes off on both of them. I want a generic CSS file that has the time and date normal and the wiki entries bold. Firefox does this automatically. What am I missing?

... be back in 20 hours ...

jasonwryan · 2009-12-21 06:31:37

I'm not sure if this is what you after, but you could just use the pre-existing class names for the wiki entries:

.mw-headline {
font-family:"DejaVu Sans" !important;
font-weight:bold !important;
}

That gives you a bolded h2 on the wiki and leaves the forum timestamp as is...

/edit: Realized you wanted it the other way around.

Last edited by jasonwryan (2009-12-21 07:56:54)

Tyriel · 2009-12-21 12:29:33

If you want consistency with different browsers and CSS I would recommend that you read up on creating a "reset.css". If you google this you will find many examples however the basic idea is to remove all padding, margins, borders and formatting of many html elements. Thus by default all webpages look the same no matter the browser.

jasonwryan solution was correct but the manner in which you worded your problem made me think there might be more to this hence what I wrote above. Sorry if that is not the case.

lswest · 2009-12-21 16:05:31

What I do for consistency (in response to the above), is write a PHP script using if statements to generate a css file according to the web browser and OS accessing the page (a lot of work went into that ). If anyone is interested I can post the important parts of the PHP file. It seems to me that the OP was actually just asking about how to change css for firefox on a header without affecting the others.

wuischke · 2009-12-21 17:33:15

Mh, I'm sure you know about the tree structure of HTML. Please excuse if tell you things you already know, but allow me to talk about how CSS rules are applied.

<h2>
  <span>
    <span class="conr">#1 </span>
    <a href="viewtopic.php?pid=674509#p674509">2009-12-19 12:26:19</a>
  </span>
</h2>

What CSS does is applying the CSS rules for each element/selector. This means first it will apply the rules for h2, then the rules for span and at last the rules for the class conr or the element a respectively. If any properties already exists, they will be overwritten when applying the rules of a more specific element. If multiple rules apply (for instance multiple classes with conflicting properties), the !important will help the browser to decide which rule to apply.

In your case I guess that there are rules for the class conr or the span element which conflict with your desired setting. Since you only change the rules for h2, the rules of those more inner elements/attributes take precedence.

Teoulas · 2009-12-21 19:15:14

There's a few ways you can accomplish what you want.
A.

h1,h2 {   
   font-family:"DejaVu Sans";
   font-weight:bold;
   font-size:14px;
}

h2 span a, h2 span span {
   font-weight:normal;
}

B.

h1,h2 {   
   font-family:"DejaVu Sans";
   font-weight:bold;
   font-size:14px;
}

.blockpost h2 {
   font-weight:normal;
}

These two should both work, unless you have more specific rules in your stylesheets.

CSS rules have what we call "specificity". The more specific the selector, the higher the priority they have. The first rule (h1, h2) is pretty generic compared to the second one in both cases. For more info:
http://www.smashingmagazine.com/2007/07 … ould-know/

skottish · 2009-12-22 01:09:07

Thank all of you for your responses. I ended up using the '.blockpost h2' solution from
Teoulas for now. The funny thing is that I tried '.blockpost' right before I started this thread. I guess I was too burned out to add the 'h2'. As I said before, Firefox does this automagically and I want to understand how. So, I'm going to dig farther into this and look into the rest of the suggestions in this thread.

Just so everyone can see what I'm doing, this is how uzbl and I currently see the world.

*** Cleaned up some ***

* {
   font-family:"DejaVu Sans" !important;
   font-size:13px !important;
}

title {   
   font-weight:bold !important;
   font-size:15px !important;
}

h1,h2 {   
   font-weight:bold !important;
   font-size:14px !important;
}

.blockpost h2,.blocktable h2,.blockform h2 {
   font-weight:normal !important;
   font-size:13px !important;
}

pre,code,pre span,code span {
   font-family:"DejaVu Sans Mono" !important;
   font-size:13px !important;
}

Arch Linux

#1 2009-12-21 05:39:56

CSS experts, please show me what I'm missing... [SOLVED]

#2 2009-12-21 06:31:37

Re: CSS experts, please show me what I'm missing... [SOLVED]

#3 2009-12-21 12:29:33

Re: CSS experts, please show me what I'm missing... [SOLVED]

#4 2009-12-21 16:05:31

Re: CSS experts, please show me what I'm missing... [SOLVED]

#5 2009-12-21 17:33:15

Re: CSS experts, please show me what I'm missing... [SOLVED]

#6 2009-12-21 19:15:14

Re: CSS experts, please show me what I'm missing... [SOLVED]

#7 2009-12-22 01:09:07

Re: CSS experts, please show me what I'm missing... [SOLVED]

Board footer