Learn VBA & Macros in 1 Week!

CSS - Css Image Performance Question, And 1 Big Style Sheet Or Several Smaller Ones?

Full Excel VBA Course - Beginner to Expert

Css Image Performance Question, And 1 Big Style Sheet Or Several Smaller Ones?	View Content

My Question is...

When I put an image in a stylesheet, when does it get loaded?
Does it get loaded when the style sheet gets loaded or does it get loaded only if I'm using the style on the page that has the image?

The reason I ask... I have a lot of images in my style sheet, and I'm concerned about performance. Only some of the images in the style sheet are used on each page, but never all of them at once.

I'm wondering if I should split up my style sheet into smaller style sheets, so that I will never be loading images for a page that I'm not going to be using on that page. (this would require the inclusion of 2 smaller style sheets on each page instead of 1 big style sheet).

My style sheet is over 200 kb right now, and that does not include the image file sizes.

Please advise.

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Rules - Style Sheet Precedence Question

Css Question: Using A Style Sheet Within An Asp Page, Formatting Issues

Background Image In This Css Style Sheet...

Image Sprite Image External Style Sheet

Background Image Doesn't Work From External Style Sheet

Style Sheet In Ie7

Why Can't I Get A Style Sheet To Validate

Something Wrong With My Style Sheet?

Style Sheet Not Applying

External Style Sheet Help!

Td Element In Style Sheet Seems To Be Ignored?

Override Style Sheet?

Style Sheet Looks Right In Ff, Terrible In Ie

Help With External Style Sheet

How Can I Put A Fixed Bg Using A Style Sheet?

Can We Use Style Sheet In Windows Application

Css Style Sheet Not Working On Text

Multiple Style Sheet Options

Overwrite Style Sheet -- Scrollbar

Css Style Sheet Is Slow To Load - Help

Learn VBA & Macros for Excel in 1 Week!

Rules - Style Sheet Precedence Question

Similar Tutorials

So the basic rules a

1) Author style sheets
2) User style sheets
3) Default browser sheets

Now when you get into Author style sheets...

You have: inline styles, header style information (<style type="text/css"> </style>), external style sheets and imported style sheets.

I created a little example for myself to figure out the precedence. So that if all of these methods controled the same element, which method's style would come out the winner.

To my suprise, the order in which you include them in the HTML document has an impact on the precedence. How so? Up until now I thought that the order of precedence was: inline styles, imported styles, external style sheets (<link />), and header style information.

Code:

<html>
<head>
<link href="link.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
</head>

<body>
<p style="color: green;">What am I?</p>
</body>

</html>

As expected, the inline style wins.

Code:

<html>
<head>
<link href="link.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
</head>

<body>
<p>What am I?</p>
</body>

</html>

The header style information wins. (regardless of position of @import)

Code:

<html>
<head>

<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
<link href="link.css" rel="stylesheet" type="text/css" />
</head>

<body>
<p>What am I?</p>
</body>

</html>

External style sheet wins (<link />).

How does position influence precedence of: external style sheets (Both @import and <link />) and header style information?

Css Question: Using A Style Sheet Within An Asp Page, Formatting Issues

Similar Tutorials

Hi all, very new at this so please pardon. I am attempting to format a series of 3 columns (using the CSS holy grail) into the main body of a .asp page. Everything goes smoothly, I have the columns looking exactly as I want them, however the style sheet appears to be causing problems with the header and footer of my asp page.

Namely, it has caused the previously smoothed corner images (.gifs) in the header and footer to have a 90 degree thick white border around them. I assume that my style sheet for the body of the page is affecting elements in the header and footer as well, causing them to look odd.

Is there a way to have a style sheet only affect part of my code locally and not all of it globally? Or make certain parts of my code immune to the style sheet via some sort of markup?

Thanks!

FYI for those interested:

the style sheet I am trying to use to format my divs (frame(content left, content right, content center and content header)) is
body {
text-align:center;
border:0px solid #000;
}

#frame {
width:830px;
margin-right:auto;
margin-left:auto;
margin-top:auto;
padding:0px;
text-align:left;
}

#contentleft {
width:175px;
padding:0px;
left:auto;
top:auto;
float:left;
background:#fff;
border:0px solid #000;
}

