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.
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!
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!
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...?
I'm using CSS3PIE to apply some rounded corners to elements in Internet Explorer that will get them by stylesheet in other browsers. I've run into some issues with it though.
In IE8, I discovered that any element that had the PIE behaviour would behave strangely. The container would jump a few pixels to the right, but the content would stay in its original position, giving the appearance that the content had all shifted left relative to its container. This would be especially problematic on elements with no or small amounts of padding.
I was able to hack my way around the problem in IE8 by using X-UA-Compatible, but I'd rather avoid this solution if at all possible. I don't have access to IE9 for testing but my understanding hacks like PIE aren't necessary and it would be wasteful to force a compatibility mode in a browser that doesn't need it.
I have worse issues in IE6, with the PIE layout breaking down completely on a list that is set up to use display:inline; zoom:1; list items (to simulate inline-block, which works in IE8 and the other browsers). Here the borders of the list items get rendered in completely the wrong place.
So ideally, I'd like to have PIE work properly in IE6, and in IE8 without having to resort to compatibility mode. As far as IE6 goes, a graceful fallback where PIE is just not applied will do. IE7 is the only browser where the page displays as intended.
I can't provide an example page just at the moment unfortunately, I can add one later though.
Follow up:
Here are some screen grabs made with IE Tester. I'm hoping they will make things a little more clear for everybody. As you can see, IE7 is fine. However, in IE8, the containers are offset to the left relative to their content, and in IE6 the list elements (with the rounded 1 pixel border) are a complete mess!
Full size versions for IE8, IE7 and IE6 are also available
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?
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 :)
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 ?
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!
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 need a div with a height of exactly 1em minus 1px. This can be achieved in most browsers like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.helper {
/* background-color: black; */
position: absolute;
top: 5em;
left: 5em;
width: 2em;
height: 1em;
}
.target {
background-color: #89f;
position: absolute;
top: 0;
bottom: 1px;
width: 100%;
}
</style>
</head>
<body>
<div class="helper">
<div class="target"></div>
</div>
</body>
</html>
The "target" div has the desired height. The problem is, that this doesn't work in IE6, because it ignores the bottom attribute, when top is set (a well known problem).
Is there a workaround for IE6 (maybe with multiple nested divs, with borders/paddings/margins/whatever), or will JavaScript be the only solution?
Please note, that I can't use Quirks Mode.
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 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 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