Always problems with IE8 ...
I'm trying to use inline-block to align some text with the top right edge of an image. It works fine in FF, but of course, doesn't work in IE8.
Here's a Fiddle for what I'm doing: http://jsfiddle.net/9DPv5/
I've tried the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Did nothing.
<!DOCTYPE html>
Did nothing.
<!--[if lt IE 8]>
<style type="text/css">
li { display: inline !imporant; }
</style>
<![endif]-->
Didn't fix the problem and broke stylings elsewhere on the page.
margin-right:1px
The block already has a margin set on it, so this ofc didn't change anything.
Not really sure what else to try. I don't think anything in the CSS doesn't work with IE8.
I found these too, but not sure where to put them to test:
.divInlineBlock
{
display: inline-block;
float: left;
}
and
display: inline-table;
Edit: It seems that the image is aligning correctly, it's just the text that isn't.
Any help appreciated.
Okay, after a lot of faffing around (I have to log out of the website to test, then log back in EVERY time I make a change, to see if it works...don't ask :( ) I've finally fixed it.
I changed:
#accordion .foobar .foo {
display:inline-block;
width:180px;
height:125px;
vertical-align:top;
margin-right:10px;
to:
#accordion .foobar .foo {
display:inline-block;
float:left;
width:180px;
height:125px;
vertical-align:top;
margin-right:10px;
Adding the "float:left;" to the image fixed this problem.
Related
I added some 'letter-spacing' to my 'select' and I noticed that Firefox doesn't change the width of the rendered 'select', meanwhile chromium does.
The result is that the user can't see the entire content of select.
<!DOCTYPE html>
<html>
<head>
<title>select input width with letter-spacing</title>
<style>
select {
appearance: none;
border: none;
letter-spacing: 2px;
}
</style>
</head>
<body>
<select>
<option>hello world</option>
</select>
</body>
</html>
Try it with Firefox or Chromium and see the different.
I tried to fix with 'width: max-content' or similar but nothing works.
I found myself with a problem. When I was using css I had no problem setting the properties of the html elements with css, but I'm now trying to use scss and, for some reason that I'm unaware of, I can´t change the properties using the scss variables.
I'd be thankful if anyone could give me a solution for this issue.
HTML
<html>
<head>
</head>
<body>
<div id="example"></div>
</body>
</html>
SCSS
$color-1 : #202020;
#example {
background-color: $color-1;
width: 200px;
height: 100px;
}
I have created a full screen background image website using css, however when I try and also link bootstrap it creates a white, full screen container covering the entire page. When I go into the bootstrap CSS and comment the whole thing out the white container remains. The only way to get rid of it is to remove the bootstrap link from my head tag. Below is the HTML then the CSS.
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="local.css" rel="stylesheet"/>
</head>
html{
background:url('img/50925.jpg') no-repeat center center;
min-height:100%;
background-size:cover;
}
body{
min-height:100%;
}
Anyone got any ideas?
Set the background of the body to be fully transparent with
background-color:rgba(0, 0, 0, 0.0);
jsfiddle: https://jsfiddle.net/o9mgygzu/
I have been hacking and digging the google + stackoverflow, hope to find relevant solution that relate to my problem below but could not find one:
I am using bootstrap (twitter) ver 2.0 and encountered that the image resize doesn't work on IE8 but work on other browsers.
The original code for image resize is:
<img src="alpha1-stamp.png" width="70" height="70">
It rendered so well in browser such as Safari, Firefox and Google Chrome but not IE8 (the only version i have on another desktop but reckon it should not work on all IE version)
Please advice and desperate need to fix this IE nightmare
Cheers
Alright, finally got it sorted and found the way to hack the boostrap.css file
Just comment the following on bootstrap.css (bootstrap framework)
/*
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
} */
Just comment the following on bootstrap.css (bootstrap framework)
img {
width: auto\9;
height: auto;
/* max-width: 100%;*/
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
I had problem with Internet Explorer < 8 not respecting width & height attributes of my img tags and was able to solve it removing only the height:auto rules of the img selector.
(removing max-width didn't help)
If removing of some code from bootstrap css didn't help you can try this => https://stackoverflow.com/a/17763577/789012
As for me after removing of it my layout in Chrome was broken the same way as in Mozilla or IE...
The promblem is the
width: auto\9;
height: auto;
If you comment this line it works correctly on IE
I solved it differently by hacking conditional override styles in the HTML.
I already had an IE8 workaround section below the bootstrap stylesheet, so I add resets for the problem images:
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<style type="text/css">
img, img.img-responsive {
width:auto;
height:auto;
max-width: none;
}
</style>
<![endif]-->
<style type="text/css">
I have rotated a text in HTML5 canvas. It looks fine on all the browsers except google chrome. It looks distorted on chrome on Windows. Also, it looks fine on MAC. Why is it so?
I am using Chrome beta 20. Is it some HTML 5 issue or some Google Chrome or Windows bug? How can I resolve this distortion issue?
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "12pt Calibri";
context.rotate(Math.PI/2.5);
context.fillText("Competitive Landcaping!", 450, 100);
};
</script>
</head>
<body>
<canvas id="myCanvas" width="878" height="2000"></canvas>
</body>
</html>
I went through the same head-banging myself recently. The short answer is that Chrome renders fonts quite poorly on Windows, and transformed fonts just get worse from there.
For a longer, more technical answer, check this post:
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
There isn't a whole to be done about it, apart from trying to pick fonts that look the 'least worst' in Chrome.