#contentcenter {
width:480px;
padding:10px;
float:left;
text-align:left;
background:#B7C8EE;
}

#contentright {
width:175px;
padding:0px;
right:auto;
top: auto;
float:right;
background:#fff;
border:0px solid #000;
}

#contentheader {
background:#345EA2;
width:auto;
}

p,h1,pre {
margin:0px 10px 10px 10px;
}

h1 {
font-size:14px;
padding-top:10px;
}

#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}

#contentright p { font-size:10px}

The .asp page I want to use this style sheet on is


<meta http-equiv="Content-Language" content="en-us">
<body topmargin="0" leftmargin="0">
<link rel="stylesheet" type="text/css" href="sddm.css" />
<link rel="stylesheet" type="text/css" href="box2.css" />
<STYLE>
A:link {font-weight:bold}
A:hover {background:white;}
A:hover {background-color:white;}
A:visited {color:green}
A:active {color:red}
</STYLE>



The sheet appears to be affecting both my headerauth.asp and footer.asp which I do not want it to do. Is there a way to stop it from propogating to both of these other files? Or perhaps wrap the code for each of these in some sort of a tag that tells it not to use the css?

Background Image In This Css Style Sheet...

Similar Tutorials

This is the style sheet, how can i had a background image...
the page can be viewed at inkheaddesigns.com/main

Code:

<?php
header('Content-type: text/css');
header("Cache-Control: must-revalidate");

$pattern    =   '/^[^a-z0-9]{6}$/';
if (preg_replace('/[^a-z0-9]/i', '', $_GET['style']) && isset($_GET['style'])) {
$color = $_GET["style"];
} else {
$color = "9d60c1";
}
?>
/*  
Theme Name: WP-Creativix
Theme URI: http://www.wp-themix.org/themes/wp-creativix-free-premium-portfolio-wordpress-theme/
Description: WP-Creativix is a beautifull business & portfolio Wordpress Theme. It has unlimited variations due to the possibility to define a custom color code as highlight color.
It comes with a Portfolio Template already included which may display your latest work with nice Lightbox support. On the Frontpage it has a nice working Javascript Slideshow.
This Theme comes with a Javascript 3-Level Dropdown Menu. Of course there are many more features such as Custom Logo Uploader and a Big Options set! Have fun while discovering. (Please use my theme DEMO to see how the Theme looks).
Version: 1.5.2
Author: Dennis Nissle
Author URI: http://www.wp-themix.org/
Tags: white, silver, purple, light, three-columns, two-columns, fixed-width, right-sidebar, left-sidebar, theme-options, purple, front-page-post-form, photoblogging, custom-colors, custom-header, sticky-post, microformats
*/

/* General Styles */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

:focus {
outline: 0;
}

ins {
text-decoration: none;
}

del {
text-decoration: line-through;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

a {
color: #<?php echo $color;?>;
text-decoration: none;
}

a:hover {
color: #<?php echo $color;?>;
text-decoration: underline;
}

a:visited {
color: #<?php echo $color;?>;
text-decoration: none;
}

body {
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
line-height:18px;
}

blockquote {
color: #CCC;
font-size: 11px;
font-style: italic;
}

h1, h2, h3 {
color: 9d60c1;
}

address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}

table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
caption, th {
text-align: left;
}
q:before, q:after {
content: '';
}
abbr {
border:0;
}

#wrapper {
width:925px;
margin:0 auto;
}
		
#topmenu {
margin-top: 5px;
float: right;
clear: both;
}

#header {
float: left;
width: 925px;
height: 180px;
}

#logo {
float: left;
width: 230px;
}

#logo a {
font-family: Helvetica;
font-size: 24px;
text-transform: lowercase;
padding-bottom: 18px;
}

#logo a, img {
border: none;
}

#logoname {
float: left;
width: 250px;
margin-top: 145px;
}

#logoname a {
font-family: Helvetica;
font-size: 24px;
text-transform: lowercase;
padding-bottom: 18px;
}

#logoname a, img {
border: none;
}


/* Navigation Styles */

