CSS - Of Mozilla, Linked Css, Imports And Selectors

It would be a great idea to have some html type viewer, or FF plugin that would show you the slectors of an html document. Does anyone know of something like this ? I'm trying to learn css and if I could just highlite some text in the html document and it would display the possible selectors for that selection I think it would be a great learning aid.

Any ideas ?

I want to style something based on what comes after it. If a div is the last to have the class "combinedyes" I want to make the text red for example. I've experimented with:

#EditMedHistoryDisplay div.cmMed.combinedyes + div.cmMed.combinedno

But that styles the combinedno element...

Any ideas?






Code:

<div id="EditMedHistoryDisplay">
	<div class="cmMed odd combinedyes">Testosterone 2 mg <span class="medicationDelMethod">Cream-Transdermal</span> 		<div class="cmNotes ecmInstructions" id="cmnotes_21158" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div>
	</div>
	
	<div class="cmMed even combinedyes">DHEA 10 mg <span class="medicationDelMethod"> Cream-Transdermal</span>
		<div class="cmNotes ecmInstructions" id="cmnotes_21194" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div>
	</div>

	<div class="cmMed even combinedyes">Test 10 mg <span class="medicationDelMethod"> Cream-Transdermal</span>
		<div class="cmNotes ecmInstructions" id="cmnotes_21184" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div>
	</div>


	<div class="cmMed even combinedno">Testosterone 2 mg <span class="medicationDelMethod"> Patch-Transdermal</span>
		<div class="cmNotes ecmInstructions" id="cmnotes_21038" title="Click to edit">It's a patch...</div>
	</div>
</div>

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,

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

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

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?

Kinda new, bear with me. I have a linked image, and want to add a simple black border w css. I have this coded in an external .css:

.rr25 {
border-style: solid;
border-width:2px;
border-color: #000000;
}

And this is what is in my HTML:
(page is linked to external .css)

<tr>
<td valign="top" align="center">
<a href="photo_gallery/clients/gallery_8.jpg" target="mainpic">
<div class="rr25">
<img src="photo_gallery/clients/gallery_8.jpg" width="80" height="107" border="0">
</a>
</td>
</tr>


OK. The image displays but it is centered with tons of white space on the left and right and a small margin on the bottom.

The margin grows/shrinks when I adjust the table width prop.
???????

Hi can anyone tell me if I can override embedded CSS with a linked stylesheet?

Here is what I want to change:
Code:

<col width="40%" style="background-color:#EEEEEE;text-align:left;">

I want to change the background-color without changing anything in the above mentioned code, this means I want to change it with an extern stylesheet.

I dont think you can wrap a <div> inside <a>, but is there any way to make an entire <div> area "linked" ? One idea - Im sure i can hook up an onclick event with javascript, but how would i change the mouse prompt when the user moves thier mouse over it ?

First off, I'll preface that I'm not a CSS expert by any means. I've done web development for many years, but have slowed down a great deal over the last few, so never got heavily into the aspects of CSS that completely replace HTML (tables, etc.).

At my current place of employment (where my primary duty is not that of a web developer, thank god), I'm being asked to develop a set of 'templates' using primarily CSS.

I've been using the CSS Sculpter plug in for Dreamweaver, and have had decent results from it, but my main issue at this point is this:

When I take the CSS code from the header of the page and put it into a separate stylesheet and then link to that stylesheet, it jacks up the content portion of the site. It seems to be completely disregarding the right margin of the content div and allowing text to simply run off. When the code (without changes) is pasted back into the header of the page rather than linked to it, the issue is resolved.

Here's the CSS:

Code:

