Topic: Another stupid Link-CSS question

I previously learned here about the LVHA order. I had some layout problems and ended up making it all over..and it works great.

However when I went to start validating I had some errors. One of them was using a #div on something that is repeated throughout the page (news posts) in which I forgot at the time was repeated.

So all I did was change the #div to .div in the CSS file and change <div id="div" to <div class="div" to solve it.

It validates but now that div ignores those class link settings and pulls the #maindiv settings from the div thats around this div.

Why and how can I fix it?

So the link CSS styles are arranged in the heirarchy order?

.div a {
some styles
}
.div a:visited {
some more stlyes
}

We can only take wild guesses here at the moment becusae you haven't given us any links to your code or examples of what you think may be going wrong.


Justice 4 Pat Richard

Yeah sorry, just really frustrated. I even chagned it back to see if it'd work the other way and it wouldnt even work then. Not sure what happened.

.storytitle

	{

	font-size: 18pt;

    text-align: center;

	border-bottom: solid black 2px;

    clear: both;

	}



.storytitle a:link

	{

	color: blue;

	text-decoration: none;

    border: 0;

    background: none;

	}



.storytitle a:visited

	{

	color: black;

	text decoration: none;

    border: 0;

    background: none;

	}



.storytitle a:hover

	{

	color: #97242F;

	text decoration: none;

    border: 0;

    background: none;

	}	



.storytitle a:active

	{

	color: black;

	text decoration: none;

    border: 0;

    background: none;

	}

Thats the code the the area where the links are not reading. Its called with <div class="storytitle" blah blah> blah blah </div>

