Can someone tell me why FireFox is not rendering the Lucida Sans Unicode font type? It's a default websafe font according to w3schools. Chrome and IE both render it fine.
html, body {
height: 100%;
font-size: 100%;
min-width: 950px;
color: #000;
font: normal 12px "Lucida Sans Unicode" Geneva, Tahoma;
}
You probably want a comma after the Lucida part:
html, body {
height: 100%;
font-size: 100%;
min-width: 950px;
color: #000;
font: normal 12px "Lucida Sans Unicode", Geneva, Tahoma;
}
http://jsfiddle.net/GVCy2/
Related
I set a font-size as global. That changes when browser's width change(kind of fluid typography). I setted that to body element.
But when size of browser changes, then it changes(font-size). Why? and How can I stop this?
*,
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-size: calc(16px + .75vw);
}
.container {
background-color: #d1c6c6;
padding: 10px;
min-height: 100vh;
}
.container__box {
font-weight: bold;
color: white;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding: 15px 10px;
background-color: #8b2be4;
width: 90vw;
font-size: 30px;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="container">
<div class="container__box">Gridfan Jessica</div>
</div>
But when size of browser changes, then it changes(font-size). Why?
Because you used vw font size changes when browser size changes.
How can I stop this?
Use px instead. If that's not eye comfortable, Use media query for different font sizes for different screen widths.
I have two DIVs, which I would like to stack vertically …
<div id="searchContainer”>…</div>
<div id="searchResultsContainer”>…</div>
I have the following styles assigned to them …
#searchContainer {
padding: 10px;
font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
background-color: tan;
width: 100%;
}
#searchResultsContainer {
background-color:cyan;
font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
padding: 5px 0px 5px 0px;
width: 100%;
}
However it seems that adding padding to my top DIV causes it to be wider than the DIV below it. I would like both DIVs to be the same width, but I would like the top DIV to have the padding so that the elements don’t scrunch up to the border. How do I do that? Here is the Fiddle that illustrates my problem — https://jsfiddle.net/1zb5mqmo/ .
Use box-sizing: border-box; on the padded div:
#searchContainer {
padding: 10px;
font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
background-color: tan;
/* max-width: 1000px; */
width: 100%;
box-sizing: border-box;
}
box-sizing: border-box The width and height properties include the content padding and border
box-sizing: content-box The width and height properties include only content
Updated JSFiddle
In this case, simply remove the width and you can combine both padding and border without throwing it off
#searchContainer {
padding: 10px;
font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
background-color: tan;
}
#searchResultsContainer {
background-color:cyan;
font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
padding: 5px 0px 5px 0px;
border: 5px solid steelblue
}
<div id="searchContainer">...</div>
<div id="searchResultsContainer">...</div>
When I specify the font in body style in CSS it works ok. But when I do the same for div it has no effect.
.tel {
display: inline-block;
background-color:rgba(0,0,0,0.5);
height: 60px;
padding: 30px 30px 0 0;
font: 24pt/0.64 "Consolas", Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: cover;
}
The problem was that i needed to use styling like this
.tel a{
font: 24pt/0.64 "Consolas", Arial, Helvetica, sans-serif;
color: white;
padding: 0 0 0 50px;
}
try with !important and see if it has an effect, if so, an other class is applied on your DIV.
I have a bar on the bottom of my webpage and the code is the following:
<div class="casa5">
<label style="margin:auto;"><font color="orange">★</font> my text <font color="orange">★</font></label>
</div>
And here you can see the CSS:
.casa5 {
background-color:#0C0C0C;
width:100%;
height:24px;
position:absolute;
left: 0;
right: 0;
text-align:center;
font: 90% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
color:#E8E8E8;
}
This div is displayed in the bottom of the page as you can see here:
I am using firefox. By the way I am in trouble because when I open the page with Chrome, I have this view:
As you can see, when you open the page with Firefox, the bar lies on the bottom of the page, but when I load the same page with Chrome, where is a gap between my div and the bottom.
I want the bar to be displayed on the bottom of the page only when I scroll down until the end. How could I fix this?
You just need to add bottom: 0 to your css:
.casa5 {
background-color:#0C0C0C;
width:100%;
height:24px;
position:absolute;
left: 0;
right: 0;
text-align:center;
font: 90%'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
color:#E8E8E8;
bottom: 0;
}
Also, you should probably change position:absolute; to position: fixed; for it to always be at the bottom whether the user scrolls or not.
Fiddle
However, if you would like for it to always be at the end of the page, you can do something like this:
html {
position: relative;
}
.casa5 {
background-color:#0C0C0C;
width:100%;
height:24px;
position: absolute;
left: 0;
right: 0;
text-align:center;
font: 90%'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
color:#E8E8E8;
bottom: 0;
}
It changes the html to position: relative and keeps the footer at position: absolute
Fiddle
As suggested by http://mystrd.at/modern-clean-css-sticky-footer/
Try adding bottom: 0; to your CSS.
Working fiddle: http://jsfiddle.net/gzX7y/
I am having a hard time to create make the background color stretch across the browser
here is some code
body {
font-size: 1.1em;
font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", "Calibri", sans-serif;
margin: 0px auto;
padding-bottom: 25px;
width: 980px;
}
div#black_bar{
background-color: #000000;
}
div#header {
height: 66px;
font-family: arial;
margin: 0 auto;
color: #FFFFFF;
margin-top: 5px;
}
of course as you can see i have specified the width to be 980px in the body and this apply to the header of course, any ideas how to solve this
and by the way this black bar is actually a div containing the header in it
Thanks in advance.
You will need the header wrapper to be inside the body with width 100%, and to specify width=980px both on the header and content below, like this :
CSS
body, html{
width:100%;
}
div#black_bar{
background-color: #000000;
width:100%;
}
div#header {
height: 66px;
font-family: arial;
color: #FFFFFF;
margin-top: 5px;
width:980px;
margin:0 auto;
}
#content{
font-size: 1.1em;
font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", "Calibri", sans-serif;
padding-bottom: 25px;
margin: 0 auto;
width: 980px;
}
HTML
<body>
<div id="black_bar">
<div id="header">
</div>
</div>
<div id="content">
</div>
</body>