Problem can be seen here.
As you can see in the fiddle, there's a bit of padding underneath the image in the left column. I'm really not sure how to get rid of this.
The column itself has padding:0 when I inspect the element in Chrome. The div has no padding in it and the image has no margins. Any ideas what this could be? I've attempted to manually set the margins/padding and I've made both the image and the column display:inline and block just to see what happens.
Ideally, the red background would only show up behind the text. I've tried to set the background only in the left column only to have the background stop at the bottom of the text. height:100% didn't fix that. I'm kind of expecting the bottom of the right column to look longer if I did that anyway.
At this point, I'm a little clueless as to where I can go from here, so would anyone have any ideas what this might be? and whether or not I could change it?
quick & dirty way to find a solution to your problem :)
try changing the css rule:
.ui-block-a { margin: 0 0 -5px 0 }
Related
I'm having issues with my footer. It's the appropriate width and length but I can't get the text to move.
I've tried toggling with the numbers, using both negative and positive numbers with no luck. I'm using a theme created by another tumblr user, with permission to edit it to my liking, but she won't help me edit it, which is how I got here.
I'd like the text on the left side to be 20px from the left, and the text on the right to be 20px from the right. Both sets of text should be 15px from the top. (These are just guesses- once this problems solved, I'll probably toggle a bit more.)
Here's a link to the coding: http://pastebin.com/c0RdkC4W
Thank you in advance!!
OK, so you have some css being applied to the footer (I assume you are talking about the main site footer rather than the footer for each post.
You need to find the css for the #footer
And apply the following css:
#footer {
padding: 15px 20px 20px 20px;
height: 130px;
}
That is in addition to the properties already applied to that element. It's on line 231 of the full block of html you posted.
I am afraid setting the height on the footer is a hack, you would have to adjust this if you add or remove navigation items. A better solution is to use clearfix.
You also have some inline styles hard coded into the html, this is often frowned upon as it is easier to control the css using classes, id's and element selectors. But sometimes these inline styles get written to the template via the tumblr options.
See how you get on and give us a shout if you need more help.
I'm trying to have an image inside a div of same width to be draggable in the limit of the div. It's difficult to explain but one side of the image (top or bottom) can leave the div but you cannot have a gap between the edge of the image and the border of the div.
To resume the image has the same width of the parent div but its height is bigger so a part of the image is hidden.
Well here is what I want to do:
http://jsfiddle.net/maxwell2022/DerNa/165/
It's working perfectly... because there is nothing above the div. If there is a gap between the document and the div, it's not working anymore. I think Draggable is taking the document as reference for the top of the image. As soon as you start dragging the image, the image move and stuck its top edge to the top of the document:
http://jsfiddle.net/maxwell2022/DerNa/164/
I don't know how I can achieve this with the containment option.
Cheers,
Maxime
UPDATE
Another attempt with relative positioning but no luck: http://jsfiddle.net/maxwell2022/DerNa/166/
I found a solution to fix it getting the top position of the parent div using offset() and add it to the containment boundary. I'm not sure it's the best solution but it looks like it's working.
I just have a difference of 1% in the offset at the top which is quite annoying: if you drag the image and make it stick to the top as much as possible it returns 99% offset instead of 100% (see the result in the console).
The bottom one is correct (0%). I think it's due to rounding the size but I'm not sure.
Here is the jsfiddle: http://jsfiddle.net/maxwell2022/DerNa/167/
If you have a better idea please, please, let me know.
Thanks, Maxime
Try to limit the width of the buttons and content to no avail. Tried for 1 hour all the classes nothing seems to work..
I mean the space between the white buttons on the left and right side, towards the black. This space is about 10px But want to minimize it. anyone knows how?
.ui-page seems the way to go but also does not work.
http://doc.bigheadservices.com/my-page.php
In the navigation bar, under the logo, the FAQ block is wrapping, cutting off the Q. How do I fix this?
In this particular case, I fixed it by adding 1px padding around the element. The text was a link within an list-item. The sIFR was applied to the <li>. Adding 1px padding to the <a> fixed it.
Not sure if it is the proper way, but it works and I've got tons more work to do.
In our application we have a text area with row size 20 .
Earlier when we were using the IE6 browser then the text area was displaying properly on screen but after switching over IE7 browser we have seen that after filling up 20 lines a active scroll bar start displaying with text area and only 19 lines are displaying in text area and 1 line is hiding in scroll bar and to check that 1 line we have to use the scroll bar. Please note that our text area's row size is 20 which means it should display 20 lines without active scrollbar which was happening in IE6 browser but not happening in IE7.
We are not sure whether anybody else have faced this kind of problem before.
Guys..as of now we have done some workaround by using bottom-padding to text area.....by doing this all the contents are dislaying properly in text area boxes but still the active scroll bar remains with the text area box.
let us know if you guys having any different solution.
Could you have a CSS rule somewhere setting the physical height of the textarea?
You might try applying the Overflow property to the CSS for the text area. Try overflow:auto; or overflow:hidden;. The last one will eliminate all scroll bars though. You could also try changing the border-width: thin;
I think you are using overflow:scroll, make it as overflow:auto.i checked it,it's working!
In spite of using row="20", try to use a fixed height for the textarea. And don't forget to put line-height. It will definitely solve this problem.