I'm using this code for my website header:
<!DOCYTYPE>
<html>
<head>
<style>
#image_header {
border-radius:20px;
user-drag:none;
user-select:none;
-moz-user-select:none;
-webkit-user-drag:none;
-webkit-user-select:none;
-ms-user-select:none;
height:100%;
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
}
#header_image {
width:100%;
height:150px;
overflow:hidden;
position:relative;
border-radius:30px;
}
</style>
</head>
<body>
<div id="header_image"><img id="image_header" src="http://static.adzerk.net/Advertisers/78e105390cf2426896c5fc38ae85a4f6.png"></div>
</body>
</html>
That code cuts the header image on both sides, left and right, when the browser window is smaller than the image.
I tested it on several devices and systems and it's working very well.
There's only a bad display on iPhone 3GS running the newest possible version 6.1.6. This is how it looks like:
Does anybody know why this does happen? How can I fix it?
The problem probably lies in using CSS's transform. You can check it over here:
http://caniuse.com/#feat=transforms2d
Since it's 3Gs iPhone, i suppose you do check you browser's support.
Do try adding prefix -webkit-transform: translateX(-50%) else give a change on using position for transformationbackground-position: center;
Related
.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.
I stumbled upon a bizarre behavior of IE (11) using the code below (adapted from this answer).
The centered div does not automatically adjust its position when resizing the browser window.
It works fine in Google Chrome (tested with v31 and v34 canary) and Firefox 26.
→ jsFiddle
<div id="outerWrapper">
<div id="innerWrapper">
Helllo World!<br />
Longer text, longer text, longer text.
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy.
</div>
</div>
#outerWrapper {
display:inline-block;
position:relative;
left:50%;
}
#innerWrapper {
position:relative;
left:-50%;
}
My system:
Windows 8.1 Pro 64-bit
IE 11 (I also tested the problem with the IE 7, 8 and 9 modes)
Actually, ive changed your code a wee bit so that it does.
#outerWrapper {
display:inline-block;
position:absolute;
left:50%;
width:300px;
margin-left:-150px;
}
#innerWrapper {
position:relative;
}
this auto centers it no matter what.(and i tested on ie11)
EDIT***
also, you can change the width if youd like. i just added a random smaller width
so i could see it better on my small mbp lol.
Cheers
The difference is actually the default font used by IE and Chrome. If you define the font family and size both browsers render the markup the same. This is why many use a CSS reset, there are subtle differences between each browser's default stylesheet. The reset normalizes every browser for your application so you have a consistent base to work from. JSFiddle does not do this by default.
http://jsfiddle.net/docluv/DcLFz/6/
#outerWrapper {
display:inline-block;
position:relative;
left:50%;
background-color:#990000;
height:200px;
}
#innerWrapper {
position:relative;
left:-50%;
background-color:#009900;
font-family:"arial";
font-size:10pt;
}
Yet again Internet Explorer is costing me time and money.
I'm making a responsive site and I'm needing my images to be no more than 100% width of their containing elements, but also no more than a certain percentage height in case they fall off the page.
Some CSS:
#content{
margin:0 auto;
min-width:320px;
max-width:800px;
width:80%;
background-color:green;
}
#featured{
position:relative;
width:100%;
}
#featured-images{
text-align:center;
}
#featured-images img{
max-height:80%;
height:auto !important; /* IE fix */
height:80%; /* IE fix */
max-width:100%;
width:auto !important; /* IE fix */
width:100%; /* IE fix *
}
Some Markup:
<div id="content">
<div id="featured">
<div id="featured-images">
<img src="lib/imgs/fi-1.jpg"/>
</div>
</div>
</div>
Currently, this page works on Chrome. It even works in IE6, and IE8+. I haven't tested it in Firefox or Opera. But IE 7 definitely doesn't play ball. It seems to shrink the image to quite a small degree, as if the browser has been resized to a stump.
I know it's not ideal, but I've been using IE NetRenderer to test.
Its fixed, you can check it here:
<style type="text/css">
#content {
margin:0 auto;
min-width:320px;
max-width:800px;
width:80%;
background-color:green;
}
#featured {
position:relative;
width:100%;
}
#featured-images {
text-align:center;
}
#featured-images img {
max-height:100%;
max-width:100%;
height:auto;
width:auto;
}
</style>
<div id="content">
<div id="featured">
<div id="featured-images">
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
</div>
</div>
</div>
Or here Fiddle http://jsfiddle.net/Fqebe/1/
Cheers!
Internet Explorer Conditional Comment Style Sheet...
http://www.jabcreations.com/web/css/ieccss
Works without JavaScript enabled.
No need for hacks, if IE requires the wrong values (e.g. height/width) instead of what you use then only the versions of IE you need to apply those pseudo-right values to will work.
That will let you keep all the IE-related nastiness out of your main style sheet and you can use a specific IECCSS per version of IE.
Let's say that this is my HTML.
<div id="spirit_tutorial_reward">
<div id="spirit_tutorial_reward_icon" style="background:url({$MEDIA_IMAGE_DOWNLOAD_PATH}appimages/gift_icon_spirit.png) no-repeat;background-size: contain;"></div>
<div id="spirit_tutorial_reward_header">45 Spirit</div>
<div id="spirit_tutorial_reward_text">Use Spirit to recruit new Rusherz in the Locker Room!</div>
</div>
And this is my styling:
#spirit_tutorial_reward
{
position:absolute;
top:77px;
left:371px;
width:45%;
}
#spirit_tutorial_reward_icon
{
background:url(../images/gift_icon_spirit.png) top no-repeat;
width:60px;
height:60px;
position:absolute;
top:0px;
left:0px;
float:left;
}
#spirit_tutorial_reward_header
{
font-size: 15px;
font-family:"NFLEndzoneSansBold";
color: #000;
position:absolute;
left:69px;
top:0px;
float:left;
}
#spirit_tutorial_reward_text
{
font-size: 15px;
font-family:"NFLEndzoneSansBold";
color: #000;
position:absolute;
left:69px;
top:22px;
float:left;
}
On no-zoom or normal mode , the images appear to have chopped off on Firefox (see attached image) but when I zoom my page , the image appears to becoming better (see attached image). I am facing this issue only in Firefox. Can anyone here help me out.
EDIT : FIDDLE demo for the problem
This worked for me in one of my recent encounters. This prevented the image from being cut off:
transform: rotate(0.0001deg);
Try setting background-size to 59px which i did in that fiddle and worked as expected.
i.e
<div id="spirit_tutorial_reward_icon" style="background:url({$MEDIA_IMAGE_DOWNLOAD_PATH}appimages/gift_icon_spirit.png) no-repeat;background-size:59px;"></div>
If this answer was helpful.Dont forget to mark to apport or mark as answer
Thanks
AB
I think it's a subpixel problem. That's the reason the image works fine in some zoom modes.
I edited your jsFiddle to set the background-size to 99.9%, and then works properly. You can see the example here.
Note: I put the !important to overwrite the inline styles... feeling lazy, you know ;)
If you want the background image to cover whole page.. apply the image to background and give background size:cover to it..
you may try this:
body {
background-image: url(your-image.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #EEE;
background-size: cover;
}
you may refer this http://www.css3.info/preview/background-size/
So I am trying to develop a simple mobile website. It will go off a QR code to the page linked below. The problem is when I view it on my android phone, or apple phone it adds a huge width. Any suggestions would be great. Here's the link to the live version: http://www.trileafweb.com/promotion/index.html
Here's the HTML/CSS
Promotion
<style>
html,body
{
width: 400px;
height: 200px;
}
h1{color:#00a94f;
text-align:center;}
p{
font-weight:bold;
font-size: 14;
text-align:center;
font-family:Arial;}
img{
position:relative;
height:100px;
width:200px;
padding-left:100px;}
#coupon{
padding-top:15px;
position:relative;
border: 3px dashed;
width: 400px;
height:200px;
border-radius:5px;}
</style>
</head>
<body>
<div id="coupon">
<h1>Promotion</h1>
<p>Promotion Texts</p>
<p>Coupon Code: <span style="color:red; font-size:24;">xxx-xxx</span></p>
</div>
</body>
Are you including a meta tag telling the mobile browsers that you understand how their viewports work? Something like this:
<meta name="viewport" content="width=device-width" />
More information about why this is necessary:
If you think about it logically, it seems to make sense: mobile Safari took a look at the page and assumed it was a document designed for the desktop, which is true of the vast majority of websites. So it gave the website a width of 980 pixels and presented it zoomed out. Which is why we can’t read anything until we zoom into the page....
But this is no good! What we need to do is tell the browser that this webpage is optimized for mobile. And this is where the viewport metatag comes into the picture.