I'm running into an issue on my personal splash page with a handwritten Google webfont, Meddon. What's happening is that, seemingly at random, Webkit browsers (Chrome, Safari, iOS Safari) are clipping the left side of the font.
You can see the issue on my personal page. The left side of the JH will appear/disappear at random, when refreshing or resizing the page.
Anyone know of a solution for this? Even better, does anyone know what's causing this behavior?
It is because your jh container width is not sufficient, take a look here
Demo
Update .jh class like this - Working Demo
.circle .jh {
margin-top: 50px; /* You can adjust this */
font-family: "Meddon";
font-size: 75px;
width: 200px;
height: 120px;
text-align: center;
color: #f2f2f2;
text-shadow: 1px 1px #ff8e00;
border: 1px solid #ff0000;
}
Related
I'm trying to customise a radio button that has a border of 1px and a gap of 1px between the dot (plain circle) and the border. My problem is that the gap is not displaying evenly. Wierdly, when I change the border and the padding from 1px to 2px, it works. Why is that?
SCSS
.radio {
&__input {
display: none;
}
&__custom {
padding: 1px;
border: 1px solid lightgray;
width: 1em;
height: 1em;
border-radius: 50%;
box-sizing: border-box;
&::after {
content: '';
width: 100%;
height: 100%;
display: block;
background-color: blue;
border-radius: 50%;
}
}
}
HTML
<label htmlFor="testRadio" className='radio'>
<input id='testRadio'type="radio" className='radio__input'/>
<div className='radio__custom'></div>
</label>
To summarise the comments on the question...
The issue was caused by rounding of logical measurements to physical pixel measurments performed by the browser. This rounding is required for non-px units, and also px units when UI scale is not 100%.
If you're seeing a similar issue to OP:
Check your OS display scale. This is best kept to a multiple a of 100% or 1×, e.g., "300%", "2×". It will already be for most users, so you can keep your preferred UI scale while knowing that most users will see the UI correctly.
Check your CSS units. Using em units or subdivisions of units, like 0.2rem, can also cause rounding quirks. I've noticed this particularly with box-shadow in Firefox.
Try another browser. As mentioned, these quirks can vary between different rendering engines. Try Firefox, Chrome, or Safari if you haven't.
I have <button> tag that have <i> element for displaying icon before text.
Here's the HTML
<button>
<i></i>
Login Using Facebook
</button>
the inside <i> is for displaying icon. Usually for other tag like <a>, I can just use :before pseudo-class to display icon, but it seems I can not do this for <button> tags.
and here's the CSS
button {
background: #4a6ea9;
color: #fff;
font-weight: bold;
line-height: 24px;
border: 1px solid #4a6ea9;
vertical-align: top;
}
button i {
background: url('http://icons.iconarchive.com/icons/danleech/simple/24/facebook-icon.png');
display: inline-block;
height: 24px;
width: 24px;
border-right: 1px dotted #fff;
}
Here's the fiddle
http://jsfiddle.net/petrabarus/SDh3M
The first initial display in my Chrome 28.0.1500.95 for Linux is like below
looks a little bit imbalance on the top and bottom (I'm not a designer nor I am a front-end engineer but I can just sense that it's quite imbalance), so I can simply add padding padding: 4px 6px 1px 6px; and then it looks more balanced like below in my Chrome (does it look different in yours?)
although, I don't know why the tag seems to add padding for the icon and the text. I set the icon's size to 24x24px and the text's line-height to 24px but the final height of the button is 32px. Is it possible to remove the padding?
And the biggest problem is in the Firefox (my version is 17.0.1 for Linux), the text seems to be displayed near to the bottom and it looks so imbalance
the padding addition to fix the Chrome's makes it even worse for the Firefox's.
Is it possible to make it look exactly the same in both browsers (and pretty much for other modern browsers like Opera and Safari)?
Try below css.
button i {
background: url("http://icons.iconarchive.com/icons/danleech/simple/24/facebook-icon.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
border-right: 1px dotted #FFFFFF;
display: inline-block;
float: left; /*New Edit*/
height: 24px;
width: 24px;
}
I have the following CSS:
html.darkBlue button {
border-color: #cccccc;
color: #222222;
background: linear-gradient(#fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb);
}
.question-marking-buttons button {
padding: 0.4rem;
height: 1.4rem;
line-height: 1.4rem;
margin-right: 0.5rem;
float: left;
width: 4rem;
}
Here's my HTML:
<button>Mark</button>
In Google Chrome the button background extends from the top of the button to the bottom like this:
xxxxxxxxx
x x
x Mark x
x x
xxxxxxxxx
In Firefox it looks like this:
xxxxxxxxx
x x
x Mark x
xxxxxxxxx
Can someone give me advice on why the background is getting cut off in Firefox but not Chrome?
EDIT:
OK a few reasons
First issue, is problem with height, width, and line-height.
Second issue, is that the reason buttons and divs are different sizes in Firefox and Chrome, is only because of the text size. Firefox makes slightly bigger text size.
For example, if you have a text size of 15px, well Firefox makes a larger 15px than Chrome does.
The way I fixed this on my own website, is by using cufon for the text. Since cufon is an external font, it displays the exact same width on Firefox, Chrome, and every other browser. This solved my menubar width and button width cross-browser problems.
You should also use px or em instead of rem, just a tip.
NOTE 1: I hosted the necessary cufon files on yourjavascript.com for this example. However, you should either download those files and host on your own website, or create the files yourself from the cufon website, and host the files on your own site.
NOTE 2: To get the font file to upload to cufon to create the cufon fonts file, just go into C:\Windows\Fonts\ and find the font you want to use (i.e. Arial) and copy it to your desktop. Then upload that font file onto the cufon website for hosting. You can also download font files from google fonts or other sites, if you want different fonts to use with cufon.
SUMMARY:
Problem 1: line-height extends height
Problem 2: padding is wrong
Problem 3: firefox makes different size text. Use cufon to circumvent issue
Problem 4: needs padding-before hack
Problem 5: needs box-sizing hack. This prevents padding from being added to the width.
Problem 6: need to set css to button specifically, for good measure.
See my finished fix on jsbin:
http://jsbin.com/AxiCiNA/3
The code (same thing from the jsbin I created):
page.html
<html>
<head>
<script src="http://yourjavascript.com/319153210071/cufon-yui.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/330149971117/thearialcufonfile.js"></script>
</head>
<body>
<button id='one'>Mark</button>
<button id='two'>Mark</button>
</body>
</html>
style.css
#one {
border-color: #cccccc;
color: #222222;
background: linear-gradient(#fafafc, #ededf0 50%, #e3e3e5 50%, #e8e8eb);
}
button#two {
padding: 1px 8px;
margin: 0;
margin-right: 9px;
float: left;
font: 15px 'Times New Roman, Serif';
height: 25px;
width: 50px;
line-height: 10px;
/* box-sizing hack for chrome */
-webkit-box-sizing: border-box;
/* box-sizing hack for firefox */
-moz-box-sizing: border-box;
/* box-sizing hack for opera */
box-sizing: border-box;
/* padding-before hack for chrome */
-webkit-padding-before: 1px;
-webkit-padding-after: 0;
-webkit-padding-start: 1px;
-webkit-padding-end: 0;
/* padding-before hack for firefox */
-moz-padding-before: 0px;
-moz-padding-after: 0;
-moz-padding-start: 1px;
-moz-padding-end: 0;
/* padding-before hack for opera */
padding-before: 1px;
padding-after: 0;
padding-start: 1px;
padding-end: 0;
}
script.js
Cufon.replace('#two', { fontFamily: 'Arial' });
It's because of those two lines :
padding: 0.4rem;
height: 1.4rem;
That's too much padding for that height.
Try this
padding: 0;
height: 1.5rem;
I'm currently doing the redesign for this site: http://www.palosverdes.com/rpv2012/ and have run into a problem with repeating a gradient inside a div (cnews). The issue is that when the gradient is repeated on IE7, there is a color problem. It almost seems as if the blue on the image is lightened somehow. When I set the attribute to no-repeat, I don't get the rounded edges effect I'd like the achieve.
Here's the code in question:
<div class="box-noshadow" id="cnews">
<div id="spotlight">
</div><!--spotlight-->
<div onmouseout="document.getElementById('stop').start();" onmouseover="document.getElementById('stop').stop();" id="stopmarquee">
<div align="center" id="toptitle">
CITY NEWS & EVENTS
</div><!--toptitle-->
<div id="cnewscontainer">
<iframe align="middle" width="400px" scrolling="no" height="100px" frameborder="0" src="scroll_file_b/break2.cfm"></iframe>
</div><!--cnewscontainer-->
</div><!--stopmarquee-->
</div><!--cnews-->
and the relevant CSS:
#cnews {
width: 100%;
background-image:url(images/cnews-back.jpg);
float: left;
padding: 5px;
font-family:Arial, Helvetica, sans-serif;
overflow:hidden;}
#spotlight {
width: 50%;
height: 200px;
background-color: yellow;
float: right;
padding: 5px;}
.box {-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url(PIE.htc); /* This lets IE know to call the script on all elements which get the 'box' class */}
What solution can I pursue that will allow this to still render correctly in modern browsers as well? Should I use IE7-specific CSS?
Also, where can I look to see what HTML/CSS ie7 has problems interpreting compared to modern browsers?
Your width:50% on your stopmarquee is causing that item to drop down lower in IE7, instead of rising up next to the right floated spotlight div. This is causing your cnews container to expand down further, which is then causing your background image to repeat in the 'y' direction (like 3rror404 stated in his comment).
Your background image itself has a color shift within it, so that the top of the image is lighter than the lower part of the image, thus you are getting a lighter look when the image repeats in the 'y' direction.
You can correct the stopmarquee position by changing to width: 49% (which I don't think will hurt your layout), and that will probably resolve your issue. Otherwise, make the background image a solid color so that a repeat does not cause the issue.
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" />