My code works well in every browser, the text keeps its white opaque color on top of the semi-transparent background (background-color:rgba(0, 0, 0,.4)). However, in Safari, the background transparency value is different (much lighter) and the text is also affected by the transparency and it doesn't keep its full color. I tried changing the font color (color: #fff;) to the H2 and p only, but it didn't work. I've spent tons of hours trying to fix this, but I couldn't find a solution. Any idea how to fix it?
Please, take a look in Chrome and also in Safari.
Thank you for your help!!
This is the website I am working on: http://www.mattresszombie.com
This is my html code:
#prueba-block1 {
display: block;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
height: 150px;
background-color:rgba(0, 0, 0,.4);
margin-top: 90px;
margin-bottom: 110px;
color:#fff;
text-align: center;
position:relative;
z-index: -7;
}
#prueba-block1 h2 {
font-size: 1.2em;
font-stretch: expanded;
}
#prueba-block1 p {
font-size: 1.1em;
letter-spacing: 1px;
line-height: 0.8em;
}
<div id="prueba-block1">
<h2>We are going to make mattress shopping simple!</h2>
<p>This is an informational website to provide the facts about mattresses.</p>
<p>We have no affiliation with any manufacturer, any retailer, any website, nor any brand.</p>
<p><strong>Let's get started!</strong></p>
</div>
Tis not about color transparency, it's all about z-index
Please set
z-index:1 to #fixed
z-index:-1 to #container
and remove z-index: -7 from #prueba-block1
Related
I have a QTabWidget with six tabs, and all the tabs have an icon -
but the icons are not in the center of the tab:
What I've done so far :
tabWidget->setStyleSheet("QTabBar::tab {width: 40px; height: 40px;}"
"QTabBar::tab:selected {background: lightblue;}");
tabWidget->setIconSize(QSize(40, 40));
tabWidget->addTab("widget", QIcon("iconPath"), ""); //<--for all six tabs
And:
tabWidget->setTabIcon(index, QIcon("iconPath"));
Any ideas why this is happening, and how I can fix it?
I too have been struggling with this issue. Here is how I resolve it.
Background:
I was attempting to get a left side tab menu going, which used icons as its indicators (what the users would see), however I had a problem:
My icons, which were set using the currentTabIcon in the Property Editor, were aligning to the bottom (which is expected since I am using the West orientation. Normally, the North orientation would be selected and the icons would be on the left).
I had this as my stylesheet:
QTabBar::tab:hover {
background-color: #212121;
}
QTabBar::tab:selected{
background-color: #313131;
}
QTabBar::tab {
background-color: #111111;
height:70px;
width: 70px;
border: none;
}
Now, attempting the suggested solution found in this post whereby I set the margins did not have the desired effect, infact it had no effect at all.
Solution:
After playing around with some of the CSS properties, I discovered that setting the padding-top and padding-bottom gave me the desired result.
adding the lines:
padding-top: -15px;
padding-bottom: 15px
Resolved the problem for me, however this needs to be changed according to your needs.
My final stylesheet resembles:
QTabBar::tab:hover {
background-color: #212121;
}
QTabBar::tab:selected{
background-color: #313131;
}
QTabBar::tab {
background-color: #111111;
height:70px;
width: 70px;
border: none;
margin: 0px;
padding-top: -15px;
padding-bottom: 15px
}
If somebody has the same problem like me with the icons in the tabs, I found a solution after days and days search for this, and its so simple :D
Just add this to the stylesheet for the TabWidget:
tabWidget->setStyleSheet("::tab {margin: 0px;}");
************
I'm designing a web page and I used HTML5 to make an entire div tag a link. Prior to adding the link, the whole div would expand when I hovered over it. Suddenly, it's only working if I hover over the words, not the box I created. The HTML looks like this (minus the actual link):
<a href="link goes here" style="text-decoration: none;">
<div class="home-tab">
home
</div>
</a>
And the CSS to make it hover looks sort of like this:
.home-tab:hover {
width: 150px;
height: 45px;
margin-top: 30px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
(Note: This is not all of the code in the stylesheet. I have some lovely color in there too.)
Is there something I'm missing in my CSS to make the whole thing work on the hover and not just the words? I'm not even sure what questions to ask to figure out what I've done here.
ETA: I have checked this across three different browsers. It has the same problem on IE, Firefox and Chrome.
ETA: CSS without the :hover attribute.
.home-tab{
width: 150px;
height: 35px;
margin-top: 40px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
ETA: Okay, here's something very weird. It seems that any elements on the far right don't have this problem. Seriously, the forums tab and next button on the far right both have :hover elements and they work exactly as I want them to.
Get rid of the <div> entirely and set <a> to display: block.
You're not supposed to put block-level elements inside of an <a> anyway.
Seems to be working fine here: jsFiddle
The only thing I can think of is that the div is not the size you think it is. the size and width elements that you are setting in your css are only active when your mouse is on the div. You need to set them in the normal non hover settings as well if you want the div to be that size. Right now it is defaulting to just large enough to hold the text. You can see this demonstrated by the black border I added in my example.
Here is my suggestion:
.home-tab {
/*All of the sizing code goes here to create box for div*/
}
.home-tab:hover {
/*anything you want changed on hover goes here*/
}
I hope I was understanding your question correctly. If you need more clarification please let me know. Good luck!
I think you want to expand that div when you hover cursor on that div.
i wrote a code below that will solve your hover problem.
Here is a code for you customize this
.home-tab{
width:150px;
height:45px;
margin-top:30px;
color:#008080;
font-family: arial;
background-color: blue;
transition-duration: .8s;
color:white;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
.home-tab:hover{
width:200px;
height:60px;
font-size: 16pt;
transition-duration: .8s;
}
a{ text-decoration:none} /* optional*/
</style>
<a href="#"><div class="home-tab">
home
</div>
</a>
My intention is to have the post_entry level with the headline. I've noticed that some entries do this while others are shifted up or down seemingly random amounts. What is causing this? How do I fix/prevent it?
Site- http://whskytngfxtrt.com
(the slope of the red lines show the problem)
Thank you.
I think it has something to do with the margin-top you put on everything by hitting #main .post_entry and p, but unless you clean up your HTML (as Diodeus and Didier Ghys recommended: put everything into separate divs) it's impossible to say for sure. Sorry!
In your CSS, I noticed something else in this part:
#main .post_entry p {
font-size: 80%;
font-weight: normal;
line-height: 150%;
margin-left: 230px;
margin-bottom: 25px;
margin-top: -82px;
overflow: hidden;
width: 403px;
margin-top: -82px;
}
As you see, there is two margin tops of -82.
Is there a way to control the position of the underline in text-decoration: underline?
Example link
The example above has an underline by default...is there a way to nudge that underline down by a few pixels so that there is more space between the text and the underline?
2020
Use text-underline-offset!
2012
The only way to do that is to use a border instead of an underline. Underlines are notoriously inflexible.
a {
border-bottom: 1px solid currentColor; /* Or whatever color you want */
text-decoration: none;
}
Here's a demo. If that's not enough space, you can easily add more — if it's too much, that's a little less convenient.
You can use pseudo before and after like this. It works well and is completely customizable.
CSS
p {
line-height: 1.6;
}
.underline {
text-decoration: none;
position: relative;
}
.underline:after {
position: absolute;
height: 1px;
margin: 0 auto;
content: '';
left: 0;
right: 0;
width: 90%;
color: #000;
background-color: red;
left: 0;
bottom: -3px; /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
}
HTML
<p>This is some example text. From this page, you can read more example text, or you can visit the bookshop to read example text later.</p>
Here's a more advanced demo with a screenshot attached I made that animates the underline on
hovering, changes colors, etc...
http://codepen.io/bootstrapped/details/yJqbPa/
There is the proposed text-underline-position property in CSS 3, but it seems that it has not been implemented in any browser yet.
So you would need to use the workaround of suppressing the underline and adding a bottom border, as suggested in other answers.
Note the the underline does not add to the total height of an element but bottom border does. In some situations, you might wish to use outline-bottom – which does not add to the total height – instead (though it is not as widely supported as border-bottom).
2021
There is the text-underline-offset property in CSS Text Decoration Module Level 4 which allows you to move the decoration by a specified distance away from its original position.
As of early 2020, this is only supported in Safari 12.1+ and Firefox 70+.
text-underline-offset property accepts these values:
auto - default, makes the browser choose the appropriate offset.
from-font - if the used font specifies a preferred offset, use that, otherwise it falls back to auto.
<length> - specify distance in the "usual" CSS length units. Use em to allow scaling proportionally with the font-size.
Example below:
p {
text-decoration: underline;
text-decoration-color: red;
margin-bottom: 1.5em;
}
p.test {
position: relative;
}
p.test::after {
position: absolute;
content: '';
display: block;
height: 1px;
width: 100%;
background: blue;
bottom: 0;
}
<p style="text-underline-offset: 0.75em;" class="test">
If you see our red underline <strong>below</strong> the blue line, this property works in your browser.
</p>
<p style="text-underline-offset: auto">
And now let’s try it with `text-underline-offset` set to `auto`.
</p>
<p style="text-underline-offset: from-font">
With `text-underline-offset` set to `from-font`, it probably looks the same as above.
</p>
2021
you can use text-underline-position: under;
<body>
<h1>
<a href="#"
style="text-decoration: underline; text-underline-position: under;" >
My link</a>
</h1>
</body>
for more details check https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position
Use a border-bottom instead of the underline
a{
border-bottom: 1px solid #000;
padding-bottom: 2px;
}
Change padding-bottom to adjust the space
Using border-bottom-width and border-bottom-style will make the border the same color of the text by default:
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
padding-bottom: 1px;
There is one property text-underline-position: under. But only supported in Chrome and IE 10+.
More info: https://css-tricks.com/almanac/properties/t/text-underline-position/
https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position
I would use border instead. Easier to control that.
The default weight of 1px for line-through property in CSS is great for body copy at 1em.
Unfortunately for larger items such as a price set at 3em on an offer site, 1px is really too light. Is it possible to set a heavier line weight for line-through?
If not, what alternatives should I consider, such as an image overlay for example?
You can do something like this in modern browsers
.strike{
position: relative;
}
.strike::after{
content: '';
border-bottom: 4px solid red;
position: absolute;
left: 0;
top: 50%;
width: 100%;
}
I <span class="strike">love</span> hate hotdogs
Made a fiddle of it too:
http://jsfiddle.net/TFSBF/
Here's another way to do it with a fake strike-through (which looks great and works on all browsers, albeit with the cost of a tiny imageload). The image is a black 1px by 2px box.
del {
background: url(/images/black-1x2.png) repeat-x 0 10px;
}
I think this is a browser implementation issue.
See this page http://jsbin.com/arucu5/2/edit
In IE8 and Firefox the line through width increases with the font size.
However in Safari and Chrome it remains at 1px
You can always a dirty Ghetto method like this
http://www.overclock.net/web-coding/167926-ghetto-css-strike-through.html
This should work:
<style>
span.strike {
font-weight:bold; /*set line weight here*/
color:red;
text-decoration:line-through;
}
span.strike>span {
font-weight:normal;
color: black;
}
</style>
<span class="strike"><span>$20.00</span></span>
I've found another approach to set line weight for multiline text:
span {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII=');
background-repeat: repeat-x;
background-position: center;
}
Here is an example:
http://output.jsbin.com/weqovenopi/1/
This approach assumes repeating an image (1px width and npx height). Also it works independent on the font-size.
Only one disadvantage - background renders under the text.
You can thicken the line with style.
For example:
text-decoration-thickness: 3px;