I am trying to make a website and i want to clip(mask) text from navbar. The text becomes like a hole in the navbar and background image is seen through it. How to do this?
JSFIDDLE
//css code
text{
background-image: inherit;
color: transparent;
font-size: 20px;
top: 0px;
position: relative;
margin-top: 10px;
padding: 0px;
}
There's a CSS property called background-clip that seems to do do what you're looking for. It's is unfortunatly not supported before IE9 (but works on other main broswers : Chrome, FF, Opera, Safari).
Depending on the importance of this implementation you can always have a different rendering for older IE versions and use background-clip in any other context.
See this Fiddle and comment to tell me if it's what you were looking for!
EDIT : I misunderstood the initial request. I'll try to find a suitable solution for the actual question! Sorry about that.
Related
Junior developer here. I am currently having issues with rounded corners in Safari. I have seen that other people have been having this issue as well. Rounded corners is working in Firefox & Chrome but not Safari. It is currently affecting more than one section of the page. The current code for one of them is:
#portfolio #portfolio-flters {
padding: 0;
margin: 0 auto 35px auto;
list-style: none;
text-align: center;
border-radius: 1rem;
padding: 2px 15px;
outline-style: solid;
outline-color: #F10086;
}
I have tried using "px" as well as "em" to no avail. I have tried using -webkit-appearance: none;, overflow:hidden, and I can't seem to find anything on google to help fix this problem. I will attach photos for reference. The first photo is how it appears in Google Chrome & Firefox (the correct way).
Rounded Corners
Here is how the corners appear in Safari. It also appears this way on mobile devices regardless of browser.
No Rounded Corners
Any help would be great. I hope I have described this well enough.
Thanks
This is currently a bug in Safari, which will hopefully be fixed soon, where border-radius does not affect outline. There is a workaround posted here, but it is quite hacky and should only be used if you really need to use an outline instead of a border.
My website is http://proustscookies.blogspot.com/. I'm working on styling the buttons attached to the Search form using CSS.
Here is the CSS:
input.gsc-search-button {
margin-left: 10px;
height: 24px;
width: 60px;
border-style: none;
background-color: #666666;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
color: #FFFFFF;
}
The margin-left command is working great in Firefox and Chrome, but not at all in Safari.
All other CSS rules (above and throughout the site, data not shown) are working in all three browsers (and last time I checked also in IE).
I found the object name (input.gsc-search-button) using the Chrome Extension Stylebot. Unfortunately I can't find the underlying html anywhere (This is a blogger-sponsered widget. Could Google be hiding the code somewhere? I don't know.)
If anybody could help me figure out why the margin isn't showing in Safari, or how to find the html for the Search box, I would appreciate it very much.
It's overridden by google.
If you do:
margin-left: 10px!important;
You can override that.
Or you could make your selector more specific (and hence give it precedence) by doing something like
td.gsc-search-button input.gsc-search-button {
margin-left: 10px;
}
Hint: you can right click on an element (in firefox or chrome) and click "inspect element" to see the css associated with that element.
I had a similar issue where all styles were applied correctly except on mobile safari, very strange. It even worked on desktop safari!
In the end, I fixed it with more exact targeting. I had this before:
.phone{
background-color:gray;
}
This change fixed it.
div.phone {
background-color:gray;
}
By the way, I figured it out with using inspector on mobile safari. http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787
Here is a link to the page that is giving me trouble:
http://youtube.thegoblin.net/layoutfix/
If you view the website in firefox and chrome you can see that the spacing is different. The way it looks in chrome is the way I meant it to look.
I have tried linking in the YUI 2: Reset CSS as it as suggested in another question, but I cannot seem to get it to work.
Here's the stylesheet link: http://youtube.thegoblin.net/layoutfix/styles/style.css
You should change line-height on some elements that contains text. These are line-heights for some (maybe all) elements you need to change:
#title: 56px
.yoText: 46px
#buttonTitle: 68px
#buttonText: 34px
Looks like browsers count differently line height for font you choose, so defiantly line-height could make it better.
Just short example, not full fix:
#dl-button #buttonTitle {
color: #37590B;
float: right;
font-family: "TallDark";
font-size: 600%;
line-height: 0.7;
margin-right: 60px;
margin-top: 20px;
text-shadow: 1px 1px #BDF277;
}
makes green button much better, so you may play around with others the same way.
I have a legacy web application that is targeted for IE 6 and is being reskinned. The buttons are having the default browser button look replaced with a blue button image.
My following HTML and CSS works fine on IE 8, but not in IE 6.
HTML
<button id="add">Add</button>
CSS
button
{
width: 110px;
height: 28px;
background-image: url('../images/button.png');
background-color: transparent;
border: 0px none #ff0000;
cursor: hand;
font-family: Myriad Pro, Helvetica;
font-weight: bold;
font-size: 12px;
color: #ffffff;
}
Using CSS, how can I get the background image to show in IE 6?
Ideally the fix could be put in an ie6.css to make it easy to remove when IE6 support is eventually dropped.
Please no comments about dropping support for IE6. This legacy application is designed only for IE6 and used internally at an organisation where IE6 is the ONLY supported browser.
If the recesses of my memory on IE6 serve me well, it does not recognize background-image on a button element. Nothing you can do about it.
Although, again based on memory, if you can change it to an input (attribute type="image") you might be able to get the effect you want even on IE6.
Using the background CSS property instead of the background-image property does the trick as described in this blog post (excerpt below).
The background-image property that worked in Firefox 2.0 just did not
have any effect on IE6. After a bit of googling, I realized that the
background-image property will not work on IE and that we need to use
the background property.
This is what works for me:
button
{
background: transparent url('../images/button.png') no-repeat top;
}
Ugh. I really, really hate cross-browser compatibility... I'm working on a Wordpress site for a client to create a popup box that appears just below the item I'm hovering over (using a custom shortcode). I have top set to 16px, and it works fine in Firefox. However, in IE8, it appears a lot further down. Even if I set top to "0", it still appears BELOW the containing blog, instead of at the top of it.
I also have a related issue, in that the font size in IE8 is about 2 pixels smaller. There is a <sup></sup> tag before this, as well, but removing it doesn't change much--the font size is still smaller in IE8.
Here is the page:
http://www.medicalmarcom.com/services/
Every question mark along the left side has a popup that appears when hovering over it (kinda like a tooltip). I need to make it work in FF, IE, Safari, and Chrome. The only one it doesn't work in is IE. Thankfully, he didn't mention IE6, so I'm not worrying about it unless he singles it out.
Here is the HTML:
<span class="questions"><sup>(
<div class="popup_content"><span class="popup">?</span>
<div class="popup_inside" style="display: none;">We’ll ask questions to understand your business, objectives, competitive situation, and positioning statement.<br />
<span style="color:#15398c"><em>Read More >>></em></span></div>
</div>
)</sup></span>
CSS:
.popup_content {
display: inline;
position: relative;
}
.popup_inside {
background-color: #FFF;
border: 1px solid #000;
text-align: left;
font-size: 12px;
color: #000;
width: 300px;
padding: 2px;
line-height: 1.5;
left: 0;
top: 16px;
z-index: 1001;
position: absolute;
display: none;
}
.popup {
position: relative;
z-index: 1000;
}
Ok, this is due to how ie8 is rendering the sup tag, I believe. It considers its baseline the same as the rest of the text, rather than above it. If you want to do this with just css, I'd consider rolling your own superscript class.
Here's a fiddle of something that seemed to work for me.
As an alternative solution, it seems to be rendering correctly in IE7, you could force IE8 into IE7 Compatibility Mode. Drop this line at the top of your <head>. I don't know what this will do to IE9, but it's worth a shot.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />