CSS - Can A Media Type Be Defined In An Elements Style Attribute?

Hi folks,

I am getting this error and it makes little sense to me. I am getting the following warning...


Ensure web pages print well. No Print links or CSS print styles were found on the site. Usability.gov 2:9 ,
Add a CSS style sheet for print media, or include a print media section in the current style sheet.


here is my code

<link href="style.css" rel="stylesheet" type="text/css" media="screen, print">


Thanks once again in advance for any suggestion or help!

whonoes

Hi people,

What is the equivalent of this div style attribute in css?

<div style="overflow: hidden; position: absolute; left: 0px; top: 0px; width: 500px; height: 300px">

Its the overflow what I'm looking for.



-just edited this that I have the solution sorry beginners corner

I am trying to retrieve the color and background attributes of a CSS class defined in a .css external file. I would like to retrieve the attributes in a JavaScript function, given the class name.

I am trying to invert the colors of a table cell background and hyperlink text.

--begin style sheet--
table.submenu {
background:#66CCFF;
position:absolute;
visibility:hidden;
font:8pt Arial;
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
}
a.menulink:link,a.menulink:visited,a.menulink:active {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}
--end style sheet-


--begin javascript--
function invertmenu(elmntID,elmntClass) {
//the first two lines of code do not work
var textColor = elmntClass.style.color;
var backColor = elmntClass.style.background;

document.all[elmntID + "link"].style.color = backColor;
document.all[elmntID].style.background = textColor;
}
--end javascript--


--begin html code--
<tr><td class="submenu" id="techdept1" onmouseover="invertmenu('techdept1','submenu')" onmouseout="invertmenu('techdept1','submenu')"><a href="t40/default.asp" class="menulink" id="techdept1link">T-40</a></td></tr>
--end html code--


thanks for your help!

- tim

Can someone tell me why css style settings for links won't effect a mailto: link? Is there anyway to make it happen without individually coding style into each mailto: link?

Thanks,
HeadElf

So far I've been unable to find the answer to this question despite numerous Google searches, and am sincerely hoping someone here can give me the definitive answer.

I have an unordered list which requires use of the decimal-leading-zero list style type. However, I need to start the number at 00 instead of 01.

In HTML the way you do this is to put inside the UL tag start="0", but this is not validatable, and actually deprecated.

How can I begin a list with 00 rather than 01 for the decimal-leading-zero list-style-type?

TIA for all help and advice.

Please look at this page - http://www.tmhdesign2.com The list nav up at the top I have a bg image for the a tag and want to not display the bullet for the <li> but list-style-top:none does not work...

I was just testing some possible layouts for my navigation.. and
I came across an inconsistency that I've never encountered befo

Code:

#menu #nav{
	padding:0px;
	list-style-type:none;
	margin: 0px 0px 15px 0px;
	background-color:#FFF;
}
#nav li{
	float:left;
	/*display:inline;*/
	margin-left:5px;
	margin-right:5px;
}

So basically, in Fx 1.0.7 when I comment out the display:inline
the bullets are shown again (despite the declaration being uncommented)

In IE 6.0 there isn't an issue.

Is this descrepancy another time where Fx revets to what it
assumes as the correct way to handle the code? Or am I just
missing out on something here.

Hello all,

I'm modifying Cory LaViska's PHP_File_Tree cascading style sheet, default.css, to remove the round bullets from the LI tags.

Browsed through the forums to find a solution to my problem with no luck.

Please, take a look at my test website: www seemyinvestments dot com

There, you can see what I'm talking about.

The webpage lists a directory tree on the left-hand side, and I want to get rid of the bullets (the little dark dots).

I've tried a number of ways of implementing 'list-style-type: none;' (You'll see one attempt below labelled 'not working!')

Doesn't work for Firfox or IE.

Any suggestions?

Thanks.

Code:

