Im using this code:
$(this).css('backgroundcolor', localStorage.getItem('bgColorr') + " !important;");
When i write:
alert( localStorage.getItem('bgColorr') + " !important;");
It gives me the proper alert, rgb(243,102,42) !important; ....
Really getting to me.. thanks guys!
Simple question - what part of my CSS do I tweak to adjust the gap between a bullet/number and the first text character in an HTML list?
Bonus question - I've seen it mentioned here that controlling table spacing by adjust padding on table tr td {} is bad practice, but I haven't seen someone explain how you're really supposed to do it...?
Okay, just to make it quick.
1) Go to www.simplefire.com.au
- with Firefox / IE
- with Chrome.
2) The image on the right seems to have blue border on Firefox / IE, but Chrome displays the
page perfectly.
Anyone knows what the problem might be?
I'm using wordpress and if it helps my style.css could be found here:
http://shortText.com/m5c9l0pel
Thanks for the help folks!
Using ASP.Net, I have a server control for which i would like to add the inline css style "background-image:none". However, when i call:
writer.AddStyleAttribute("background-image", "none");
The following inline style is generated (and tries to resolve the url "none"):
background-image:url(none)
Is there a special syntax I can use to set the background image to none inline?
I'm trying to create a UL/LI horizontal list with background images only, with no text link visible. The reason for this is so that when I over over a list item, the background would rollover and when I click on it the current item would toggle. basically it is a horizontal menu with background images that can be toggled; mimicking the job of a radio button.
I have done it like this;
<div id="options">
<ul id="list">
<li class="active"><a href="#" class="option1 active" id="link1"><span>XXXXX</span></a></li>
<li><a href="#" class="option2" id="link2"><span>XXXXX</span></a></li>
<li><a href="#" class="option3" id="link3"><span>XXXXX</span></a></li>
</ul>
</div>
The CSS for option1, option2 and option3 simply define the background image.
#options LI{list-style-type: none; display : inline}
a.option1{ background:url('../images/option1.png') no-repeat;}
a.option2{ background:url('../images/option2.png') no-repeat;}
a.option3{ background:url('../images/option3.png') no-repeat;}
a.option1, a.option2, a.option3{
background-position:top;
display:inline;
width:230px;
height:40px;
}
And the hover & active css part simply sets the background position like so-
a.option1:hover, a.option2:hover, a.option3:hover{
background-position:bottom;
}
a.active{
background-position:bottom !important;
}
This works fine, however on top of the background I get the words "XXXXX" as text links and I'm struggling to hide them. They are interfering with the hover action and preventing rollover (even if I replace XXXXX with a period or something short).
I can't just remove the text from the link as it would hide the whole LI element. I have tried to use
display:none; or text-indent:-999px
but then the whole UI element becomes invisible. I can't understand what I'm doing wrong.
Are you able to help?
Thanks
I'd try to explain what I mean, but there is an easier way: click here for jsfiddle example.
Basically I want the border color of the div rfrsh_btn to change when productOptionsMenu is hovered over.
I'm using jQuery with the .noConflict var because this site also uses Prototype.
jQuery:
var $j = jQuery.noConflict();
$j(".productOptionsMenu").hover(
function () {
$j(#rfrsh_btn).css({"border-color":"#85c222"});
};
);
Thanks :)
When tab to a link on my webpage in Chrome, the tab hightlight box around this image link appears like this:
(the orange border is what Chrome shows as the highlight box)
The HTML/CSS isn't all that special:
<a href="download.html">
<img src="images/download_button.png" class="downloadbutton"/>
</a>
img.downloadbutton
{
margin-right: 0px;
border:none;
}
Any ideas?
Right now, the text seems not to be exactly vertical centered.
It seems that there is more top-padding than bottom-padding.
Although of course, there is no padding in the CSS. How do I make this completely vertical aligned?
I have this list
http://pastebin.me/dde64f8c185de9dd5e429f84701a01ce
Anytime you click on an image extra content appears . I have tryed several css methods but i cant get the images to remain in their position and get the text to go underneath . Anyone has a solution ?
I have a webpage with a static CSS background, but the content is longer than the height of the image. This causes whitespace at the bottom after the image ends. How can I make the image scroll along with the view of the user's screen?
Thanks in advance!
Hi all,
Is there any way to remove header and footer of a html page, so that if user print it, there is no header and footer.
User can choose to remove it using print setup, but i wondering is there any css or javascript to remove it programatically?
thank you for any response.
i am trying to get a div to be my background and am using absolute positioning to achieve it. everything works fine except for the fact that it appears above anything in the normal flow and fiddling with z-indexes does absolutely nothing.
<div id="blind">
<div id="blindbackground"></div>
<div id="blindcontainer"><div class="loader"><img class='loader' src="/img/loader.gif"/></div></div>
<div id="blindclosecontainer"><img id='blindclose' src="/img/close.gif"/></div>
</div>
and this is the css:
#blind{
position :absolute;
width:100%;
z-index: 2;
border-bottom: 1px silver solid;
}
#blindclosecontainer{
text-align: right;
}
#blindbackground{
position:absolute;
top:0;
width:100%;
height:100%;
background-color: white;
filter:alpha(opacity=60);
opacity:0.6;
}
#blindcontainer{
margin:auto;
width:500px;
background-color: white;
padding:10px;
}
.loader{
margin: auto;
width:18px;
margin-top:10px;
margin-bottom: 5px;
}
Hi,
i have this page.
login: [email protected] password: m
You can see two selects in the filter for which i have this rule in gente.css:
td.select label{
margin-left:12px;
}
The problem: the rule is applied but doesn't appear in the Style tab of Firebug.
Any idea?
Regards
Javi
I manage a website called ShareDen.com (http://shareden.com/home) and it looks the right way in Mozilla Firefox and it's totally completely discombobulated in Safari. I Haven't tested it in other broswer's (still in process) however my guess is it looks horrible in IE 8.
Could it be because I just added the CSS Sticky Footer to my site? This wasn't happening before. Please help!
Thank you in advanced!
I want to use an image for the background of a selec/dropdown. The following CSS works fine in Firefox and IE, but does not in Chrome:
#main .drop-down-loc { width:506px; height: 30px; border: none;
background-color: Transparent;
background: url(images/text-field.gif) no-repeat 0 0;
padding:4px; line-height: 21px;}
THANKS
Hi
I would like to style a form button (input or button tag) with 2 background images to create a stretchable button (relative to the text-length). The form button should also have a hovered state and it should be cross browser (at least IE7 & +) would need to support it.
I know how to obtain the effect with just css with an tag = test
If anyone could help me a little bit, I would be pleased
yours truthfully
Clicking on the image should show div near it (.show() in jQuery).
But how can i attach div to that image? Is it done with pure css, or javascript?
I tried several "position:absolute", but can't attach it near image.
How it should be done?
Hello,
Apple has disabled the overflow CSS aspect in mobile Safari so it is not possible to scroll inside a fixed height div. This is quite annoying.
While making an iPhone native app, is it possible to access WebKit settings to turn that feature on ?
i have an img element
<img src="some.jpg" style="position:absolute;">
i don't know the height and width of the image, because it loads dinamicaly, but i need to create a div element with position absolute, which must have the same width and height than the image. i.e
<div style="position:absolute;height:'img->height';width:'img->width'">
is it possible to do with just css?
if no, maybe jquery?
Thanks
i have been asked by a client to develop a javascript(mootools)/html/css/php based game as a widget which can be deployed anywhere.
I have not written a widget before, so would love to get some tips and experiences so that i know some of the pitfalls before i start!
Thanks :)
Dan
http://jsbin.com/urice
I want to remove . after number.
1. should be 1 only
With All browser compatibility inducing IE6 and validity.
I need solution without javascript.
Edit :
If it's not possible with css only then give me simple javascript and jquery solution both.
I'd like to use the CSS property position:fixed to fix the position of an element but at the same time prevent the element from being positioned over my footer when the user scrolls to the bottom of the page. Is there a way of stopping an element from showing over a footer in this way?