CSS - Formatting Using Selectors Help

Hi,

I'm building a page that imports two blog feeds from feedburner displaying them in separate divs. I'm a beginner at CSS and could use some help manipulating the styles of these blog feeds separately (which are linked to an external style sheet), but I don't know enough about context dependent css and selectors. I've tried researching a solution but haven't found an answer specific to what I'm doing.

I've given the divs their own IDs ("newsblog" and "newcontent"). Here's an example of some of Google's css:

div.feedBurnerFeedBlock li a:link {
font-size: 20px;
font-weight: bold;
font-color: #9F0;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
list-style-type:none;
}

I need to take that code and make it specific to one div or the other, instead of applying to both.

Any help or advice is greatly appreciated. Thanks,

Jeff

i have two p tags one after the other..

<p>text</p>
<p>text</p>

and I did:
Code:

#head p {
        float:left;
        margin-top:2%;
        font-style:oblique;
        font-size:150%;
        color:green;
    }
  #head p+p {
        float:right;
        font-size:75%;
        color:red;
   }

the problem is that if i do margin-top:4% to the first p; this also changes that in the adjacent p? is this correct?

Hi all,

I'm having an issue using CSS3 selectors. I'm not quite sure if this is even possible but here it goes. Imagine the HTML below:
html4strict Code:
Original - html4strict Code <tr> <th><input type="checkbox" name="cb" /></th> <td>Something here</td> <td>Someting here also</td> </tr>

  

  


 <tr>


     <th><input type="checkbox" name="cb" /></th>


     <td>Something here</td>


     <td>Someting here also</td>


 </tr> 

Is it possible with CSS to utilize the :checked selector on "tr th input:checked" and somehow set the background color for the td-s? I've tried several combinations but to no avail. And as far as I know there's no parent selector or anything that lets you traverse backwards and I'm trying to avoid JavaScript as much as possible.

I'm using Firefox 2.0.0.12.

I am using CSS in the context of an SVG document. In SVG, we use element names like 'rect', 'circle', & 'polyline' rather than 'p', 'table' and 'form' as HTML coders are familiar with. I am trying to apply a generic style to all 'rect' elements, and then modify that style with class styles.
The styles:
Code:

rect{
  fill: black;
  stroke: yellow;
  pointer-events: none;
 .... other SVG styles ....
}

.frame{
 fill: black;
  stroke: magenta;
 --- other SVG styles....
}

In the document, I use a 'rect' element, and apply the class style to it:
Code:

  <rect class="frame" height="5088" id="Rect_37" width="6688" x="-1008" y="-1728" />

As you may notice, there appears to be a contradiction in the styles specified by the two selectors: 'rect' and 'frame'. One would have the element rendered with a magenta outline, while the other would outline with yellow. In practice, the stroke rendering seems to inherit from the 'rect' element style, although this seems counter-intuitive to me (class styles seem to be more specific than element styles).
In researching this, I have actually found nothing that clarifies the question. Even the W3C site seems to ignore the case, as far as I can tell.
Is this even valid CSS? If yes, what rule dictates how the document will get rendered? I have passed the entire SVG doc through the XML validator, but the CSS validator only accepts HTML & raw CSS.
What would be the correct method of applying a global per-element-type style, but modifying it for specific instances of such elements?
I am trying to keep the document as small as possible, and reduce the need for redundant style information, as this seems to have a significant impact on performance of the rendering (presently only tested using Mozilla Seamonkey)
I'm pretty much of a CSS newbie, so feel free to correct whatever jargonology I've mangled. Pointers to definitive references most welcome.
Thanks.
--- rod.

Hi everyone,

So I've been coding for years and had drawn away for the design/css part, so I need some refreshing. I've tried the greater than / less than "operators" between selectors in my css declaration but to no avail. Basically what I want to do is example:

Code:

<form><!-- really doing this basic just to show the point -->
<fieldset>
   <!-- inputs here -->
</fieldset>
<fieldset>
   <fieldset><!-- ### nested fieldset inside fieldset, don't want to affect these child selectors -->
      <!-- input bla -->
   </fieldset>
</fieldset>
</form>

So as you can see in my brief exampl above, there's two parent selectors and one child inside the second one. I only want to change the properties of the parent ones, so that a fieldset INSIDE a fieldset doesn't get affected, and I was hoping anyone here might be able to shed some light on how to achieve this.

