A link(Menu) is highlighted by orange color after the user tap on it on android browser. I would like to remove this highlight.
I tried to search but and found some answers but when i tried it didn't work in my case. Is there anyone who can guide me?
ul {
-webkit-tap-highlight-color: transparent;
float: right;
li {
-webkit-tap-highlight-color: transparent;
float: left;
padding-left: 40px;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.04rem;
text-transform: uppercase;
}
}
Related
I am working on this website: http://box5155.temp.domains/~grownows/
In the top menu bar, I want "Get In Touch" to have the following CSS working on it so it stands out more:
font-size: 120%;
text-transform: none;
I also want a green border box around it but I haven't even figured that out yet lol.
So I've tried just doing these in CSS but those didn't work (the only thing that strangely worked is changing the font to Escafina.) I did use !important on the font-size and text-transform but that didn't work.
.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-
50.menu-item-link {
font-size: 120%;
font-family: 'Escafina';
text-transform: none;
color: blue;
}
#menu-item-50 {
text-transform: none;
font-size: 120%;
}
So then I gave the "get in touch" the title attribute "getintouch" and tried this:
.a[target="getintouch"] {
text-transform: none;
font-size: 120%;
}
Now I am stuck. I tried without a "." selector before the a too. Any suggestions?
This worked when I tested it:
li#menu-item-50.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-50.menu-item-link a {
font-size: 120%;
text-transform: none;
border: 1px solid #b4d447;
padding: 0 17px !important;
max-height: 34px;
}
When iam about to change the color of the following the code doesn't work and the menu color appears in #fff i.e white . can anyone help me out
#mainnav ul li::before{
font-family: Fontawesome;
color: #d65050;
float: left;
margin: 5px 5px 0 0;
font-size: 14px;
line-height: 1;
font-weight: 400;
}
My html code for this is in www.tradestar.com
This css is for ul but not background . Thanks in advance
I think you mean background-color.
Just change your
color: #d65050;
to
background-color: #d65050;
I have built web site (www.dubovik.org it's on russian, but it's not relevant to the issue) everything looks quite ok except on mobile Safari (on iphone and ipad). Only one h2 (with phone numbers) has blue color instead of white (as other h2's).
This is html with problematic heading:
<h2 class="heading" id="left">694-29-29 <br> 7-911-922-35-97</h2>
And css:
h2 {
clear: both;
color:#444444;
text-align: center;
font-size: 1.2em;
font-family: Helvetica, italic;
}
.heading {
width: 650px;
color: #fff;
text-align: right;
text-transform: uppercase;
text-shadow: 0 3px 5px rgba(0,0,0,0.7);
line-height: 1em;
}
#left {
position: absolute;
top: 335px;
left: 1.5%;
z-index: 5;
float: left;
width: 500px;
color: #fff;
text-align: left;
text-transform: uppercase;
text-shadow: 0 3px 5px rgba(0,0,0,0.7);
font-size: 3.5em;
line-height: 1em;
}
Tried everything (style it differently, give it different classes and id's and style them differently) - mobile Safari renders h2 heading with phone number in blue color.
Thanks for your help!
iOS automatically makes telephone numbers into links. You can stop it from doing that like this:
<meta name="format-detection" content="telephone=no">
Or you can keep the number as a link and style it like this:
a[href^=tel]{
color:inherit;
}
You could try this:
color: #fff !important;
I have applied two different styles for two different text buttons.
.BC {
background-color : DC143C;
color: white;
font-size: 12px;
display: block;
height: 21px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
text-align: center;
text-decoration: none;
font-weight: bolder;
}
.DE {
background-color : black;
color: white;
font-size: 12px;
display: block;
height: 21px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
text-align: center;
text-decoration: none;
font-weight: bolder;
}
The look and feel of the buttons are great in Mozilla,chrome,Opera and Safari browser with the expected colour changes(ie the button appers with default length and the text is wrapped inside it).But in IE8 and IE9 the color is applied only upto the text what I have mentioned and adjusts itself with the buttton structure.
Can you please help me with this?
Hey used to # before in color
as like this
background-color : #DC143C;
and replace this one
.BC{background-color : #DC143C;}
This menu is on an ASP.NET navigation. On Chrome and Safari, it looks like this:
But on Internet Explorer, it looks fine:
Here's my CSS:
div.hideSkiplink {
background-color: #000;
width: 100%;
display: block;
height: 42px;
font-size: large;
font-weight: bold;
background: transparent url('../images/redslate_background.gif') repeat-x left top;
font-family: 'Times New Roman' , Times, serif;
text-transform: uppercase;
color: #000000;
}
div.menu ul {
position: absolute;
margin: 0px;
padding: 0;
list-style-type: none;
width: auto;
}
div.menu ul li {
display: block;
float: left;
margin: 0 1px 0 0;
}
div.menu ul li a {
display: block;
float: left;
color: #000000;
text-decoration: none;
padding: 14px 22px 0 22px;
height: 42px;
}
div.menu ul li a:hover, div.menu ul li a.current {
color: #fff;
background: transparent url('../images/redslate_backgroundOVER.gif') no-repeat center top;
}
Somehow, on Chrome and Safari, the menu seems to be below the background. How can I fix it?
Sadly, this is a regular problem in Internet Explorer. Web Developers hate it so bad because that always happens! Nevertheless there are certain rules that you should follow If you want your site to be open from all web browsers. Please take a look at this: Internet and CSS issues
There are hundreds of articles related to this topic so you should google things like
IE and CSS compatibility
IE and CSS issues
It is evident that you have been struggling with margin-top issue. Hence you can use margin-top:10px and top:10px CSS property interchangeably.
It seems that you have used, margin: 0 1px 0 0. Hence, now you should also add top:10px CSS property to adjust your menu. For more detailed help, also paste your HTML code, so that i can give you example...