CSS - Passing Parameter To Separate Css Sheet?

I am trying to use the following in my external style sheet for my links:

Code:

a:link, a:visited{
color: #006699;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;

}

a:hover {
color: #006699;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;

}

a.big {
color: #006699;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;

}

a.big:hover {
color: #006699;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;

}

a.bigger {
color: #006699;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;

}

a.bigger:hover {
color: #006699;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;
}

My problem is that I can't get big & bigger to work properly in Internet explorer. When I hover over the link it goes to its proper size but when not hovering it stays at 11px.

Hello.... As I'm sure many that post to this board are, I'm pretty new to CSS. I've been reading about it for years, studying it for several months, dabbling with it for a few weeks, and writing my first useful, semi-complex CSS page for about 2 days....

My page looks exactly like i want it to (at least with my half dozen little tests so far) in Firefox. i started with no CSS, then added more and more, trial and error, until I got it just how I like it. Then I opened it in IE! OH BOY! It doesn't even look close to what it is in FF!!!!! I've read enough about CSS to assume that Firefox rendered it as it's supposed to be rendered, and IE did whatever was convenient for them.

Here's the page: http://www.triptrop.com/main.html

My intent: I want a header, footer, and 2 equal columns split right down the middle. Each column will contain any number of blocks one right after the other, and independent of the blocks in the other column.

Don't pick on my about the colors, I'm just messin around right now

Any help would be helpful (by definition)

Hi there. I have a print style that won't display images when printing..

img {display: none;}

I have a certain page where I need the print style sheet but will like the images to print. How can I override the print style for the images?

Hi all!

Hope you are well! Anyway, I have the following in my style sheet.... should this work?

PHP Code:
 td {
text-align: centre;
} 





or not?

Hi guys,

done a few other pages (such as reports and things e.t.c which are basically white pages with text and i get the rightfloat that is on my normal pages appearing all the time!?!?


Anyone give me an idea why? tried it on a blank page and still nothing... black page here >>>

http://www.generating-sets.com/showissue.php

CSS below!

Charlie



PHP Code:
 html {height:100%;}
body {
margin:0; padding:0; height:100%;
background-image:url(images/newback.jpg);
background-position:top right;
background-repeat:repeat-y;
background-color:#ffffff;
font-family: sans-serif; 
font-size: .7em;
}
#wrap {
background-image:url(images/newback150px.jpg);
background-position:top left;
background-repeat:repeat-y;
min-height:100%;
}
* html #wrap {height:100%}

div#navbar {padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px}

div#formbox {
color: #000000;
padding: 2%;
border: #000044 solid 1px;
}
div.displaybox {
color: #000000;
padding: 2%;
margin: 1%;
border: #000044 solid 1px;
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;
font-size: 1.1em;
}
div#userbar {padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px}

div#topleveladminbar {
padding: 0%; 
text-align: center;
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff; 
margin-bottom: 0px; 
border-bottom: solid #000000 1px
}

#header {
background-color: #000044;
background-image:url(images/wel.jpg);
width: 100%;
background-repeat: repeat;
border-bottom: 2px #000000 solid;
color: #ffffff; 
margin:0; padding:0;
height:100px;
}


#left {
float:left;
width:149px;
background-image:url(images/newback.jpg);
background-repeat: repeat;
color: #ffffff; 
text-align:center;
background-color: #000044;
border-right: 1px #000000 solid; 
}
#main {
position:relative;
margin-left:200px;
}

#content {
text-align:center;
padding:4px;
margin-right:200px;
margin-bottom:150px;
text-align:left;
}

#clearfooter {
clear:both;
height:80px;
overflow:hidden;
}
#footer {
height:40px;
background-color: #000044;
border-top: 2px #000000 solid;
margin:0; padding:0;
background-image:url(images/newback.jpg);
background-repeat: repeat;
margin-top:-0px;
color: #ffffff; 
text-align:center;
}
div#newsbar {padding: 0%; 
text-align: left;
height:150px; 
background-image:url(images/newback.jpg);
background-repeat: repeat;
background-color: #000044; 
color: #ffffff;
margin-left: +150px;
margin-right: +10px; 
margin-top: -180px;
border: 2px #000000 solid;  
width: auto;} 

