IE 11 ignores font-size - html

In IE11 the font-size of my navigation bar is much much smaller than in other browsers.
In my CSS file, I set body { font-size:16px; } which I would like to make a default font-size for the document.
For all other elements I use em units.
I set font-size:1.5em for <a> in my navbar, which should be 24px, but IE11 ignores that and the font-size is only 16px. Same thing happens to some other text on the website (h1, h2, span).
When I inspect the element I see that IE11 shows 1.5em size as the one that is assign to it, but the result of calculation is only 16px.
Other browsers (including Edge) displays the website properly.
* {
border: none;
margin: 0;
padding: 0;
text-decoration: none;
line-height: normal;
list-style-position: inside;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
color: #666;
font-family: 'Roboto', Arial, Tahoma, sans-serif;
font-size: 16px;
font-weight: normal;
padding: 0;
margin: 0 auto;
background-color: #fff;
}
nav#top {
float: right;
display: inline-block;
}
nav#top ul {
list-style: none;
display: inline;
}
nav#top ul li {
list-style: none;
display: inline;
float: left;
}
nav#top ul li a {
display: block;
float: left;
padding: 30px 10px;
font-size: 1.5em;
font-family: 'Lato', sans-serif;
font-family: 'Arimo', sans-serif;
color: #fff;
text-shadow: 1px 1px 1px #060;
}
<nav id="top">
<ul class="clearfix">
<li>Label 1
</li>
<li>Label 1
</li>
<li>Label 1
</li>
<li>Label 1
</li>
<li>Label 1
</li>
</ul>
</nav>
I googled about font-size:100% !important and similar solution, but didn't find anything that works.

Please try this:
nav#top ul li a {
color: #fff;
display: block;
float: left;
font-family: "Arimo",sans-serif;
font-size: 24px;
padding: 30px 10px;
text-shadow: 1px 1px 1px #060;
}

This will not comply with every use case, but it's the way that has reduced my headaches dramatically.
To achieve an overall good cross browser experience, I would suggest that you in general remove font-sizes from the body tag and let the browsers do their magic.
Although - at first glance - it seems that you might loose control over the design, I have learned that you get more consistent results if you remove most of the font-size properties.

Related

Bullet points in unordered list moving all the way to the left on mobile

I'm trying to go through the basics of web development on MDN, and for some reason, the bullet points in my unordered list are getting moved all the way to the left of the body. I tried adding a padding of 0 to unordered lists, but that didn't help.
Here it is on a desktop:
https://imgur.com/a/mYFEmx4
Here it is on mobile:
https://imgur.com/a/Qx6DC8n
Html:
<ul>
<li>Movies</li>
<li>Television</li>
<li>Music</li>
<li>Books</li>
</ul>
CSS:
body {
font-family: 'Shadows Into Light', cursive;
text-align: center;
text-transform: uppercase;
background-color: gainsboro; /* silver/gainsboro/lightgray ? */
width: 800px;
margin: 0 auto;
padding: 0 20px 20px 20px;
border: 5px groove black;
}
h1 {
font-size: 60px;
color: #5A4568; /* dark purple from google */
margin: 0;
padding: 20px 0;
text-shadow: 0 0 10px black;
}
h2 {
color: darkred;
text-shadow: 0 0 15px black;
}
p, ul {
line-height: 2;
letter-spacing: 1px;
color: #B70404; /* dark red from google */
}
a {
line-height: 2;
letter-spacing: 1px;
color: #5A4568;
}
.coming-soon-subscript {
font-size: 10px;
color: #2D7F32;
font-weight: normal; /* these elements will be appearing in headers, which are automatically bolded. this is to remove the bold-ness. */
}
.clearfix {
clear: both;
}
hr {
margin: 0 -20px 20px -20px;
}
button {
text-transform: none;
}
ul {
padding: 0;
}
First, set display: inline-block to <ul>, then set text-align: left to <li>
You can set display: inline-block to ul in the css - but it will only bring the bullets closer to the list with all bullets left aligned while the text is centered. https://codepen.io/anon/pen/xQxVNJ
A workaround for this is to remove the default bullets of the ul using list-style: none in css and use unicode &#9679 in the HTML as the bullets. Like in this fiddle http://jsfiddle.net/tm794sq2/1/

