When I set the font size to a specific pixel height, the computed font size is 1.333 times the size I've set in my CSS. However, if I set the font size as a percentage, the correct size is used. This happens in every browser that I've tried, including Firefox 3.6.28, Firefox 53.0.3 (both 32- and 64-bit), Internet Exploiter, Safari, Chrome and Opera.
Here is a whittled-down example of the problem:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>TocMenu Test</title>
<link href="/style/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body
{ background:#000000 url('/graphics/l5-back-eso1213a-2K.jpg') repeat fixed;
color:#ffffe8;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:normal;
}
img
{ border:0;
margin:0;
padding:0;
}
#menuRoot *
{ min-width:0;/* peek-a-boo bug fix for IE7 */
position:relative;/* peek-a-boo bug fix for IE6 */
}
#menuRoot img
{ padding:3px;
}
.tocRoot
{ padding:0;
}
.tocLevel1
{ font-size:16.8pt; /* 120% */
font-weight:bold;
margin-top:9px;
}
.tocLevel2
{ font-size:15.4pt; /* 110% */
font-weight:bold;
margin-top:6px;
}
.tocMenuOpen
{ background:none;
color:#ffff66;
list-style:none;
}
.tocMenu1
{ padding-left:30px;
}
.tocLink, a.tocLink
{ color:#99ff99;
text-decoration:none;
}
.tocBtn, .tocBtnNot
{ display:inline-block;
text-align:left;
vertical-align:text-top;
width:14px;
}
</style>
</head>
<body>
<ul id="menuRoot" class="tocMenuOpen tocRoot">
<li>
<p class="glueDown">
<span class="tocBtn" id="menuHome_bn"><img src="/graphics/imgOpen.gif" alt="menu state indicator" /></span>
Home
</p>
<ul id="menuHome" class="tocMenuOpen tocMenu1">
<li>
<p class="glueDown">
<span class="tocBtnNot"> </span>
Today's News
</p>
</li>
</ul>
</li>
</ul>
</body></html>
If I change the tocLevel1 and tocLevel2 font-size values from their pixel heights to the percentage values shown ih the CSS comments, the page works correctly.
Why does every browser decide to use a font size one third larger than what is set in the CSS when the font-size value is set to a specific height?
You're mixing px (pixels) and pt (points) in your font sizes. 120% of 14px would be 16.8px, but you've specified the units as points, which are not the same thing, and are larger.
I'd suggest sticking to one unit to make it easier to adjust things relatively. (Or use an absolute measurement as your base size and use relative ones for everything else.)
Related
I'm using printing media queries for an app that is working fine on Chrome/Edge/Firefox but is failing on Safari. I'm using height 100% in order to make it fill the printing page, on safari it seems to be using the percentages as a percentage of the element itself. I have put simplified code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>print test</title>
</head>
<style>
.big{
border:5px solid black;
}
#media print {
.breaker{
page-break-before: always;
}
.big{
display:block;
position: relative;
height:100%;
}
}
</style>
<body>
<svg class = "big" width="700px" height="1000px"></svg>
<div class = "breaker"></div>
<svg class = "big" width="700px" height="1000px"></svg>
<div class = "breaker"></div>
<svg class = "big" width="700px" height="1000px"></svg>
</body>
</html>
According to Can I Use Safari doesn't support #page and page-after-break
This is a similar question on StackOverflow -
Safari Print Media Queries not matching other browsers / cutting off
Try setting a specific size for the body and HTML.
At the end of my tether with this one.
My website: timjstevenson.com
Renders on everything except windows phone. No errors.
I am using the recommended head function
if (navigator.userAgent.match(/IEMobile\/10\.0/))
{
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(document.createTextNode("#-ms-viewport{width:auto!important}"));
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
And the recommended viewport metas
<meta name="viewport" content = "user-scalable=yes, maximum-scale=1, width=device-width /">
And the recommended CSS elements
#-webkit-viewport{width:device-width}
#-moz-viewport{width:device-width}
#-ms-viewport{width:device-width}
#-o-viewport{width:device-width}
#viewport{width:device-width}
but the site still renders at full size and doesn't handle the fixed / relative elements properly.
I have done a lot of research on this and read all the relevant blogs / forums.
The top of my CSS looks like this...
html
{-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-font-smoothing:antialiased;}
body
{max-width:768px; min-height:1028px;
margin-left:auto;
margin-right:auto;
background-color: #ffffff;}
#font-face {font-family: HelveticaNeue;
src:url(fonts/HelveticaNeueLTStd-Lt.otf);}
#font-face {font-family: FuturaStd;
src:url(fonts/FuturaStd-Book.otf);}
div, span
{font-family: HelveticaNeue, Arial, sans-serif;
font-size:120%;
font-weight:normal;
text-align:justify;
color:#202020;}
div.sitepage
{position:relative;
width:700px;
min-height:900px;
top:180px;
margin-left: auto;
margin-right: auto;
padding: 5px 10px 5px 10px;
z-index:1;}
And the top of the html looks like this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content = "width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="apple-touch-icon" href="images/tjs_logo.png"/>
And I have read these but no luck...
http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html
stackoverflow.com/questions/14654425
IMPORTANT EDIT: The issue appears to be with position:fixed DIVs. These DIV elements do not scale under windows phone IE.
SOLVED.
The problem is with Position Fixed DIVs with a specified width in pixels.
If the viewport is being controlled by media queries (specifically for WinPhone 7/8) then specifying a width greater then the screen width in a fixed div causes the problem.
Here is the start of my altered CSS - note the div.header and div.site entries. NO SPECIFIED WIDTH - just 100% inherited from body with a max-width thrown in.
body
{width:100%;
max-width:768px;
min-height:1028px;
margin-left:auto;
margin-right:auto;
background-color: #ffffff;}
#font-face {font-family: HelveticaNeue;
src:url(fonts/HelveticaNeueLTStd-Lt.otf);}
#font-face {font-family: FuturaStd;
src:url(fonts/FuturaStd-Book.otf);}
div, span
{font-family: HelveticaNeue, Arial, sans-serif;
font-size:120%;
font-weight:normal;
text-align:justify;
color:#202020;}
div.site
{max-width:768px;
min-height:1028px;
margin-left:auto;
margin-right:auto;}
div.header
{position:fixed;
z-index:5;}
And Here are the media and viewport elements I used.
#media screen and (max-device-width: 25em)
{body
{-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
-text-size-adjust: none;}}
#-webkit-viewport{width:device-width}
#-moz-viewport{width:device-width}
#-ms-viewport{width:device-width}
#-o-viewport{width:device-width}
#viewport{width:device-width}
And here is the head viewport meta tag in the html
<meta name="viewport" content = "width=device-width, maximum-scale=1.0"/>
Hope this helps.
T.
UPDATED:
I have found out this : margin: 0 auto; in the body {} block of the style sheet makes the header move. If I remove it, the banner header picture moves to the right. So that piece of line is the culprit. Does anybody know why?
As I have progressed (somewhat in the mystery) the question goes the other way.
I have this header file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<link rel="stylesheet" href= "<?php echo base_url() ?>css/main_style.css" />
<link rel="stylesheet" href= "<?php echo base_url() ?>css/webform.css" />
</head>
<div id="header" class = "header"><h1 class="header">Real Estate Worldwide</h1> </div>
<body>
Which connects to this View file (I am on MVC)
The code in the view has nothing to do with the issue, I asked so we'll skip it.
Then I have this Style sheet.
<style type = "text/css">
::selection{ background-color: #E13300; color: white; }
::-moz-selection {background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
body {
background:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
#header {
float:center;
background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
font-family: 'trebuchet ms',geneva,arial,tahoma,sans-serif;
font-size: 10px;
margin: 0 auto;
margin-top: 2px;
padding: 0;
width: 1050px;
h2 {color:#ffffff;}
}
.header {
color:#ffffff;
}
ISSUE:
If I remove the 3 selection ::selection lines from the style sheet, the gradient effect, from the background body disappears.
If I leave it there, then the gradient effect works but then the #header jpg file that you see down the style sheet changes its position from the centered marging: 0 auto; to the right.
You have the full code there. I am puzzled as hell, because I cannot understand why something like ::selection would have a radical effect on the code snippet that refers to body {} where the call to the gradient picture is and also affects the font style within that body {}
II UPDATE
Here is the Controller
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Home_c extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->model('home_model');
}
public function index ()
{
$this->load->view('header');
$this->load->view('home');
}
public function load()
{ $this->load->view('header');
$data['paises'] = $this->home_model->devolverPaises();
$data['ofertas'] = $this->home_model->devolverOfertas();
I wouldn't be surprised if the strange effects you're seeing are tied to not having proper markup.
EDITED: As I made comments, I realized the may not have been clear enough for OP.
Your HTML structure needs to be valid, to start with:
<!DOCTYPE html >
<html>
<head>
<!-- title, meta, styles, etc go here -->
</head>
<body>
<!-- all your other content goes here -->
</body>
</html>
Make sure that when your page renders in the browser, when you look at View Source, you see those container elements in their proper places, nested as such. Better yet, run your page through a validation service. (http://validator.w3.org/ for example)
You have invalid CSS:
#header {
float:center; /* no such attribute... only left, right, none, or inherit */
h2 {color:#ffffff;} /* you can't nest tags inside other specs, except with the use of pre-processors like SASS or LESS */
}
I am trying to set up a basic layout where the header and footer carry on across the width of the page no matter what resolution the user is set to.
I have managed this but now I am having a problem where the main container div will not expand properly height wise to encompass the divs within. It seems to expand to only a certain height and then goes no further, no matter what height or min-height style you change.
Here is the basic structure:
<div id="page">
<div id="content">
</div>
</div>
<div id="footClear"></div>
<div id="footer">
</div>
The footer code is to force the footer to stick to the bottom of the page no matter the height of the main container (id="page")
My CSS for these parts is:
#page {
margin:0 auto;
width:1000px;
background:red;
padding:0px;
min-height:100%;
position:relative;
margin-bottom:-47px;
}
#content {
}
#footer {
width:100%;
height:22px;
position:relative;
margin:0 auto;
background:#000000;
text-align:center;
padding-top:3px;
font-size:12px;
}
#footClear {
height:22px;
clear:both;
}
A link to what to my site is here if you want to have a look: www.therapyoracle.co.uk/new
You can see the page div is in red, and does not carry on down the page.
On your live site, #page has height: 100% set, which is causing the problem.
It's coming from your ie6.css! This is how you're trying to make it load in only IE6:
<!—[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="assets/css/ie6.css" />
<![endif]—>
The hyphens in the HTML above are wrong. Replace that HTML with this:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="assets/css/ie6.css" />
<![endif]-->
And ie6.css will then only be loaded in IE6, instead of all browsers, and your problem will be fixed.
If you take the height out of you body this will fix it for you as below
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
padding: 0;
margin: 0;
}
Delete margin-bottom:-47px; and delete #page {height: 100%;} in ie6.css
position:fixed that doesn't work for Internet explorer 6. I can't really understand the fixes found on google. I need it to work in IE6, IE7, IE8 & FireFox 3.0.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>Sidebar fixed</title>
<style type="text/css">
#wrapper {
position:relative;
width:900px;
margin:0 auto 0 auto;
}
#sidebar_left {
position:fixed;
height:200px;
width:200px;
border:1px solid #000;
}
#sidebar_right {
position:fixed;
height:200px;
width:200px;
margin-left:700px;
border:1px solid #000;
}
#content {
position:absolute;
height:2000px;
width:480px;
margin-left:210px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar_left">
<p>Left sidebar</p>
</div>
<div id="sidebar_right">
<p>Right sidebar</p>
</div>
<div id="content">
<p>This is the content</p>
</div>
</div>
</body>
</html>
Don't support IE6! The sooner people stop hacking sites about for IE6, the less traction it will have and the quicker it will die! Or, add this code after your first style block;
<!--[if IE 6]>
<style type="text/css">
#sidebar_right, #sidebar_left {
position:absolute; /* position fixed for IE6 */
top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
</style>
<![endif]-->
The result isn't super-smooth, but it does work.
UPDATE
I wasn't too clear on how this should be used; simply add the id (or class) of any elements that have "position:fixed" to the declaration list at the start of the above block and they will behave themselves in IE6.
yes IE6 sucks. here's the hack...
_position: absolute;
_top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
that basically tells IE6 to keep it absolutely positioned in the top left even as it scrolls.
this should go under the rest of your css for the element so it over-rides it in IE6.
here it is for your left bar...
#leftBar {
position:fixed;
top:0;
left:0;
width:200px;
_position:absolute;
_top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}
I just tested this on IETester's version of IE6 and it worked great and... No Jitter, Whoo!
Let say you have a element with a class of box for example...
.box {
position: fixed;
top: 0px;
left: 0px;
}
Replace the opening <HTML> tag with conditional IE statements...
<!--[if IE 6]> <html id="ie6"> <![endif]-->
and
<!--[if !IE]--> <html> <!--[endif]-->
Then like MatW & mitchbryson suggested use 'expression' to simulate position fixed.
Note: This code goes after the original element's styles in the CSS.
#ie6 .box {
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
The problem is that on any page scroll the element will jitter, this is one way to compensate...
Note: This code goes at the top off your CSS or after your styled 'HTML { }' in your CSS.
#ie6 {
background-image:url(about:blank);
background-attachment:fixed;
}
According to Thomas Aylott # SubtleGradient.com ,
"... This forces the processing of the CSS before the page is redrawn. Since it’s processing the css again before redrawing, it’ll go ahead and process your css expressions before redrawing too. This gives you perfectly smooth position fixed elements!""
article link: http://subtlegradient.com/articles/2009/07/29/css_position_fixed_for_ie6.html
For example, all together...
<!--[if IE 6]> <html id="ie6"> <![endif]-->
<!--[if !IE]--> <html> <!--[endif]-->
<HEAD>
<STYLE>
#ie6 {
background-image:url(about:blank);
background-attachment:fixed;
}
.box {
position: fixed;
top: 0px;
left: 0px;
}
#ie6 .box {
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
</STYLE>
</HEAD>
<BODY>
<div class="box"></div>
</BODY>
</HTML>
Found this solution which I tweaked ( Basically the lines I changed was: $('#sidebar_left').css('top',document.documentElement.scrollTop); ):
// Editing Instructions
// 1. Change '#your_div_id' to whatever the ID attribute of your DIV is
// 2. Change '175' to whatever the height of your header is, if you have no header, set to 0
/********************************
* (C) 2009 - Thiago Barbedo *
* - tbarbedo#gmail.com *
*********************************/
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
if (document.documentElement.scrollTop > 299 || self.pageYOffset > 299 && document.documentElement.scrollBottom > 100) {
$('#sidebar_left').css('top',document.documentElement.scrollTop);
$('#sidebar_right').css('top',document.documentElement.scrollTop);
} else if (document.documentElement.scrollTop < 299 || self.pageYOffset < 299) {
$('#sidebar_left').css('top','299px');
$('#sidebar_right').css('top','299px');
}
}
}
It jitters and looks bad, but work on all browsers including IE6.
I recently wrote a jQuery plugin to get position:fixed working in IE 6+. It doesn't jitter on scroll, it looks at capability (not user-agent), works in Internet Explorer 6, 7, 8.
If you use strict mode in IE7+ position:fixed will be honoured, but by default IE7+ operates in Quirks Mode. This plugin checks for browser capability, and if it doesn't honour position:fixed, then it implements the jQuery fix.
http://code.google.com/p/fixedposition/
Something like this may work for you:
$(document).ready(function(){
$("#chatForm").fixedPosition({
debug: true,
fixedTo: "bottom"
});
});
You may need to make some minor CSS adjustments to get it working for your code. I'm working on "offset" values as options as we speak.
It is possible to do it with CSS expression, but with some extra hack to get a smooth scrolling:
html, body {
_height: 100%;
_overflow: hidden
}
body {
_overflow-y: auto
}
#fixedElement {
position: fixed;
_position: absolute; / ie6 /
top: 0;
right: 0
}