|
CSS - Invisible Rollover In Ie
inner circle design
Ok. If you view this page in Firefox(any version) it works fine with the rollovers and all. When viewed in IE, when you mouseover the portion to the left of the about us button, the contact us button acts as if it were being rolled over. I used a JavaScript rollover, and styled it with CSS. I'm thinking the problem lies in the CSS, although it is valid(as is the XHTML page). Can anyone steer me in the right direction? Thanks. Similar TutorialsThis is the weirdest thing, and I don't know what is wrong, and its driving me crazy. I have the following html code. Code: <body> <div id="container_bg"> <div id="container"> <div id="brand_bar"> <div id="logoleft"> Logo1 </div> <div id="logoright"> Logo2 </div> </div> <div class="header"> Big Image goes here </div> <div class="body"> <div id="left"> Left Column </div> <div id="right"> Right Column </div> </div> </div> </div> <div class="clear"></div> <div id="footer_bg"> Footer goes here </div> </body> </html> The css is as follows... Code:
body {
margin: 0px;
background: #CCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: center;
}
.clear {
clear: both;
}
#logoleft {
float: left;
width: 350px;
}
#logoright {
width: 347px;
}
#container_bg {
width: 768px;
margin: 0px auto;
background-image: url(../images/container_bg.gif);
background-repeat: repeat-y;
padding-bottom: 20px;
}
#footer_bg {
width: 768px;
height: 40px;
margin: 0px auto;
background-image: url(../images/footer_bg.gif);
}
#container {
width: 700px;
margin: 0px auto;
text-align: left;
}
#left {
float: left;
width: 250px;
}
#right {
width: 450px;
}
The weird thing is...I can't make left and right add up to 700 or its "bigger" than its container. I actually have to make the total add up to 697 or they won't stay on the same line. Is there just a mysterious 3 px space between divs...or am I missing something? The same with logoleft and logoright...if I make them the same (350px) to add up to 700px...it won't stay on the same line...what is going on? Hello all, Site is here. As you can see, there are 4 links along the top. They are all images controlled by CSS. Here's the XHTML code I am working on: Code: <div id="logonav"> <ul> <li id="ln1"><a accesskey="k" href="./" title="To The Main Page"></a></li> <li id="ln2"><a accesskey="t" href="timeline/" title="A little about me"></a></li> <li id="ln3"><a accesskey="i" href="about/" title="Info about this little web space"></a></li> <li id="ln4"><a accesskey="c" href="contact" title="Contact Me"></a></li> </ul> </div> As you can see, there is NO actual value for the anchor: nothing. Well, the WAI-AAA validator doesn't like that. There has to be something there. The problem is that if I add text there it, of course shows up on the page. I don't want that, I want my images... So, can I add the text, but make it invisible somehow? I've played with transparencies a bit, but nothing's working. Anyone know any tricks? The CSS code that controls them is he Code:
#logonav {
background : url(./pix/MenuBar.jpg) no-repeat;
height:40px;
width : 780px;
}
#logonav ul {
margin : 0;
padding : 0;
white-space : nowrap;
list-style : none;
}
#logonav li {
float : left;
width : 130px;
text-align : center;
margin-left : 25px;
}
#logonav li a {
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
}
#ln1 a {
background : url(./pix/home_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}
#ln1 a:visited {
background : url(./pix/home_click.gif) no-repeat;
}
#ln1 a:hover {
background : url(./pix/home_mouse.gif) no-repeat;
}
#ln2 a {
background : url(./pix/time_bio_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}
#ln2 a:visited {
background : url(./pix/time_bio_click.gif) no-repeat;
}
#ln2 a:hover {
background : url(./pix/time_bio_mouse.gif) no-repeat;
}
#ln3 a {
background : url(./pix/about_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}
#ln3 a:visited {
background : url(./pix/about_click.gif) no-repeat;
}
#ln3 a:hover {
background : url(./pix/about_mouse.gif) no-repeat;
}
#ln4 a {
background : url(./pix/contact_off.gif) no-repeat;
font : bold 0.9em Arial, Helvetica, sans-serif;
text-decoration : none;
display : block;
line-height : 26px; /* trick provided by trx */
height : 26px;
color : #B04F4F;
}
#ln4 a:visited {
background : url(./pix/contact_click.gif) no-repeat;
}
#ln4 a:hover {
background : url(./pix/contact_mouse.gif) no-repeat;
}
Just as an example, I'll add "Home" to the bar in red text. Bsaically, I figure that still has to be there, but invisible! How? Thanks! Chris Hi all! I have some DIVs and I want only one of them to be visible. Here is some simplified code: Code:
<p>
<a href="javascript:void(0);" onclick="document.getElementById('div1').style.visibility='visible';document.getElementById('div2').style.vis ibility='hidden';">Show DIV 1</a>
<a href="javascript:void(0);" onclick="document.getElementById('div1').style.visibility='hidden';document.getElementById('div2').style.visi bility='visible';">Show DIV 2</a>
</p>
<div id="div1" style="visibility:visible">
this is the content of div 1
<br/>line 2
<br/>line 3
</div>
<div id="div2" style="visibility:hidden">
this is the content of div 2
<br/>line 2
</div>
By clicking the <a> link, one DIV becomes visible, the other is hidden. The problem is that there is a gap between them, both in FF2 and IE7. Can someone explain me why there is this gap, and if there is a way I can remove it? TIA Alex I have a site with a cityscape and need text/image div to appear to pass behind skyscrapers. The javascript for all the div motions are worked out. I had planned to just overlay a higher z-index graphic of the skyscraper where I wanted the text to pass behind, but as the site now requires the ability to scale the images on a window resize, that has become difficult if not impossible to make work seamlessly. So what I would like to do is have one div (textDiv) pass behind another (towerDiv) that shows through to the background, but when it does, it is hidden in the same way it would have been if passing behind a div with an image or background. Is it possible to make a div behave this way with css configuration? Z-index Visible 30 towerDiv 20 >-------textDiv---------> >-------------> 10 CityCityCityCityCityCityCityCityCityCityCityCityCityCity An alternative I've thought of would be to have the textDiv jump from one div container to another somehow, but that would require javascript and I'll place that question there. Thanks Ok, I know IE is buggy, but this one has been driving me nuts for a while now... I'm applying borders to the edges of a div as shown by A list apart. Pretty simple stuff and I have it working perfectly under Mozilla Firefox. IE on the other hand isn't taking it so well (imagine that). The thing is, it's like nothing I've ever seen. I changed some positioning on the page one night and ever since then it's been doing it. The lower right hand image is just not rendering. What's worse, is if I add a border to the element it will displace things as a border should but the border itself doesn't show up! I don't know how I managed to muck things up this way, but I would appreciate a hand with it if anyone has any ideas. Here is the IE Screenshot and the Firefox Screenshot Also... The CSS and The HTML Hi, I am using this class for .textbox, input.text_class, select.select_class{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; background-image: url(./textbox_shadow.gif); height: 18px; width: 160px; margin: 0px; padding: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #BFBFBF; border-right-color: #E2E2E2; border-bottom-color: #EEEEEE; border-left-color: #C8C8C8; } for text box , how can I made tghe text box invisible or hidden style.display = "none"; Hi Guys, Is there a way to make a DIV invisible in IE but still available for mouse events? I have an arrows image used for navigating a map, I have placed invisible DIV boxes at select places on the arrows image and have various events triggered when these DIV's are clicked, this works fine in FF but in IE (as per usual) if the DIV doesn't have its backgroundColor set then the mouse events don't fire, it is like IE is saying 'the user can't see them therefore they aren't there'. Is there any way around this? P.S I can't use any kind of opacity (as it will effect the map image below the arrow image) and I have to use DIV's, slicing the image or <map> aren't an option for this. Cheers, Chris How would I change this to make list elements invisible? At the moment it just greys them out? div.sideBox ul li.disabled { display: block; padding: 2px 0 2px 7px; border-top: 1px solid #ccc; color: #777777; } So Id like to make the element basically like it doesnt exist. I dont want any spaces left over. Ive tried this div.sideBox ul li.disabled2 { visibility:hidden; } but it leaves an empty space. I am looking for a way (preferably using CSS) to make an I-beam or cursor inside a text field to become invisible. This may be achieved by changing its color to match the bgcolor, by making it invisible altogether, or even simply to get it to stop blinking (when the bg color is black). Any help would be appreciated. Does anyone have any idea what could be happening to my main menu - it dissappears in Safari! Hobo My website is warriorquest.co.nr and for some odd reason, the css rollovers are working in the latest IE, but not in the latest Firefox. THis is something i never expected, here is my css: Code: css a { text-decoration: none; }
a:link { color: #0000FF; }
a:active { color: #C0C0C0; }
a:visited { color: #0000FF; }
a:hover
{
color: #0000FF;
border: 1px solid #0000FF;
padding: 5px;
width: 190px;
background-color: #ffffff;
}
body
{
color: #ffffff;
background-color: #2F4F4F;
}
div
{
margin-top: 50px;
margin-bottom: 50px;
}
Thx for your help =) EDIT: it seams i had to completely reload the page, but now they dont display right. THey are supposed to look like in IE, any suggestions? Hi, I have a problem, I can make a rollover on a link with the hover pseudo class easily, and it will work in IE and FF, but I cant do one over a table cell in IE. My code is below, it works as I want in FF, but not IE. Dom. Quote: .nav-cell-main-nonsel { font-family: "Comic Sans MS", Tahoma, Tunga, Verdana, Arial, Geneva; font-size: 10px; font-weight: normal; color: #333333; vertical-align: middle; text-align: left; padding: 0px 0px 0px 5px; background-image: url(../../images/[ps]triangle1.gif); background-position: left; background-repeat: no-repeat; border-bottom: 1px solid #EDEDED; padding: 0px 0px 0px 20px; } .nav-cell-main-sel, .nav-cell-main-nonsel:hover { font-family: "Comic Sans MS", Tahoma, Tunga, Verdana, Arial, Geneva; font-size: 10px; font-weight: normal; color: #333333; vertical-align: middle; text-align: left; padding: 0px 0px 0px 5px; background-image: url(../../images/[ps]triangle2.gif); background-position: left; background-repeat: no-repeat; border-bottom: 1px solid #EDEDED; padding: 0px 0px 0px 20px; } Cheers, Dom. Hi, q) In css, can you rollover an link in a navigation bar that is replaced by another image instead of text. q)With a dropdown menu eg suckerfish example, can you also use a rollover effect on the drop own choices either with text or an image? I have this code which changes text into a image, but how do I have an image instead of text? I mean so everythings images and no text. <style type="text/css"> #nav a:hover { background: url("arrow_hover.png") no-repeat; } #nav a img { width: 88px; height: 67px; position: absolute; top: 200px; left: 500px; border: 1px solid black; visibility: hidden; } #nav a:hover img { visibility:visible; } </style> <div id="nav"> <ul> <li><a href="#">Link1<img src="camera.jpg" alt="" /></a> <li><a href="#">Link2<<img src="home.png" alt="" /></a></li> <li><a href="#">Link3<<img src="camera.jpg" alt="" /></a></li> <li><a href="#">Link4<<img src="johnpotter.jpg" alt="" /></a></li> </ul> </div> Hi everyone, I'm having a rollover image problem in IE6. The problem isn't that the rollover isn't working - it's that the initial image before the rollover isn't displaying. You can see what I mean at: http://www.francesli.myubertor.com/ Doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML for Menu: Code: <!-- --------------- main menu --------------- --> <div id='menu_outer'> <div id='menu_inner'> <ul> <li id="up_menu1" class="sel"> <a class="sel" href="/" title="" target="" rel="">Home</a> </li> <li id="up_menu2" class="unsel"> <a class="unsel" href="/Properties.php" title="" target="" rel="">Properties</a> <ul> <li id="up_menu2_1" class="unsel"> <a class="unsel" href="/ActiveListings.php" title="" target="" rel="">Active Listings</a> </li> </ul> </li> <li id="up_menu3" class="unsel"> <a class="unsel" href="/ForBuyers.php" title="" target="" rel="">For Buyers</a> <ul> <li id="up_menu3_1" class="unsel"> <a class="unsel" href="/FirstTimeBuyers.ubr" title="" target="" rel="">First Time Buyers</a> </li> </ul> </li> <li id="up_menu4" class="unsel"> <a class="unsel" href="/ForSellers.php" title="" target="" rel="">For Sellers</a> <ul> <li id="up_menu4_1" class="unsel"> <a class="unsel" href="/20TipsforSellingYourHome.ubr" title="" target="" rel="">20 Tips for Selling Your Home</a> </li> </ul> </li> <li id="up_menu5" class="unsel"> <a class="unsel" href="/Blog.php" title="" target="" rel="">Blog</a> </li> <li id="up_menu6" class="unsel"> <a class="unsel" href="/Links.php" title="" target="" rel="">Links</a> </li> <li id="up_menu7" class="unsel"> <a class="unsel" href="/Contact.php" title="" target="" rel="">Contact</a> <ul> <li id="up_menu7_1" class="unsel"> <a class="unsel" href="/AboutMe.ubr" title="" target="" rel="">About Me</a> </li> </ul> </li> </ul> </div> </div> CSS for Menu: Code:
/* Navigation Menu */
#menu_outer {
top: 77px;
background: transparent url(../../content/image/287.png) repeat-x scroll 0% 0%;
height: 42px;
padding-top: 7px;
text-transform: uppercase;
}
#ubertor #menu_outer li a {
color: #FFFFFF;
font-weight: bold;
}
/* Home */
#up_menu1.sel a{
background: url(http://storage.ubertor.com/cl9438/content/image/307.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 60px;
height: 27px;
}
#up_menu1.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/307.png) #6fcee4 no-repeat bottom;
width: 60px;
height: 27px;
}
#up_menu1.unsel{
background: url(http://storage.ubertor.com/cl9438/content/image/307.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 60px;
height: 27px;
}
/* Properties */
#up_menu2.sel a, #up_menu2.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/309.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 90px;
height: 27px;
}
#up_menu2.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/309.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 90px;
height: 27px;
}
#up_menu2.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 90px;
height: 27px;
}
/* For Buyers */
#up_menu3.sel a, #up_menu3.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/311.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 99px;
height: 27px;
}
#up_menu3.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/311.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 99px;
height: 27px;
}
#up_menu3.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 99px;
height: 27px;
}
/* For Sellers */
#up_menu4.sel a, #up_menu4.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/313.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 101px;
height: 27px;
}
#up_menu4.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/313.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 101px;
height: 27px;
}
#up_menu4.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 101px;
height: 27px;
}
/* Blog */
#up_menu5.sel a, #up_menu5.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/317.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 58px;
height: 27px;
}
#up_menu5.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/317.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 58px;
height: 27px;
}
#up_menu5.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 58px;
height: 27px;
}
/* Links */
#up_menu6.sela, #up_menu6.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/319.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 65px;
height: 27px;
}
#up_menu6.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/319.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 65px;
height: 27px;
}
#up_menu6.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 65px;
height: 27px;
}
/* Contact */
#up_menu7.sel a, #up_menu7.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/315.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 82px;
height: 27px;
}
#up_menu7.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/315.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 82px;
height: 27px;
}
#up_menu7.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 82px;
height: 27px;
}
#ubertor #menu_outer li li a {
text-transform: none;
background-color:#CCCCCC;
background-image:none;
color:#222222;
display:block;
float:none;
padding:2px 10px;
text-indent:0;
width:auto;
height: auto;
}
#menu_inner ul li a, #menu_inner ul li a:hover {padding: 0px 0px}
Help will be very appreciated, I'm supposed to have this done today. :/ Hi, I have a button as follow: Code:
#memberlogin .login{
background:url(/images/memberlogin_btn.gif) no-repeat left top;
display:block;
width:130px;
height:31px;
border:0;
}
I need to make a rollover. This is one image, same as this method: http://www.nowcss.com/links/image-rollover-with-css I tried it this way Code:
#memberlogin a.login span {
display: none;
}
#memberlogin a.login:hover {
background: url(/images/memberlogin_btn.gif) repeat 0px -31px;
}
but it's not working, do you know what I'm doing wrong here? Thanks in advance. I am trying build a bottom bucket with two different links, that when you rollover either one of the images a different image is shown. Well I have all of that working but if you rollover the first image and while the li ul image is being shown take your mouse and move to the right. The hover state of the second ul is now shown. But if you go backwards and start moving your mouse to the left, nothing happens, which is great! I have tired all sorts of things. Right now I have a link that has a very stripped down version of what it is suppose to be. I have tired different z-index's but still nothing. Thanks for the help! http:// www. movementinteractive. com/ clients/ ParkAve_web/web/tab_test.html |
|||||||