I'm seeing a rendering issue for a 2px dotted border similar to CSS dotted border issue in adjacent columns in a table rendered as dash in Chrome but on desktop Safari and Chrome. I tried several widths and it happens in all of them
This is a sample:
the vertical line ending has the same issue but it's out of the picture.
Sample:
http://jsfiddle.net/bcdQQ/
This issue happens if the width is not divisible by the border-width.
This works:
http://jsfiddle.net/bcdQQ/5/ (i made it a little bit bigger, for better sight)
#prodpre {
border-bottom: #555 5px dotted;
height: 20px;
margin: 0px 0px 2px 0px;
padding-bottom: 10px;
width: 505px;
}
So, the only possibility to catch this issue, would be a javascript solution, which corrects the width of the div, so it is divisible by the border-width (cause it is dynamically in your example).
could you put it in a smaller container div with overflow hidden?
Related
In PyQt5, I have been working on stylesheets. For my tabwidget stylesheet, I would like to use the border-right attribute to set a border between the tabs, but I would like to have a gap at the bottom and top of the border, so the border does not meet the top or bottom of the tabbar, like so:
I was wandering if there is a way to set the border height in the stylesheet, or possibly set the border style to dashed and then set the length of the dashes and gaps? Any method that achieves the border with gaps is appreciated, preferably by using stylesheets. Thanks.
EDIT:
Here is the stylesheet I currently have for the QTabWidget:
QTabBar:Tab {height: 27px; width: 220px; border-top-right-radius: 14px; border-top-left-radius: 14px; padding: 2px;}
QTabBar:Tab:Selected {background-color: white;}
QTabBar:Tab:!Selected {background-color: rgb(0,155,255); border-right: 1px solid black}
QTabBar:Tab:Hover:!Selected {background-color: rgb(240,240,240,92);}
QTabBar:Tab:First:Selected {margin-left: 0; margin-right: 0px;}
QTabBar:Tab:Last:Selected {margin-right: 0; margin-left: 0px;}
QTabBar:Tab:Only-One {margin: 0;}
QTabWidget:Tab-Bar: {left: 5px;}
QTabWidget:Pane {background-color: white; border: 1px solid white;
Yes, you can by using border-image.
This answer is CSS only related, but Qt's implementation follows the CSS specifications very well: https://stackoverflow.com/a/26858151
In short, you create a small square png image with the intended borders (in your case, you'll need to create only the right dashed part, the size depends on the dash pattern you need.
Unfortunately, when using rounded corners Qt "cuts" away half of the border width, so you'll see a small gap outside the border between two adjacent tabs.
I've created a small example of the image which will have a pattern of 6 pixels black and 5 transparent (I forgot to erase the top 2 pixels, you won't need them):
This is how it appears when zoomed in an image editor:
After that, this is what you'll need as a basis for your stylesheet:
QTabBar:Tab {
border-top-right-radius: 14px;
border-top-left-radius: 14px;
border-image: url(border.png) 2 repeat;
padding: 2px;
}
QTabBar:Tab:!Selected {
border-right: 2px;
}
The "2" in the border-image declaration is the border width within the image, the "repeat" is required to tell Qt that the border pattern has to be repeated and not stretched.
Also, remember to set the width of the border too, otherwise the image won't be shown.
And this is the result:
As you can see, the border size is only 1px, with another pixel left outside the tab. Since the issue comes from the usage of rounded corners, I'm afraid that the only solution would be to create a full border image that includes the rounded corners. I tried to play around with negative margins and css positioning, I think that it wouldn't work as expected and might even create issues against different platforms and Qt versions.
I ran into an issue today with Safari (Version 11.0 (12604.1.38.1.7), border-radius, and a large spread drop shadow. This issue doesn't happen in Chrome, FF, or Edge.
The reason for the large drop shadow is to achieve a window like effect where element is visible, and the drop shadow is semi-transparent covering the whole screen.
After some trouble shooting I determined that drop-shadow works fine in Safari, but not when the spread is very large (like here) AND when the border radius of the container all match. Adjust one corner border radius to be one pixel different, and the issue goes away and the drop shadow spread works at the sizes I want.
Here's a quick and dirty CodePen demonstrating the issue.
The button will toggle the equal vs. non-equal border radius class. But feel free to adjust the box-shadow size and note that it works fine up to a certain point (2039px works, 2040px doesn't. This was slightly different from the breaking point I founder earlier in my own code which was ~2019).
I guess I have to paste code from CodePen here too.
HTML
<div class='wrapper'>
<div id='box-shadow-container' class="equal-border-radius">
<div id='box-shadow-fun'>
What's going on here? <br/><br/>
<button id='toggle-radius-class'> Swap Border Radius Class</button>
</div>
</div>
</div>
CSS
body {
display: flex;
flex-direction: column;
min-height: 400px;
}
.wrapper {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
#box-shadow-fun {
padding: 5px;
}
#box-shadow-container {
border: 1px solid #CCC;
box-shadow: 0 0 0 5000px black;
}
.one-different-border-radius {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 4px;
}
.equal-border-radius {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
Does anyone know the issue here? I can live with one corner being a pixel radius different, but I don't like not understanding a bug fix as it seems likely to break in the future and I'll still have no idea what's going on.
I don't know what's going on with the unequal border radii, but it seems that Safari doesn't handle very large box shadows well and will refuse to draw it if the spread is too large with a border radius. It does work if you also set a small blur radius (which shouldn't be noticeable except at the very extremes of the shadow):
#box-shadow-container {
box-shadow: 0 0 500px 5000px black;
^^^^^
}
However this will break Firefox. You should detect the Safari browser and only apply this style in Safari.
Play around with the blur radius and spread values to get something that works at the smallest size that you require.
I don't know the cause of the issue but you can fix it without making one of the border radius different by using calc:
.thing-with-box-shadow {
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
border-radius: 50%;
// makes the box shadow appear on Safari
border-bottom-right-radius: calc(50% + 0px);
}
I have a question on something weird that is rendering on the latest IE and Chrome browsers. I have a div that is supposed to span 100% of a parent. So clumsily, I gave it - width: 100%px; as a CSS property. Here is my entire item:
.loc_vendiv{
position: relative;
margin-top: 5px;
left: 0px;
width: 100%px;
height: 120px;
border: 1px solid #333;
background-color: #fff;
}
The weird thing - that worked perfectly. So much so, that I just noticed today that this was wrong. Not wanting an ugly style sheet, I removed the px from the end. And... the div was two pixels too wide. Any explanation as to why this is happening? Here is the parent div:
#loc_catlist{
position: absolute;
width: 612px;
height: 720px;
top: 50px;
left: 0px;
background-color: #eee;
overflow-y: auto;
overflow-x: hidden;
}
I'm mildly annoyed, as the bad code works, yet the correct code doesn't do what I want. I don't think I can leave it, though. I don't like little hiccups like this...
It's because of your border.
Try adding :
box-sizing: border-box;
to your .loc_vendiv class, it will take the border in account.
Browsers usually ignore invalid css rules like width: 100%px; which means that to get the style you had with the mistake. you only have to remove the width rule.
2px too wide is likely caused because you have a width of 100% in addition to a border of 1px (all around adds up to 2px width).
A fix can be found here from "Paul Irish" about
box-sizing
what happens is that when the width value is wrong (100%px;) this part of the CSS is simply ignored by the browser. If this part of the css was deleted, the result would be the same.
About the 2 extra pixels, this happens because of the border set to the div.loc_vendiv.
The width of div.loc_vendiv is equal to the width of div#loc_catlist and to this is added the border value (1px for the left border and 1px for the right border = 2px).
Remember that the border width is added to the size of the object while the padding creates an internal space.
I have this annoying problem with Chrome (or FF?). I haven't checked on IE yet.
There is one pixel difference in rendering and I have no idea where I can dig for more. I've used all inspectors for the three browsers (FF, Opera, Chrome) to see, if there is anything to tweak, with no success. It is either a bug, or I am blind for this error.
See an example here: www.vanwright.com/catalogue/le-kex-walking-kids/
The problem refers to the left margin of the first images from the left in both rows. Chrome shows 2px border, while other browsers show 1px, which is what I am after.
Is it caused by nth-of-type selector?
Probably not, because here: www.vanwright.com/collections/ it seems to have the same problem (margin-left: -10px shows with a 1px line in Chrome, while there is no space in FF/Opera).
I am lost. Any ideas?
Thanks,
pop
Option 1
To fix and maintain 960px layout:
remove all the :nth-of-type css on .pi-pad
change the css for .pi-pad to read: .pi-pad {margin: 1px 1px 1px 0; width: 318px; padding: 0px;}
Fix background to math 960px layout ( I think it is currently designed for a 979px layout);
Option 2
Expand current layout to match background. (which is clunky, because the background's width is no divisible by 3)
CSS for .container and .span-12 should specify width: 979px
Change either the .pi-pad:nth-of-type(3n+1) or .pi-pad:nth-of-type(3n) CSS to read width: 325px; and remove the other.
Change the .pi-pad CSS to read .pi-pad {margin: 1px 1px 1px 0; width: 324px; padding: 0px;}
=========EDIT=========
I posted this before I saw your replies above, and I also forgot to hide your overflow.
Using option 2, and now that I know for sure it is 980px (it looked like 979 when I measured)
.container and .span-12 should have width: 980px;
Change the .pi-pad CSS to read .pi-pad {overflow: hidden; margin: 1px 1px 1px 0; width: 325px; padding: 0px;}
Use .pi-pad:nth-of-type(3n) OR .pi-pad:nth-of-type(3n+1) should specify width: 326px; and delete the other.
It's a Chrome bug. Thanks to runspired for taking time. Sorry for anyone trying to fix the unfixable.
Background center with chrome (bug)
On my website I have a header with buttons made from background-images and a jQuery hover event. The problem is, in Chrome and Chrome only (in my tests), when mousing over the button the hover image is slightly cut off by about a pixel. I've tested it some and realized it only appears when there is a scroll bar (for consistency's sake, I've added overflow-y: scroll to all of my pages). The problem is fixed if I subtract half a pixel from the width, but it also messes with the margins. The background images are an identical size, 102x42px.
Here is my CSS and a link to my website:
.menubutton
{
margin:0px auto;
margin-top:-10px;
background:url('../img/buttons/menureg.png');
width:102px;
height:32px;
display:block;
color:#6F6F6F;
font-size:16px;
text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
padding-top:10px;
text-decoration:none;
}
.menubutton:hover
{
background:url('../img/buttons/menuhover.png');
color:#E0E0E0;
text-shadow: 0px 0px 1px rgba(0,0,0,0.75);
}
I confirm the bug and like randy I think this is a problem with chrome and not your code.
It seems the problem appear and disappear because of the width if the page, if I resize my window the problem appear and disappear.
After some trials and error it seems the problem come partially from the size td element that encapsulate your menubutton. After trying some things around I thing I found a workaround. Since you know both the size of the td element and the menubutton, you don't need an automatic margin. So:
.menubutton
{
margin:0px 24px;
margin-top:-10px;
background:url('../img/buttons/menureg.png');
width:102px;
height:32px;
display:block;
color:#6F6F6F;
font-size:16px;
text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
padding-top:10px;
text-decoration:none;
}
Can you test on your side to see if it resolves the issue?
I see your problem, but it look like a chrome bug though, not a code bug. two out of four elements have correct hover backgrounds, so its a bit strange. You can try to set the width of the element again in the hover, or make the element 1px wider and set background-repeat:none; to display the extra pixel. Bad solution though..