.navigation {
background: url(images/navbar.jpg) no-repeat;
padding-right:18px;
font-size:12px;
position: relative;
z-index: 6;
width: 689px;
height: 48px;
margin-left: 245px;
margin-top: 130px;
}

#search {
width: 200px;
float: right;
height: 28px;
}

#search form {
width: 200px;
height: 28px;
}

#searchbox {
background: url(images/search.gif) no-repeat top;
width: 144px;
height: 28px;
border: none;
margin-top: 10px;
padding: 5px 3px 0px 15px;
color: #6e6e6e;
}

#searchbutton {
background: url(images/search_btn.gif) no-repeat;
width: 27px;
height: 28px;
border: none;
position: relative;
top: -4px;
left: -12px;
cursor: pointer;
}

#header #navbar {
float:left;
height:50px;
line-height:50px;
padding-left:13px;
}

#navbar, #navbar ul {
margin:0;
padding:0;
list-style-type:none;
position:relative;
line-height:50px; 
z-index:5;
}

#header #navbar a {
height:48px;
display:block;
padding:0 21px;
text-decoration:none;
text-align:center;
line-height:28px; 
outline:none;
float: left;
z-index:35;
position:relative;
color: #6e6e6e;
}

#header #navbar a:hover {
color: #<?php echo $color;?>;
}

#header #navbar ul a {
line-height: 35px; 
}

#header #navbar li {
float:left;
position:relative;
z-index:20;
margin-top:10px;
}

#header #navbar li li {
border-left:none;
margin-top:0;
}

#header #navbar ul {
position:absolute;
display:none;
width:172px;
top:36px;
left:-1px;
background: #f5f5f5;
}

#header #navbar li ul a {
width:130px;
height:auto;
float:left;
text-align:left;
padding:0 21px;
}

#header #navbar ul ul {
top:auto;
}	

#header #navbar li ul ul {
left:172px;
top: 0px;
}

#header #navbar li ul ul a {
border-left:none;
}

#header #navbar a{
color:#888;
}

#header #navbar ul {
border:1px solid #c0c0c0;
border-top:none;
}

#header #navbar li ul a {
border-bottom:1px solid #fff;
border-top:1px solid #c0c0c0;
}

#header #navbar ul a, #header #navbar ul li {
background-color:#f5f5f5;
}

#header #navbar ul a:hover, #header #navbar ul a:focus {
color: #<?php echo $color;?>;
}

#header #navbar .current_page_item a {
}

#header #navbar li:hover ul ul, #header #navbar li:hover ul ul ul,#header  #navbar li:hover ul ul ul ul {
display:none;	
}
#header #navbar li:hover ul, #header #navbar li li:hover ul, #header #navbar li li li:hover ul, #header #navbar li li li li:hover ul {
display:block;
}

/* Slideshow Styles */

#slide-wrapper {
background: url(images/slider-bg.gif) no-repeat;
width: 921px;
height: 365px;
margin-top: 10px;
padding-top:5px;
z-index:1;
margin-left: 10px;
clear: both;
float: left;
}

.featurebox {
width: 921px;
height: 365px;
clear:both;
margin:auto;
}


#image-wrapper {
margin:0 auto;
display:none;
padding:0;
width: 921px;
}

#image-wrapper * {
margin:0;
padding:0;
}
	
#full-image {
position:relative;
padding:0;
width: 860px;
}

.frontslide {
display: none;
}

#text {
float:right;
position:absolute;
top:10px;
width:400px;
height:0;
color:#6e6e6e;
overflow:hidden;
z-index:4;
padding:0px;
left: 490px;
}

#text h3 a {
padding:3px 0 10px 3px;
color: #<?php echo $color;?>;
font-size: 18px;
font-weight:bold;
letter-spacing:-1px;
text-decoration: none;
}

#text h3 a:hover {
text-decoration: underline;
}

#text p {
padding:0 0 5px 3px;
color:#6e6e6e;
float:right;
font-size:12px;
text-align: justify;
margin: 0px;
}

#text p a {
color:#993399;
}

.date {
color:#9d9c9c;
font-size: 10px;
font-style: italic;
}


#image {
width:440px;
height:250px;
}

