Whole code : http://jsfiddle.net/o3omng/Vh3u9/
<div id="as_profile" class="div_clearboth"></div>
<div id="as_notice" class="div_clearboth"></div>
In the HTML code, #as_profile and #as_notice are
both have class="div_clearboth" attribute.
.div_clearboth { clear : both ;
margin-bottom : 10px ; }
In the CSS code,
I give clear:both style and margin-bottom : 10px style to div_clearboth attribute.
It works well in other div tags,
but It doesn't work well in #as_profile.
Check the jsfiddle. Then you can see that there is no space between #as_profile and #as_notice.
They must be 10px away. How can I fix it?
Whole code : http://jsfiddle.net/o3omng/Vh3u9/
<s_somethig> tag and [##something##] are going to replace by server automatically.
You can correct it by giving #as_profile an overflow value besides visible:
#profile_control {
overflow: hidden;
}
Or changing display to inline block:
#profile_control {
display: inline-block;
}
Or giving it padding/border:
#profile_control {
padding: 1px 0 0 0;
}
As #sevenseacat pointed out, the culprit is the floated li's within #as_profile
CSS :
#as_profile {
padding-bottom:20px;
}
Can you use Padding for divide? It works for me.
Jsfiddle
Related
One of the css classes I am using is:
.test {
display: inline-block;
margin: 0 5px 0 5px;
}
which works fine in chrome.
But, for some reason, I see the UI a bit messed up and if I remove display: inline-block, it looks good on IE, but then its messed up in chrome. Is there a way to ignore using display: inline-block from this class when its IE and use only when on chrome?
One way to do it is with javascript. The first thing you're going to want to do is check to make sure the browser is Internet Explorer. If it is, you can set the inline display style which will override what you have in your css file. I'm not sure whether you want to set the elements to display:inline; or display:block; so I will set them to display:block; in the following code snippet, just to show you how it can be done.
if (/*#cc_on!#*/false || !!document.documentMode) {
var myTestElements = document.querySelectorAll(".test");
for (var i = 0; i < myTestElements.length; i++) {
myTestElements[i].style.display = "block";
}
}
else {
console.log("Not IE");
}
.test {
display: inline-block;
margin: 0 5px 0 5px;
}
<div class="test">Test1</div>
<div class="test">Test2</div>
<div class="test">Test3</div>
<div class="test">Test4</div>
First I used an if statement to see if the browser is IE. Inside that I selected all the elements with document.querySelectorAll(".test");. Then in a for loop, I iterated through all the .test elements and added an inline style of display:block;. NOTE: The else statement is not necessary. I just added that for the purposes of this code snippet. I hope that helps.
I consider myself a beginner at HTML, so sorry if this is a no-brainer.
In the following example I'd like the 'LEFT' DIV to collapse when it is empty. However with BOTH the 'width' AND the 'margin' present it will not collapse. If I remove either one from the style it collapses fine.
<html>
<head/>
<body>
<div>
<div style="float:left; width:25%; margin:40px 0 40px 0" >
LEFT
</div>
<div style="float:left; margin:40px 0 40px 0">
RIGHT
</div>
</div>
</body>
</html>
Any idea how I can make the "LEFT" DIV collapse if I remove the word "LEFT"?
Thanks
-John
You could use the :empty pseudo class. but it will mean really empty, even white-space DEMO
empty like this :
<div></div>
or
<div<!-- whatever --></div>
You can use the empty selector
div:empty {
display: none;
}
this needs to be put either on an external css or in an <style> tag
Also margin:40px 0 40px 0; and margin:40px 0; are the same
Css : checking if a div is empty :
#left:empty {
display: none;
}
JSFIDDLE DEMO
or You can use jquery to handle this checking with more flexiblity :
for example more usable if you want to check even the div is empty or have LEFT or some other specific content
$(document).ready(function() {
var leftcol = $("#left").html();
alert (leftcol);
if (leftcol == "LEFT" || leftcol == "") {
$('#left').html('');
$('#left').animate({ width: '0px'},'1000');
alert(' Left Div is empty !');
} else {
alert("Left Div is not empty");
}
});
JSFIDDLE DEMO
I am using AjaxToolkit combobox in my page... I am trying to change the width of combo-button . But I couldnot. Because it has inline style by default..
I tried the following code to add style
//Combo css
.ComboClass .ajax__combobox_buttoncontainer button
{
border-radius: 0px;
box-shadow: 0px;
width :12px; height:12px;
}
But border-radius and Box-shadow styles are applying but Width& height is not applying ..
Because ComboBox Button got default inline styles.. I cant remove that line styles too..
Please post me some suggestions....
Add a javascript function to search for and strip the attributes on document ready.
The jquery way is:
$(document).ready(function()
{
document.find(".ajax__combobox_buttoncontainer").removeClass("ajax__combobox_buttoncontainer").addClass("myAwesomeClassWithCoolDimensions");
});
Make sure your css has a myAwesomeClassWithCoolDimensions class.
Finally it works.. Little change on my css. I just added !important property to override the default element (Inline styles)..
<style type="text/css">
.ComboClass .ajax__combobox_buttoncontainer button
{
box-shadow: 0px;
width: 14px !important;
height: 15px !important;
}
</style>
Now I can change width & height of the combo-button.
Here is the code I have so far:
HTML:
<!DOCTYPE html>
...
<form>
<input type="image" value=" " class="btnimage" />
</form>
...
CSS:
.btnimage {
width: 80px;
height: 25px;
background:url('C:/Users/John/Desktop/Misc Things for the CoD Ghosts Site/SubmitButton.png');
}
.btnimage:hover {
background-position: 0 -25px;
background:url('C:/Users/John/Desktop/Misc Things for the CoD Ghosts Site/SubmitButtononHover.png');
}
The above code works, but there's a border that surrounds the button, which I want to go away. So far, I've tried adding background-border:0; to both of the classes, and it did not work.
try
input {
/* sets border width to 0 and border style to none */
border:0 none;
}
or
input {
border: 0px solid black;
}
background-border is not a css property
You can remove a border with css by setting it's width to 0 or it style to none.
To avoid an internet explorer legacy bug, you have to specify a border-width or a border-color to make border-style:none apply. So your best bet if you care about my grandma, it to use border:0 none;
.btnimage {
border: 0 none;
width: 80px;
height: 25px;
background:url('C:/Users/John/Desktop/Misc Things for the CoD Ghosts Site/SubmitButton.png');
}
Since you did not mention when your border is visible, perhaps it an outline visible on your input focus.
If it is your case, add :
.btnimage:focus {
outline:0
}
input {
border:0 none !important;
outline:0 !important;
}
The main problem here is that you define an input type="image", but not provide a source, so this border is like a broken image, because when you set the type as image the input expects an src attribute as well.
In my opinion you have 2 solutions:
1st: set the "src" property of the input, in the HTML code, and if you want to change the hover image, you can do this through javascript.
<!DOCTYPE html>
...
<form>
<input type="image" src="your_image_url" class="btnimage" />
</form>
...
2nd: change it to input type "button", or a link " ", than remove border and background in the CSS.
<!DOCTYPE html>
...
<form>
<input type="button" class="btnimage" />
</form>
...
Sample: http://jsfiddle.net/Bpv34/
CSS
border:none none;
Yes working
To remove the border, write the following line in your CSS wherever the border appears:
outline: 0;
try the prefixes too
input {
border:0 none;
-moz-border:0 none;
-webkit-border:0 none;
outline: 0; //add this too
}
try this
input {
border:0 none !important;
}
by writing important it will definately work.
1) Use src attribute to define image url.
2) Use custom button with div - something like:
<div class="btnimage" onclick="blablabla()">Button</div>
It can solve the problem.
This finally worked for me. All attempts with "border" did not work:
input { outline: 0 !important; }
I was just having trouble with this too.
First off, you may as well set the src equal to an image you want to use if you are using the input type of 'image'
Here is mine: <input type='image' src='img/share.png' alt='Share'>
Then make adjustments in your css:
#fbshare input[type="image"] {outline:none;}
#fbshare input[type="image"]:active {outline:none;}
This solved my problem in Chrome, and I presume it should solve yours too. If it is still a problem nearly 2 years later. (I mostly posted this for others who find this page in a google search)
This page helped me come to the above conclusion.
http://themeforest.net/forums/thread/remove-border-after-clicking-button/33948
I was having the same problem as the OP - specifically for an image input. It certainly seems to be because of the browser interpreting it as a "broken image" if no src attribute is set.
So this works as a solution, by setting the attribute to a single transparent pixel, the image input non-border non-outline "border" goes away:
<input type="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="btnimage">
No CSS needed (or seems to work.)
I want to put one image and one block with two in one line,
but if use float on image,
it will be out of that big block' border.
I don't want to add height to the big block,
because sometimes image doesn't exit.
like this link: images and (p1 + p2 ) in one line.
http://verygif.com/bbs/b/src/138002270032.jpg
sorry for can't post images.
big_block {
border:2px solid #333;
}
<div class="big_block">
{if img exit }<img .... />{/if}
<p>sometext,sometext,sometext,sometext</p>
<p>fulltext,fulltext,fulltext,fulltext</p>
</div>
Just declare overflow: hidden; on the parent <div> container. That will clear the float and ensures that the image does not go beyond the parent's borders by ensuring that the parents wrap around the paragraphs AND the image.
See example here: http://jsfiddle.net/teddyrised/8aeAL/
You can try using display: inline to <p> tags,
p {
margin: 0;
padding: 0;
display: inline;
}
Check this http://jsfiddle.net/tpD2u
I always use something like this:
.big_block img { float: left; }
.big_block:after { display: block; cler: both; content: " "; }
http://jsfiddle.net/QWm4T/