Many thanks

Here's a handy tip for you ...

if like me you split your big stylesheet up into smaller ones, put them into a linked stylesheet and import them, like so:

PHP Code:
<link rel="stylesheet" type="text/css" href="main.css"> 





and in the CSS file itself ...

PHP Code:
@import url(css/file1.css);
@import url(css/file2.css);
@import url(css/file3.css);
@import url(css/file4.css); 





some of you no doubt will already do this. here's the crux tho. if you also have some miscellaneous CSS which doesn't fit in any of the extra files and are going to include them in the linking [main] file, then you must include them after the import statements. if you don't Mozilla will ignore the imports and the extra files will not be included in the rendering. code should be like this:

PHP Code:
@import url(css/file1.css);
@import url(css/file2.css);
@import url(css/file3.css);
@import url(css/file4.css);

body
{
   direction: rtl !important;
} 







IE get's this correct regardless of the order.

I have the following CSS styles:

Code:

#content p { font-size: 24px; }
.smalltext p { font-size: 12px; }

Then, I create a #content div in my HTML with three paragraphs in it. I want the middle paragraph to have the .smalltext class, like this:

http://www.toprival.com/temp/css_question.gif

With the CSS the way I have it, the font size (12px) of the .smalltext paragraph is ignored. But if I change the CSS so both selectors are IDs, or so both are classes (and update the HTML accordintly), it works. Why is that?

Unfortunately I am going to have to get more involved in CSS rather than happily concentrating on PHP development. We have realised that getting our designers to CSS stuff is just costing us time as they lack the experience and don't understand the semantics.

Anyway, as such I need to find out a few things I know but don't know if you know what I mean.

Where can I find out the official definitions of CSS operators...

* html for example..what the * does.

class1>class2...what the > does...stuff like that.

hi all,
need one help from you..

i have to format a div tag which is generated dynamically..
if there are only 4-5 lines consists in that div it works fine, but the lines go out of bound it takes scroll bar

overflow:auto;
overflow-x:hidden;
height:200px;

in mozzila it works fine as the scroll bar comes inside the div tag... but in internet explorer .. the scroll bar goes out of the div tag..

can anybody help me...

I am running amuck! know this should be basic, but Firefox and IE both handle the <h1> tags differently:

1) IE seems to put equal whitespace above and below the element
2) Firefox seems to put less whitespace AFTER the <h1> tag.

Anyway to smooth this out so it displays close to similiar?

My gratitude ahead of time...

Hey All,
I'm trying to make text float to the right, the challenge part of it all is that i need to try and do this using a class that get asigned to the text so i can't really use a DIV or anything to do this. Really what i want is a bunch of text in a text box aligned to the right with a grey background.

Anythoughts or ideas? Really in a binde here.

Hi,

Can anyone please help with formatting a list?

