|
CSS - Bg Color Not Showing Up, Please Help
Similar TutorialsHello, I have been trying to figure this out, but have been unsuccessful. I am using a modalPopupExtender, but when the popup comes up, my background is still active. I suspect it has to be something in my css file, but would appreciate some help on this. I suspect it is the css that is causing this, but cannot figure out what. TIA! Here is the code for the MPE: <cc1:ModalPopupExtender ID="MPE1" runat="server" TargetControlID="btnShowModalPop" PopupControlID="divPop" BackgroundCssClass="modalBackground" PopupDragHandleControlID="panelDragHandle" DropShadow="true"/> Here is the code in my css file: .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPop { background-color:Gray; border-width:3px; border-style:solid; border-color:Black; padding:0; width:250px; color:White; } .drag { background-color:#ff0000; cursor: move; border: solid 2px white; } I found the issue by referencing a blank css file and slowly adding statements in. It was a combination of the following which prevented the backgroundcssclass to not be shown propertly: #body div div { background: url(images/body_tr.gif) top right no-repeat; } #body div div div { background: url(images/body_bl.gif) bottom left no-repeat; } #body div div div div{ background: url(images/body_br.gif) bottom right no-repeat; } #body div div div { background: url(images/body_bg.gif) bottom left no-repeat; } #body div div div div { background: url(images/body_bg.gif) bottom right no-repeat; } #body .inner div { background: none; } I ended up add these bg imgs in my master page div tags directly and is working fine.....for now :P Edit/Delete Message My page works great in firefox, but in IE the top navigation div (top_navigation) SHOULD have a background color of red for testing perposes, but the color doesn't change! It looks like its inheriting the background color #e4dfd7 from the css body tag. I've tried using an inline style, or using !important, nothing works, and I have to make this available in at least IE6 and up. Thanks in advance for any help! html code -> cosmosristorante dot com / ox / index.asp Hi all, I haven't been working with CSS that long and I've searched for a fix but couldn't get anything to work. I can't get a background color to display in Firefox but it does in IE. Inside my "mainwrap" I have two columns and for some reason when I set my background to white for the "mainwrap" it just doesn't show up in Firefox. Here's xhtml code: xhtml Code: Original - xhtml Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="toparea"> <div id="header"></div> <!--end header--> <div id="menuarea"> <div id="menubox"> </div> <!--end menubox--> </div> <!-- end menuarea--> </div> <!--end toparea--> <div id="middlearea"> <div id="mainwrap"> <div id="topwrap"></div> <!--end topwrap--> <div id="leftcolumn"> <div id="content"></div> <!--end content--> <div id="recentwork"></div> <!--end webwork--> </div><!--end leftcolumn--> <div id="rightcolumn"></div> <!--end rightcolumn--> <div id="bottomwrap"></div> <!--end bottomwrap--> </div> <!--end mainwrap--> </div> <!--end middlearea--> <div id="bottomarea"></div> <!--end bottomarea--> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="toparea"> <div id="header"></div> <!--end header--> <div id="menuarea"> <div id="menubox"> </div> <!--end menubox--> </div> <!-- end menuarea--> </div> <!--end toparea--> <div id="middlearea"> <div id="mainwrap"> <div id="topwrap"></div> <!--end topwrap--> <div id="leftcolumn"> <div id="content"></div> <!--end content--> <div id="recentwork"></div> <!--end webwork--> </div><!--end leftcolumn--> <div id="rightcolumn"></div> <!--end rightcolumn--> <div id="bottomwrap"></div> <!--end bottomwrap--> </div> <!--end mainwrap--> </div> <!--end middlearea--> <div id="bottomarea"></div> <!--end bottomarea--> </body> </html> Heres the CSS: css Code: Original - css Code /* CSS Document */ body { background-image: url(../images/bottombg.jpg); background-repeat: repeat; font-family: Tahoma, sans-serif; margin: 0; } /* Begin top area */ div#toparea { width: 100%; height: 128px; background-image: url(../images/topareabg.jpg); background-position: top; background-repeat: repeat-x; float: left; } div#header { width: 800px; height: 100px; background-image: url(../images/headerbg.jpg); margin-left: auto; margin-right: auto; } div#logo { float: left; margin-top: 25px; margin-left: 5px; } div#tagline { margin-top: 37px; margin-left: 5px; float: left; } div#menuarea { width: 800px; height: 25px; margin-left: auto; margin-right: auto; } div#menubox { float: right; } .buttonbox { float: left; } .buttonbox img { border: none; } /* Begin middle area */ div#middlearea { width: 100%; background-image: url(../images/middleareabg.jpg); background-repeat: repeat; float: left; } div#mainwrap { width: 800px; margin-left: auto; margin-right: auto; background-color: #FFFFFF; } div#topwrap { width: 800px; height: 20px; background-image: url(../images/topNavbg.jpg); float: left; } div#leftcolumn { width: 550px; background-color: #FFF; float: left; } div#content { width: 500px; margin-left: 10px; margin-top: 10px; } div#content p { font-family: Tahoma, Arial, sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 15px; } div#recentwork { width: 540px; height: 250px; background-color: #666666; margin-left: 10px; } div#rightcolumn { width: 250px; background-color: #FFF; float: left; } div#bottomwrap { width: 800px; height: 25px; background-image: url(../images/bottombgNav.jpg); float: left; } /* Begin bottom area */ div#bottomarea { width: 100%; height: 200px; background-image: url(../images/bottombg.jpg); background-repeat: repeat; float: left; } /* Text styles */ h1 { font: 100 normal 22px/normal Tahoma, Arial, sans-serif; text-transform: none; color: #999999; } .tagline { font-family: Tahoma, Arial, sans-serif; font-size: 12px; color: #999; } /* CSS Document */ Thanks for your time! hello all. thanks for your time. i am having some issues with a background image & color not showing up in a container div. here is the snippet from the CSS where the background image and color are defined. you can view the full CSS http://americanwalkincoolers.com/test/css/site.css Code: #container {
background: url('./img/faux_bg.gif') repeat-y top left #496d9d;
width: 960px;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
and the page is he http://americanwalkincoolers.com/test/index.html i am attempting to cheat on the layout by placing a background color/image that will make the right column extend the length of the page. currently the right column has a graphic that says "featured products" followed by a gap that runs the length of the container. can anyone help me? bonus points if you can explain to me why the BG color & BG image aren't showing up from the container. thanks again. Edited because now that I posted I finally discovered the problem, I was missing a semi-colon after my width statement... Can anyone give me an idea why the color for the background of the Wordpress site I am revising the css script shows up 2/3 the color I want and the top one third is remains the original color. There is no "wrapper" option to revise. This is the 3 lines that seems to determine those changes.. *************************************** body { background: #180033 url (1-default/bodybg.png) repeat-x top; } a { color: #9BCB65; } a:hover { color:#180033; } *************************************** Could the problem be "repeat-x top;" ???????? Big thanks to anyone who offers help. Here's the code:
Code: <html>
<head>
<title>Sample Font Shorthand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
div { }
table { width: 100% }
.sttable { background-color: #000080 }
tr { }
td { vertical-align: top }
.sttd { font: bold 12px Arial #FFFFFF }
</style>
</head>
<body>
<table class="sttable">
<tr>
<td class="sttd">Catalog > Categories</td>
<td class="sttd">Cart Total: $ 0.00</td>
<td class="sttd">Date</td>
</tr>
</table>
</body>
</html>
Would someone please tell me why the color of the text isn't rendering white? Hi, I had this working but somehow it's not working again. The problem I am having is that scroll bars are showing up in my iframe in Firefox, Opera, and Safari, but not IE7 and IE6. Here is the link: http://www.caillouette.com/NewCatsMeow/ I know I need to tighten up my style sheet, but if someone could tell me how to solve this, I would be very happy. Here's the iframe code in the index page: Code: <div id="bodyInfo"> <iframe name="mainBody" width="770" height="602" src ="body.html" scrollbars="NO" border="0"> </iframe> <!-- end #bodyInfo --></div> hello, about the well-known color warnings (and in the best interest of good accessibility practices) is setting "background-color: inherit" a proper solution? it supresses the errors, but does it solve the problem of having good contrast between different elements/the use of custom stylesheets? i'm asking because i have a stylesheet with different classes for text which are used over different background-colors (from the parent elements). so unless i make a class for each possible application of these text styles, i don't see a way to specify a fixed background-color... i hope i explained my issue properly... thanks for any thoughts or suggestions on this I'm making a game that revolves around four teams. For developmental purposes, I made the team colors blue, red, green, and yellow. And now I'm at the stage where I'm designing a layout. The theme is set in the 1800's, and my first idea was to have a different color scheme for each team (in accordance with their team color,) but my layouts ended up having nothing to do with the 1800's -- just colors (I want to give a very real effect to this website.) So I tried making a universal layout with a sort of tea-stained, burnt edges, parchment look, with a black background, but I had trouble making it tile nicely (partly the burnt edges, partly the stains in the paper.) So this is where I am. I need help designing a layout! I can change the team colors to whatever, I have beginner/intermediate photoshop skills (though, I'm quite competent,) and all suggestions are warmly welcomed! Hi, Im trying to validate with CSS 3, but am getting one warning, which I really want to get rid of: Code:
body {
color: #000000;
background-color: #ffffff;
font-family: sans-serif;
font-size: 15px;
}
#header {
clear: both;
}
#topmenu {
width: 100%;
height: 30px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 20px;
font-weight: normal;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 1px;
clear: both;
}
#topmenu a {
width: 150px;
height: 28px;
color: #ffffff;
background-color: #990000;
text-align: center;
text-decoration: none;
border-right: 1px solid #ffffff;
padding-top: 2px;
float: left;
}
#topmenu a:hover {
width: 150px;
color: #990000;
background-color: #ffffff;
text-align: center;
text-decoration: none;
border-right: 1px solid #990000;
float: left;
}
#body {
color: #000000;
background-color: #ffffff;
margin: 10px 0px 10px 0px;
clear: both;
}
#footer {
width: 100%;
color: #000000;
background-color: #ffffff;
font-family: sans-serif;
font-size: 12px;
font-weight: normal;
text-align: center;
border-top: 2px solid #990000;
padding-top: 5px;
clear: both;
}
#footer a {
color: #990000;
background-color: #ffffff;
font-weight: normal;
text-decoration: none;
}
#footer a:hover {
color: #990000;
background-color: #ffffff;
font-weight: normal;
text-decoration: underline;
}
#leftmenu {
color: #000000;
background-color: #ffffff;
width: 19.5%;
padding-right: 0.5%;
float: left;
}
#contents {
color: #000000;
background-color: #ffffff;
width: 58.5%;
padding-left: 0.5%;
padding-right: 0.5%;
float: left;
}
#rightmenu {
color: #000000;
background-color: #ffffff;
width: 19.5%;
padding-left: 0.5%;
float: right;
}
.contentbreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 10px;
clear: both;
}
.menubreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 10px;
clear: both;
}
.footerbreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 2px;
clear: both;
}
.menutoptitle {
width: 100%;
height: 26px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ffffff;
padding-top: 1px;
padding-left: 1px;
padding-right: 1px;
}
.contenttoptitle {
width: 100%;
height: 26px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ffffff;
padding-top: 1px;
padding-left: 1px;
padding-right: 1px;
}
.menu {
width: 100%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
float: left;
}
.menu a {
width: 98%;
height: 19px;
color: #000000;
background-color: #eeeeee;
font-weight: normal;
text-decoration: none;
border-bottom: 1px solid #990000;
padding-left: 2%;
float: left;
}
.menu a:hover {
width: 98%;
height: 19px;
color: #ffffff;
background-color: #990000;
font-weight: normal;
text-decoration: none;
border-bottom: 1px solid #990000;
padding-left: 2%;
float: left;
}
.menucontent {
width: 96%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
border-bottom: 1px solid #990000;
padding-bottom: 5px;
padding-left: 2%;
padding-right: 2%;
float: left;
}
.menucontent a {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: underline;
}
.menucontent a:hover {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: none;
}
.subcontentright {
color: #000000;
background-color: #ffffff;
text-align: right;
}
.content {
width: 98%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
border-bottom: 1px solid #990000;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 5px;
float: left;
}
.content a {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: none;
}
.content a:hover {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: underline;
}
.input {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 13px;
}
.menuformcontainer {
color: #000000;
background-color: #ffffff;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
clear: both;
}
.menuformsubcontainer {
color: #000000;
background-color: #ffffff;
width: 100%;
clear: both;
}
.menuformlabels {
color: #000000;
background-color: #ffffff;
width: 50%;
padding-top: 2px;
padding-bottom: 2px;
float: left;
}
.menuformfields {
color: #000000;
background-color: #ffffff;
width: 48%;
text-align: right;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 2%;
float: left;
}
.menuformsubmit {
color: #000000;
background-color: #ffffff;
width: 100%;
text-align: right;
padding-top: 2px;
padding-bottom: 2px;
clear: both;
}
http://jigsaw.w3.org/css-validator/...ut+with_options Please make sure you select CSS 3 and Warnings = ALL in order to see the 32 warnings... Thanks! Yours sincerely, speedbooster! Hey all i am trying to figure out why my search box results shows up just fine in IE, Safari but not FF or Chrome. Here is my code for the search box: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//********************************************
// Search Function
//********************************************
var count = 0;
function set2Show()
{
//document.getElementById("productLine_wrap").style.visibility = "visible";
//document.getElementById("contactInner").style.visibility = "visible";
$('#suggestions').fadeOut();
}
function delayType(theValue)
{
count = count + 1;
$('#suggestions').fadeOut();
setTimeout("searchGo(" + count + ",'" + theValue + "')", 1000);
}
function searchGo(currCount, currValue){
if(currCount == count){
count = 0;
lookup(currValue);
}
}
google.setOnLoadCallback(function()
{
$("input").blur(function(){
$('#suggestions').fadeOut();
//document.getElementById("productLine_wrap").style.visibility = "visible";
//document.getElementById("contactInner").style.visibility = "visible";
});
});
function lookup(inputString) {
if(inputString.length == 0) {
$('#suggestions').fadeOut();
//document.getElementById("productLine_wrap").style.visibility = "visible";
//document.getElementById("contactInner").style.visibility = "visible";
} else {
$("#loading").bind("ajaxSend", function(){
$(this).show();
document.getElementById("inputString").disabled = true;
$('#inputString').fadeTo("fast", 0.5);
}).bind("ajaxComplete", function(){
$(this).hide();
document.getElementById("inputString").disabled = false;
$('#inputString').fadeTo("fast", 1);
});
$.post("fetchSearch.asp", {queryString: ""+inputString+""}, function(data) {
$('#suggestions').fadeIn();
$('#suggestions').html(data);
//document.getElementById("productLine_wrap").style.visibility = "hidden";
//document.getElementById("contactInner").style.visibility = "hidden";
});
}
}
</script>
<style type="text/css">
/* COMMON CLASSES */
.break { clear:both; }
a img { border:0 }
/* SEARCHRESULTS */
#searchresults {border: 1px #000 solid; width:250px; background-color:#FC6; font-size:10px; line-height:14px; text-align:left; z-index: 99;}
#searchresults a { display:block; background-color: #FFE2C6; clear:left; height:56px; text-decoration:none; }
#searchresults a:hover { background-color: #FFF;}
#searchresults a img { float:left; padding:3px 4px; }
#searchresults a span.searchheading { display:block; font-weight:bold; padding-top:1px; color:#000; border-top: 1px dotted #000; }
#searchresults a:hover span.searchheading { color:#000; }
#searchresults a span { color:#000; }
#searchresults a:hover span { color:#000; }
#searchresults span.category { font-size:11px; margin:5px; width:250; color:#000; }
#searchresults span.seperator { float:right; padding-right:15px; margin-right:5px;}
#searchresults span.seperator a { background-color:transparent; display:block; margin:1px; height:5px; color:#000; }
#loading {position:absolute;width:16px;height:11px;z-index:3;left: 70px;top: 7px;display: none; z-index: 1000;}
#suggestions {position:absolute;width:16px; height:11px;z-index:60;left: -72px;top: 23px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<body onfocus="set2Show();">
<div id="searchBox" align="center">
<div id="loading"><img src="ajax-loader.gif" alt="" width="16" height="11" align="left" /></div>
<ul id="searchForm">
<li><span class="fieldbox">
<input type="text" name="inputString" maxlength="27" id="inputString" value="" onmousedown="set2Show();" onkeyup="delayType(this.value);" style="font-family:Arial, Helvetica, sans-serif; font-size:12px;font-weight:bold; vertical-align: text-top; text-transform:lowercase;"/>
</span></li>
</ul>
<div id="suggestions"></div>
</div>
</body>
</html>
I can not seem to find out why it doesnt want to display in FF or Chrome... Any help would be great! David Hey, I have a CSS layout: http://kings.edux.co.uk/fix2.php And this is my CSS doent: http://kings.edux.co.uk/css/style.css If you look at the source-code there is a div with the 'footer' class at the bottom, but I can't get it to show at the bottom on this page, possibly because the div above has a auto height attribute. But ideally I need the div at the bottom of the page and all divs above. Here is the 'footer' class: Code:
#footer {
margin: 0 auto; /* align for good browsers */
width:159px;
margin-top: 0px;
font-size:9px;
font-family: Verdana, Arial, Tahoma, Geneva, Helvetica, sans-serif ;
color: #333333;
letter-spacing:1px;
}
I have tried a few things but nothing's working yet. Hi, I have a site that works fine on most computers, but the homepage needs to be refreshed in IE6 and 7. Unless you type in "index.php" after the domain name, you have to refresh the page to see all the content. I have the correct doctype, and I believe my code is clean. I posted about this weeks ago, resolved the problem, now the site is having similar issues. Here is the site:: http://www.catskaraoke.com Any advicde or suggestions are greatly appreciated. thanks - Thanks for taking the time to read my question. I have an <ol> that shows up in FF but not IE7. I have no idea why. I've tried a bunch of different things in my css but none of them work. HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Warren Persowich Humour Facilitator - Stand-Up Comedian Winnipeg Manitoba. Comedic entertainment performances laughter and insight. Fun professional development. A decade of stand-up experience." />
<meta name="keywords" content="Warren Persowich, Comedian, Comedic, Stand Up, Stand-Up, Comedy, Business, Winnipeg, Manitoba, Cancer, Entertainment, Funny, Hilarious, Interactive, Laughter, Psychology, Professional, Development" />
<meta name="Revisit-After" content="7 Days" />
<meta name="Robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="ongXn98vPdWEemx2Lu5qZozNxw3CDdugXLIpK9XzOr4=" />
<title>2 Nations Female Hockey League:::::</title>
<script type="text/javascript" src="Javascript/coolmenu.js"></script>
<script type="text/javascript" src="Javascript/menu_items.js"></script>
<link rel="stylesheet" type="text/css" href="menu_styles.css">
<link rel="stylesheet" type="text/css" href="2NFHL.css">
</head>
<body>
<script type="text/javascript">var m1 = new COOLjsMenu("menu1", MENU_ITEMS)</script>
<div class="LogoDiv"><img class="Banner" src="Images/ChampBanner.jpg" /></div>
<div class="NavDiv">
<p class="TeamsNav">Teams: <a href="Team1">Coyotes</a> | <a href="Team2">Extreme</a> | <a href="Team3">Ice Cats</a> | <a href="Team4">Saints</a> | <a href="Team5">Mustangs</a> | <a href="Team6">Lightening</a> | <a href="Team7">On Edge</a></p>
</div>
<div class="ContentDiv">
<p class="COC1">Two Nations Female Hockey League dedicates itself to the advancement of female hockey for all individuals through progressive leadership by ensuring meaningful opportunities and enjoyable experiences in a safe sportsmanlike environment. </p>
<p class="COC">Two Nations Female Hockey League has adopted this "Code of Conduct" in which all members are expected to follow. The intent of this <strong>"Code of Conduct"</strong> is to maintain a fun, competitive respectful experience for all who attend any function of this league.</p>
<p class="COC">Two Nation Female Hockey League "Code of Conduct" simply places an emphasis on respect:<br />
<strong>Respect</strong> the game.<br />
<strong>Respect</strong> the rules.<br />
<strong>Respect</strong> the opponents.<br />
<strong>Respect</strong> the Coaches, Officials, Parents, Executives, Players, Arena Staff, Volunteers and their decisions.<br />
<strong>Respect</strong> the facility.<br /></p>
<p class="COC"><strong>Maintain self-control at all times.</strong> In order to reduce the number of abusive and harassing incidents in hockey, we all have a monumental responsibility to model pro-social behaviors. We are role models for our children and youth, therefore it is vital we act accordingly.</p>
<p class="COC">As such, any excessive profanity, harassment, bullying, or aggression directed at a game official, executive member, team official, parent, child, arena staff, or volunteer will not be tolerated and appropriate disciplinary action will be result from these actions.</p>
<p class="COC">Appropriate disciplinary action is outlined in the Two Nations Female Hockey League Policies and Procedures, and follows a strict set of rules and guidelines to ensure confidentiality, neutrality and fairness.</p>
<p class="COCTitle">Code Of Conduct</p>
<p class="COC">All members of the League and all invitees, including spectators, shall abide by the following code of conduct. Failure to do so may result in disciplinary measures, including suspension and/or expulsion.</p>
<ol class="COCOL">
<li class="COCLI">Win or lose, players shall congratulate their team-mates and coaches as well as the players and coaches of the opposing team in a genuine and positive manner. Derogatory comments are absolutely forbidden.</li>
<li class="COCLI">The referees are in charge of the game. Only the captains and alternate captains of the team shall address the referees and then shall do so only in a civil tone. Use of foul or abusive language is absolutely prohibited. While explanations of a referee's call may be legitimately sought, questioning the referee's judgment is forbidden. Accept the call and get on with the game.</li>
<li class="COCLI">Spectators shall provide only a positive encouragement for the players, coaches, and referees. Derogatory comments aimed at any player, coach, or referee from a spectator shall be addressed with a strong warning on the first offence at any game. Upon the commission of a second offence by the same spectator, that spectator shall be removed form the Arena and forbidden re-entrance during the game and spectator's identity shall be properly noted. Should any spectator be removed from any two games, that spectator's removal shall be accompanied by a (one-month) ban from attendance at any games held by the league. Upon a third offence, that spectator shall be banned for the balance of the season. </li>
<li class="COCLI">The coaching staff shall lead by example and shall adhere in all respects to this code of conduct. In addition, coaching staff shall address their own players the referees and the coaching staff of the other team only in a civilized and respectful tone. Coaching staff of the team may not address the players of the opposing team except to provide positive encouragement or congratulations. Discouraging or humiliating remarks, gestures or other communications to players, referees and the opposing team shall be absolutely forbidden. In addition, coaching staff shall at all times, both in practices and games, treat their own players with respect and dignity. Humiliation, belittlement and embarrassment through words, actions or conduct are inappropriate forms of punishment and ineffective instructional methods and shall be absolutely prohibited. </li>
<li class="COCLI">Play hard but play fair. Hockey by its nature is a physically tough game; it shall be played with maximum effort in a sportsmanlike manner within the rules from time to time endorsed by the Two Nations Female Hockey League. Players shall not set out to intentionally maim or injure another player and the coaching staff, by their actions, words, conduct or inaction, shall not encourage or endorse such behavior.</li>
<li class="COCLI">Last in the spirit of this league get to know the players, families and coaches involved with all eight teams. This is an elite group of players who love the game and seek to play at a higher level. Reach out and welcome each other and help all enjoy and benefit from the experience of the competition and travel. Hockey is a small world and an opportunity for all of us to help our kids prepare for the game of life.</li>
</ol>
</div>
<div class="BottomNavDiv">
<div class="BottomNavDivCont">
<p class="BottomNavLinkP"><a href="Index.htm" class="BottomNavLink">Home</a> | <a href="Index.htm" class="BottomNavLink">About Us</a> | <a href="Index.htm" class="BottomNavLink">Philosophy</a> | <a href="Index.htm" class="BottomNavLink">Teams</a> | <a href="Index.htm" class="BottomNavLink">Standings</a> | <a href="Index.htm" class="BottomNavLink">Schedule</a> | <a href="Index.htm" class="BottomNavLink">Contact Us</a> | <a href="Index.htm" class="BottomNavLink">Links</a><p/>
</div>
</div>
</body>
</html>
CSS: Code: html, body {
height: 100%;
padding: 0;
margin: 0;
}
.LogoDiv {
background-image:url("Images/WOMENSHOCKEY CHOICE 1Small.jpg");
background-repeat: no-repeat;
background-position: top left;
margin: 2px auto;
padding: 0px;
height: 87px;
width: 800px;
display: block;
}
img.Banner {
float: right;
}
.NavDiv {
background-image: url(Images/N2NavBar.jpg);
background-repeat: repeat-x;
background-position: top left;
padding: 10px 0px 0px 0px;
margin: 0px 0px -13px 0px;
height: 80px;
width: 100%;
display: block;
}
.TeamsNav {
padding: 0px;
margin: 0px 0px 0px 400px;
font-size: 12px;
}
.ContentDiv {
width: 800px;
/*height: 400px;*/
overflow: hidden;
background-image:url(Images/Background-Blue3.jpg);
background-repeat: no-repeat;
background-position: top left;
margin: 0px auto;
padding: 0px;
display: block;
position:static;
z-index: -1;
}
.TNFHLTW{
width: 281px;
overflow: hidden;
background-image:url(Images/TNFHLThisWeek.jpg);
background-position: top left;
background-repeat: no-repeat;
margin: 50px 0px 0px 30px;
padding: 50px 0px 0px 0px;
}
.COC1 {
padding: 2px;
margin: 50px 0px 0px 30px;
width: 700px;
float: left;
text-indent: 20px;
}
.COC {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 700px;
float: left;
text-indent: 20px;
}
.COCLI {
margin-top: 10px;
}
.COCOL {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 650px;
float: left;
}
.COCTitle {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 700px;
float: left;
text-align: center;
font-weight: bold;
text-decoration: underline;
font-size:18px;
}
p.TNFHLTWP {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 4px;
margin: -9px 0px 0px 0px;
}
.BottomNavDiv {
padding: 0px;
height: 72px;
width: 100%;
display: block;
border-top: 4px solid red;
margin: 0px;
height: 25px;
}
.BottomNavDivCont {
margin: 0px auto;
width: 800px;
overflow: hidden;
display: block;
height: 25px;
padding: 0px 0px 0px 20px;
}
/*.BottomNavDivCont ul li {
display: inline;
padding: 0px 10px 0px 0px;
font-size: 10px;
color: #ff0000;
margin: 0px;
}*/
.BottomNavLinkP {
font-size: 10px;
color: #ff0000;
display: block;
}
.BottomNavLink {
font-size: 10px;
color: #ff0000;
}
a.BottomNavLink:link{
text-decoration: none;
}
a.BottomNavLink:visited{}
a.BottomNavLink:hover{
text-decoration: underline;
}
a.BottomNavLink:active{}
p.TeamsNav a:link{
text-decoration: none;
color: #000099
}
p.TeamsNav a:visited{}
p.TeamsNav a:hover{
text-decoration: underline;
}
p.TeamsNav a:active{}
Thanks, Brad I have a div that is positioned absolute at 88px from the top. In both IE6 and IE7 this comes out decently. However, in FF the div is being put at the top of the page. You can take a look at this he www.dvolve[REMOVE].org/ktt/ Any pointers on what's going on here? -DeV Hi, I have tested on various browsers and platforms. Unfortunately, my div does not appear in IE7. Here's the <div> code:: Code: <div id="mardiGras"> <a onclick="updateWithParty()" href="#"><img src="images/nav/MardiGras.gif" border="0"></a> </div> Here's the style sheet for the mardiGras <div> Code: #mardiGras{
position:absolute;
z-index:999;
top:331px;
width:260px;
height:221px;
background-image:url(http://www.catskaraoke.com/images/nav/MardiGras.png);
display:block;
}
I tried to use a gif instead of a png, but that didn't work. Can anyone tell me what I'm doing wrong? thanks I'm trying to get my navigation to work, but I can't get it to work in IE. Works great in all other browsers. Look at this in firefox, chrome, safari: 0000qx5.previewcoxhosting.com/resources.php When you mouseover "resources" or "about us", a sub navigation bar appears. But not in IE 7 or 8. Does anyone have suggestions? Hey everyone, I am using a template, and I thought i changed all of the colors, however, i am still getting blues and i want them gone. Help me please! Sarah CSS: /* Global Styles */ body { margin:0px; } td { font:11px arial; color:#333333; } a { color: #cc0000; text-decoration:none; font-weight:bold; } a:hover { color: #990000; text-decoration:underline; } /* ID Styles */ #navigation a { font:10px arial; color: #ffffff; text-decoration:none; letter-spacing:.1em; } #navigation a:hover { color: #99CCFF; } #padding { padding:20px 5px 20px 5px; } #calendar td { border: 1px solid rgb(0,51,153); } #noborder td { border: 0px; } #weekdays th { font:11px arial; color: #ffffff; font-weight:bold; border: 0px; padding:2px; } #calheader td { font-weight:bold; } /* Class Styles */ .logo { font:18px times new roman; color: #990000; letter-spacing:.3em; font-weight:bold; line-height:22px; } .tagline { font:11px times new roman; color: #CC3300; letter-spacing:.2em; } .smallText { font:12px times new roman; color: #CC3300; line-height:18px; } .pageHeader { font:30px times new roman; color: #CC3300; letter-spacing:.1em; line-height:38px; } .bodyText { font:11px arial; color:#333333; line-height:24px; } .pageName { font:20px georgia; color: #8F0000; letter-spacing:.1em; line-height:26px; } .subHeader { font:14px times new roman; color: #990000; font-weight:bold; line-height:20px; letter-spacing:.1em; } .navText { font:10px arial; color: #333300; letter-spacing:.1em; } |
|||||||