code {
font-size:0.8em;
border:1px solid navy;
background-color:white;
color:#333333;
padding:10px;
display:block;
width:80%;
margin:10px auto;
overflow:auto;
}

h1 {font-size: 1.4em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h2 {font-size: 1.3em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h3 {font-size: 1.2em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h4 {font-size: 1.1em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
text-align: left;} 

h5 {font-size: 1em; 
font-family: Times, "Times New Roman", serif; 
font-weight: bold; 
} 

a:link {color: #ffffff; 
text-decoration: underline;} 

a:visited { 
    color: #ffffff; 
    text-decoration: underline;}     

a:hover {color: #ffffff;
background-color: #0000FF;
text-decoration: underline;} 

.displaybox a:link {color: #0000FF; 
text-decoration: underline;} 

.displaybox a:visited { 
    color: #0000FF; 
    text-decoration: underline;}     

.displaybox a:hover {color: #000044;
background-color: #EEEEEE;
text-decoration: underline;} 

.redtext {
color: #ff0000;
font-weight: bold;
}
.greentext {
color: #00ff00;
font-weight: bold;
} 

A bit of background. I've just started an IT degree and the first assignment is to create a web page about myself. (I'll post it here once it's up and running). We've got to use a separate as opposed to inline style sheet, and our pages must be validated as part of the assessment. I don't have any trouble validating my XHTML (strict) code but even the simplest style sheet (only a single command) get's rejected. I'm also following the rules set out in the text I've got (The Web Wizards guide to XHTML by Cheryl. M. Hughes).
Question. Do I need a DOCTYPE statement in a style sheet?

I have a tables layout and for some reason everytime I go to add something to the layout (eg. cutenews) the background disappears. By that I also mean it disappears completely from the html coding in index.
This is the style for my layout:

body, table, td{

font-size: 9px;
font-family: sans-serif;
color: #66CCCC;
letter-spacing: 1px;
margin: 0;

}

.navi{

font-size: 9px;
font-family: sans-serif;
margin-top: 5px;
text-align: left;
}


.navhead{

width: 100px;
height: 38px;
padding-top: 21px;
padding-right: 0px;
font-size: 10px;
text-align: right;
color: #CCCCCC;
margin-bottom:10px;
font-family: monospace;
text-transform: lowercase;
letter-spacing: 5px;
background: black url(Bilder/navheader.jpg);

}

.head{

width: 310px;
height: 38px;
padding-top: 10px;
padding-left: 25px;
font-size: 10px;
text-align: left;
color: #CCCCCC;
margin-bottom: 20px;
margin-top: 20px;
font-family: monospace;
text-transform: lowercase;
letter-spacing: 5px;
background: black url(Bilder/header.jpg);

}

.content{

width: 310;
padding-left: 10px;
padding-right: 10px;
color: #66CCCC;
text-align: justify;

}




a:link,
a:visited,
a:active {
text-decoration: none;
color: #009999;


}

a:hover {
text-decoration: none;
color: #00CC33;


}

Where and what code can I use for a fixed background?

Hello

I'm having trouble with displaying a background image in a div.

It worked fine with embedded CSS but when I changed the CSS to external, the text loads but the bg image doesnt.

I'll post some code to explain it...

This is in the external style sheet:

#navbgtop {
position:absolute;
left:38px;
top:185px;
width:194px;
height:18px;
z-index:2;
background-image: url(images/navbartop.jpg);
}








and yes of course I have made the proper link to it in the <head> tag:
<link rel="stylesheet" type="text/css" href="css/nav.css" media="all" />


For some reason the background image wont display. Any ideas?



One more question also, does it matter if I use media="all" for the whole website? Or do I even need to bother using media=xyz ? I heard most browsers don't even read that as of yet.

I need some help. I am a relative beginner with CSS and have a problem that is eluding me.

Specifically in the right-hand sidebar on this page (FriendsAcrossTheWater.org/blog), you will note that all the links are on separate lines by themselves.

I do not want this behavior and I am not sure what is causing it nor what to do to correct it.

Can you help?

Thanks,
Bob Ross

i try to follow this tutorial but the result is not what i have expected. nothing happened at the index.asp.http://www.maxdesign.com.au/present...rial/roll09.htm

default.css

Code:

#cell td
{
margin: 0;
padding: 0;
list-style-type: none;
}

#cell a
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: .2em .8em;
text-decoration: none;
}

#cell a: hover
{
background-color: #369;
color: #FFF;
}

index.asp

Code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/default.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="200" border="1" align="center">
  <tr>
    <td colspan="3" align="center"><img src="images/background_raw.jpg" width="750" height="94"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>
	<table width="200" border="1">
      <tr>
        <td class="cell">Home</td>
      </tr>
      <tr>
        <td class="cell">About Us </td>
      </tr>
      <tr>
        <td class="cell">Services</td>
      </tr>
      <tr>
        <td class="cell">Contact Us </td>
      </tr>
    </table></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

I have a problem separating css for different links throughout my site. For example, my navigation tab links and links inside the text have the same design. I just started learning css so I would appreciate any help. Thanks

This is kind of an odd situation. Hopefully someone who's better at CSS than I am can see what I'm doing wrong.

Unfortunately, since I'm a new member to this forum, I can't post links to the pages in question. So I'll try to explain the situation the best way I can.

I have a page that was originally created using one style sheet. Another webmaster in our company made some adjustments for me, but she attached a different style sheet, one that's used for another website, and used that for the changes.

I've been trying to just incorporate the styles from her sheet into the original style sheet. I even took that style sheet and made a copy of it and put it in my folder. But there's something in her style sheet that sets the layout, so whenever I delete it, the formatting goes just a little off.

I don't think I'm explaining this very well. Ideally, I'd like to just keep it all in one style sheet, but the page doesn't seem to like that. And I can't really modify the problem style sheet, because it's used by other pages.

It's really hard to explain without viewing the two sample pages. Don't know the rules here yet, but maybe if somebody has a suggestion, I can send you the links and you can look at them yourself.

If anyone understands this rambling mess, I'd really appreciate your help.

Thanks,

Ann Daman

I have a website/application that I want to give the users the option to select from multiple CSS's on their browser. How do I go about letting the user change the style sheet?

-Dynasty

Hi Please look at this test page of site in progress.

http://thetransactiongroup.net/advisor/NEW/index.asp

On the left side there is a graphical/stylesheet based nav panel.

When you hover over the seventh button from the top, the popout navigation is double spaced. How can I make it like the others: single spaced?

Here is the stylesheet for that section of the nav, including my unsuccessful attempt to make it single spacing:

#nav li.m7 { background: url("m7.gif") -190px 0 no-repeat; }
#nav li.m7 a {
background: url("m7.gif") 0 0 no-repeat;
height:32px;
line-height: normal;
}
#nav li.m7 a:hover { background-image:none; }
#nav li.m7 ul li a { background-image:none; }