#image img {
position:absolute;
z-index:2;
width:440px;
height:200px;
left:20px;
top:10px;
border:2px solid #bfbfbf;
}

.imgnav {
position:absolute;
width:25%;
height:180px;
cursor:pointer;
z-index:3;
}

#imgprev {left:0;background:none;}
#imgnext {right:0;background:none;}

#imglink {
position:absolute;
height:150px;
width:100%;
z-index:5;
opacity:.4;
filter:alpha(opacity=40);
}

.linkhover { }

#thumbnails {margin-top:20px;height:38px;}

#arrowleft {
float:left;
width:26px;
height:49px;
background:url(images/left.gif) top center no-repeat;
padding-left:40px;
margin-top: 30px;
z-index:6;
}

#slideleft:hover {}

#arrowright {
float:right;
width:26px;
height:49px;
background:url(images/right.gif) top center no-repeat;
padding-right:40px;
margin-top: 30px;
z-index:7;
}

#slideright:hover {	}

#frontarea {
float:left;
position:relative;
width:785px;
margin-left:3px;
height:100px;
overflow:hidden;
}

html* #frontarea {margin-left:0;}

#fronter {
position:absolute;
left:0;
height:100px;
top: 10px;
}

#fronter img {
cursor:pointer;
border:2px solid #<?php echo $color;?>;
}

/* Frontpage Column Styles */

#big-column {
width: 925px;
margin: 0px auto;
}

#column-top {
background: url(images/top-column.gif) no-repeat;
width: 925px;
height: 9px;
float: left;
margin-left: 7px;
}

#column-content {
background: url(images/center-column.gif) repeat-y;
width: 925px;
float: left;
padding-bottom: 20px;
margin-left: 7px;
}

/* Featured Posts & Articles on Frontpage */

.feat-post {
width: 300px;
padding: 10px 10px 10px 20px;
float: left;
}

.feat-post h2 {
font-size: 18px;
text-decoration: none;
color: #6e6e6e;
}

.feat-post h2 a {
text-decoration: none;
color: #6e6e6e;
}

.feat-post h2 a:hover {
text-decoration: none;
color: #<?php echo $color;?>;
}

.desc h3 {
font-size: 10px;
font-style: italic;
color: #<?php echo $color;?>;
font-weight: normal;
clear:both;
border-bottom: 1px solid #b1b1b1;
}

.feat-post p {
text-align: justify;
color: #6e6e6e;
margin-top: 15px;
}

.feat-post img {
margin-top: 20px;
border: 1px solid #<?php echo $color;?>;
}

.latest-posts {
width: 220px;
padding: 10px 10px 10px 20px;
float: left;
}

.latest-posts h2 {
font-size: 18px;
text-decoration: none;
color: #6e6e6e;
}

.latest-posts h2 a {
text-decoration: none;
color: #6e6e6e;
}

.latest-posts ul {
color: #<?php echo $color;?>;
margin-top: 10px;
list-style-type: disc;
}

.latest-posts ul li {
color: #<?php echo $color;?>;
padding-left: 10px;
margin-bottom: 5px;
}

.latest-posts ul li a {
text-decoration: none;
display: block;
line-height: 15px;
color: #<?php echo $color;?>;
}

.latest-posts ul li a:hover {
text-decoration: underline;
color: #<?php echo $color;?>;
}

.latest-posts p {
text-align: justify;
color: #6e6e6e;
margin-top: 10px;
}


/* Subpage Column Styles */

#sub-column {
width: 925px;
height: auto;
margin: 0px auto;
}

#sub-top {
background: url(images/sub-top.gif) no-repeat;
width: 925px;
height: 42px;
margin-left: 7px;
float: left;
margin-top: 10px;
}

#sub-content {
background: url(images/sub-content.gif) repeat-y;
width: 925px;
float: left;
margin-left: 7px;
}


/* Subpage Content Styles */


.content {
width: 620px;
float: left;
padding: 10px 15px 10px 15px;
}

.content h1 {
font-size: 24px;
color: #8a8a8a;
margin: 20px 0px 20px 0px;
font-weight: normal;
}

.content p {
text-align: justify;
color: #8a8a8a;
}