The div the encompasses this div (and others is as follows:

#wpcontent

	{

    font-family: georgia, verdana, sans-serif;

    font-size: 8pt;

    }



#wpcontent a:link

	{

	color: #97242F;

	text-decoration: none;

	border: white solid 1px;

	border-bottom: 0px;

	padding-left: 2px;

   	padding-right: 2px;

    }





#wpcontent a:visited

	{

	color: #97242F;

  	text-decoration: none;

	border: white solid 1px;

	border-bottom: 0px;

	padding-left: 2px;

   	padding-right: 2px;

	}	



#wpcontent a:hover

	{

  	color: #97242F;

    background: #CCC;

    text-decoration: none;

	border: black solid 1px;

	padding-left: 2px;

   	padding-right: 2px;

	}	





#wpcontent a:active

	{

    color: #97242F

	text-decoration: none;

	border: white solid 1px;

	border-bottom: 0px;

	padding-left: 2px;

   	padding-right: 2px;

	}

The first mentioned storytitle is taking on the link colors/style from #wpcontent..

If it helps here is the website WIP:

http://shifter.ensellitis.com/index.php

the CSS is at: http://shifter.ensellitis.com/wp-layout/FFX2-Yuna-Red/style.css

If I remove the #wpcontent div from the CSS then *part* of the links pull the .storytitle style..

It's got me stumped..I've always had issues with links..dunno if it has to do with something Im doing wrong or what.

(Edited by Shifter on 02-06-2005 09:56)

Just as an update, I validated my CSS and found several errors, fixed them..but it didn not solve the problem. The HTML and CSS is now valid..and I just can't figure out what's going on :\

And if I remove the surrounding div (#wpcontent) then .storytitle takes on the right valudes..and all the other links inside #wpcontent but outside .storytitle take up the body link style.

So am I doing something wrong?

I assume I might be misusing something..as also if I take #wpcontent and how it is called <div id="wpcontent and change it to .wpcontent and <div class="wpcontent then it doesnt work either.

Is using a class with < div class=" improper?

Edit:

Now I went back and changed it to it's original stay where it is <div id="wpcontent" and NOTHING works now..I've been seeing this over and over..its like every time I make a change then change it back..it doesnt change back..now everything is only taking the body style.

Grr..

(Edited by Shifter on 02-06-2005 17:37)

(Edited by Shifter on 02-06-2005 17:40)

As far as the id vs. class - an id is for something that is unique, and can only be used once on each page.

A class is for something that is more generic, and will be used throughout a page.

your use of id and class is not improper in itself.

It is a little strange though to have a div containing your link with a class of storytitle, and then to also give the link itself the same class.

you should set it up one of two ways -

keep your CSS the way it is, call the div <div class="storytitle"> but remove the class declaration from the link itself

or

call the links by that class, but don't give the div a class, and call the css like this -

a:link.storytitle {

}

etc..

also, be careful when combining an id and a class like you've done with the storytutle div.

Whichever CSS is listed *last* in the style sheet will supercede earlier declarations.

so if the id is listed after the class in the CSS, whatever you assinged to the id will be displayed if it conflicts with the class.

Will this fix your problem? Unsure off hand, but it will help simplify things, and simplfying things always helps fix problems =)

Well originally I didnt have that storytitle class on the link as well.. I did that to try to make it work.

Setup with Div class="storytitle" and then nothing on the link..the links are still pulling the #wpcontent style for links..

About combining divs or containing divs..how else would I do this? I needed all content for that particular area to go within a div with set parameters..but then stuff inside it also needed its own style/settings..

Im new to CSS and this i my first css page so I still dont fully understand rules and such.


Going to try the other method you mentioned as a test.

Oh and i moved the class below the below the div in the css and it made no difference.

Taking out the div class and just using the a:link.storytitle and class="storytitle in the link makes my lining up improper ..hehe.

What a train wreck. I think what I am going to do is remove the link from the storytitle alltogether and just make it black text.

But I really wish I could understand what's going on because I have this problem alot..or used to even when doing table pages etc.

Hree is what I really don't understand.

In storytitle I also have some alignment settings and such..well if I remove the class=Storytitle from that section..the alignment is then off. So I KNOW it is reading the class styles but for some reason it ignores the link styles..

What the hell?

Edit:

Okay I have been messing and chaning storytitle in the css file and things rae changing..but it's changing all funky and I can't get the right values..its like its pulling WPcontent values and the new ones but getting it all farked.

Edit again:

I am totally stumped.

I decided to try something different since you said using a div and class inside each other could be bad.

I removed the WPconent div altogether. Thus all the links now are default style (body style)
Then I set class storytitle to the storytitle. It now works...BUT the rest of the are default as I said. Ok so I set them to .wpcontent class as such:

<a class="wpcontent" href="<?php the_author_url() ?>"><?php the_author() ?></a>

But now THOSE are ignoring as well...they are using the default body style

I am just totally stumped going ot have to just do as I said and have the story title not be a link.

I sure wish I knew wtf was going on though :\



EDIT:

I downloaded the web developer tool that lets you view css info etc and I used the view css where you can mouseover an element and it displays the CSS tree or whatnot..dunno if it helps but here is what is shown when mouseover the storytitle link:

html > body > div#outer > div#content >div#wpcontent > div.storytitle#post-21 > a.storytitle

(Edited by Shifter on 02-06-2005 18:45)

quote:

---

since you said using a div and class inside each other could be bad.

---

Nope, not what I said.

What you don't want is to duplicate your classes inside each other (ie a <div class="class1><a class="class1"></a></div> ) when the .class1 is really there to define one or the other. That's why we have the 'cascading' part of CSS whereby you can specify things like you did via -

.storytitle a:link

etc...

You can most certainly have a link that has a class attributed to it inside a div or any other element, with no problem.

Off hand I do not what the problem is, but I will say that overall your code is very hectic, with lots of nesting and excess 'wrappers' that could be slimmed down and simplified quite a bit.

Most likely any problems you're having would go away after that, and if not wuold be much easier to track down.

I suggest you cut out as much as possibly can, both in the CSS and the HTML, and put things back in little by little, and see where the problem pops in...



(Edited by DL-44 on 02-06-2005 23:41)

Well the nesting is nessessary for the 100% height crap...took me forever just to get it to work. I had to scrap my first method and redo it completely...and I don't want to scrap it again..

I'll just chalk it up as a loss and make that a non link.

I tried to use an inline style on the actual link, that worked. :\ I must have something conflicting somewhere thats not letting it read from CSS file...

quote:

---

I'll just chalk it up as a loss and make that a non link.

---

uhh.....


so you'd rather just say "fuck it" then figure out how to properly code a website?

I mean no offense, but....man that's just not right...

On a sidenote, I don't see how the bizarre amount of nesting and replication has anything at all to do with 100% height. it is not difficult to make a site with 100% height, and without multiple wrappers/nests and absolute positioning.

quote:

---

I must have something conflicting somewhere thats not letting it read from CSS file...

---

well...that's pretty much what I've been saying....


though it's not matter of it not letting it read from the CSS file...it's a matter of inheritance, and the overuse of nesting/wrapper divs has made a mess that you are having a hard time sorting out.

Clean it up, and your problem with either disappear or become clear...



(Edited by DL-44 on 02-07-2005 04:50)

100% Height of viewport is simple..but 100% height with divs inside causing 100% to pass viewport, plus a footer, is not "Easy" for someone who just started CSS.

And I gave up because, I am no expert and I figured I'd come back to it later...going off the info you gave me and what I knew/read I couldn't fix it. I fixed it though...

I thought this "might" have been a problem but you stated that its okay to define links inside another div...however is seems if you define links in a div then define them inside a child..they still take the parent. Makes sense..but I didnt know this. So I just removed the styles from the parent div..and made the internal links all have diff classes..

Thanks for the help..and again..my nesting isn't bizzarre..everything there is needed for my page to work right.

CSS runs by an order of inheritance, starting from the HTML, down to the BODY and from there down through the heirarchy order of your page contents. If you're going to design your page on this basis your CSS must reflect it. Look at it like two cars, one a base modal and one a customised hotrod. The base model is your base tags, a, p, del, pre, code and so on. The customised hotrod is any classed or id'd versions of these. You have everything in your hotrod that you have in your base modal, plus some extras. That's the way it works, so say you want all links on your site, regardless of where they are, to have a full border, 1pixel wide, that is black, then in your base modal you'll define:

a {

border: 1px black solid;

}

and now this will appear in all of your links unless you override it. Say, after a time, you decide that the links in your menu bar won't have this border, becuase it looks tacky, then you can define a class specifically for those links

a.menu-link {

border: 0px;

}

and now the links you add this class to will not have that border but (and here's the important part) they will have everything else that was definated in the base a, any height, font, colour, hover, visited or active styles (as applicable) until or unless you override thme with something else. This is the order of inheritance in CSS, and I suspect it is what's going screwy in your file, somehow, since you're combining both inheritance and heirarchy. I try to use either one or the other. I'll probably get around to trying ot rewrite your code sometime tomorrow, in the meantime, try it yourself. Pick a method and use it, you'll find something that works, I'm sure.


Justice 4 Pat Richard

quote:

---

but you stated that its okay to define links inside another div

---

Yep...you can....

quote:

---

...however is seems if you define links in a div then define them inside a child..they still take the parent. Makes sense..but I didnt know this

---

No - that's not the case at all.
As skaarj stated, and as I've said, ineritance and the 'cascading' part of cascading style sheets is what has been at issue here, and making sure things were more clearly defined and in the proper order is what was needed.

quote:

---

and again..my nesting isn't bizzarre..everything there is needed for my page to work right.

---

Well, what you call "necessary", I call "bizarre"

I understand, of course, that these are tough to get a grip on. I'm just saying there are ways to do the things you are trying to do without so much complication...

Well about cascading you mentioned it pulling the valudes from the last in the CSS file.

So I had tried moving .storytitle to the bottom of the page past wpcontent..and it didn't change it.

Anyways..I got it working..so no big deal.

You're right, I don't know everything, or even close. And the fact that the page is as clean as it is and works..is a big accomplishment for me..so I'm happy.

And I don't see the other ways to do that layout.. =D