.header{
z-index:3;
position:fixed;
width:100%;
height:10%;
top:0px;
background-color: white;
}
.header .header-bg {
background-color: rgba(248,221,225,0.7);
display:table;
margin:auto;
height:30px;
width:30%;
}
.header .title-center{
text-decoration: underline;
position:absolute;
margin:0;
left:50%;
top:60%;
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<link rel="stylesheet" href="css/index.css">
<div class="header">
<div class="header-bg"> </div>
<div class="title-center">header</div>
</div>
</body>
</html>
When I developed a web page, I tested it using Chrome. After finishing, I tested it with firefox/IE/Edge, and found the font-size are much smaller than it used to be in Chrome. When I checked the debug tool on Firefox, it seemed that the size of the same div is not the same for firefox and chrome. Actually, the difference is great.
More wierd, when I click into a modal in chrome, and refresh the window, the path changed to index.html#, then, the layout and div size is almost the same as the other browsers.
Anyone has idea why this happened? and How to deal with it? Thanks in advance!!
The following is part of my code for header.
You should add any default font-family in your css after that you can see same fonts on all browser
and add reset css from http://html5doctor.com/html-5-reset-stylesheet/ in header section!
a) Each browser will have their own default font size predefined.
1) For chrome : Setting > Show Advanced setting > Web Content > Font size
2) For Firefox : Tools > Options > Content > Fonts & Color
Whenever the CSS doesn't have font size mentioned in their styles, browser will use their predefined default font size. Better define font-size in your CSS.
b) index.html# issue
Whenever you click on any clickable elements usually anchor hyperlink, browser tries to navigate to that page or section where the href="" if pointing. When a hyperlink doesn't have href="" we'll get "#" as a dummy pointer. Example
Test link or Test link
Refer : https://developer.mozilla.org/en/docs/Web/HTML/Element/a
Each web browser has different defaults for font so you want to reset you CSS before adding your custom style.
Have a read of http://cssreset.com/what-is-a-css-reset/
The problem may be initial values of some elements that differ through browers. The easiest and most reliable way to solve it would be using something like Normalize.css.
Related
I'm working on styling my web page on a separate CSS file. I have created a link on my HTML file to apply the styling effects to my web page but it doesn't show any effect.
I tried the most basic styles to see if there was an effect to my webpage but nothing happened. I tried writing the codes with Microsoft Visual Studio, and then Notepad++ but still, no effect occurred. I also tried opening my web page using the latest version of Mozilla Firefox, Internet explorer and Microsoft Edge to see any effect but nothing happened.
I tried styling my h1 element using the codes I'll show on the next field
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="Stylesheet" href="../css/staret.css" type="text.css">
</head>
<body>
<h1> Football lives </h1>
</body>
</html>
on my staret.css file, here's what I wrote:
h1 {
color: Red;
}
I expected to see "Football lives" in red color but the actual output was the default color black.
No need to install CSS plugin. There is a little error in your code while linking CSS with HTML.
It should be, type = "text/css" in place of "text.css"
No. CSS3 is included. No need to think about it as an 'addon' or separate thing.
Your issues are with however you are authoring the file. Try putting it in a jsFiddle. : )
.box {
width: 20px;
height: 20px;
background: #ff0066;
padding: 1rem;
transform: rotate(20deg); /* CSS3 */
}
<section class='example'>
<div class='box'>hi</div>
</section>
Here is an example of the problem https://jsfiddle.net/smdLzsx5/1/
Can someone please take a look and see if the bug occurs for them? I am interested in knowing if the problem can be consistently reproduced so I can report it to apple.
Code:
<html>
<head>
<style>
.header01{
background-color:#d0d0d0;
overflow:hidden;
border-radius:5px;
width:500px;
}
.heading01{
color:#ffffff;
text-shadow:0px 2px 4px #000000;
font-size:40pt;
}
</style>
</head>
<body>
<div class="header01" id="header">
<div class="heading01">
BAD<span>GOOD</span>
</div>
</div>
</body>
</html>
In certain circumstances (e.g. the above code) the text-shadow is not rendered - or it appears briefly then disappears again.
I am using MacOX 10.12.6 (16G29), Safari 11.0 (12604.1.38.1.7)
Problem does not occur on Firefox 56 or Chrome 61.0.3163.100
Many things can affect the issue such as:
Changing the width of the header01 div (change it to 200px and none of
the text-shadow renders)
Setting the header01 div to overflow:visible; (shadow renders correctly)
Changing the heading01 font size to 20pt (shadow renders correctly)
Try removing the 'overflow: hidden;' from your '.header01' class. It looks like this is causing it.
I published a basic page with a css style in the body of the page to IIS. When I run the page in Visual Studio the css style loads fine but for some reason the css is not applied to the published page so the users don't see the css view. I went onto the IIS machine and loaded the page and it worked fine. Is there something that I need to specify on the IIS server to allow the css or something? The css is written in the page like below so there is no file associated with the css.
<style>
body{
margin:0;
overflow:hidden;
}
.wrapper{
transform: rotate(90deg);
transform-origin:bottom left;
position:absolute;
top:-100vw;
height:100vw;
width:100vh;
background-color:#000;
color:#fff;
overflow:auto;
}
</style>
Just figured it out.
I needed to add:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11" />
Because for some reason IE11 was shifting to compatibility mode to IE7. The above, enforces IE11 to not downgrade compatibility.
I've got a problem with responsive design on mobile devices, please take a look at the code and the pictures. The difference between these two are the font-size of the html root element, I set one with percentage and the other one with px, but the one with percentage doesn't work in the right way while the one with px works just fine. And the numbers in the pictures indicates the width of the red div. According to the first part of my CSS code, the width of the div should be 320px in the first picture, but it is 450 and it will not change unless I set the font-size to a percentage larger than 52.1% or something, I don't remember the exact number, why is that? why the rems do not scale in the right way on mobile devices when setting font-size of root element by percentages? Please help.
HTML
<!DOCTYPE>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<script src = "main.js"></script>
<head>
<body>
<div id="div">Hello</div>
<div id="info"></div>
</body>
</html>
First Css
*{margin:0;padding:0;}
html{font-size:62.5%;}
#div{
width:50rem;
height:50rem;
margin:0 auto;
position:relative;
top:10rem;
font-size:5rem;
text-align:center;
line-height:50rem;
background:#ff0000;
}
#info{position:relative;top:10rem;font-size:5rem;}
#media screen and (max-width:500px){
html{font-size:40%;}
body{background:blue;}
}
Second CSS
*{margin:0;padding:0;}
html{font-size:62.5%;}
#div{
width:50rem;
height:50rem;
margin:0 auto;
position:relative;
top:10rem;
font-size:5rem;
text-align:center;
line-height:50rem;
background:#ff0000;
}
#info{position:relative;top:10rem;font-size:5rem;}
#media screen and (max-width:500px){
html{font-size:6px;}
body{background:blue;}
}
The result on my iphone for the first part of my code
The result on my iphone for the second part of my code
html{font-size:16px;}
body{font-size:62.5%;}
You need to ask yourself 62.5% of what? The default browser font size is html 16px as far as I understand and "The rem unit is relative to the root—or the html—element."
https://snook.ca/archives/html_and_css/font-size-with-rem
In my responsive.scss I used some advice I found recently come to think of it, sorry I don't have the link but the comment in the code is explanatory:
#media only screen and (max-width:320px)
{
/* addresses a Mobile Webkit browsers - Safari & Chrome - issue with text downsizing in portrait mode */
html.touch.webkit,
html.touch.webkit body
{
font-size:22px;
.button
{
font-size:12.8px;
}
}
I hope this helps.
http://jsfiddle.net/36ykrp9x/5/
HTML
<div class="container">
<button>O</button><button>O</button>
</div>
CSS
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
This above code best captures the visual bug I am interested in solving. I should note that this does not appear to affect Firefox or Safari's latest versions. I am currently on Chrome 39. If you are on a retina display and a recent version of Chrome and do not already see the thin line between the elements, try resizing the window a bit. A thin line between the buttons will flicker in and out of presence.
For my purposes, there is at least one element above the button group in the hierarchy with 100% width, and the buttons must be horizontally centered within it. The buttons themselves must have opacity between 0 and 1. They can be divs, or any other element for that matter - but I have indeed tried others and found the problem remains.
Unfortunately, centering the button group within a fixed-width element doesn't appear to solve this issue for me, as the fixed-width button group must ultimately also be centered somehow which appears to resurrect the issue. Nudging with margins can lead to overlapping which is more obvious with elements that have such opacity - which is really no better than having the gap in the first place.
It is worth noting that indeed using background-color: rgba(r,g,b,a) addresses the problem for most intents and purposes, but I am very interested in resolving this without it if only to see that it's possible.
I am not particularly interested in solutions that involve JavaScript. Am I out of luck?
Based on the information you provided, and my own experience with Google Chrome, I'm led to the suggestion that this is a browser bug in Chrome, considering it only occurs in Chrome on a Retina screen, and other browsers such as Safari and Firefox do not exhibit the problem. Your HTML and CSS looks perfect so I don't see issues here.
You can verify that this is a browser rendering issue by also checking this in a latest version of Opera (on your Retina display), as Opera now uses the same Blink rendering engine as Chrome (which is forked from Webkit). If Opera exhibits the same issue then its a Engine issue which should be logged as a bug.
Unless someone else figures out a way around it, I am normally inclined to leave browser rendering bugs like this alone where possible so that you're not hacking code in your site, and when the bug is fixed, you don't have to do anything to your site.
The problem is with jsfiddle.net. I have the same 1 pixel space in Chrome 40 on retina. Try this: http://dabblet.com/gist/c0068a79fc0268482ee1
or the following code, loaded directly:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
</style>
</head>
<body>
<div class="container">
<button>O</button><button>O</button>
</div>
</body>
</html>