|
CSS - Is It Possible To Do A Em Sized Sprites Based Ul Navigation?
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. Similar Tutorialsif you look under the top banner on my site, the navigation bar is too tall and wide, and all of the buttons don't even fit the full width of the page. it is partially complicated because two of the ten buttons have drop-down menus created through javascript. it is a horizontal ul with the buttons floated left. i'll give you the cut-down html code and then the css to go along with it so you get the general idea. navigation menu html: html Code: Original - html Code <div id='navbar'> <ul id="sddm"> <?php echo " <li> <a href='".get_home_link()."'><img src='[themedir]images/home_icon.gif' alt=''>Home</a> </li> <li> <a href='".get_category_link("name=all&page=1")."'"; ?> onmouseover='mopen("m1")' <?php echo " onmouseout='mclosetime()'><img src='[themedir]images/allgames_icon.gif' alt=''>Games</a> <div id='m1' onmouseover='mcancelclosetime()' onmouseout='mclosetime()'> "; $categories = get_categories("htmlize=true&order=order&sort=ASC&parent=Games"); foreach ($categories as $category) { $link=get_category_link("name="._sp($category['name'])."&page=1"); echo "<a href='".$link."'>".$category['name']; $category['gamenum'] = count(get_games("thecat="._sp($category['name']))); echo " (".$category['gamenum'].")"; echo "</a>"; } $link=get_category_link("name=Unvalidated&page=1"); $unvalidated_games=get_games("active=No"); $num_unvalidated=count($unvalidated_games); echo " <a href='".$link."'>Unvalidated (".$num_unvalidated.")</a> </div> </li> <li> <a href='".get_category_link("name=all&page=1&cattype=videos")."'"; ?> onmouseover='mopen("m2")' <?php echo " onmouseout='mclosetime()'><img src='[themedir]images/videos_icon.gif' alt=''>Videos</a> <div id='m2' onmouseover='mcancelclosetime()' onmouseout='mclosetime()'> "; $categories = get_categories("htmlize=true&order=order&sort=ASC&parent=Videos"); foreach ($categories as $category) { $link=get_category_link("name="._sp($category['name'])."&page=1&cattype=videos"); echo "<a href='".$link."'>".$category['name']; $category['gamenum'] = count(get_games("cattype=videos&thecat="._sp($category['name']))); echo " (".$category['gamenum'].")"; echo "</a>"; } $link=get_category_link("name=Unvalidated&page=1&cattype=videos"); $unvalidated_games=get_games("active=No&cattype=videos"); $num_unvalidated=count($unvalidated_games); echo " <a href='".$link."'>Unvalidated (".$num_unvalidated.")</a> </div> </li> <li> <a href='".get_users_link()."'><img src='[themedir]images/members_icon.gif' alt=''>Members</a> </li> <li> <a href='".get_news_link()."'><img src='[themedir]images/news_icon.gif' alt=''>News</a> </li> <li> <a href='".get_submit_link()."'><img src='[themedir]images/request_icon.gif' alt=''>Submit</a> </li> <li> <a href='".get_links_link()."'><img src='[themedir]images/links_icon.gif' alt=''>Links</a> </li> <li> <a href='".get_rules_link()."'><img src='[themedir]images/rules_icon.gif' alt=''>Rules</a> </li> <li> <a href='".get_faq_link()."'><img src='[themedir]images/faq_icon.gif' alt=''>FAQ</a> </li> <li> <a href='".get_contact_link()."'><img src='[themedir]images/contact_icon.gif' alt=''>Contact</a> </li>"; ?> </ul> <div style="clear:both"></div> </div>
<div id='navbar'>
<ul id="sddm">
<?php
echo "
<li>
<a href='".get_home_link()."'><img src='[themedir]images/home_icon.gif' alt=''>Home</a>
</li>
<li>
<a href='".get_category_link("name=all&page=1")."'";
?>
onmouseover='mopen("m1")' <?php echo "
onmouseout='mclosetime()'><img src='[themedir]images/allgames_icon.gif' alt=''>Games</a>
<div id='m1'
onmouseover='mcancelclosetime()'
onmouseout='mclosetime()'>
";
$categories = get_categories("htmlize=true&order=order&sort=ASC&parent=Games");
foreach ($categories as $category) {
$link=get_category_link("name="._sp($category['name'])."&page=1");
echo "<a href='".$link."'>".$category['name'];
$category['gamenum'] = count(get_games("thecat="._sp($category['name'])));
echo " (".$category['gamenum'].")";
echo "</a>";
}
$link=get_category_link("name=Unvalidated&page=1");
$unvalidated_games=get_games("active=No");
$num_unvalidated=count($unvalidated_games);
echo "
<a href='".$link."'>Unvalidated (".$num_unvalidated.")</a>
</div>
</li>
<li>
<a href='".get_category_link("name=all&page=1&cattype=videos")."'";
?>
onmouseover='mopen("m2")' <?php echo "
onmouseout='mclosetime()'><img src='[themedir]images/videos_icon.gif' alt=''>Videos</a>
<div id='m2'
onmouseover='mcancelclosetime()'
onmouseout='mclosetime()'>
";
$categories = get_categories("htmlize=true&order=order&sort=ASC&parent=Videos");
foreach ($categories as $category) {
$link=get_category_link("name="._sp($category['name'])."&page=1&cattype=videos");
echo "<a href='".$link."'>".$category['name'];
$category['gamenum'] = count(get_games("cattype=videos&thecat="._sp($category['name'])));
echo " (".$category['gamenum'].")";
echo "</a>";
}
$link=get_category_link("name=Unvalidated&page=1&cattype=videos");
$unvalidated_games=get_games("active=No&cattype=videos");
$num_unvalidated=count($unvalidated_games);
echo "
<a href='".$link."'>Unvalidated (".$num_unvalidated.")</a>
</div>
</li>
<li>
<a href='".get_users_link()."'><img src='[themedir]images/members_icon.gif' alt=''>Members</a>
</li>
<li>
<a href='".get_news_link()."'><img src='[themedir]images/news_icon.gif' alt=''>News</a>
</li>
<li>
<a href='".get_submit_link()."'><img src='[themedir]images/request_icon.gif' alt=''>Submit</a>
</li>
<li>
<a href='".get_links_link()."'><img src='[themedir]images/links_icon.gif' alt=''>Links</a>
</li>
<li>
<a href='".get_rules_link()."'><img src='[themedir]images/rules_icon.gif' alt=''>Rules</a>
</li>
<li>
<a href='".get_faq_link()."'><img src='[themedir]images/faq_icon.gif' alt=''>FAQ</a>
</li>
<li>
<a href='".get_contact_link()."'><img src='[themedir]images/contact_icon.gif' alt=''>Contact</a>
</li>";
?>
</ul>
<div style="clear:both"></div>
</div>
navigation menu general css: css Code: Original - css Code #sddm { display:block; margin: 0; padding: 0; z-index: 30; position:absolute; } #sddm li { display:block; margin: 0; padding: 0; list-style: none; float: left; max-height:31px; } #sddm li a { display: inline-block; text-decoration: none; color:#495B20; background-color:#BAD36B; border-left: 2px solid #fff; border-top: 2px solid #fff; border-right: 2px solid #000; border-bottom: 2px solid #000; padding: 4px 0.3em; margin:0; }
#sddm {
so what i want is for the buttons (<li>s) to have the exact height of their background div, which is 31px, and i also want them to fill 100% of their background div's width. how can i make this possible? Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! I got a bit of a problem, I don't know if this is possible but I want a container that resizes depending on the content inside it. BUT I want the rest of the containers to be the same size as the biggest. I.e. --------- --------- --------- --------- | | | | | | | | | | | | | | | | | | --------- --------- --------- --------- See the first one is bigger? Well I want the rest to be of the same size, i.e. --------- --------- --------- --------- | | | | | | | | | | | | | | | | | | | | | | | | --------- --------- --------- --------- Hello! Is it possible to get iframe fully fill the div when div is in the middle of the screen and it is absolutely positioned and left,right,top,bottom: 100px; Trying 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 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. 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! 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> I have a full page menu which resizes. eg item1 | item2 | item3 | item4 | item5 | item6 Which resizes depening on the window size. However if you shrink the window X ways, it does the following item1 | item2 | item3 | item4 | item5 | item6 how can I stop it wrapping the items to new lines heres my code. Code:
#menu2 {
display : inline;
white-space : nowrap;
width: 100%;
margin: 1em 0;
padding: 0px 0.5em;
background: #eee none;
}
#menu2 ul {
display : inline;
white-space : nowrap;
margin: 0;
padding: 0;
list-style-type: none;
}
#menu2 li {
display : inline;
white-space : nowrap;
margin: 0;
padding: 0;
float: left;
}
#menu2 li {
white-space : nowrap;
display : inline;
width: 24%;
text-align: center;
}
#menu2 a {
float:left;
display:block;
margin: 2px 0 0;
text-decoration: none;
padding-right: 0.4em;
padding-left: 0.65em;
}
and Code: <div id="menu2">
<ul>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
</ul>
</div>
Alright, here's the situtation: Imagine a bunch of random DIVs... let's say a hundred. These DIVs come in three different widths, but their heights are entirely variable. Now, let's give these DIVs margins of 5px each. I want all of the DIVs to show up, in their respective dimensions, in order as much as possible... but I want them all 10px apart from all sides... including top and bottom. How would I achieve this effect? I tried floats, but that doesn't quite work for EDIT* - vertical spacing in all cases. Basically, if a smaller DIV can fit in an empty space, I want it to go there, so everything--despite the randomness--is uniformly spaced. Is this possible using CSS? Maybe with Javascript? 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 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 guys! Ok here's the thing, I've tried everything I know and hunted the net trying to find an answer, and just when I think I have, another issue crops up. Sorry about the title but I just don't know what to call what it is I'm trying to do. But it SHOULD be possible, and it SHOULD be really simple, which is frustrating the heck out of me because I cannot get this to work! Here is what I'm trying to do, complete with pictures to help visualize things. Example This shows how I want my site layout to appear. A regular width site so it can be displayed on low res desktops, BUT with extra artwork on the left and right, complete with a couple of flash animations to the sides. Code: http://img708.imageshack.us/img708/2458/layoutstyle.jpg The red outline shows a typical 800x600 display, as you can see, they should only be able to see what's in the center of the page. The dark blue outline shows a much higher resolution display The light blue color shows the extra artwork only revealed to higher resolutions The flash boxes contain flash elements which should remain fixed in those locations regardless of the resolution the user is using (they'd be setup to match the background image, so must not move) The dark blue outline shows how the same site would look on a much higher resolution. Instead of black space to the left or right, or the actual site stretching to fit (not looking for a liquid layout in this case), they get to see the rest of the artwork, plus the flash elements. The purpose of this is so it will look fine on low resolution displays, but also, when viewed on higher resolution displays, will then show the extra artwork instead of blackness. Problems Just when it looks like it might work, I find that each browser displays things incorrectly, pixels, picas, ems, etc. and so on. How do I get it to work across the board? I don't want to be unprofessional and do the "This site should only be viewed in X browser". The flash enabled parts always wrap and refuse to appear off screen, how do I fix this? When I place them, I want them to stay exactly where they are (which is offscreen on a low resolution, but visible on a higher resolution), not bunch up and move out of place. I can get the actual background to appear correctly, so when resizing the browser, it remains fixed in the center and reveals the rest of the artwork both left and right. But other elements simply refuse to behave correctly (see first problem, this happens especially with browsers not rendering the same things the same, such as pixels etc. being done differently in each browser). If you want a real world example of what I'm trying to achieve, please view the following website: Code: http://us.blizzard.com/diablo3/?rhtml=y unfortunately I have no idea what language they used and it looks unreadable to me, so borrowing from view source isn't an option for me in this case (I use Dreamweaver, css and php, and have no understanding of xml or whatever it is they're using, neither do I have the time to learn another language). Is there anyone who can help me here, cause this is REALLY frustrating me now, it should be incredibly simple but it's not, and I feel as if I'm being forced to abandon everyone who doesn't have X display and X browser. Which I don't want to do. P.S. Sorry about the weird links, seems new accounts can't use url's *shrugs*. 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;}
Hey guys I am currently having an issue with a CSS Navigation. I was wondering if anyone was available to help me out. http://schoolwide.sgajewski.com/menu/ I am currently having an issue with IE 7. It seems to be working in every other browser but the second level of the navigation is offset lower in IE7. The spacing starts off 1 pixel two low and progressively the gap gets wider. Code:
ul.vertical, ul.vertical li {
margin:0;
padding:0;
list-style-type:none;
font-size:100%;
}
ul.vertical {
position:absolute;
z-index:1000;
cursor:default;
width:180px;
left:1em;
top:4.05em;
}
ul.vertical li {
position:relative;
text-align:left;
cursor:pointer;
cursor:hand;
width:180px;
margin:-1px 0 0 0;
padding-bottom:0px!important;
padding-bottom:1px;
float:left;
clear:both;
top:0;
left:0;
}
ul.vertical ul {
z-index:1020;
cursor:default;
position:absolute;
width:197px;
margin:0 0 0 179px;
top:-100em;
left:-1px;
padding:1px 0 0 0;
height:0px;
overflow:hidden;
}
ul.vertical ul li {
width:197px;
}
ul.vertical ul ul {
margin: 0 0 0 179px;
}
@media Screen, Projection {
ul.vertical li:hover > ul { top:0; height:auto; overflow:visible; }
}
ul.vertical a, ul.vertical a:visited {
display:block;
cursor:pointer;
cursor:hand;
background:url(images/bg.jpg);
padding:5px 7px;
font:normal normal bold 0.7em tahoma, verdana, sans-serif;
color:#008000;
text-decoration:none;
letter-spacing:1px;
}
ul.vertical a:hover, ul.vertical a:focus, ul.vertical a.rollover, ul.vertical a.rollover:visited {
background:url(images/bg_over.jpg);
color:#806020;
}
ul.vertical .outtop {background:url(images/bg_over_top.jpg);}
ul.vertical .outbg {background:url(images/bg_over_mid.jpg);}
ul.vertical .outbot {background:url(images/bg_over_bot.jpg);}
ul.vertical ul a,
ul.vertical ul a:hover,
ul.vertical ul a:visited,
ul.vertical ul a:active
ul.vertical ul a:hover,
ul.vertical ul a:focus,
ul.vertical ul a.rollover,
ul.vertical ul a.rollover:visited
{
background-image:none;
}
@media screen, projection {
* html ul.vertical li {
display:inline;
f\loat:left;
background:#ffffff;
}
}
* html ul.vertical li { position:static; }
* html ul.vertical a { position:relative; }
ul[class^="vertical"] ul { display:none; }
ul[class^="vertical"] ul { displa\y:block; }
Any help on why this is offset in IE7 would be great. Thanks in advance. |
|||||||