I have created a site which looks great in Chrome but in Safari the button's background color looks bleached (silver background with white text). I saw someone say that it's because I am overwriting the bootstrap style. Why would that cause this issue? People have also suggested to avoid the "!important" qualifier. Does that make sense on its face?
The one on the left is how it should look. The right one is what Safari displays.
<a type="button" class="btn-secondary" target="_blank" style="padding: 0.25rem 0.25rem; border-radius: 5px; margin-right: 0.35rem; background-color: #F2A649">
<i class="fas fa-chart-bar"></i>Metrics
</a>
The simple reason was that I accidentally added the type of button to the anchor tag. It seems that Chrome is smart enough to ignore that attribute while Safari does not.
Related
I have a web page with a text box. The background is black and the text is white. It displays correctly in Chrome and Safari, but for some reason the display is way off in Firefox. For arguments sake that could be reversed, that it is correct in Firefox but not Chrome or Safari - I am just going with the majority for now.
Here is the HTML:
<div class="col-sm-6 black">
<p style="text-align:center">Each unit is full of character and convenience with original hardwood floors, 10’ ceilings, washer/dryer and walkability to local restaurants and shops. </p>
<p style="text-align:center">Rents range from $825 – $950/month.</p>
<p style="text-align:center">Call us to reserve your unit: </p>
<p class="estilo big" style="text-align:center">919-292-2200</p>
<p class="estilo" style="text-align:center">or through Facebook messenger.<br />
facebook.com/thelutterloh</p>
</div>
Here is the CSS:
.black { background-color: #000; padding: 15px 15px 65px 15px; }
This is how it looks in Chrome and Safari:
This is how the same code renders in Firefox:
I have looked extensively for a solution and have have seen nothing that would resolve this. Also, Mozilla does not have a -moz specific styling that can be applied.
Any help would be appreciated.
The inconsistency in the font-size seems to be causing the height of the .black div to increase in case of firefox (since the font-size appears to be higher). The padding added on top of this increases the total height of the div.
I would recommend using normalize.css or CSS resets before doing any of your styling to avoid such scenarios.
Another workaround is for you to set box-sizing: border-box and set a max-height on the .black div., along with overflow:hidden.
You can also use #font-face which will help keep your font consistent between browsers instead of the browser using its default. https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
So I want to make this circles with icons in it, and for the icons I want to use font awesome. For the circles I use a padding trick so the circles are always circles and not ellipses.
The icons get way too big and when removing box-sizing: border-box way too small.
I think the padding-top: 20%; is the cause of the problem but I don't know how to fix this.
svg{
width: 20% !important;
padding-top: 20%;
margin-right: 20%;
border-radius: 100%;
background-color: #ec567c;
float: left;
box-sizing: border-box;
}
svg:last-of-type{
margin-right: 0;
}
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<i class="fas fa-female"></i>
<i class="fas fa-music"></i>
<i class="fas fa-camera"></i>
If you take away the box-sizing: border-box; the icons will in the circle, but they will be way to small .
Font Awesome is - as the name says - a font.
That means you can change the size with font-size.
If you think the icon is too big: lower the font size.
If you think the icon is too small: crank that font size up.
There is an attribute you can add to the icon to make it bigger smaller than it's default. At the time of writing the Fontawesome docs are down though so I can't get it right now... that's the best way to go about it in my opinion.
EDIT:
OK so it's data-fa-transform="shrink-6" for making smaller. I believe you can increase the size with data-fa-transform="shrink--6"
Hello
<span class="fa-layers fa-fw">
<i class="fas fa-circle" data-fa-transform="shrink--6"></i>
<i class="far fa-calendar-alt fa-inverse" data-fa-transform="shrink-6"></i>
</span>
World
https://jsfiddle.net/vk3qw09f/395/
Adding the following JS before you load the Fontawesome JS will wrap the svg in tags. I'd suggest you do this and style the i tags rather than the svg.
FontAwesomeConfig = {
autoReplaceSvg: 'nest'
};
According to the official documentation about power transforms you can simply add data-fa-transform="grow-6" to your icon element. It should work exactly the same as the hack using data-fa-transform="shrink--6".
Edit: not sure if it applies to SVG icons as well, looks like only to icon fonts. Using Angular 7.2.12 with #fortawesome/angular-fontawesome (0.3.0), #fortawesome/fontawesome-svg-core (1.2.17), #fortawesome/free-brands-svg-icons (5.8.1) and data-fa-transform="ANYTHING" doesn't work for me.
Solved this problem for my project using <fa-icon style="font-size: 2rem;" [icon]="['fab', 'facebook-f']"></fa-icon>.
Suppose I have two arrows on either end of a carousel which when clicked rotate the carousel. I might have markup like:
<a class="carousel-prev" alt="Previous Item"><i class="icon-angle-left" aria-hidden="true"></i></a>
<a class="carousel-next" alt="Next Item"><i class="icon-angle-right" aria-hidden="true"></i></a>
In this case, does aria-hidden="true" attribute break accessibility, or is it okay since the outer <a> tag is tabbable and is using alt text?
Why not just have an aria-label on the anchor tag? Should be a simple matter of changing your alt= to aria-label=. No need to have a nested span with a screen reader class.
<a class="carousel-prev" aria-label="Previous Item"><i class="icon-angle-left" aria-hidden="true"></i></a>
<a class="carousel-next" aria-label="Next Item"><i class="icon-angle-right" aria-hidden="true"></i></a>
It's valid html. Look at the "Allowed ARIA state and property attributes" section of https://www.w3.org/TR/html51/textlevel-semantics.html#the-a-element. All aria tags are allowed.
First, the WAI provides a full example of a working carousel: https://www.w3.org/WAI/tutorials/carousels/
Some personal observations:
You have to ask yourself about the interest of rotating a carousel for a blind user. One way to handle UX for blind users is to make them ignore that what they are browsing is a carousel (switching items automatically as the keyboard focus move for instance).
aria-hidden does not break the accessibility because there's nothing inside the i tag, tag which is not designed to be used as a portmanteau tag (like span).
As pointed out by #DiscoInfiltrator alt is not a valid attribute for links
As a small part of visually impaired users use screenreaders, you should use the title attribute on the a tag in order to make this information accessible for everyone rather than the aria-label which is also a good alternative.
the alt attribute is not a valid attribute for links, so it not only is an accessibility concern but it is also invalid html.
See this stackoverflow post if you want to read more:
Is it correct to use alt tag for an anchor link?
I would recommend removing the alt from the link and instead include a "screenreader-only" class that will allow the text to be read but hidden from the screen. See this link from a11yproject.com on how to implement this:
http://a11yproject.com/posts/how-to-hide-content/
I would recommend altering the code to look like this:
.sr-only {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
<a class="carousel-prev"><span class="sr-only">Previous Item</span><i class="icon-angle-left" aria-hidden="true"></i></a>
<a class="carousel-next"><span class="sr-only">Next Item</span><i class="icon-angle-right" aria-hidden="true"></i></a>
I am trying to put a border around a div.
<div style="border-color: yellow; border-style: dotted; border: 5px;">
<p>
This is a test.
</p>
</div>
Yet when I run this, this is what the browser shows as the actual style being applied:
<div style="border: 5px currentColor;">...</div>
The result is that no border is shown at all.
This makes no sense to me why the border styles are being overridden. I can only imagine that Bootstrap has set an !important override somewhere, but I have been unable to trace this.
Change the order in which you are applying inline styling. You can add all the 3 styling in the border style itself like border:5px dotted yellow;. Well if you still want to go with the way you did, just change the order. First add the border style and then specify the other styles like this.
<div style="border: 5px; border-color: yellow; border-style: dotted;">
<p>
This is a test.
</p>
</div>
In Chrome Inpsector:
click the element you wish to inspect
On the right, select the Computed tab
There you can see the applied styles, and their sources, so it would give you an idea why it is overridden.
you can always use !important yourself as well.
I have this as my rule for rounded:
.rounded { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
On my site I'm working on, http://urlme.cc/movies6, if you view it in Chrome, each movie div has the class "rounded", but, the div has straight edges.
In Firefox, it's rounding correctly. Please see image comparison below.
You can view source / inspect elements on the above link, but, the html looks basically like this:
<div class="movie rounded">
<img src="..." />
<div class="details">1 hr, 20 min</div>
</div>
Question: any reason why Chrome is not rounding those div.movie corners, while Firefox is? Thanks!
Taking off position:relative on .movie seemed to do it in Chrome Developer Tools.