.post ul {
border-top: 1px solid #CCC;
list-style-type: disc;
list-style-position:inside;
color: #6e6e6e;
margin: 20px 40px 10px 10px;
}

.post ul li {
color: #6e6e6e;
border-bottom: 1px solid #CCC;
padding: 5px;
}

.post ul li a {
color: #<?php echo $color;?>;
}

.post ol {
border-top: 1px solid #CCC;
list-style-type: disc;
list-style-position:inside;
color: #6e6e6e;
margin: 20px 40px 10px 10px;
}

.post ol li {
color: #6e6e6e;
border-bottom: 1px solid #CCC;
padding: 5px;
}

.post ol li a {
color: #<?php echo $color;?>;
}

/* Breadcrumb Navigation Styles */

.breadcrumb {
float: left;
padding: 13px 15px 10px 15px;
color: #8a8a8a;
font-size: 12px;
}

.breadcrumb a {
color: #<?php echo $color;?>;
font-weight: normal;
text-decoration: none;
}

.breadcrumb a:hover {
text-decoration: underline;
}

/* Sidebar Styles */

.sidebar {
width: 220px;
float: left;
margin-left: 30px;
margin-top: 0px;
padding-bottom: 50px;
}

.widgettitle {
color: #8a8a8a;
font-size: 18px;
font-weight: normal;
padding: 20px 0px 10px 0px; 
list-style-type: none;
}

#sidebar ul li {
list-style-type: none;
}

#sidebar ul ul li a {
padding-left: 30px;
}

#sidebar ul ul ul li a {
padding-left: 40px;
}

.textwidget {
margin: 10px 8px 20px 0px;
color: #6e6e6e;
}

.sidebar ul li a {
color: #<?php echo $color;?>;
text-decoration: none;
border-bottom: 1px solid #CCC;
display: block;
padding: 5px;
padding-left: 20px;
background: url(images/listenpunkt.gif) no-repeat left center;
}

.sidebar ul li a:hover {
color: #<?php echo $color;?>;
text-decoration: underline;
}

.posted {
color:#9d9c9c;
font-size: 10px;
font-style: italic;
display: block;
padding-left: 10px;
}

#wp-calendar {
border:1px solid #cccccc;
color:#6e6e6e;
width: 220px;
}

#wp-calendar caption {
color: #8a8a8a;
font-size: 18px;
font-weight: normal;
padding: 0px 0px 10px 0px; 
list-style-type: none;
}

tbody .pad {
background-color:#dddddd;
}

#wp-calendar a {
font-weight:bold;
font-size:12px;
background: none;
padding: 0px;
margin: 0px;
border: none;
}

thead tr th {
width:20px;
height:20px;
text-align:center;
background-color: #<?php echo $color;?>;
color: #FFF;
border:1px solid #cccccc;
padding: 3px; 
}

tbody tr td {
width:20px;
height:20px;
text-align:center;
border:1px solid #cccccc;
}

tfoot #prev {
width:58px;
height:20px;
text-align:left;
background-color:#ffffff;
background: none;
padding-left: 10px;
}

tfoot #next {
width:58px;
height:20px;
text-align:right;
background-color:#ffffff;
background: none;
padding-right: 10px;
}

/* Comment Styles */

.alt {margin: 0;padding: 10px;}

#comment-wrap {
border: 0px;
color: #6e6e6e;
font-size: 11px;
}

#comment-wrap h6 {
font-size: 12px;
margin-bottom: 10px;
}

#comments ol {
list-style-type: none;
line-height: 18px;
border: 0px;
}

#comments ul li {
list-style-type: none;
list-style-image: none;
list-style-position: outside;
border: 0px;
}

.commentlist {
padding: 0;
text-align: justify;
border: none;
}

.comment-body {
margin-bottom: 20px;
}

.reply {
font-size:11px;
clear: both;
float: right;
margin-top: -20px;
}

.commentlist em {
font-size: 11px;
}

.commentlist li {
margin: 5px 0 0px 10px;
padding: 5px 5px 0px 5px;
list-style: none;
border: 0px;
}

.commentlist li ul li { 
margin-right: -5px;
margin-left: 30px;
margin-bottom: 0px;
list-style: none;
border: 0px;
}

