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;
}
Related
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;
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.
Below is the CSS style this div is using. The div itself
is nested within a table. Basically IE displays this differently
from FireFox and Chrome. I like the IE rendering better
and it seems more inline with what I am seeing in dreamweaver,
where as firefox and chrome will display the div wider then
it's in IE and dreamweaver for some reason.
I haven't designed anything in a while but it's sad to see
that we still have these rendering differences between browsers,
is this still the case with HTML5/CSS3 ?
.Class420 {
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
color:#000;
line-height:30px;
background-color:#F5F5F5;
width:400px;
text-align:justify;
padding:15px;
float: left;
margin-left: 15px;
height: 300px;
}
is this still the case with HTML5/CSS3 ?
Yes. And it's still Internet Explorer which is holding everyone back.
I've never ran into this problem before.
The menu looks good on Windows, but it breaks in Firefox, Chrome and Safari on Mac OS (saw this by using browsershots). I don't have access to a mac so I can't debug it properly. I think it might be cause by different letter spacing or size. Does anyone have experience with this?
Thanks!
I'm viewing the site in firefox on a mac, and it looks like the div with id="wrapper" is not long enough to contain the menu.
Either increase div#wrapper to 960px:
#wrapper {
margin:0 auto;
width:980px;
}
or decrease size of menu font to 16px:
#mainMenu ul li a {
background:url("images/bk_menu.gif") repeat-x scroll 0 0 transparent;
color:#175689;
display:inline-block;
font-size:16px;
height:30px;
overflow:hidden;
padding:16px 19px 0;
text-decoration:none;
}
As far as I can see, it looks fine in Safari 4, unless you post a screenshot. But it might be that you have <div id="top-links"> occurring twice: [Invalid]Markup Validation of clients.newblack.ro integra - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code.
body
{
padding:0px;
background:#2786f4;
position:relative;
margin:0;
color:#818181;
text-align:center;
}
<!--[if IE]>
<style>
#Right
{
width:202px;
background:#f1f1f1;
padding:8px;
position:absolute;
top:130px;
left:945px;
float:right;
text-align:left;
}
</style>
<![endif]-->
<div id="Right" >
sadlf ljas dfjlsdjflsfjsl a;sldjf ;slfj
</div>
I am facing a positioning problem while creating a HTML. It looks okay in all browsers except Opera.
How it will okay in Opera too ?
You have a conditional comment that only works in IE. In IE, I see a light grey box on the right with the text in it.
All other browsers (Opera, Firefox Chrome) don't see the style for #Right and thus don't apply it. So they just show the grey text at the top.
It's not clear what you want to do, but if you want to hide that text completely from non-IE browsers, move the <div> inside the conditional comment, i.e. before <![endif]-->.