IE8 CSS floated div issue(s)

I have inherited a site that has significant issues when displayed in IE8. Looks like a lot of them are div related, but I could use some help in fixing the problem.
The issue I am working on right now is that the divs for the phone numbers and flags are being displayed on two lines, instead of one. This ends up pushing down the content of the nav bar.
URL: fertileweb.com/demosite (slightly dated copy, latest is hosted locally)
IE8 view: !http://i.imgur.com/HaENEvu.jpg
IE10/firefox/chrome view: !http://i.imgur.com/q3mK5Bh.jpg
HTML
<div class="addressBox">
<span>Call for a private consultation</span>
<ul>
<li>
<img src="http://localhost/orh/wp-content/uploads/2011/12/USA.png">
(425) 646-4700
</li>
<li>
<img src="http://localhost/orh/wp-content/uploads/2011/12/canada.png">
(800) 394-2402
</li>
</ul>
</div>
CSS
.addressBox {
float: right;
padding-top: 35px;}
.addressBox span {
color: #231F20;
display: block;
font-family: 'Raleway',sans-serif;
font-size: 18px;
font-weight: 300;
letter-spacing: 1px;
line-height: 26px;
text-align: right;}
.addressBox ul {
float: left;
list-style: none outside none;
margin-bottom: 10px;
width: 100%;}
.addressBox li {
color: #231F20;
display: inline;
float: left;
font-family: 'Raleway',sans-serif;
font-size: 15px;
font-weight: 300;
line-height: 26px;
padding-left: 17px;}
.addressBox li img {
float: left;
margin: 3px 7px 0 0;}
Thanks!
Try to add this in your CSS styles
.addresBox ul, .addresBox ul li {
white-space:nowrap;
}
The problem seems to be about browsers size instead of browsers version.
If a wordwrap doesn't make it, I would suggest using the display: table; option, as such:
.addressBox { display: table; width: 500px; }
.addressBox li { display: table-cell; }
That usually solves floating errors.
working full code with demo here
jsFiddle
html code:
<div class="addressBox">
<span>Call for a private consultation</span>
<ul>
<li><img src="http://images.apple.com/global/elements/flags/22x22/usa.png"> (425) 646-4700</li>
<li><img src="http://images.apple.com/ca/global/elements/flags/22x22/canada.png"> (800) 394-2402</li>
</ul>
</div>
css code:
.addressBox {
float: right;
padding-top: 35px;
}
.addressBox span {
color: #231F20;
display: block;
font-family: 'Raleway',sans-serif;
font-size: 18px;
font-weight: 300;
letter-spacing: 1px;
line-height: 26px;
text-align: right;
}
.addressBox ul {
float: left;
list-style: none outside none;
margin: 0 0 10px 0;
padding:0;
width: 100%;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 0;
}
.addressBox li {
color: #231F20;
display: block;
float: left;
list-style: none outside none;
font-family: 'Raleway',sans-serif;
font-size: 15px;
font-weight: 300;
line-height: 26px;
padding: 0 0 0 17px;
margin:0;
}
.addressBox li img {
float: left;
margin: 3px 7px 0 0;
display:block;
}
Not 100% sure why, but adding the code below fixed the problem by making sure the element didn't get too small for the content - which would cause the text to wrap.I made sure to add it to a conditional style so it wouldn't have any other adverse effects.
.addressbox li {
width:133px;
}

Chrome occasionally renders my HTML/CSS differently

I just started learning HTML/CSS and am trying to make a personal site from scratch (no CSS tools)
When I tested my site in Firefox and IE last night it looked nice and clean as seen
When I tested my site in Chrome my links got moved around:
Does anybody know what happened here?
This is my markup:
<!DOCTYPE html>
<html>
<head>
<title>Home | Some Website!</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 960px;
font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.6em;
background-color: #FFFFF0;
margin: 0 auto;
}
#header {
border-style: solid;
}
#header img {
margin: 4px 0px 0px 4px;
}
#header ul {
list-style-type: none;
display: inline;
margin: 25px 30px 0px 0px;
float: right;
font-size: x-large;
}
#header ul li {
display: inline;
margin: 0 30px;
}
#header li a:link {
color: #FF00FF;
text-decoration: none;
}
#header li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="header">
<img src="http://i.imgur.com/YbAx7y1.png" alt="Temp Logo!">
<ul>
<li>About Me</li>
<li>Résumé</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Change #header ul css definition fromdisplay: inline; to display: inline-block;.
Every browser interprets things differently. You should be more specific than body { font-size: small }. I recommend using a px value unless you really intend to leave it up to the browser.