.commentlist li li {
background:none;
border:none;
list-style:none;
margin:3px 0 3px 20px;
padding:3px 0;
border: 0px;
}

.commentlist li .avatar {
border:1px solid #ccc;
margin:5px 8px 6px 5px;
float: left;
padding:2px;
width:45px;
height:45px;
}

.commentlist cite, .commentlist cite a {
font-style: normal;
font-size: 11px;
margin-top: 2px;
}

.commentlist p {
font-weight: normal;
line-height: 1.5em;
text-transform: none; 
margin: 10px 5px 5px 65px;
font-size: 11px;
border: none;
}

#commentform p {
}

.commentmetadata {
font-weight: normal; 
margin: 0;
display: block; 
font-size: 10px;
font-style: italic;
}

.commentmetadata a, .commentmetadata a:visited {
color: #6e6e6e;
}

.commentmetadata a:hover{
}

.children { 
padding: 0;
border: none;
}

.thread-alt {
border: none;
}

.thread-even li {
}
.depth-1 {
border: none;
}

.even, .alt li {
margin-bottom: 20px;
}

#respond input {
margin-right: 10px;
font-size: 11px;
color: #8a8a8a;
display: block;
margin-bottom: 5px;
}

#respond h4 {
font-size: 12px;
margin-bottom: 5px;
}

#submit {
background-color: #8a8a8a;
border: 1px solid #CCC;
color: #FFF !important;
padding: 3px 5px 3px 5px;
margin-top: 10px;
text-decoration: none;
font-size: 12px;
cursor: pointer;
}

#submit:hover {
background-color: #FFF;
border: 1px solid #8a8a8a;
color: #8a8a8a !important;
padding: 3px 5px 3px 5px;
text-decoration: none;
}

/* Portfolio Styles */

#portfolio {
margin: 20px 10px 50px 30px;
float: left;
}

.port-pic {
width: 270px;
height: auto;
background-color: #FFF;
border: 1px solid #CCC;
float: left;
margin-bottom: 20px;
margin-right: 20px;
display: block;
}

.port-pic h3 {
font-size: 16px;
font-weight: normal;
color: #<?php echo $color;?>;
margin: 10px 10px 0px 12px;
}

.port-pic h3 a {
text-decoration: none;
color: #<?php echo $color;?>;
}

.port-pic h3 a:hover {
text-decoration: underline;
color: #<?php echo $color;?>;
}

.port-pic p {
text-align: justify;
color: #8a8a8a;
padding: 5px 10px 10px 10px;
font-style: italic;
font-size: 11px;
}

.port-pic img {
border: 2px solid #CCC;
margin: 10px 10px 0px 7px;
text-align: center;
}

/* Blog Styles */

.post {
padding-bottom: 20px;
margin-bottom: 30px;
border-bottom: 1px solid #CCC;
}

.post h1 a {
color: #<?php echo $color;?>;
text-decoration: none;
}

.post h1 a:hover {
color: #<?php echo $color;?>;
text-decoration: underline;
}

.post p {
margin-top: 20px;
}

.blogpic {
text-align: center;
}

.blogpic img {
margin-top: 20px;
border: 2px solid #CCC;
}

.category a {
background-color: #8a8a8a;
border: 1px solid #CCC;
color: #FFF;
padding: 3px 5px 3px 5px;
text-decoration: none;
font-size: 11px;
margin: 0px 5px;
line-height: 25px;
}

.category a:hover {
background-color: #d4d4d4;
border: 1px solid #8a8a8a;
color: #8a8a8a;
padding: 3px 5px 3px 5px;
text-decoration: none;
}


/* Footer Styles */

#footer {
background: url(images/footer-column.gif) no-repeat;
width: 925px;
height: 45px;
margin-bottom: 5px;
clear: both;
padding: 12px 30px 0px 20px;
margin-left: 7px;
}

#footer .copyright {
color: #8a8a8a;
text-transform: uppercase;
}

#footer a {
color: #<?php echo $color;?>;
text-decoration: none;
padding: 0px 2px;
}

#footer p {
color: #6e6e6e;
text-transform: uppercase;
float: left;
}