In the simple list below, I would like;
1) The main list items should always be positioned at top 0px, left 90px of it's container (done)
2) Nested list items should be hidden (done)
3) The nested item that belongs to the "selected" list item, should be visible (done)
4) The nested item that belongs to the "selected" list item, should always be positioned at top 0, left 0 (I can't do this)
5) The main list items should be on top of the visible sub item (I can't do this, the sub item is always on top)

Many thanks for any pointers,

Cheers,
Mark

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
</head>

<body>
<style type="text/css">
#container{position:relative;height:100px;border:1px solid #000}
#container ul{list-style: none;padding: 0;margin: 0;position:absolute;top:0px;left:90px;width:100px;z-index:20;}
#container ul ul{display:none;}/* hide nested lists */
#container ul li{display:block;width:100px;background:red}
#container li.selected ul{display:block;} /* show nested list for item with selected class */
#container li.selected ul li{width:100px;position:absolute;top:0px;left:0px;background:yellow;z-index:10;}/* style nested item */
</style>

<div id="container"><div style="clear:both"></div>

<ul>	
<li class="selected">item 1
	<ul>
	<li>Nested item 1</li>
	</ul>
</li>
<li>item 2
	<ul>
	<li>Nested item 2</li>
	</ul>
</li>
<li>item 3
	<ul>
	<li>Nested item 3</li>
	</ul>
</li>

<div style="clear:both"></div>
</div>


</body>
</html>

I'm working on a project where the client wants a table of data, and one column of data is money, such as "$1.23".

The client would like all the "$" aligned on the left side of the column and all the amounts aligned on the right side.

Now I could do something like:

Code:

<td>
  <div style="float:left">$</div>
  <div style="float:right">1.23</div>
<td>

(Obviously I'd change those to classes.)

That works, but it seems sloppy, so many extra divs for a tiny little formatting thing. I could also put the "$" into a background image, but then you lose something if you're using a screen reader.

I looked into doing something with :first-letter, but there's no way to say "everything else but the first letter float right" without wrapping the amount in a span or div, which still seems sloppy to me.

Is there another way to approach this, CSS or otherwise?

Hi all,

I am in the process of writing a news script in php, i want to display the articles in a downward way, using divs.. I am having a problem in IE & firefox where the image flows out of the bounds of the div and overlaps in the following div whereas I actually want the div to contain the image so the next div will start below.. I can fix this in a number of ways in firefox (display: table; not sure if its right but it works), but nothing I try seems to work in IE, is there a correct way of doing this that will worth in both browsers?

I have included the red border to demonstrate how it is overlapping over the other div..

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>GenerationQ - News</title>

<style type="text/css">
div.spotlight {
	text-align: left;
	border: solid 10px red;
}

div.spotlight * {
	margin: 0 auto;
	border: 0;
	padding: 0;
}

div.spotlight img {
	float: left;
}

div.spotlight p.title { 
	text-align: left;
	font-size: 12px;
	font-weight: bold;
	padding-bottom: 12px;
}

div.spotlight p { 
	font-size: 12px;
}

div.spotlight p.desc { 
	font-size: 12px;
	padding-bottom: 3px;
}

div.spotlight p.byline {
	font-size: 9px;
	padding-bottom: 20px;		
}

div.spotlight span.username {
	font-size: 11px;
}

div.spotlight span.publishdate {
	font-size: 10px;
}

div.section {
	text-align: left;
	border: solid 10px red;

}

div.section * {
	margin: 0 auto;
	border: 0;
	padding: 0;
}

div.section img {
	float: left;
}

div.section p.title { 
	text-align: left;
	font-size: 12px;
	font-weight: bold;
	padding-bottom: 12px;
}

div.section p { 
	font-size: 12px;
}

div.section p.desc { 
	font-size: 12px;
	padding-bottom: 3px;
}

div.section p.byline {
	font-size: 9px;
	padding-bottom: 20px;		
}

div.section span.username {
	font-size: 11px;
}

div.section span.publishdate {
	font-size: 10px;
}
</style></head><body>
<h3 align="left">News</h3><div class="spotlight">
<img src="be51273175be707e583f4c3591dd3c3d71564018.jpg" alt="">
<p class="title"><a href="http://localhost/mmm/viewarticle.php?article=This-a-test-article-of-Link-type-with-an-image%21-1">This a test article of Link type with an image!</a></p>
<p class="desc">This a test article of text type with an image!</p>
<p class="byline">by <span class="username">Administrator</span> on <span class="publishdate">2006-08-29</span></p>
</div>
<div class="section">
<p class="title"><a href="http://localhost/mmm/viewarticle.php?article=This-a-test-article-of-Link-type-without-an-image%21-1">This a test article of Link type without an image!</a></p>
<p class="desc">This a test article of Link type without an image!<span class="smallText"></span></p>
<p class="byline">by <span class="username">Administrator</span> on <span class="publishdate">2006-08-29</span></p>
</div>
</body></html>

I have included the image as an attachment for easy of testing the code above so you can see what I mean!

Hopefully someone could help?

thanks in advance,

regards // infin.

Hello all,
I'm trying to add digg stories to my site & want to format it with css. Digg says you can use CSS with the class names to customize the display. Havent use css before so I'm lost...if someone could hook me up with this I would sure appeciate it.
I would like to be able to format the links and text differently.

The code I want to use to add digg is:
Code:

<script language="JavaScript" src="(URL address blocked: See forum rules)/diggjs/front/tech_news/0" type="text/javascript"></script>

I'm going to put it in a frame so just on a blank page.

Thanx!