--- below is complete stylesheet:
#nav
{
padding: 0;
margin: 0;
width: 190px;
}

#nav li
{
list-style: none;
position: relative;
float: left;
margin-bottom: -1px;
width: 190px;
}

#nav a
{
width: 190px;
display: block;
height:20px;
}

#nav li.m1 { background: url("m1.gif") -190px 0 no-repeat; }
#nav li.m1 a { background: url("m1.gif") 0 0 no-repeat; }
#nav li.m1 a:hover { background-image:none; }

#nav li.m2 { background: url("m2.gif") -190px 0 no-repeat; }
#nav li.m2 a { background: url("m2.gif") 0 0 no-repeat; }
#nav li.m2 a:hover { background-image:none; }

#nav li.m3 { background: url("m3.gif") -190px 0 no-repeat; }
#nav li.m3 a { background: url("m3.gif") 0 0 no-repeat; }
#nav li.m3 a:hover { background-image:none; }
#nav li.m3 ul li a { background-image:none; }


#nav li.m4 { background: url("m4.gif") -190px 0 no-repeat; }
#nav li.m4 a { background: url("m4.gif") 0 0 no-repeat; }
#nav li.m4 a:hover { background-image:none; }
#nav li.m4 ul li a { background-image:none; }

#nav li.m5 { background: url("m5.gif") -190px 0 no-repeat; }
#nav li.m5 a { background: url("m5.gif") 0 0 no-repeat; }
#nav li.m5 a:hover { background-image:none; }
#nav li.m5 ul li a { background-image:none; }