<style type="text/css" media="all">
<!--
/* This rule resets a core set of elements so that they will appear consistent across browsers. Without this rule, content styled with an h1 tag, for example, would appear in different places in Firefox and Internet Explorer because each browser has a different top margin default value. By resetting these values to 0, the elements will initially be rendered in an identical fashion and their properties can be easily defined by the designer in any subsequent rule. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
/* The body is the outermost layout component and contains the visible page content. Setting properties for the body element will help to create consistent styling of the page content and more manageable CSS. Besides using the body element to set global properties, it is common to use the body element to set the background color of the page and create a centered container for the page content to display. */
body {
background-color: #666;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
text-align: center; /* Centers the page content container in IE 5 browsers. */
}
/* Commonly used to style page titles. */
h1 {
color: #000;
font-size: 14px;
font-weight: bold;
line-height: 14px;
}
/* Commonly used to style section titles. */
h2 {
color: #000;
font-size: 12px;
font-weight: bold;
line-height: 14px;
}
/* Sets the style for unvisited links. */
a, a:link {
color: #000;
font-weight: bold;
text-decoration: none;
}
/* Sets the style for visited links. */
a:visited {
color: #000;
font-weight: bold;
text-decoration: none;
}
/* Sets the style for links on mouseover. */
a:hover {
color: #000;
text-decoration: underline;
}
/* Sets the style for a link that has focus. */
a:focus {
color: #000;
}
/* Sets the style for a link that is being activated/clicked. */
a:active {
color: #000;
}
/* This is a container for the page content. It is common to use the container to constrain the width of the page content and allow for browser chrome to avoid the need for horizontal scrolling. For fixed layouts you may specify a container width and use auto for the left and right margin to center the container on the page. IE 5 browser require the use of text-align: center defined by the body element to center the container. For liquid layouts you may simply set the left and right margins to center the container on the page. */
#outerWrapper {
background-color: #fff;
border-left: solid 1 px #666;
border-right: solid 1 px #666;
margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
text-align: left; /* Redefines the text alignment defined by the body element. */
width: 650px;
overflow: hidden;
}
#outerWrapper #header {
background-color: #ddd;
border-bottom: solid 1px #666; /* Sets the bottom border properties for an element using shorthand notation */
font-size: 18px;
font-weight: bold;
line-height: 15px;
padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #topNavigation {
background-color: #ebebeb;
border-bottom: solid 1px #666; /* Sets the bottom border properties for an element using shorthand notation */
height: 10px;
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #contentWrapper #rightColumn1 {
background-color: #ebebeb;
border-left: solid 1px #666; /* Sets the left border properties for an element using shorthand notation */
float: right;
padding: 10px 10px 32767px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
margin-bottom: -32767px;
width: 14em;
}
#outerWrapper #contentWrapper #leftColumn1 {
background-color: #ebebeb;
border-right: solid 1px #666; /* Sets the right border properties for an element using shorthand notation */
float: left;
padding: 10px 10px 32767px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
margin-bottom: -32767px;
width: 14em;
}
/* Contains the main page content. When using a mutliple column layout the margins will be set to account for the floated columns' width, margins, and padding. */
#outerWrapper #contentWrapper #content {
margin: 0 16em 0 16em; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */

}
/* Using floated elements and a clear float class is a common method to accomplish multiple column tableless layouts. If floated elements are used without being cleared the elements following will wrap around the floated element. This class should be applied to an element after the last floated element and before the close of the container with floated elements. */
#outerWrapper #contentWrapper .clearFloat {
clear: both;
display: block;
}

#footer {
background-color: #ddd;
width: 650px;
border-top: solid 1px #666; /* Sets the top border properties for an element using shorthand notation */
padding: 10px 0px 10px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
margin: 0 auto 0 auto;
}
-->
</style>
<!--[if IE 5]>
<style type="text/css">
/* IE 5 does not use the standard box model, so the column widths are overidden to render the page correctly. */
#outerWrapper #contentWrapper #leftColumn1 {
width: 16em;
}
#outerWrapper #contentWrapper #rightColumn1 {
width: 16em;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* The proprietary zoom property gives IE the hasLayout property which addresses several bugs. */
#outerWrapper #contentWrapper #content {
zoom: 1;
}
</style>
<![endif]-->

--------------

And then the page code:

Code:

<body>

<div id="outerWrapper">
<div id="header"><img src="hockley_header.jpg" alt="" width="650" height="150" /></div>
<div id="topNavigation">
<div align="center">Nav </div>
</div>
<div id="contentWrapper">
<div id="rightColumn1"><h2>H2 rightColumn1 Title </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. <a href="#">More...</a></p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p></div>
<div id="leftColumn1"><h2>H2 leftColumn1 Title </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. <a href="#">More...</a></p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p>
</div>
<div id="content"><h1>H1 Main Content</h1>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero. <a href="#">More...</a></p>
<h2>H2 level heading</h2>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p>
<p>&nbsp;</p>
</div>
<br class="clearFloat" />
</div>
</div>
<div id="footer">Footer</div>
</div>

</body>

--------

Like I said, I'm completely out of my element here - learning bit by bit. CSS isn't difficult coming from a programming background, but my troubleshooting abilities are definitely not up to par.

Any help on this issue is greatly appreciated.

Not sure if this is the right place to ask this but it is sort of a CSS problem.

When I change my linked CSS file and refresh the page I'm working on in the browser, the CSS doesn't automatically get refreshed so the changes I've made don't show up. I can force a refresh by using ctrl+F5 but obviously that's no use for a live setting.

Has anyone else come across this problem and if so, do you know of a solution? Is there a way to force the browser to refresh the style sheet?

Thanks.

I have an imaged logo on top of my page that I want to link to the startpage. However, whenever I link the image, I get the typical border that signalizes a link.

How can I get rid of this border with the help of my Stylesheet? It seems like I can't even change the color of the border in IE??

Thanks a lot
Steve

Edit: Never mind -- searched before posting and did not find anything, but after I posted, there it was...

Used {border:0;} on the img tag -- voila...

Im looking to make it so when someone rolls over a img i have linked it makes the text (which is also a link) next to it act like it has been rolled over as well.

Basically its a list set up like this.


Code:

<dt><a href="#"><img src="blah"/></a></dt>
<dd><a href="#">Text link here</a></dd>

I've seen it done a few ways, but none of them work really for my setup. The ones I've seen set up the IMG as a background positioned.

Anyone have an answer?