#footer a img  {
margin: 0px;
padding: 0px;
display: inline;
}

#footer p.footer-right {
color: #6e6e6e;
float: right;
text-transform: none;
margin: 0px 30px 0px 0px;
}

#footer p.footer-right a {
color: #6e6e6e;
text-decoration: none;
clear: both;
padding: 0px 0px 0px 15px;
}

#footer p.footer-right a:hover {
text-decoration: underline;
}

.wordpress-icon {
float: left;
margin-right: 10px;
margin-bottom: 12px;
}

.supported {
color: #CCC;
font-size: 10px;
text-align: center;
width: 925px;
}

.supported a {
color: #CCC;
font-size: 10px;
text-decoration: none;
}

/* Lightbox Images */

#grow {
background:#000 url(images/ajax-loader.gif) no-repeat center center;
border: none;
}

#nycloser {
background: url(images/closed.png) no-repeat center center;
border: none;
}

#next {
background: url(images/next.png) no-repeat center center;
border: none;
}

#next {
background: url(images/next.png) no-repeat center center;
border: none;
}

#prev {
background: url(images/prev.png) no-repeat center center;
border: none;
}

/* Pagenavi */

.wp-pagenavi a, .wp-pagenavi a:link {
padding: 2px 4px 2px 4px; 
margin: 2px;
text-decoration: none;
background-color: #8a8a8a;
border: 1px solid #CCC;
color: #FFF;	
}

.wp-pagenavi a:visited {
padding: 2px 4px 2px 4px; 
margin: 2px;
text-decoration: none;
background-color: #8a8a8a;
border: 1px solid #CCC;
color: #FFF;
}

.wp-pagenavi a:hover {	
background-color: #d4d4d4;
border: 1px solid #8a8a8a;
color: #8a8a8a;
}

.wp-pagenavi a:active {
padding: 2px 4px 2px 4px; 
margin: 2px;
text-decoration: none;
background-color: #d4d4d4;
border: 1px solid #8a8a8a;
color: #8a8a8a;	
}

.wp-pagenavi span.pages {
padding: 2px 4px 2px 4px; 
margin: 2px 2px 2px 2px;
background-color: #8a8a8a;
border: 1px solid #CCC;
color: #FFF;
}

.wp-pagenavi span.current {
padding: 2px 4px 2px 4px; 
margin: 2px;
font-weight: bold;
background-color: #d4d4d4;
border: 1px solid #8a8a8a;
color: #8a8a8a;
}

.wp-pagenavi span.extend {
padding: 2px 4px 2px 4px; 
margin: 2px;	
border: 1px solid #000000;
color: #000000;
background-color: #000000;
}

Image Sprite Image External Style Sheet

Similar Tutorials

I am using a single gif file as an image sprite and want to link the file name in another style sheet so i can reuse this sheet without having to have many copys of the style sheet with a different file names example:

Currently like this
Code:

#store{left:-200px;width:158px;}
#store{background:url('mred.gif') -150px -161px;}
#store a:hover{background: url('mred.gif') -150px 0;}
#fourms{left:0px;width:158px;}
#fourms{background:url('mred.gif') -304px -161px;}
#fourms a:hover{background: url('mred.gif') -304px 0;}

want like this
#home{left:-200px ;width:150px;}
#home{background:inherit;background-position: 0 -161px;}
#home a:hover{background-position: 0 0;}

with the background:url('mred.gif') specified in another style sheet once insted of repeating over the entire sheet.

effectively so i can just change the other external style sheet to change the gif file and keep this one the same.

HOW? possible?

Background Image Doesn't Work From External Style Sheet

Similar Tutorials

I hardly ever use css for thimgs like backgrounds, but I have a freelance client that has alot of interesting ideas about how a good website should look so I'm trying to make him happy.

When I have:
body {
background: url('resources/assets/background.jpg') no-repeat bottom left;
}

in the extranal css it doesn't work. If I put it into the page it works fine. None of the online css resources I've looked at mention why this should be. I've even tried using the complete http://www.server.com/blah/blah/ address and I get the same results.

Does this just not work from an external css, or am I missing something?

Thanks y'all.

Style Sheet In Ie7

Similar Tutorials

