- This topic is empty.
-
AuthorPosts
-
October 14, 2008 at 7:36 pm #23411
webmike
MemberIn podcast #13 you show us how to create tabs using CSS to position an area of an image. This way you can put the different states for each tab in one image. I used this metod to to swap some pictures on my site. Test server located here http://www.guidesrus.com. This works great in IE but fails in FF. Below is the code I used in the html doc and the css doc. Is there a bug in FF that doesn’t allow this to work?
HTML
<div id="image-replacement">
<ul id="rollover">
<li class="rollover-image1"><a href="#">image1</a></li>
<li class="rollover-image2"><a href="#">image2</a></li>
</ul>
</div>CSS
div#image-replacement {
color: #76653a;
text-decoration:none;
}ul#rollover {
list-style: none inside;
}ul#rollover li{
display: inline;
}ul#rollover li a{
display: block;
height: 192px;
text-indent: -9999px;
float: right;
margin:20px 38px 0px 0px;
}ul#rollover li.rollover-image1 a {
width: 310px;
background: url(http://www.guidesrus.com/images/repair_business.jpg) top no-repeat;
}ul#rollover li.rollover-image2 a {
width: 310px;
background: url(http://www.guidesrus.com/images/repair_residential.jpg) top no-repeat;
}ul#rollover li a:hover {
background-position: bottom bottom;
}October 14, 2008 at 8:00 pm #50564Cotton
MemberWorks good in Safari, not so much in Firefox 3. Did they fix the display: inline-block bug in Firefox 3?
What happens when you remove this:
Code:ul#rollover li{
display: inline;
}October 14, 2008 at 8:43 pm #50572webmike
MemberWell once again I posted a bit to soon. in the following code I removed one of the bottoms and everything thing now works great.
Code:old code
ul#rollover li a:hover {
background-position: bottom bottom;
}New code
ul#rollover li a:hover {
background-position: bottom;
}October 14, 2008 at 11:21 pm #50575Cotton
MemberDoh – makes sense. When you specify a position one is for vertical the other is for horizontal. If you specify one of them the other one assumes center. So if you tell something top, then it assumes top and center. If you tell something left, then it assumes left and center. If you tell something bottom bottom it probably freaks out. Validating your CSS probably would have caught that one.
October 23, 2008 at 3:31 pm #50303webmike
MemberThat was one of the first things I did before posting this. It validated fine for that line.
Most important it’s fixed. Thanks for the explanation.
WebMike :D
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.