SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow My <P> style won't inherit!

    I styled my DIV's here (the ones making up the 'table' on the left). I wanted the first line of each "cell" to be aligned to the right, and the info under the first line to be aligned to the left. But when I setup the <p> style, it seems immune to the CSS rollovers I have for the div's. What's my problem?

    CSS:

    p.right {
    font-size: 8pt;
    text-align: right;
    margin: 2px 0px 0px 0px
    }

    #cell {
    text-align: left;
    cursor: pointer;
    font-size:8pt;
    border:1px solid;
    width: 250;
    margin: 0px 0px 2px 0px;
    padding:2px 10px 2px 10px
    }
    *****************************
    Thanks
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  2. #2
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question please try again

    dont understand your question:

    - the first line is aligned to the left and the info under it to the right, because you set this in your CSS. And it is...

    - the second part, about the <p> and immunity to rollover, I dont understand either. What do you mean? If I put my mouse over it, the whole DIV (cell) will highlight, because you set it like this.

    Code:
    <a class="span" ...>
     <div id="cell">
        <p>....</p>
     </div>
    </a>
    .. now what's the question? please try again...
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  3. #3
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking Here's the deal...

    Ok, this is what I want:

    I know that I have the text in the div aligned to the left. That is what I want by default. However, I want any additional text I have in the div to align to the right by setting the <P> class to align right4, as that text is not as essential as the left-aligned text.

    Yes, I agree, my css is fine up to this point. What I'm asking (I guess not very clearly - lol) is why won't the text styled with the <P> roll over like the rest of the div? It just stays black when you hover. I want that text to rollover like the rest of the contents of the div. Clear as mud?
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  4. #4
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb ok

    I guess because the a:hover is not specified for the <p> tag, only for the DIV tag. No cascading here.


    It should be !

    ...hmmmmm

    This part is all correct: works as you wanted it, everything in the DIV turns to the color on hover

    Code:
    a.span:link {
    	text-decoration: none;
    	color: navy;
    	}
    				
    a.span:visited {
    	color: navy;
    	text-decoration: none;
    	}
    						
    a.span:hover {
    	color: #ff0000;
    	text-decoration: none;
    	background: none;
    	}
    						
    a.span:active {
    	color: #E0E0E0;
    	}
    
    	
    	p.right {
    	font-size: 8pt;
    	text-align: right;
    	margin: 2px 0px 0px 0px;
    	}
    	
    	
    	#cell {
    	text-align: left;
    	cursor: pointer;
    	font-size:8pt;
    	border:1px solid;
    	width: 250;
    	margin: 0px 0px 2px 0px;
    	padding:2px 10px 2px 10px
    	}

    .. so its something else in your CSS that overrules... but what?

    ...later

    ok

    its this bit that is doing the overruling:

    Code:
    body, p,  br {	color: #000000;
    	font-family:verdana, arial, courier; 
    	font-size:10pt; 
    	text-decoration: none; 
    	}
    If you take out the ,p the hover should work.

    But then, you don't have the black-color on the second info/aligned-right... o well.. thats not the issue here.

    cheers
    Last edited by wisbin; Jan 8, 2003 at 15:05.
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  5. #5
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks Wisbin...

    I really appreciate your help...have a question though:

    Shouldn't a class declaration overrule an element styling?
    I set a style for the body, p and br, but then also set a class for the p, too (p.right). So what am I not understanding here? See, I knew that I had already declared that the <p> tag display black, but because i had set up a seperate class for the <p>, I thought that there shouldn't be any interference. Wrong, I guess. But why?
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  6. #6
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    i'm no expert, but...

    in my view -and I'm not sure here- if the browser comes to the <p class="right"> it overrules the <a class="span"> tag, or switches it off, probably due to the color:#000 style in your p.declaration.

    If you leave out the p in the body, br declaration it works fine. If you put it in the p.right style its the same problem. So it is turning of the hover-color.

    I don't know why. But when I saw you code, I thought it was illogical, because the <a>tag wasn't ON the <p>lines. At second thought this should not be the problem, it should hover also, because its IN the DIV with the ancor on it.

    But as soon as you declare a color, this color overrules the hover..

    I'm out of help here..

    Maybe you should start all over again (and build it with different strategie), works for me all the time

    good luck!
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •