I have this slideshow that I'm trying to simply move up, but I can't position it right to get it up. Right now there is all this white space. Can someone help me out on where I'm going wrong? Just view it in Firefox or IE to see the whitespace. It works in Chrome of course, b/c everything works in chrome.
http://modernd-i.com/
I try to use position in css but in these browsers it doesn't budge.
IT looks like you're using a table for the layout. the <td> that contains the image gallery has an a vertical alignment set to vertical-align: baseline; if you change that in the html to valign="top" it will make it work. Checked it in Firefox, not IE.
In your styles.css, line 4 you have:
...tfoot, thead, tr, th, td {
background: none repeat scroll 0 0 transparent;
border: 0 none;
margin: 0;
padding: 0;
vertical-align: baseline; /* this is what is causing it */
}
Change that last one to: vertical-align: top
Baseline as a global declaration isn't the best idea, unless it's intentional.
Hope this helps.
This should work:
#yourslideshow {
position: relative;
top: (-X)px;
}
*-X represents the number of pixels.
Since you don't have a jsfiddle I can't tell you exactly how much. But if you use top, that is how many pixels are in between your slideshow and the top of the page. (you could also use bottom, and not use a negative value).
ex.
#yourslideshow {
position: relative;
bottom: (X)px;
}
I know you said you used position, but I'm not sure which type of position you used since you didn't specify.
THEN
If position still doesn't work, you can try either a positive margin-top or a negative margin-bottom
#yourslideshow {
position: relative;
margin-bottom: (X)px;
}
OR
#yourslideshow {
position: relative;
margin-top: (-X)px;
}
Related
How can I display superscript such that it is on the top of dot?
Code Here
<div >5.<sup>22</sup></div>
Example
Okay. So I checked and the default formatting has two major problems.
The first is, that the <sup> follows the period, instead of being on top of it. The best way to solve this is probably a negative margin, as a relative position would leave a gap if there is more Text after that. If you use a relative size like em instead of px it will be easier to adjust if the sizes should ever change.
The next is to get the top of the normal text and the <sup> to align on top. The default vertical-align for <sup> is actually slightly above the top of the line, so resetting it to top almost gets you there.
Then tweaking the line-height to do the rest works just fine.
sup {
margin-left: -0.25em;
vertical-align: top;
line-height: 1.1;
}
Well.. this works, but I believe someone will find a better answer:
sup:before {
content: '.';
display: inline-block;
position: absolute;
bottom: -7px; /* adjust with line-height */
left: 0;
}
sup {
position: relative;
}
<div >5<sup>22</sup></div>
I think its a risk if your content is full dynamic, or if you have several line-heights. Anyways, adjust the bottom position with the line-height from the div.
You can move the <sup> to the left like so:
sup {
position: relative;
left: -4px;
}
I have a custom webkit scrollbar like this:
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: #999 !important;
}
So it renders a grey custom scrollbar instead of the standard one. However, it is stuck to the right side of the page. I know I can change this by adding a margin, padding or border to my body but I am using fullscreen (on backgrounds) images. So when I try this all the images are affected by this too, which I do not want. So I tried to position the scrollbar but this does not work (as it is not an element but a user agent property...
So I'm looking for a way (without using another plugin) to customize the toolbar so that it is offset from the side.
Or, if possible that I can make the scrollbar offset in a div.
Secondly, I'm looking for a way that I can make the "track" of the scrollbar transparet. So only a handle.
Thanks in advance!
If you are still looking for for the answer (or somebody else is, like I was) - here is a definitive article about webkit scrollbars.
Answering Your first question - I'd suggest that you put all your scrollable content in a div with 100% height and 90% width - the 10% left on the right would be your offset. Like that:
.superDiv{
height:100%;
width:90%;
position:fixed;
}
body{ overflow: hidden }
The second question - you're looking for
::-webkit-scrollbar-track-piece {
background:transparent;
}
But as Apple people are pushing for no-scrollbar web browsing, only the properties set by CSS are visible, so you don't have to change the track-piece.
Clever solution I found recently was to put the border on the right hand side of the screen / div that contains scrollbar:
<div class="yourdiv">
border-right: 5px solid #(background_color);
</div>
An easy way to control the position of a custom scrollbar is to set the scrolling element (body?) using definitive positioning. You'll also need to set html to overflow:auto;
To make the thumb transparent, use a RGBa value for declaring the color. In this case I used 0,0,0,0.4 (red,green,blue,alpha). RGBa is not supported in every browser, Chris Coyier has a good table of who supports it here: http://css-tricks.com/rgba-browser-support/
If all you want to show is the thumb than also consider hiding the other elements of the scrollbar: resizer, scrollbar-button, and scrollbar-corner.
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 5px;
right: 20px;
overflow: scroll;
}
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: rgba(0,0,0,0.4); /*-- black at 40% opacity --*/
}
::-webkit-resizer,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner { display: none; }
Check out the working demo at http://jsfiddle.net/Buttonpresser/G53JQ/
I'm fixing a prestashop theme and I'm about ready to tear my hair out over a very small issue. I have a search positioned absolutely beside my navigation, but the top is 10px lower than firefox in chrome, so basically, if it is centered in firefox, it hangs low on chrome. below is my search box css:
#search_block_top {
background: none repeat scroll 0 0 transparent;
height: 30px;
position: absolute;
right: 20px;
top: 215px;/*this is correct in firefox*/
z-index: 1005;
}
you can see the site in here: http://goo.gl/sfFYT reset is given my stylesheet and I have tried manually setting search block's font-size and line-height to zero, but it hasn't worked. I have no idea what to do with this. Thanks a lot for helping.
Sorry, I didn't view the answer before mine, and gave a totally duplicated answer. withdraw that. and here is the new one:
#menu {
overflow: hidden;
}
#search_block_top {
top: 205px; /* you can modify the original rule */
}
the main idea: create a BFC for #menu with overflow: hidden;
PS: that code is unbelievable. :(
stay away from that, and have a nice day.
I have a square div of fixed size and wish to place an arbitrary size image inside so that it is centred both horizontally and vertically, using CSS. Horizontally is easy:
.container { text-align: center }
For the vertical, the common solution is:
.container {
height: 50px;
line-height: 50px;
}
img {
vertical-align: middle;
}
But this is not perfect, depending on the font size, the image will be around 2-4px too far down.
To my understanding, this is because the "middle" used for vertical-align is not really the middle, but a particular position on the font that is close to the middle. A (slightly hacky) workaround would be:
container {
font-size: 0;
}
and this works in Chrome and IE7, but not IE8. We are hoping to make all font lines the same point, in the middle, but it seems to be hit-and-miss depending on the browser and, probably, the font used.
The only solution I can think of is to hack the line-height, making it slightly shorter, to make the image appear in the right location, but it seems extremely fragile. Is there a better solution?
See a demo of all three solutions here:
http://jsfiddle.net/usvrj/3/
Those without IE8 may find this screenshot useful:
If css3 is an option, then flexbox does a good job at vertical and horizontal aligning:
UPDATED FIDDLE
.container {
display:flex;
align-items: center; /* align vertical */
justify-content: center; /* align horizontal */
}
How about using your image as a background? This way you could center it consistently everywhere. Something along these lines:
margin:5px;
padding:0;
background:url(http://dummyimage.com/50) no-repeat center center red;
height:60px;
width:60px;
This is REALLY hacky, but it is what we used to do in the ie6 days.
.container {
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
margin-top: -12px; // half of whatever the image's height is, assuming 24px
margin-left: -12px; // half of whatever the image's width is, assuming 24px
}
I may be missing something in this example, but you get the idea.
Have you tried the following:
img {
display: block;
line-height: 0;
}
I usually use this hack, but I haven't really checked it that thoroughly in IE8.
Here is a small JS Fiddle I have made: http://jsfiddle.net/rachit5/Ge4YH/
I believe it matches your requirement.
HTML:
<div>
<img src=""/>
</div>
CSS:
div{height:400px;width:400px;position:relative;border:1px solid #000;}
img{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;}
I have a div with margin-top:-200px. I want the div to move up/behind the div above it.
Works great in all browsers except IE so far. margin-top:200px works, so I know it's not a collapsing margin issue.
Is there a bug I am not aware of here?
IE doesn't like negative margins and doesn't render them properly. Position your elements relatively or absolutely and use top: -200px instead.
Note: positioning them may change the layout significantly and you may have to rework your styles.
Negative margin hide the div…
Here is trick
use zoom:1, position: relative
Problem:
.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
}
in IE red area of toolbar div hide itself. even we are using zoom: 1. to get rid of this problem we need to add position: relative too.
Solution:
so your css class will become
.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
zoom: 1;
position: relative;
}
http://trickyclicks.com
If the above doesn't help: make sure there's a div around your offending div. Now add a width of 100% to the offending div and float it to the left. Like this. Got rid of all my negative margin ie woes...
div.container {}
div.offender /*inside div.container*/ {
width: 100%;
float: left;
margin-bottom: -20px; /* ie fix */
zoom: 1; /* ie fix */
position: relative; /* ie fix */
display: block;
}
give position as relative. inline style is advisable. It may give some problem if you use external css.
In order to support negative margins in IE, I've fixed similar issues with display: table;. Other fixes like zoom: 1; and position: relative; don't always work (at least in my experience). If you only want to add this style to IE, I'd suggest using https://modernizr.com/
// using comment to show that .no-cssreflections belongs to the html tag
/*html*/.no-cssreflections .container { display: table; }