I am not sure what is going on here but the rollover is not working correctly and I can't seem to figure it out.
I am using very basic and simple css:
open{visibility:hidden;}
open:hover{visibility:visible;}
http://www.ubhape2.com/messages/files/chameleon/ is the page i am working on
Please forgive the god awful code. I am using it as a simple and quick method. Just need the roll over to work and I am good.
You can use the opacity property:
.open{opacity:0;}
.open:hover{opacity:1;}
The problem is that you can't hover over a hidden element (see Why isn't CSS visibility working?).
The solution posted there is also a good alternative for this issue. There are lots of other ways to do it though, such as a div with an image in the background, like:
<style>
div.open { background: none; width: 137px; height: 49px; }
div.open:hover { background:url('images/chameleon_10.gif'); }
</style>
<div class="open"></div>
Or if you need to use an image, you can use image sprites (http://www.alistapart.com/articles/sprites)
See basic jsfiddle.
Try below code, should work fine
a.open{visibility:hidden;}
a.open:hover{visibility:visible;}
<a class="open" href="">Open</a>
Related
http://jsfiddle.net/Zmpyv/6/
I have a page, where I use <div> to style the sheet. The problem is that it creates a border around the page. How can I remove this border? Check out the jsfiddle to see what I mean. I am using position: static; I do not want to use fixed because then the page won't scroll correctly.
Perhaps you're just talking about the native margin on <body>. Try this;
body {
margin: 0;
}
Check out http://jsfiddle.net/Zmpyv/8 where I added the above CSS to your demo.
To avoid spending time fighting silly things like this, I recommend you have a look at normalize.css which applies this style for you, along with fixing a host of other discrepancies between browsers and in my opinion gives you a better starting point when authoring CSS.
Try setting this in div.
border:none
This will remove the border of any element..
<div class="headerClear" /></div>
see this div has unexpected close the right method is
<div class="headerClear"></div>
replace with this and add this to your css
body{ margin:0px;}
So, I have this animation that I want to run in the background of my website.
http://www.theartificialasylum.com/index3.html
I want to layer some divs over that animation containing images and texts etc. I have tried using z-index in the CSS file and different variations of uses of opacity to no avail.
Can anyone see where I am going wrong? this is the best I seem to be able to achieve: http://www.theartificialasylum.com/adex.html
Using Chrome's developer tools, I added some text to the 102 div, gave it a class of "lawl", and used only this stylesheet and was able to accomplish what it sounds like you wanted:
body{
background-color: #000000;
color: #fff;
}
#flashContent {
position:absolute;
top: 0;
left: 0;
}
.lawl {
background: #023;
opacity: .5;
}
I'm not sure what the problem was. Maybe it's your strict doctype. (I only use transitional myself.) Maybe it's because you were applying too many things to the html tag.
I do recommend cleaning up your code a bit, using more semantic IDs, putting test text in your divs, and paring it down so that you only test a few variables/lines of code at a time to achieve what you want.
Also, saving damn IE opacity fixes for last until after you have everything else done.
Can you have a look at my code and please tell me why the hover is not working, thanks!
<style>
#moreDiscussHome:hover{
background-color: #ffffff;
}
</style>
<a id="moreDiscussHome" style="color:#f1f7f8;background-color:#12a1b7;" href="">more discussions</a>
Well, as soon as display: none; is applied, you are no longer hovering the element because it is not there, so it will basically flicker constantly or do nothing.
Try opacity* instead perhaps:
#moreDiscussHome:hover {
opcaity: 0;
}
Note that the element still retains it's space in the layout with this, which may not be what you want... but I'm honestly not sure what you're trying to achieve with this.
Side note: There's no reason not to move those other inline styles to a stylesheet.
This doesn't work: #moreDiscussHome:hover{ background-color: #ffffff; }
EDIT: I strongly urge you to move all inline styles to a CSS file. If for no other reason, to avoid some of the issues you already seem to be having with trying to apply background colors. A shortcut might seem easier at the time, but as the saying goes: "Shortcuts make for long delays". (In other words, don't do it)
* visibility:hidden will respond to :hover the same as display:none, so it won't work either. Thanks to thirtydot for the tip.
Been a while since I had a CSS related problem but here I am. to cut a long story short I want to highlight text with a gradient background which I have managed to achieve using the <span> tag and setting a background image onto it. The problem is it startes to get a bit trippy and breaks when the text goes on to a new line.
I have managed to fix it but the HTML is horrible and I don't like compromising HTML code for style purposes as a rule.
The best way to describe this is just to show you.
http://jsfiddle.net/sambeckhamdesign/2HSqh/11/
The top <li> is the good HTML with the broken style and the botom <li> is how it's supposed to look but with awful HTML markup.
Any solutions obviously appreciated. Don't mind using Javascript or jQuery but I'd rarther do it in CSS if I could.
Ta pets :)
I can provide you the css hacks working only for firefox and safari
::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}
Reference:
http://www.catswhocode.com/blog/10-astonishing-css-hacks-and-techniques
Hope this help :)
The only method (that does not need extra markup) that i can think of would be to use a repeating background-image that has exactly the height of a line. This should work properly and fast if your line-height is constant. All other approaches are likely to be quite slow or bulky.
The best way I could se to do this in the end was to use the <span> tag. I hate doing this and try to avoid it when I can but it needed to be used in this case. See the updated JS fiddle in the question for how I did it.
Maybe this provides what you want
ul#container li.hilight {
padding:3px 20px;
background:url('http://www.sambeckhamdesign.com/_images/rain_1.jpg') left repeat-y #c06;
line-height:30px;
color:#fff;
}
and
<li class="hilight">
This is how the text should look
<br />
but the HTML markup is messy
</li>
Ive used the following css code to align my form elements:
form { position:relative; }
form input { position:absolute; left:11em; }
However, the textarea element is not aligned correctly with the rest of the elements. I tried the following, but that didnt work
form input,textarea { position:absolute; left:11em; }
Any way to fix this ?
Thank You.
No-one is going to be able to solve this without seeing the current result; I generally avoid absolute positioning as a rule unless doing something particularly complicated like tooltips, can you not achieve what you want using margins?
It looks like this is a Firefox, em-specific bug.
I think it's related to this bug about Firefox textareas and its font: Mozilla 3.0.8 and Chrome height in em bug workaround
Your positioning should work if you add the following code:
form { font: 11px Arial; }
form textarea { font-size: 100%; font-family: inherit; }
Also, another workaround is using pixels instead of em's.
This does not address your question, but why not use "text-align"? Absolute positioning to place form elements sounds a bit odd in my ears.
If you must use absolute positioning in this way, have you considered using margin instead of left? As the others have pointed out, it's difficult to troubleshoot your problem without more information.