I have a problem getting the fonts in links for a menu to look the same across browsers. It wouldn't be such a problem if it was just a small difference, but the fact of the matter is that in IE 9 the font looks to be at least a couple of pixels or more bigger than in the others, while using the exact same css.
Now being in a main menu, this looks pretty bad. Anyone know why this happens, and what I can do about it?
Here's the css rule:
ul#menu li a
{
width: 80%;
text-align: center;
font-family: HelveticaNeueLight, Helvetica, Arial, Sans-Serif;
font-weight: bold;
font-size: 12px;
text-decoration: none;
line-height: 38px;
color: #333;
text-shadow: 0px 1px 0px #e5e5ee;
display: block;
/*Hiding dots around clicking on links*/
outline: none;
overflow: hidden;
}
If this is truly vital, and you do not mind using Conditional Comments to send IE-targeted CSS to the browser, you can create a Conditional Comment stylesheet for IE 9 like so:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="/ie9.css" />
<![endif]-->
With another CSS rule for the font-size property in this css file.
Otherwise, a good first step is to always use a CSS Reset to normalize between browsers. Commonly used resets are Eric Meyers and YUI.
Perhaps the CSS for some other property is inconsistent? I'd try using a CSS reset file (http://developer.yahoo.com/yui/reset/) or adding zoom: 100% in there to see if that fixes it.
Related
I'm trying to update some theme from fontawesome 4 to 5. So far everything seems to work fine, the icons in i tags are displayed. Except for one specific icon that displays as a css pseudo-element.
I followed what the FA docs said but the icon still doesn't appear. Not even as a square, just as a plain nothing.
Here's the codes used. It's supposed to display an icon in the middle of the hr :
html head:
<link href="css/font-awesome/css/all.min.css" rel="stylesheet" type="text/css">
html body:
<hr class="star-light">
css:
hr.star-light:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f005";
display: inline-block;
position: relative;
top: -.8em;
padding: 0 .25em;
font-size: 2em;
font-style: normal;
font-variant: normal;
text-decoration: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
I also tried to put the conflict detection script and it actually found one... But it doesn't make sense since there's only one conflict: the fa's css itself all.min.css... And i'm not even sure it's linked to the problem... It's been 2 hours i'm stuck there and my searches didn't give me anything relevant. Anyone have an idea of what's going on? Or things i can try?
Here's the whole repository, in case you want to try. it's a hugo theme. My repo already includes fontawesome 5:
https://github.com/maxlefou/hugo-freelancer-theme
EDIT: I just found the issue. It's just silly: the problem only occurs on chrome and chromium browsers. Everything works on Firefox. Go figures...
Thanks for your help.
Try changing the font-family: "Font Awesome 5 Free"; to font-family: "FontAwesome";
This will solve the issue.
I am not able to figure out why my button styles/colors are getting removed when I try to print my webpage. I am using bootstrap for some of my styles.
.button.primary {
font-size: 15px;
font-size: 1.5rem;
line-height: 18px;
line-height: 1.8rem;
background-color: #EEB111;
color: #FFF;
font-weight: 600;
text-decoration: none;
outline: 0;
}
It has to do with bootstrap. If your bootstrap includes print media styles, because it might be not customized in a way it excludes them, some styles will get changed.
(Hintergrundgrafiken = background graphics)
Also this is important, as you already did correctly in your screenshot:
To print the page with colors and stuff, e.g. in Firefox you have to tell the browser by clicking on File > Page Setup... > Print background or Print (icon in the top right menu) > Page Setup... > Print background.
Are you using #media print for printing those styles e.g.
#media print {
body { font-size: 10pt }
}
If not then follow here
https://developer.mozilla.org/en-US/docs/Web/Guide/Printing
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Media
https://www.w3.org/TR/CSS2/media.html#at-media-rule
Hope this will help you in some way (y).
It is getting removed because css-stylesheets have attribute known as media it defines in which media this css file will work.
try to put this on your style sheet media="all" or media="print"
<link rel="stylesheet" type="text/css" media="print" href="print.css">
I specified a rule for all IE versios, but its not working for some reason.
<!--[if IE]>
<style type="text/css">
#topmenu LI.fisrt {
padding: 5px 5px !important;
font: 13px/43px sans-serif !important;
text-transform: uppercase;
}
</style>
<![endif]-->
From MSDN:
Support for conditional comments has been removed in Internet Explorer 10 standards and quirks modes for improved interoperability and compliance with HTML5
The idea is that IE10 has much better standards support than older IE versions and there should no longer be any need to conditionally target it.
Maybe I misunderstand how CSS Conditional Comments work, but I thought the bit in the middle of the conditional would only show up for IE... however Chrome and Firefox are both evaluating it, and having the left margin be 35px not -20px... What am I missing?
.policies li li { margin-left: -20px; }
<!--[if IE]>
.policies li { margin-left: 45px; }
.policies li li { margin-left: 35px; }
<![endif]-->
Conditional comments only work in HTML, not CSS. A common technique is to load a separate external stylesheet just for IE. Lately I've taken to just loading a single one for IE <= 8 and then using hacks inside that stylesheet to target IE 6 / 7 / 8 respectively.
Put
.policies li { margin-left: 45px; }
.policies li li { margin-left: 35px; }
into separate file like styles-ie.css, then include it in your page after all common CSS files and wrap in a conditional comment:
<!--[if IE]>
<link to your styles-ie.css />
<![endif]-->
Here is a Microsoft's reference.
I'm using the following css :
.GridDraggedRow tr td.firstCol{
padding: 2px 10px 0 0;
text-align: right;
vertical-align: top;
width: 1px;
width: 1%\9; /* IE9 and below */
white-space: nowrap;
}
As you can see, I'm using a pretty ugly css hack.
My problem is that this hack is removed from the minified css file I'm generating with AjaxMin.
It is a post-build step in our delivery system so we're gonna stick with AjaxMin.
The ajaxmin documentation explains that several comment-based hacks are allowed with the use of the 'hacks' flag, ex:
ajaxmin -css -comments:hacks GridLayout.css
Unfortunately the \9 hack is not allowed.
What can I do ?
Parsing the generated file isn't a good idea in my opinion.
I guess my best choice is to insert this hack in another non-minified file or directly in the html page between tags...
Do you guys have a better idea ? It would be great that ajaxmin provide an exclusion section...
You shouldn't be using any of those ugly hacks!!
Use Paul Irish's conditional comments method instead.
Use this at the opening of your HTML tag:
<!--[if lt IE 10 ]> <html class="lt-ie10"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
Then, in your CSS, use this:
.GridDraggedRow tr td.firstCol{
padding: 2px 10px 0 0;
text-align: right;
vertical-align: top;
width: 1px;
white-space: nowrap;
}
.lt-ie9 .GridDraggedRow tr td.firstCol{
width: 1%;
}
This is much cleaner, and much more reliable.