I have looked all over for a solution to this problem and nothing seems to work and I really don't want to use a hack if I can avoid it.
When I set the line-height to vertically center my nav it's centered everywhere but safari, it's sitting about 2px high. Here is the css for the nav bar:
nav {
padding: 0px;
margin: 0;
font-size: 16px;
height: 25px;
}
nav ul {
padding-left: 0px;
margin: 0;
line-height: 1.5em;
}
nav li{
display: inline;
text-transform: uppercase;
padding-right: 12px;
padding-left: 12px;
}
I've tried line-height in px, em, and % and it's still wrong in safari. Here is a screenshot of the correct nav position in firefox and the wrong position in safari.
Any help on this issue is much appreciated.
Some browser specific default styles could be interfering your defined styles. (Inherited styles, default more specifically defined styles for certain elements...)
For homogenous behavior in all browsers, use a CSS reset and define all the needed styles properly, not depending on browsers' defaults.
Here is a good source: http://meyerweb.com/eric/tools/css/reset/
Related
I am trying to build a Toggle button which has two states, Edit and Preview.
My demo is here:
https://codepen.io/yu-zhang/pen/rNmPyxG?editors=1111
<button aria-pressed="true"
id="speakerPower" class="switch">
<span aria-label="edit">edit</span>
</button>
button.switch {
margin: 0;
padding: 0;
width: 70px;
height: 26px;
border: 2px solid black;
display: inline-block;
margin-right: 0.25em;
line-height: 20px;
vertical-align: middle;
text-align: center;
font: 12px "Open Sans", "Arial", serif;
}
button.switch span {
padding: 0 4px;
pointer-events: none;
}
button[aria-pressed="true"] {
background: #262;
color: #eef;
}
button[aria-pressed="false"] {
color: #a;
}
label.switch {
font: 16px "Open Sans", "Arial", sans-serif;
line-height: 20px;
user-select: none;
vertical-align: middle;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
document.querySelectorAll("button").forEach(function(theSwitch) {
theSwitch.addEventListener("click", handleClickEvent, false);
});
function handleClickEvent(evt) {
let el = evt.target;
if (el.getAttribute("aria-pressed") == "true") {
el.setAttribute("aria-pressed", "false");
el.textContent= 'preview';
el.setAttribute("aria-label", "preview");
} else {
el.setAttribute("aria-pressed", "true");
el.textContent = 'edit';
el.setAttribute("aria-label", "edit");
}
}
But the strange thing is: VoiceOver + Chrome(92.0.4515) reads out the aria-labels while toggling but VoiceOver + Safari(14.1.2) does not read out the aria-labels.
Any ideas?
You are changing both the aria-pressed state and the aria-label property. It's important to know the difference between a state and a property, even though both begin with "aria".
When changing a state, you typically get an automatic announcement by the screen reader ("pressed/unpressed", "checked/unchecked", "expanded/collapsed") of the state change.
When you change a property, no such "free" announcement is made.
You'll see/hear differences depending which screen reader and which browser you're using. Sounds like you're getting the desired behavior in chrome but not safari. It's undefined which one is correct since changes in properties don't have to be announced.
To work around it, you can have a hidden aria-live="polite" region. In your click handler, just update the innerHTML of the live region with the new label and it'll be announced. I don't know if that will cause double announcements on chrome.
You'll also want to visually hide the live region so you can't see it but you can't make it display:none because then the aria-live won't be announced.
<div class="sr-only" aria-live="polite" id="foo"></div>
(See What is sr-only in Bootstrap 3? for info on the "sr-only" class.)
In your click handler, get the "foo" element and change its innerHTML to "preview" or "edit".
I am using vue carousel and I want to change tge color of the pagination dots' borders. I don't know how and if it's even possible. I looked up the style of this buttons in dev tools and tried to rewrite the style. But nothing works
vue-carousel has two properties that control the color of the dots:
paginationColor - (default: #000000) The fill color of the active pagination dot. Any valid CSS color is accepted.
paginationActiveColor - (default: #efefef) The fill color of pagination dots. Any valid CSS color is accepted.
For example:
<carousel paginationColor="gray" paginationActiveColor="red">
demo
Try this in your global CSS
.v-carousel__controls__item{
color: #FFC400 !important;
}
There is a work-around that can give you full control over the dots and their appearance with pure CSS, using pseudo-elements. Make the existing dots transparent, and use ::after to create new dots that you can style as you like.
.VueCarousel-dot {
position: relative;
background-color: transparent !important;
&::after {
content: '';
width: 10px;
height: 10px;
border-radius: 100%;
border: 2px solid black;
background-color: gray;
position: absolute;
top: 10px;
left: 10px;
}
&--active::after {
background-color: red;
}
}
This is not an ideal solution, however the provided options for styling dots in Vue Carousel are quite limited, and if you have a strict style guide to follow, this solution can give you the control you need.
I am using the element to upload image files to my hosted Blazor WASM site. The component renders a button with the words "Choose Files" on it.
I would like to replace this button with an image (or my own text, or anything else). I have tried using CSS to set a background image to the URL of an image I would want to use, and set the background-color of the button to "transparent", but this does not seem to change anything.
The source code for this component can be found here:
https://github.com/SteveSandersonMS/BlazorInputFile
I studied the code and found that this component is built using the standard Blazor input type.
<input type=file>
Steve shows a way to override the default functionality and style of the button using CSS.
Here is an example I created based on what I found:
<style>
.file-input-zone {
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
color: white;
cursor: pointer;
position: relative;
width: 120px;
height: 30px;
}
.file-input-zone:hover {
background-color: lightblue;
}
.file-input-zone input[type=file] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
</style>
<div class="file-input-zone">
<InputFile />
Get me a file!
</div>
It will give you a button that looks like this:
You might pick up more tips by studying his source code further.
I have an <input /> with a placeholder. The input is custom-designed, i. e. it has no borders, no outline, a custom height, custom width, custom background color, custom text color, and a custom font with a specific font-size and line-height. That font is imported using #font-face referencing a *.ttf-file.
The problem is that when focussing on the input field, the placeholder text jumps about 2-3px higher, only to jump back on blur.
Here the definition of the input field:
#font-face{
font-family: SourceSansProExtraLight;
src: url('../fonts/Source_Sans_Pro/SourceSansPro-ExtraLight.ttf');
}
#search_input{
background-color: #f0f0f0;
outline: none;
border: none;
padding: 0;
margin: 0;
width: 236px;
padding-left: 12px;
width: 224px; /* width (236) - padding-left */
font-family: SourceSansProExtraLight;
font-size: 30px;
line-height: 30px;
color: #5e5e5e;
height: 52px;
}
Here's a GIF demonstrating the issue:
Please check that you have write any css for input:focus Selector that may cause the issue. if you don't write any css for input:focus, write css for that to fix the problem.
With input[type="text"] there is no Problem.
I have the Problem only with input[type="number"] if the height and line height is equal:
input[type="number"] {
height: 30px;
line-height: 30px;
}
but if I reduce the line height the effect disapears:
input[type="number"] {
height: 30px;
line-height: 28px;
}
Chrome reserve space for caret.
The height of the line must be greater than the height of the font at 1.11 units (on my system).
Example:
font-size = 30px
line-height = 30px * 1.11 = round(33,3px) = 33px
Try setting outline-offset: 0 when the input has :focus. That fixed the jumping placeholder bug for me on WebKit. I was also setting outline: none and showing a custom box-shadow, which may be the cause.
I'm designing my first page using CSS3, and I'm running into a snag. I used this question and answer to create a neat looking background for the body of my site. This worked fine until I added a content class. This caused the CSS gradient to not quite reach the end of the page (scroll down to see the effect). Here is my CSS:
html{
height: 100%
}
body {
background: #c5deea; /* old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* ie */
height: 100%;
margin: 0;
background-repeat: no-repeat;
}
#content{
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
background: white;
margin-left: auto;
margin-right: auto;
padding: .5%;
margin-top: 2%;
margin-bottom: 2%;
width: 50%;
}
h1, h2, h3 {
color: #066dab;
}
Can anyone tell me what has gone wrong, and how to fix it? I should note that I am very new to CSS, let alone CSS3; so, any insights are appreciated
Do it like this instead:
Live Demo
I neatened the way you were setting height: 100%.
I took the margin off #content.
To compensate for the lost margin, I added an extra wrapper element and gave it padding: 2%.