Hi,

I have a style sheet which works fine on my mac, but not on my PC in IE7. I know how to substitute stle sheets based on browsers, but here's the issue at hand. I have 2 styles for the <ul> which follow:
ul.nav{
clear:both;
width:192px;
padding: 0px;
display: block;
background-color:#000000;
margin-top:-11px;
margin-left:0px;
float:left;

}

and

ul.bodyText{
font-color:#000000
font-size:12px;
font-family:helvetica, arial, sans-serif;
}

it appears that "ul.bodyText is taking on the characteristics of "ul.nav" Or, for some reason, the <ul><li>'s in my Mac look fine, but on my PC, they do not have the indent preceeded by the dot.

Here's the site
http://www.caillouette.com/NewestSelvan/English/aboutUs.php

can anyone tell me why?

thanks
-Sean

Why Can't I Get A Style Sheet To Validate

Similar Tutorials

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?

Something Wrong With My Style Sheet?

Similar Tutorials

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;
}

Style Sheet Not Applying

Similar Tutorials

Please can anyone tell me why my style sheet is not applying to this page http://www.on-line-biz.com ?

External Style Sheet Help!

Similar Tutorials

Ok, I just started a new website. I have been putting all of the html on every page. So, when I change one small thing on my Nav Bar, I have to go to every single page and change it! There has to be an easier way, right? Isn't it by using external sytle sheets? I tried this code in my homepage, but it isn't working:
Code:

<head>

<STYLE TYPE="text/css" MEDIA="screen, projection">
<!--
  @import url(http://www.freewebs.com/ohhdanggggraphics/BASIC.css);
  -->
</STYLE>

</head>

Basically on my site the only thing I want to change from page to page is the information in the center table. How would I do this? Thanks for your help

My Website

Td Element In Style Sheet Seems To Be Ignored?

Similar Tutorials

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?

Override Style Sheet?

Similar Tutorials

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?

Style Sheet Looks Right In Ff, Terrible In Ie

Similar Tutorials

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)

Help With External Style Sheet

Similar Tutorials

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.

How Can I Put A Fixed Bg Using A Style Sheet?

Similar Tutorials

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?

Can We Use Style Sheet In Windows Application

Similar Tutorials

Can we use style sheet in windows application?
If yes then how, if no then is there any other way to make all forms in the application with same size, with same label size, textbox size....etc.

Css Style Sheet Not Working On Text

Similar Tutorials

I'm having a problem getting the text in my nav bar to be formatted with my CSS sheet.
***HTML***
<div id="navbar">
<ul id="nav">
<li class="current_page_item"><a href="">Home</a></li>
<li><a href="">Features</a></li>
<li><a href="">Purchase</a></li>
<li><a href="">Theme Demo</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Affiliates</a></li>
<li><a href="">Support</a></li>
<li><a href="">Contact Us</a></li>
</ul>

</div>

***CSS***

#navbar {
width: 960px;
height: 47px;
do not change Code:
Original - do not change Code font-size: 12px; font-family: Tahoma, Geneva, sans-serif; color: #FFF; font-weight: bold;

  
font-size: 12px;
    font-family: Tahoma, Geneva, sans-serif;
    color: #FFF;
    font-weight: bold;

margin: 0px auto 0px;
padding: 0px;
}

The text values aren't able to change for some reason, but the width and height values, padding, etc are. If someone could please help me trouble shoot that would be great. Thank you

Paul

Multiple Style Sheet Options

Similar Tutorials

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

Overwrite Style Sheet -- Scrollbar

Similar Tutorials

Well, it seems I have a bit of a specific CSS problem.
I am building a game in PHP/HTML. I have set a scrollbar in the style so:
Quote:
margin-right: 9px;
overflow-y:auto;
overflow-x:hidden;

Now I have one page where I want a scrollbar not to the right of the screen but in the first row of the two row table.
In essence I want the right cell (with a menu) to stay where it is while the left cell (with text) scrolls.

Problem is that I can't get this to work, seeing as the stylesheet overwrites the page code...

Any advise/help would be greatly appreciated!

Faith

Css Style Sheet Is Slow To Load - Help

Similar Tutorials

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?