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?
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.
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 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 ?
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'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 :)
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
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 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.
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.
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?
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 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
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!
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?
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
What is the logic of Lightbox 2 on where to position the popup?
It seems that when using Firefox or Chrome it shows up in different places on different pages. Is there any setting to have it show at the same height on every page for consistency?
What is the CSS or logic it's using to determine positioning?
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'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?