|
CSS - Css Sprites Showing More Than They Should In Ie6!
I've got a problem with my sprites in IE6. I'm not sure if this is a simple fix, or just something I can't fix, but an extensive search online produces no meaningful results.
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing Sprites</title>
<style type="text/css">
h1 {height:24px; width:25px; font-size:14px; padding-left:30px;}
#hd2 {background:url(images/sprite-popHelpH1.jpg) 0 0 no-repeat;}
#hd2 {background:url(images/sprite-popHelpH1.jpg) 0 -24px no-repeat;}
</style>
</head>
<body>
<h1 id="hd1">Hello World!</h1>
<h1 id="hd2">Hello World!</h1>
</body>
</html>
Unexpected IE6 Expected IE7 and FF3 Obviously the FF3 one isn't 100% how I would like it, but that isn't issue i'm trying to deal with. Clearly IE6 is expanding the entire H1's height past what I specified in the CSS, as where IE7 and FF3 listen to me and wrapped text flow outside the height I specified. Anyhow, thanks very much for any help! Similar TutorialsTrying to figure how how to turn my nav bar into where if you hover over one of the parts of the nav bar it turns into the highlighted version of that part. Web Site: http://kansasoutlawwrestling.com/v3/index.php Nav Bar: http://kansasoutlawwrestling.com/v3/images/nav.png Highlighted Nav Bar: http://kansasoutlawwrestling.com/v3/images/nav2.png Hello, I'm having an issue with sprites. I have a few images on my hompage (not a menu), and when a user hover over those images, the image will swap with another one. Here is the HTML Code: <table width="100%" border="0"> <tr> <td align="center"> <a id="sw_sN_facebook" href="social-networking.php"></a> </td> <td align="center"> <a id="sw_sN_myspace" href="social-networking.php"></a> </td> <td align="center"> <a id="sw_sN_flickr" href="social-networking.php"></a> </td> <td align="center"> <a id="sw_sN_twitter" href="social-networking.php"></a> </td> </tr> </table> And here is the CSS Quote: #sw_sN_facebook, a#sw_sN_facebook, a#sw_sN_facebook:link, a#sw_sN_facebook:visited, a#sw_sN_facebook:active{ background:url(../images/logo-social.png) 0 0 no-repeat; width: 101px; height: 20px; } a#sw_sN_facebook:hover{ background:url(../images/logo-social.png) 0 -20px no-repeat; } #sw_sN_myspace, a#sw_sN_myspace, a#sw_sN_myspace:link, a#sw_sN_myspace:visited, a#sw_sN_myspace:active{ background:url(../images/logo-social.png) -101px 0 no-repeat; width: 78px; height: 20px; } a#sw_sN_myspace:hover{ background:url(../images/logo-social.png) -101px -20px no-repeat; } #sw_sN_flickr, #sw_sN_flickr a, #sw_sN_flickr a:link, #sw_sN_flickr a:visited, #sw_sN_flickr a:active{ background:url(../images/logo-social.png) -179px 0 no-repeat; width: 72px; height: 20px; } #sw_sN_flickr a:hover{ background:url(../images/logo-social.png) -179px -20px no-repeat; } #sw_sN_twitter, #sw_sN_twitter a, #sw_sN_twitter a:link, #sw_sN_twitter a:visited, #sw_sN_twitter a:active{ background:url(../images/logo-social.png) -251px 0 no-repeat; width: 86px; height: 20px; } #sw_sN_twitter a:hover{ background:url(../images/logo-social.png) -251px -20px no-repeat; } For a better understanding, here is the homepage: www.lightblu.com The problem: Nothing displays. Now I've tried many different codes, and the best result I had was to display all the images like they should, but they're not hyperlinked, and they don't swap images on mouse over. Please help Thanks Dear Friends I implemented the css sprites in my application.css sprites working well in all browser except IE 6 and IE 7.I cannot know i do it .Please Help me.......... My CSS File .follow_us_blogger { background: no-repeat url('/design/csssprites/follow_us.png') 0 0px; width: 100px; height: 31px;} MY HTML page <div class="follow_us_blogger"><div> So, I have an app that allows the user to select images from a list of thumbnails. The thumbnails have an 'on' and 'off' state, but also have a drop shadow. I can get the drop shadow to render nicely in IE6 using a PNG hack, but I can't seem to find a hack that will allow me to use a PNG sprite so I can have the on and off state in the same image. Any suggestions would be great. In my website (geotool.flagfox.net) I have a drop-down menu which allows people to change to locale of the website. If you look at this menu you can see that I have placed flags next to each country, but as I now have 35 different languages I don't really want to load 35 separate images (especially as most visitors never even look at this menu). Is there a way of using CSS sprites for this? I've made a small test website to make it easier to look at this: test.rleeden.no-ip.com. You can see that I can successfully use a CSS sprite image in the main body, but I've not been able to achieve the same affect in the select menu. Or alternatively somehow make it that the images are only downloaded if the menu is shown?? Any advice or help most welcome. Richard Hi guys I have been reading about sprites and CSS. The fact you can load an image that contains all the state the image can have on hovers is excactly what i am looking for. also the fact that you can do it without javascript makes it even better. But i have a problem that i need to create a menu, where the text turn blue on hover. Here it is (danish text): As far as I know, I need to map all areas the with polygon to make the links work. And then apply sprite functionality. But I haven't seen any 'sprites and maps' tutorials, so I am beginning to think that it cant be done with CSS. But before I give up, I would like to ask you if it can be done, and maybe give me some tutorial link or suggestions. I have tried to do some tutorials, so I think I have the basic idea. Thanks in advance I can't see it working (and in practice it hasn't). Surely the background position needs to be fixed as the image is not scalable. I hope I am right on this or it's back to the drawing board. Hi I have been making a world map with hover tooltip effects using css sprites. it works fine on ff and chrome but in ie and opera it is messed up. everything checks out to be valid xhtml and i get no errors listed anywhere. i have heard some issues with older versions of those browsers but my ie is 7 and my opera is 9. i based my map on this tutorial so css is the same except for positioning. http://www.alistapart.com/articles/sprites also the master image is 800 wide and 1224 tall, maybe that is a problem? i ma stuck and dont know what is wrong could anybody take a look and offer some advice to what is wrong or offer a suggestion? thanks, the map i ma referring to can be found at: travelmagoo.com In the past year or two I've been playing with CSS layout techniques, and have grown to the point where I consistently use CSS instead of tables. I'm all for it. But as much as I love them, some of the trendy practices seem to be a little impractical - particularly sliding doors, sprites and the suckerfish dropdowns. With sprites, I can see the benefits of having fewer HTTP requests and having all rollover images in one file. With suckerfish dropdowns, it's definitely nice to have the navigation and subnavigation organized into lists. Sliding doors can certainly save a lot of bandwidth and load time, and make editing graphical navigation much easier. I'm sure all of these are terrific from SEO and accessibility standpoints, too. But the code for these techniques seems extremely convoluted and bloated. My personal experience with suckerfish dropdowns and sprites both are that they require hacks to get them to work smoothly in browsers as recent as IE6. After all is said and done, there's actually more code required to attain the same functionality that could be achieved using HTML and JavaScript. I'm curious to see what input everyone has. I'd love to justify styling unordered lists into sliding door dropdown nav tabs with sprite backgrounds, just because I have so much fun doing it. But is it really practical? Hi, Instead of organising an image sprite as follows: image image image image image image i'm wondering if there are any negative effects to organising the images in a linear fashion as follows image image image image image image I know that Flash will only render images that are a certain width or height but is there any such limitations when using css sprites? Thanks I am working on a website for a client and I am having trouble following A List Apart's tutorial (I can't link yet). I have a working css dropdown menu using a css sprite. But what I am trying to do, is when you mouse over a dropdown and go down the dropdown, that the parent menu remains at it's hover state. Currently what is happening is as soon as I mouseout of the parent level it goes back to the normal state. I don't really want to post the link to the test site itself if I don't have to for client privacy. Please help! I'm getting way too frustrated now, I've look at so many examples and nothing seems to work. I don't even need the javascript, I just need it to work. I've experimented with javascript and without. This is the code I am using: javascript: Code:
<script type="text/javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
menuRoot = document.getElementById("menu");
for (i=0; i<menuRoot.childNodes.length; i++) {
node = menuRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//->
</script>
HTML Markup: Code: <div id="nav"> <ul id="menu"> <li><a href="index.php" class="home"></a></li> <li><a href="link" class="tour"></a></li> <li><a href="link" class="events"></a> <ul class="drop"> <li><a href="/events/calendar">Calendar</a></li> <li><a href="/events">Ag Science Hall of Fame</a></li> <li><a href="/events/tastes">TASTES</a></li> </ul> </li> <li><a href="news" class="news">News</a> <ul class="drop"> <li><a href="link">Legislation</a></li> <li><a href="news/latest-news">Latest News</a></li> <li><a href="/news/newsletter">Newsletter</a></li> <li><a href="news/in-the-media">In the Media</a></li> </ul> </li> <li><a href="link"></a></li> <li><a href="link"></a></li> </ul> </div> Menu CSS: Code: #nav {
position: relative;
float:left;
width:940px;
height:35px;
z-index: 9;
background: #fff;
}
#menu, #menu ul {
position: relative;
padding:0;
margin:0;
clear:both;
float:left;
width:455px;
z-index: 9;
}
#menu ul.drop {
background:#520006;
/* padding:10px;*/
width:inherit;
clear:both;
float:left;
margin-top:35px;
z-index: 9;
}
#menu ul.drop li {
width: 130px;
clear:both;
padding: 5px;
z-index: 9;
}
#menu ul.drop li:hover {
background: #c10101;
z-index: 9;
}
#menu ul.drop a {
color:#fff;
font-size:11px;
text-decoration:none;
font-weight:normal;
clear:both;
float:left;
z-index: 9;
}
#menu a {
display: block;
/*width: 10em;*/
float:left;
clear:both;
width:130px;
}
#menu li {
float: left;
/*width: 10em;*/
}
#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index: 9;
}
#menu li:hover ul {
left: auto;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;}
/*SPRITE BACKGROUP POSITIONING*/
#menu li a.home, #menu li a.tour, #menu li a.events, #menu li a.news, #menu li a.donate, #menu li a.involved, #menu li a.resources, #menu li a.about, #menu li a.contact {
float:left;
background:url('images/menu.jpg') no-repeat;
height:35px;
text-indent:-999999px;
}
#menu li a.home:hover, #menu li a.home.over {background-position: 0px -35px;}
#menu li a.home {width: 62px;}
#menu li a.tour:hover {background-position: -62px -35px;}
#menu li a.tour {width: 63px; background-position: -62px 0px;}
#menu li a.events:hover, #menu li a.events.hover {background-position: -125px -35px;}
#menu li a.events {width: 101px; background-position: -125px 0px;}
#menu li a.news:hover {background-position: -226px -35px;}
#menu li a.news {width: 80px; background-position: -226px 0px;}
#menu li a.donate:hover {background-position: -306px -35px;}
#menu li a.donate {width: 75px; background-position: -306px 0px;}
#menu li a.involved:hover {background-position: -381px -35px;}
#menu li a.involved {width: 74px; background-position: -381px 0px;}
ul {list-style: none;}
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> 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. 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? 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 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 - 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 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 |
|||||||