I'm developing a website that includes flashcards for learning Chinese characters. The problem is that IE renders fonts slightly higher on the line than do other browsers I've tested. This isn't normally a big deal, but with a flashcard, the font is so big that the difference in placement becomes very noticeable.
I uploaded a dummy version of the webpage here: http://mandaclu.com/dummy/flashcard.html.
Open the link in both Firefox/Chrome and IE to see the difference (To see a really simple page with the same problem, use this link: http://mandaclu.com/dummy/test.html).
I've looked all over and haven't found any way to get that character to sit in the same place on the page regardless of the browser. Does anyone have any ideas? (CSS resets haven't worked either) Thanks for any help you can provide.
Looks like a difference in the way IE and other browsers render text with line-height > text-size.
Try setting line-height = text-size and add a top padding to force the text down instead.
eg.
#char {
display: inline-block;
font-size: 180px;
line-height: 180px;
margin: 0;
padding: 30px 0 0 0;
position: relative;
vertical-align: bottom;
width: 260px;
}
Related
![enter image description here][1]So i have created a website that i have tested and it works fine in all major browsers, except for when I am running windows 8. Windows 7works fine but i windows 8 a lot of my css is being affected.
I was wondering if anyone knew a list of things that were different or displayed differently because of this as i really do not want to re write the whole thing!
It appears as though padding might be adding to the height/width properties or something im not quite sure but would appreciate a heads up on any niggly things anyone else has found before i try tearing my css to pieces!
css
.whitebox-index {
background-color: #fff;
max-width: 1044px;
min-height: 1055px;
position: relative;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
#banner {
width: 1024px;
height: 370px;
/*margin-bottom: 10px;*/
position: absolute;
background-image:url(../images/bannerhomebackground.png);
}
In chrome etc this displays as a my white background witha banner at the top and has the even white gap around it but in windows 8 ie this has the 10px gap to the left and top but the right has a 30mm gap.... the width has increased...
I just needed to uncheck "Display intranet sites in Compatibility View" from the Compatibility View Settings menu.
Edit:
Worth noting that this will affect all of your intranet sites. You could alternatively use the x-ua-compat meta tag to set the docmode to Edge. – Jonathan Sampson
I have a button class anchor CSSed as follows:
.button {
display: inline-block;
width: 8.0em;
text-align: center;
text-decoration: none;
background-color: #840;
letter-spacing: 1px;
line-height: 2.2em;
padding: 0.5em 0.2em;
border: 4px solid #420;
}
See below for an example with FAQ tapped.
It doesn't happen reliably, but typically only the first time a button is tapped, sometimes when you go back the button is back to normal, other times it is wider, other times it looks larger (meaning width, height and font are larger), other times all the buttons look smaller!
If you want to try it out, you need to use Safari on an iPhone -- iMac and iPad seem to work okay.
I had a similar situation lately on the iPhone (well itouch but it is using the same iOS) I had a paragraph that for some unknown reason the text was reflowing and becoming bigger than the heading text. But rotating the device the text reflowed and changed size. I fixed it with this:
-webkit-text-size-adjust: 100%;
I found this answer originally here:
Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?
Hope that works for you.
I search for a long and I can't find an answer :/
In Chrome (Internet Explorer, Konqueror, and many others) the h1 margin at bottom is added to .blue. However, Firefox respect the css rules properly.
Any suggestion?
HTML
<div class="red"><div class="blue"><h1>Hello World!</h1></div></div>
CSS
.red{
background: red;
/* All this contain margins */
float:left;
/* padding-top:1px; */
/* display: inline-block */
/* overflow: hidden */
}
.blue{
background: blue;
min-height: 60px;
}
h1{
margin: 10px 0 20px;
background: green;
}
Gecko-based: [This one is the correct, I guess]
Webkit-based, KHTML-based and Trident shell:
CODEPEN
http://codepen.io/marquex/pen/fzsIk
The margin issue you are having is related with the min-height rule in the .blue div. Replace it for a height rule if it is possible to get the same result in Chrome and Firefox.
I have no idea why that is happening when using min-height though. Maybe is some kind of Chrome's bug.
Define your fonts, this is the problem, every browser have different settings for default fonts, headings (h1...h6) respectively. So the actual height of the text in h1 will be different and this is the cause for different margins at bottom/top.
As you can see, Gecko-based browser uses a sort of Garamond-styled font, all other use by default Times New Roman, of course if user was predefined the fonts for pages, sometimes everything may look the same across all browsers, example:
h1{
margin: 10px 0 20px;
background: green;
font-family: "Your-favorite-font", Times, sans-serif;
font-size: 2em;
}
RESOLVING
After a long search I reported the issue on chromium repo. And they accept it as a bug. So, if anyone wants to know the final of this history can follow the fix process here.
Thanks anyone who try to help us, but let me add that I did not believe that Stackoverflow can be able to not see an error of this magnitude. I am a little less stackoverflowita.
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.
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" />