#nav li.m6 { background: url("m6.gif") -190px 0 no-repeat; }
#nav li.m6 a { background: url("m6.gif") 0 0 no-repeat; }
#nav li.m6 a:hover { background-image:none; }

#nav li.m7 { background: url("m7.gif") -190px 0 no-repeat; }
#nav li.m7 a {
background: url("m7.gif") 0 0 no-repeat;
height:32px;
line-height: normal;
}
#nav li.m7 a:hover { background-image:none; }
#nav li.m7 ul li a { background-image:none; }

#nav li.m8 { background: url("m8.gif") -190px 0 no-repeat; }
#nav li.m8 a { background: url("m8.gif") 0 0 no-repeat; height:36px; }
#nav li.m8 a:hover { background-image:none; }

#nav li.m9 { background: url("m9.gif") -190px 0 no-repeat; }
#nav li.m9 a { background: url("m9.gif") 0 0 no-repeat; }
#nav li.m9 a:hover { background-image:none; }
#nav li.m9 ul li a { background-image:none; }

#nav li.m10 { background: url("m10.gif") -190px 0 no-repeat; }
#nav li.m10 a { background: url("m10.gif") 0 0 no-repeat; }
#nav li.m10 a:hover { background-image:none; }

#nav li.m11 { background: url("m11.gif") -190px 0 no-repeat; }
#nav li.m11 a { background: url("m11.gif") 0 0 no-repeat; }
#nav li.m11 a:hover { background-image:none; }

#nav li.m12 { background: url("m12.gif") -190px 0 no-repeat; }
#nav li.m12 a { background: url("m12.gif") 0 0 no-repeat; }
#nav li.m12 a:hover { background-image:none; }

#nav li.m13 { background: url("m13.gif") -190px 0 no-repeat; }
#nav li.m13 a { background: url("m13.gif") 0 0 no-repeat; }
#nav li.m13 a:hover { background-image:none; }

#nav li.m14 { background: url("m14.gif") -190px 0 no-repeat; }
#nav li.m14 a { background: url("m14.gif") 0 0 no-repeat; }
#nav li.m14 a:hover { background-image:none; }

#nav li.m15 { background: url("m15.gif") -190px 0 no-repeat; }
#nav li.m15 a { background: url("m15.gif") 0 0 no-repeat; }
#nav li.m15 a:hover { background-image:none; }

#nav li.m16 { background: url("m16.gif") -190px 0 no-repeat; }
#nav li.m16 a { background: url("m16.gif") 0 0 no-repeat; }
#nav li.m16 a:hover { background-image:none; }

#nav li.m17 { background: url("m17.gif") -190px 0 no-repeat; }
#nav li.m17 a { background: url("m17.gif") 0 0 no-repeat; }
#nav li.m17 a:hover { background-image:none; }
#nav li.m17 ul li a { background-image:none; }

#nav li.m18 { background: url("m18.gif") -190px 0 no-repeat; }
#nav li.m18 a { background: url("m18.gif") 0 0 no-repeat; }
#nav li.m18 a:hover { background-image:none; }


#nav ul
{
padding: 0;
margin: 0;
width: 240px;
border:1px solid #555;
background-color:#fff;
position: absolute;
visibility:hidden;
left:auto;
margin-left: 189px;
margin-top: -22px;
}

#nav li ul.double
{
margin-top: -32px;
}

#nav li ul li a
{
width: 230px;
border-top:1px solid #fff;
border-right:1px solid #555;
border-bottom:2px solid #555;
border-left:1px solid #fff;
color:#000;
height:17px;
line-height:17px;
text-decoration:none;
padding-left:10px;
background-image:none;
}

#nav li:hover ul, #nav li.sfhover ul
{
visibility:hidden;
}

#nav li:hover ul, #nav li.sfhover ul
{
visibility:visible;
}

I'm using CSS for style and positioning. I have this information in my style.css file. I import the file into my html file with this code:
PHP Code:
<head>
<style type="text/css" title="currentStyle">
        @import "style2.css";
</style>
</head> 





When calling the page with the MS Internet Explorer, it first writes all the text out unformatted and then it applies the format. I know it does it this way because I can see it. It is too slow.

Sometimes, it's just a flash, other times it's a whole second or two.

Regardless, I don't even want to notice the flash from unformatted to formatted. I notice that other pages don't seem to do this. How do I accomplish this? What am I doing wrong?