horizontal height is different between Chrome and Firefox

The page for Chrome and FF are very different, it seems like border in Chrome is inside the li, so the height is 130px, but in FF, the border is outside, so the height is 150px.
I have added more info for the code.
<div class="service_promos cf">
<ul>
<li>
<h2><a>item1</a></h2>
</li>
<li>
<h2><a>item2</a></h2>
</li>
</ul>
</div>
Here are css:
.service_promos {
margin-top: 0;
}
.service_promos ul {
width: auto;
margin: 0;
padding: 0;
list-style: none;
list-style-image: none !important;
}
.service_promos li {
background: none;
border-bottom: 10px solid #e2e1d6;
border-left: 10px solid #e2e1d6;
border-right: 10px solid #e2e1d6;
min-height: 130px;
margin-top: 0 !important;
padding-right: 1em;
list-style-type: none;
padding: 1em 2em;
display:block;
}
.service_promos h2 {
float: left;
margin-left: 5%;
margin-top: 0;
width: 70%;
color: #FF6526;
font-size: 2.5em;
font-style: normal;
font-weight: 700;
line-height: 1em
}
.service_promos h2 a {
color: #FF6526;
text-decoration: none;
}
The items that you provided appear to look just fine.
If you still aren't satisfied with their appearance, you may want to consider using either a Normalize.css or Reset.css reference within your Project / Page.
The purpose of these style-sheets is to help "normalize" all of the elements that are commonly used so that they appear similarly across different browsers and environments.
(I would recommend checking if you have any other add-ins or extensions that could possibly be interfering with the appearance of any of your elements)

CSS horizontal nav bar displaying diagonally in IE 5.5 - 7

The nav bar displays the correct way (horisontally) in IE 8 and above and every other browser. However only IE 5.5, 6 and 7 it displays diagonally. Can any body help?
.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}
.top-nav li {
margin-left: 220px;
}
.top-nav a {
display: block;
float: left;
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #FFF;
}
.top-nav a:hover {
background: #272727;
color: #18942f;
}
.top-nav .current_page_item a {
background: #252525;
color: #FFF;
}
HTML
<div class="top-nav">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li class="current_page_item"> Contact</li>
</ul>
</div>
Instead of floating each link, why not use display:inline on your li, display: inline works on IE 5.5
Also you need to remove "display: Block" as this is what is causing the links to move down.
.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}
.top-nav li {
display: inline;
}
.top-nav a {
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #aaa;
}​
http://jsfiddle.net/YJjya/
If you need to have your items be blocks, then use inline-block. Workaround to make it work on older version or IE can be found here: Work Around Inline Block
Also here is a handy piece of code to place immediately after your first head tag. It will only display is the user is using IE 7 or later and will tell them get their sh*t together and download a new browser. It is really not worth the time trying to make your site work on every IE version as you'll end up pulling your hair out to please a few people who obviously aren't internet savvy to begin with. As Mario said only 6% of the world still use IE6... But if you take a closer look at countries such as the US or UK that number is below 1%
After Head
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
CSS
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
I've seen this problem many times. You want to float the LI and not the A that's inside the LI.
All you need to do is remove [float:left] from [.top-nav a] class and add it to the [.top-nav li] class. Your CSS would be:
.top-nav ul {
margin: 0;
list-style: none;
line-height: normal;
}
.top-nav li {
margin-left: 220px;
float: left;
}
.top-nav a {
display: block;
height: 38px;
margin-right: 1px;
padding: 4px 30px 0 30px;
text-decoration: none;
font-size: 34px;
font-weight: bold;
font-family: 'Exo', sans-serif;
color: #FFF;
}
.top-nav a:hover {
background: #272727;
color: #18942f;
}
.top-nav .current_page_item a {
background: #252525;
color: #FFF;
}