/* PHP File Tree Default Theme

	By Cory LaViska (http://abeautifulsite.net/)
	Featuring the Silk Icon Set from famfamfam (http://www.famfamfam.com/lab/icons/silk/)

*/

    .php-file-tree {
	    font-family: Georgia;
	    font-size: 12px;
	    letter-spacing: 1px;	
	    line-height: 1.5;
    }

	.php-file-tree A {
		color: #000000;
		text-decoration: none;
	}
	
	.php-file-tree A:hover {
		color: #666666;
	}

	.php-file-tree .open {
		font-style: italic;
	}
	
	.php-file-tree .closed {
		font-style: normal;
	}
	
	.php-file-tree .pft-directory {
		list-style-image: url(images/directory.png);
	}

	.php-file-tree .pft-directory-empty {
		list-style-image: url(images/directory_empty.png);
	}

	/* Default file */
	.php-file-tree LI.pft-file { list-style-image: url(images/file.png); }
	
	/* Additional file types */
	.php-file-tree LI.ext-3gp { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-afp { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-afpa { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-asp { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-aspx { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-avi { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-bat { list-style-image: url(images/application.png); }
	.php-file-tree LI.ext-bmp { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-c { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-cfm { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-cgi { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-com { list-style-image: url(images/application.png); }
	.php-file-tree LI.ext-cpp { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-css { list-style-image: url(images/css.png); }
	.php-file-tree LI.ext-doc { list-style-image: url(images/doc.png); }
	.php-file-tree LI.ext-exe { list-style-image: url(images/application.png); }
	.php-file-tree LI.ext-gif { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-fla { list-style-image: url(images/flash.png); }
	.php-file-tree LI.ext-h { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-htm { list-style-image: url(images/html.png); }
	.php-file-tree LI.ext-html { list-style-image: url(images/html.png); }
	.php-file-tree LI.ext-jar { list-style-image: url(images/java.png); }
	.php-file-tree LI.ext-jpg { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-jpeg { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-js { list-style-image: url(images/script.png); }
	.php-file-tree LI.ext-lasso { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-log { list-style-image: url(images/txt.png); }
	.php-file-tree LI.ext-m4p { list-style-image: url(images/music.png); }
	.php-file-tree LI.ext-mov { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-mp3 { list-style-image: url(images/music.png); }
	.php-file-tree LI.ext-mp4 { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-mpg { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-mpeg { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-ogg { list-style-image: url(images/music.png); }
	.php-file-tree LI.ext-pcx { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-pdf { list-style-image: url(images/pdf.png); }
not working! --->	.php-file-tree LI.ext-php { list-style-image: url(images/php.png); list-style-type: none; }
	.php-file-tree LI.ext-png { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-ppt { list-style-image: url(images/ppt.png); }
	.php-file-tree LI.ext-psd { list-style-image: url(images/psd.png); }
	.php-file-tree LI.ext-pl { list-style-image: url(images/script.png); }
	.php-file-tree LI.ext-py { list-style-image: url(images/script.png); }
	.php-file-tree LI.ext-rb { list-style-image: url(images/ruby.png); }
	.php-file-tree LI.ext-rbx { list-style-image: url(images/ruby.png); }
	.php-file-tree LI.ext-rhtml { list-style-image: url(images/ruby.png); }
	.php-file-tree LI.ext-rpm { list-style-image: url(images/linux.png); }
	.php-file-tree LI.ext-ruby { list-style-image: url(images/ruby.png); }
	.php-file-tree LI.ext-sql { list-style-image: url(images/db.png); }
	.php-file-tree LI.ext-swf { list-style-image: url(images/flash.png); }
	.php-file-tree LI.ext-tif { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-tiff { list-style-image: url(images/picture.png); }
	.php-file-tree LI.ext-txt { list-style-image: url(images/txt.png); }
	.php-file-tree LI.ext-vb { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-wav { list-style-image: url(images/music.png); }
	.php-file-tree LI.ext-wmv { list-style-image: url(images/film.png); }
	.php-file-tree LI.ext-xls { list-style-image: url(images/xls.png); }
	.php-file-tree LI.ext-xml { list-style-image: url(images/code.png); }
	.php-file-tree LI.ext-zip { list-style-image: url(images/zip.png); }
	/* You can add millions of these... */

This is one of Many issues I have with fire fox, Basically I want a list of hyperlinks with no bullets. Normally I would set list-style-type = "none" for the <uL> tag and that would be it.

In fire fox, the list disappears. Also it appears that FF has issues with hyperlink in a list because even with out the style type set, the list disapears.


CSS Code:

a:link {
	font-family: "Bradley Hand ITC", "Monotype Corsiva";
	color: #999999;
}

ul{
margin:10px;
padding: 10px;
list-style-type: none;

}
li
 {
  font-family: "Bradley Hand ITC", "Monotype Corsiva";
	color: #999999;
}

html Code:

<div id="projects"> 
    <h1>Projects</h1>
    <P> 
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">1</a></li>
    </ul></p>
    </div>

Hi All:

When i use <ul><li>
and <li> is set to "list-style-type: none;" IE and Firefox renders it differently.

Does anybody know a work-around for this?

The good example of this and the CSS code is at following

holzgreen.com/list-test/

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>List Test 1</title>
<meta name="Description" content="x.x.x. CHANGE .x.x.x">
<meta name="KeyWords" content="x.x.x. CHANGE .x.x.x">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="Publisher" content="Firework Studio">
<META name="revisit-after" content="15 days">
<META name="robots" content="index, follow">
<META name="Robots" content="All">
<link href="000-style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {
font-family: "Courier New", Courier, monospace
}
-->
</style>
</head>

<body>
<div #none>
<ol>
<li>List item - 1</li>
<li>List item - 2
<ol>
<li>LI - 2.1</li>
<li>LI - 2.2</li>
</ol>
</li>
<li>List item - 3</li>
<li>List item - 4</li>
</ol>
</div>
</body>
</html>

CSS:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
border: 1px solid #000000;
margin: 0em;
padding: 0em;
}

#none ol {
background: #BB0000;
list-style-position: inside;
margin: 0em;
padding-left: 1em; /* Moves the Whole List */
}

#none ol ol{
background: #BB00BB;
list-style-position: inside;
margin-left: 0em;
padding-left: 3em; /* Moves the Nested List */
}

#none ol li {
background: #BBBB00;
font-size: .8em;
margin-left: 0em;
list-style-type: none;
}

#none ol ol li {
background: #00BBBB;
font-size: 1em;
list-style-type: lower-alpha;
margin-left: 0em;
list-style-type: none;
}



Thanks for your interest

Hi,

Tried using Pseudo Elements to set style property for first character (first-letter) and first line (first-line) inside an element.

Every thing works fine when we set such styles on div or table elements, but failed on anchor tags

Working on
Code:

<style>
div:first-letter{font-weight: bold;}
</style>

<div>
Pseudo Div<br>
Line Two<br>
Line Three<br>
</div>

Failed On
Code:

<style>
a:first-letter{font-weight: bold;}
</style>

<a href="">
Pseudo Div<br>
Line Two<br>
Line Three<br>
</a> 

Can anyone give me the solution for this.

Thanks in advance!

Hi

I have some css styles that work like I want when displayed in a browser but when I print the screen to a PDF, almost all the info is lost, reverting to a single long column of text. Do you need to define separate 'screen' and 'print' versions of a style? If so, how do you include them in a page? Do you have to jump through any special hoops to insure the browser uses the correct media type (screen/print) for the correct media?

TIA

I found this great website that shows me how to create these great buttons with some images.
http://www.dynamicdrive.com/style/csslibrary/item/css_oval_buttons/

How can I do this with a button instead of a link???

Hi,

Have an unordered list which I use as a menu. I have set the list-style-type property to none because I don't want any bullets or anything. When I look at the menu within a bordered div, it seems like there is a margin to the left of the <ul>. Eventhough there are no bullets in the <ul>, the <li> are still placed at the same location from the left. How can I left adjust the unordered list so that there are no visible margin at the left side?

/Hubba Bubba

Hello all,

I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly.

The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements.

Code:

		#wrapper-body ul.staff-list{
			list-style-type:none;
			padding-top:10px;
			position:relative;
		}
	
		#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
	
			#wrapper-body ul.staff-list li{
				float:left;
				width:230px;
				position:relative;
				padding:8px 0 8px 15px;
				z-index:1;
			}
			#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
			#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
			#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
			#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
				#wrapper-body ul.staff-list li p{
					padding:0 0 9px 0;
					margin-left:91px;
				}
	
				#wrapper-body ul.staff-list li small{
					padding:0 0 5px 0;
					margin-left:91px;
				}
		
				#wrapper-body ul.staff-list-clerks li span{
					color:#A6302B;
					display:block;
					float:left;
				}
		
				#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
				#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
				#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
		
		
				#wrapper-body ul.staff-list li div.staff-list-detail{
					display:none;
					background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
					padding-bottom:3px;
					margin-top:-15px;
					left:4px;
					z-index:10;
					top:15px;
					position:absolute;
				}

				#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }

				#wrapper-body ul.staff-list li:hover div.staff-list-detail{
					display:block;
}

An image of what is happening below:


Thanks for reading!