Take a look at this in IE9:
http://jsfiddle.net/dalgard/n6PDB/show/
screen dump:
Read these comments:
/*
* IE9: Upon moving the mouse a ghostly 1px vertical line appears 53px into the
* blue area - only works with normalized CSS (!?) and not inside an iframe
*/
#test {
width: 152px; /* must be 152px or larger! */
height: 200px; /* can be any height */
border-radius: 1px; /* must be 1px or larger */
background-color: #44f; /* ghost-line becomes invisible with #00f */
}
#test:hover {} /* removing this makes the line disappear */
#test div {
opacity: 0; /* removing this makes the line disappear */
position: relative; /* removing this makes the line disappear */
left: 53px; /* must be 53px or smaller! */
width: 10px; /* must be 1px or larger */
height: 150px; /* height of the ghost-line */
}
Does anyone have any opinion on this?? What is going on and how can I report this? How do I keep this from happening (I know, it seems I could just change ANY of the attributes in the above, however it's not so easy...)?
the line has to do with the border of the parent container AND the inner div. If you get rid of the inner div OR the border it resolves the issue. I don't know if this will help but that's what appears to be the problem.
I can see the issue on IE9
Version: 9.0.4 (KB2618444)
but it seems to be fixed on
Version: 9.0.24 (KB2909921)
Related
I have code below :
<div className={cx('overflow-x-scroll')}>
<TabNavigation data={tabs}/>
</div>
I need a custom size thumb scrollbar, from big to small. I am using the tailwind-scrollbar package but my machine is not supported because my project is using node v12.22.9. I have also been browsing but still can't find the answer.
Tailwind-scroll bar does not provide a solution to change the size of the scrollbar.
You can use CSS to do that:
/* Select the scrollbar track */
::-webkit-scrollbar-track {
/* Change the background color */
background-color: #f1f1f1;
}
/* Select the scrollbar thumb */
::-webkit-scrollbar-thumb {
/* Change the background color */
background-color: #888;
/* Change the size of the thumb */
height: 30px;
width: 30px;
}
I've set up my own custom scrollbar with CSS, and I'd like to know know how to only apply these settings to my vertical crossbar.
I've looked up other posts to fix this, but haven't been successful in implementing their solutions in my project.
Any fix that either removes my horizontal scrollbar completely or resets its settings to default would be greatly appreciated.
Here's my code:
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background-color: rgb(26, 23, 23);
}
::-webkit-scrollbar-thumb {
background-color: hsl(270, 2.9%, 48.7%);
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: hsl(270, 2.9%, 78.7%);
}
edit: The problem seems to have been related to other pre-built styles overriding overflow-x. overflow-x: hidden !important; solved the issue.
The questioner have faced a problem that a WebKit engine won't allow him to remove customized horizontal scrollbar.
It seems that the implementation of such a removal vary from one browser to another and there's no universal way to hide scrollbars.
Using overflow: hidden will disable the scroll and that’s not what we want.
So we’ll need another way to hide the scrollbar.
Unfortunately, there is no universal CSS property that does something
like this
div {
scrollbar-visibility: hidden; /* <--- I wish we had this one !! */
}
We’ll need to implement different CSS properties for each browser.
For Firefox, we can set the scroll-bar width to none.
scrollbar-width: none; /* Firefox */
For IE, we’ll need to use -ms prefix property to define scrollbar style
-ms-overflow-style: none; /* IE 10+ */
For Chrome and Safari. We’ll have to use CSS scrollbar selector.
Then apply display: none to hide it.
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
Or you can set it’s width and height to 0.
::-webkit-scrollbar {
width: 0;
height: 0;
}
https://redstapler.co/css-hidden-scrollbar-while-scrollable-element/
Nevertheless, the following solution took effect in questioner's situation:
overflow-x: hidden !important;
In my webpage I have a div with fixed width and using the following css:
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
The ellipsis is working, the problem is that it cuts the final word, and I wanted it to put the ellipsis (...) in the final of a full word.
For instance, if I have the text: "stackoverflow is the best", and if it need to be cutted near the end, I want it to display "stackoverflow is the ..." instead of "stackoverflow is the be..."
I’m afraid it’s impossible. There was once text-overflow: ellipsis-word, which would do just this, but it was not implemented in browsers and it was removed from CSS3 drafts.
Of course it's possible. (If you're willing to change your markup a bit.)
https://jsfiddle.net/warphLcr/
<style>
.foo {
/* Make it easy to see where the cutoff point is */
border: 2px solid #999;
padding-right: 18px; /* Always have room for an ellipsis */
width: 120px;
height: 1.1em; /* Only allow one line of text */
overflow: hidden; /* Hide all the text below that line */
background-color: #fff; /* Background color is required */
}
.foo > span {
display: inline-block; /* These have to be inline block to wrap correctly */
position: relative; /* Give the ellipsis an anchor point so it's positioned after the word */
background-color: #fff; /* Cover the ellipsis of the previous word with the same background color */
white-space: pre; /* Make sure the only point where wrapping is allowed is after a whole word */
}
.foo > span:after {
position: absolute; /* Take the ellipsis out of the flow, so the next item will cover it */
content: "…"; /* Each span has an ellipsis */
}
.foo > span:last-child:after {
content: ""; /* Except for the last one */
}
</style>
<div class="foo">
<!-- These *must not* have white space between them, or it will collapse to a space before the next word, and the ellipsis will become visible -->
<span>stackoverflow</span><span> is</span><span> the</span><span> best</span>
</div>
There's a jQuery plugin that does this, called dotdotdot.
It also works for multi-line text, and adapts responsively if the text reflows e.g. if the screen size changes. It also includes smart truncation of pathnames e.g. http://example.com/some/long/.../path.html
Be aware of the possibility of width-based timing issues in cases where the width changes or becomes unavailable in ways the plugin might not expect, such as if the text is initially hidden or if it changes font (e.g. loading web fonts on some browsers). Might require re-applying or being applied after such changes.
But 99% of the time, the plugin seems fast and robust.
If you want to display one line of text that would end in ellipsis, like a news ticker for example, just do:
p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
I'm trying to set a background image for the site I'm building. I know I have to use background: url(); but it doesn't seem to show up whether its in body or a specific div.
body {
/* background: linear-gradient(#2c3e50 75%, #ecf0f1 88%); */
background: url(c:\Users\Saleh\Desktop\Abid\ggbridge960.png);
} /* This is is what it looks like when I add it to body */
.container {
margin: 20px auto 20px auto;
/* border: 2px solid black; */
width: 960px;
height: 1000px;
/* background: url(c:\Users\Saleh\Desktop\Abid\ggbridge960.png) no-repeat; */
} /* this is what it looks like in the div. */
I've tried them both separately not simultaneously.
Do it like this..
body {
background: url(file:///c:/Users/Saleh/Desktop/Abid/ggbridge960.png);
}
background-image:url(images/your_image.png);
width:960px;
height:1000px;
should do the trick :)
Maybe you have a div ahead which is hidden it ?
To make it simple at the beginning you could also try to give a relative path.
A few things to try:
Make sure the image file exists by entering the file path in your browser (c:\Users\Saleh\Desktop\Abid\ggbridge960.png)
If you're linking to the css file from the HTML, make sure it's linked correctly by adding an obvious style to the container and checking whether it gets applied.
Use this syntax:
body {background-image:url('c:\Users\Saleh\Desktop\Abid\ggbridge960.png');}
also noticed that you're using back-slashes instead of forward slashes - maybe try:
c:/Users/Saleh/Desktop/Abid/ggbridge960.png
The problem is that on my website http://dev.gratefulhearttherapy.org/, at least 2 css properties are not showing up as expected:
html {
background: #fff url('images/bg-top-honey-v3.0.jpg') top center repeat-x !important;
}
#bd img {
margin: 0;
padding: 4px;
border: solid 1px #D9D9D9;
}
One background image is missing, and pictures don't have the grey border they're supposed to have.
Yesterday night I was messing with 3 things in my code:
the css file typography-new2.css,
the PHP files elements meta.php, header.php, footer.php, and
the Google Analytics code.
I must have broken something but I can't find what. I tried to pass the website and the css through the W3C validators, I scrutinized the code with Chrome inspector, looking for unclosed tags and such, but didn't find anything.
When using the Chrome inspector, to look at the html element and the img's, the missing css seems absent - not only overridden, but absent.
Any help would be appreciated! With much gratitude.
The issues are in your stylesheet: typography-new2.css
Background not showing:
At the very top you have referenced img before html only separated by comments. So the html rule is actually being interpreted as img html {:
img /* REMOVE THIS LINE*/
/* #import url('http://dev.gratefulhearttherapy.org/themes/gratefulheart/tabs.css'); */
/* All CSS files above will be loaded from this single document. */
html {
margin: 0;
padding: 0;
/* background: #fff; #f9dc91 url(http://dev.gratefulhearttherapy.org/themes/gratefulheart/images/background-sandish-tile.jpg) !important; */ /* #F9D984; */ /* customize_background_color */
background: #fff url('http://dev.gratefulhearttherapy.org/themes/gratefulheart/images/bg-top-honey-v3.0.jpg') top center repeat-x !important;
}
Pictures missing grey border:
You have a line full of *s outside of the closing comment / right before the rule #bd img which is probably why the rule is not being applied.
/********************************
*********************************
* $$ GENERAL TYPES
********************************/
******************************** /* REMOVE THIS LINE */
#bd img {
margin: 0;
padding: 4px;
border: solid 1px #D9D9D9;
}
If you remove the two lines, I think all of your issues should be solved.
Your images are not a direct descendent of #bd, I think that is your problem the CSS code is fine. See #150poundsofdonamites response for the other issue.
If this still doesn't produce the desired result try changing html to body.