I'm adding the text Like with jQuery. This gives 20px of width to the elements that contain that text (they have width: auto). If you click the a.gdt-starrating link the text Like changes to Liked which now has 25px (due to the extra letter 'd'). But the elements still having 20px. So the text overflows the elements containing it.
$j(".gdup a.gdt-starrating").text("Like");
$j(".gdup div.gdt-starrating").text("Liked");
$j("a.gdt-starrating").live("click", function() {
$j(".gdup div.gdt-starrating").text("Liked");
});
Here is a live example:
http://www.taiwantalk.org/topic/asdasdasdasdasdgg/
If you click the Like link you will see the issue.
Any suggestions to fix this?
problem is this css rule
.gdt-size-20.gdthumb, .gdt-size-20.gdthumb a, .gdt-size-20.gdthumb div {
width: 20px;
height: 20px;
}
in http://www.taiwantalk.org/wp-content/plugins/gd-star-rating/css/gdsr.css.php
Related
I have created a reusable search component, i am facing two issues on this.
overlapping the search text on the svg icon - enter more text on the input box
entering more text the text-indent not staying - text goes left side when more text is entered
I have added the codesandbox
For the overlapping text on the search icon, I would simply solve it by adding some padding to the input field.
input{
padding-right: 50px;
box-sizing: border-box;
}
For the text-indentation not staying while the input field is active, I'm not sure how to solve it in a clean way. You could add a div with the same background color and width as the indentation, and then just give it an absolute position.
Second Issue Workaround
Instead of using text-indent, we can use padding-left and it will work properly, kindly see this one SO
This might help with keeping the content of the input from overlapping the search icon.
.App {
font-family: sans-serif;
}
.css-btdvqp {
background:#e1e1e1;
border-radius: 2px;
}
.css-btdvqp .css-vrkvd {
width: 85%;
}
I am trying to set up a form that displays a vertical separator between two elements that appear side by side. These are the problem parameters:
The height of either element is unknown and will change by virtue of the contents being modified with JavaScript in response to user interaction.
The separator should cover the whole of the elements' shared vertical border, irrespective of which element happens to be taller at any given time.
Given the above it seems that this setup will do the trick:
<div>This is some text on top.</div>
<ol>
<li id="a">Lalalala</li>
<li id="b">Lololol</li>
</ol>
<div>And some text on the bottom.</div>
CSS
ol { overflow: hidden }
li { float: left; width: 5em; padding: 4px }
div { clear: both }
#a { background: gold; min-height: 100px }
#b { background: yellow; border-left: 1px black dotted }
#b { padding-bottom: 400px; margin-bottom: -400px } /* "infinitely" tall */
The idea is that the second element becomes "infinitely tall" by applying bottom padding and gets a left border; elements following the group are brought back into their original position by counteracting the padding with negative bottom margin; and the "unused" portion of the vertical border is hidden by giving the parent overflow: hidden.
This setup indeed works correctly (JsFiddle) on Firefox, Chrome and IE >=8 (my compatibility requirements):
However, when I try to apply the same technique in my real HTML Firefox breaks down and seems to not honor the overflow: hidden set on the parent element. As a result the infinitely tall vertical border bleeds through all elements following the two panels on the page.
Here is a JSFiddle of (simplified) real copy/pasted content together with my actual CSS rules that shows the problem. Note that only Firefox mishandles this; other browsers continue to display it properly.
Correct render:
Firefox render:
I am properly stumped: why would Firefox display the proof of concept correctly and botch the real deal? And how can I fix it?
I was able to fix your JSFiddle by changing the fieldset element to a div or by surrounding the fieldset with a div that had overflow set to hidden. Maybe worth a try. Is the fieldset tag essential to your HTML?
here is the site with the issue
I want the opaque bar which is its own div to appear behind the div with the text. Both of those obviously in front of the image.
My issues are:
1) I can't get the div titled "fp-banner" to shrink to a height of 70px while containing the text inside.
2) The white border keeps extending all the way to the bottom and I have no idea why.
I'm trying to post all of the code here but when I copy and paste it the html actually appears so I guess I won't post it.
Thank you.
Let me address issue #2 first - the white border extends below the featured post image because you have the border applied to the container element (#featured-post) instead of the image itself (#featured-post img)
So change the CSS for #featured-post to:
#featured-post {
float: left;
width: 370px;
margin-left: 10px;
padding:0;
}
and the CSS for #featured-post img to:
#featured-post img {
border: solid 3px #fff;
z-index: -1;
margin:0;
padding: 0;
}
For issue #1, add this to #fp-banner:
height:70px !important ;
and add this to your CSS:
#fp-banner p { line-height:14px ; margin-bottom:8px }
You may need to adjust the margin-bottom value for the #fp-banner p styling to fit in the 70px height.
NOTE: Don't forget to make a backup of your style.css before you make these changes, just in case :)
Hope this helps!
Best,
Cynthia
I have an inline element with a line break in it. It has padding on all sides. However, the side padding on where the line break cuts the element is not there.
This is what i mean:
http://jsfiddle.net/4Gs2E/
There should be 20px padding on the right of tag and left of with but there isnt.
The only other way I can see this working is if i create a new element for every line but this content will be dynamically generated and will not be in a fixed width container so i dont see that working out. Is there any other way I can do this in css without any javascript?
I want the final result to look like this :
http://jsfiddle.net/GNsw3/
but without any extra elements
i also need this to work with display inline only as I want the background to wrap around the text as inline block doesnt do this
Is this possible?
edit, altered the examples to make what i want more visible:
current
http://jsfiddle.net/4Gs2E/2/
what i want it to look like
http://jsfiddle.net/GNsw3/1/
In some cases you can use box-shadow for a workaround.
Move the right and left padding of the element to its parent and add two box-shadows.
The result: http://jsfiddle.net/FpLCt/1/
Browser support for box-shadow: http://caniuse.com/css-boxshadow
Update:
There is also a new css property for this issue called box-decoration-break. It is currently only supported by opera, but hopefully more browsers will implement this soon.
Hope this helps
Found a solution for you, but it ain't pretty :)
Since you can't target the <br> element with css, you have to use javascript. Here's how you can accomplish what you want with jQuery:
// Add two spaces before and after any <br /> tag
$('br').replaceWith(' <br /> ');
Play with the number of elements to acheive your padding on both ends.
Here's an updated Fiddle demo:
http://jsfiddle.net/4Gs2E/8/
Maybe you can use float: left instead of display: inline:
http://jsfiddle.net/GolezTrol/4Gs2E/1/
Usually that is implemented by wrapping each word in an own SPAN which has border.
I just wanted to make css-animated menu for myself. Workaround I have found is to wrap your INLINE-BLOCK element (change in css if necessary, lets call it a span with such an attribute for purpose of this solution) into block element. Then I'm using margins of span as it was padding for the surrounding div.
div.menuopt {
margin: 10px;
padding: 0px;
padding-left: 0px;
overflow: hidden;
width: 500px;
height: 150px;
background: grey;
}
span.menuopt {
display: inline-block;
margin: 0px;
padding: 0px;
margin-left: 150px;
margin-top: 10px;
font-size: 25px;
}
Example:
http://jsfiddle.net/ApbQS/
hope it will help anyone
I have tried using firebug to locate the problem, but cannot find the solution to the following at this url :
How to get rid of the space between the image and the text? For example, the gap between the image of lego-like bags and the text "AboveHere Concept"
How to align these two social buttons in one line? I have set the twitternews class width to 90px and the facebooknews iframe to a width of 90px, but this does not work. I also have these two buttons in a block with a width set to 200px, but this does not seem to work either.
your
<p>
tags in the post-body divs have a top and bottom margin of 1em. that's why there's a lot of space in there. take those out
.post-body p {
margin: 0;
}
you need to set .facebooknews div to have a smaller width, not the iframe
div.grid-item .facebooknews {
clear: none;
float: left;
padding-right: 5px;
width: 100px;
}
1) Add the style margin-top: 0px to the P tag that the "AboveHere Concept" text is in. Also remove the <br> thats right before the text. It will move everything up.
2) facebooknews add a width: 100px; and it will fit.