When i am using Niceforms the normal text inputs and buttons work great and i even managed to get a custom theme for them based on the provided sample psd.
But when i use radiobuttons/checkboxes, they get shown some where completely different than the labels.
This happens consistently on FF,Chrome and Safari.
As soon as i put any positioning css (a float:left or even a ) in the page the radiobuttons break.
I am currently trying to justify text in a textarea, unfortunately the CSS:
text-align: justify;
Doesn't work on the text like center, left and right do. I've tried this in both Firefox 3 and IE 7 with no luck.
Is there any way around this?
Hello, I am designing a very simple horizontal menu with sIFR and CSS list. The thing about it is that it assigns a certain width to it that makes texts of different widths´ spacing look weird on screen.
I´ve seen a default width and height of a certain amount, but what I need is to make it so that the flash is exactly the size of the text.
Has anyone bumped into this issue before?
Thanks!
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!
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
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?
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?
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 ?
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'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 :)
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 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!
Please, have a look at: http://twitter.github.com/bootstrap/base-css.html
There are many examples like this one:
if you look closer to the block borders, you can see that the gray block is under the white one. Using the browser's developer tools you can see that both boxes have an inherited z-index: auto;
I can't reproduce this effect on my website (without using z-index).
So, my question is: Why is the gray block under the white one?
I have a site that is working fine, except in IE7 there is a massive horizontal scroll bar.
I would have to paste the entire html code and css code so I will refer you to the page source.
You can see the site here.
Any assistance would be greatly appreciated.
Thanks.
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
Can anybody help me with this CSS issue. This online tutorial displays ok in FF and Chrome but in IE, the main content is pushed down the page for some reason.
Here's the link:
Problem Page
GF
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?
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?
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