I've been doing some cross browser testing for a webpage I'm working on for a client, and things are going pretty smoothly so far. However, I'm noticing a lot of white space showing up only in IE8 at the bottom of my #main div. I've tried removing the padding at the bottom of the div using an IE8-specific stylesheet, but it's not removing the gap. Developer toolbar shows that the style is being applied, and before trying the IE8-specific sheet, I removed the padding via the developer toolbar and it worked fine, but once applying the actual style it doesn't. I'm not seeing this bug in any other browser, and so far I've tested with: Firefox (OS X/Win XP), Safari (OS X/ Win XP), Chrome (OS X/Win XP), Internet Explorer 7, and Internet Explorer 8. I've also tried negative margins, and just moving the boxes down so there's less of a gap on both sides. Neither seem to move the boxes at all. So, its a bit confusing. Here's a pic of it in IE 8:
And here's how it shows up in any other browser (this screenshot is from IE 7):
The site can be browsed live here.
Any help is greatly appreciated!
#David Savage: Putting in
<!--[if IE 8]>
<style type="text/css">
#small_boxes {
overflow: hidden;
padding-bottom: -150px;
}
</style>
<![endif]-->
Just before your closing </head> fixes the issue for me.
Related
Using PureCSS I have noticed that elements with pure-button class differs in width based on browser.
Using the following example:
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss#2.1.0/build/pure-min.css" integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous">
</head>
<body>
<div class="pure-button">yolo</div>
</body>
</html>
The div on Chrome is 61.36 pixels width but on Firefox it is wider and takes 65.8433 pixels.
My questions are:
What makes the difference and how can I make them identical?
I have already tried setting width via style property but it "cuts" the right part of a padding.
Update 1:
Thanks to Peter James answer I have realized that the described problem only occurs on my installation of Linux MX.
Firefox on Windows 10 renders the div the same way as other browsers.
I copied your code across to SO's code snippet and ran it and then looked at it in the inspector.
Here are two screenshots of the div sizes:
Chrome:
Google:
I am on a Windows 10 PC using Chrome Version 104.0.5112.81 and Firefox Version 103.0.2
The sizes are:
Chrome: 61.36 x 34 and Firefox: 61.35 x 34
Obviously, you can just create your own width class and set the width yourself (as shown in the code snippet below), but this defeats the purpose of using a cross-platform library. Whether this is a browser issue or a Pure.css issue is difficult to say. I checked the Pure.css documentation on Github and they state that it has been tested on: IE 10+, iOS 12+, Android 6+ and the latest stable versions of Firefox, Chrome, and Safari.
.unpure-width {
width: 70px;
}
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss#2.1.0/build/pure-min.css" integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous">
</head>
<body>
<div class="pure-button unpure-width">yolo</div>
</body>
</html>
Browser might render fonts slightly different, and this is even more true for different OS, as it will depend also if you have the font locally installed on you PC or not. (If it's not served to you by the website itself, which it's often not)
This can explain a tiny difference in size, but you can easily make them identical by setting the width yourself.
div { width: 100px }
https://developer.mozilla.org/en-US/docs/Web/CSS/width
In Chrome and Firefox my site loads perfectly, however in Internet Explorer 11 the CSS is only applying fully after pressing Ctrl+F5 (sometimes several times). Strange thing is that some CSS IS applied. Just some elements are ignored.
Since my CSS is pretty large I don't want to paste it all here but the behavior can be seen live here http://www.telefonievergelijken.nl
Here's how it looks in Internet Explorer 11 on 1st pageload:
And here in FireFox:
On your webpage:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
I believe it is a problem. It tells browser to display page in IE8 compatibility view, so most things is displayed wrongly.
My page is at http://jerswebempire.com/ovrtur/index.php
The page displays nearly perfectly in all browsers except IE8. In IE8, floated divs have incorrect margins. For example, you'll see the search bar at the top is sitting underneath the nav. However, if you open the page in Chrome or Firefox or IE9, it's displaying in the correct spot.
What am I doing wrong?! I can't seem to find a fix.
Also, the box for Latest Video is in two columns in all browsers but IE8. It's similar to the above problem where there is a left margin added that shouldn't be there.
The page was built with Bootstrap.
Any help would be appreciated.
Use ie conditionals between your index
<html> </html>
add a class to for the 'ie 8 only' margins like the html boilerplate does.
Load a custom ie 8 only stylesheet and play with the margin problem there like this:
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie8-only.css" /> <![endif]-->
Or load a class where you need it.
<!--[if IE 8]><html class="ie8 lt-ie9"> <![endif]-->
Apply the ie conditional class to whatever you need.
<div class="floatedDiv ie8"
CSS
.ie8 { margin:0px; }
I can't debug on ie8 but I searched and found that there is in fact a negative margin bug on ie7/8.
They recommend using
zoom:1, position: relative
as a workaround.
I have just created an HTML5 page with a background image in the top center.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Example</p>
</body>
</html>
With the following CSS:
body
{
background-image: url('images/bg.png');
background-position: top center;
background-repeat: no-repeat;
margin: 0;
padding: 36px 0 0 0;
}
But I have spotted a problem in Firefox 12.
No matter how much I shrink the browser window, the HTML element never falls below 376px. This causes the background position to no longer appear in the center, but instead it looks like it is right-aligned (and then crops the right-hand portion of the image).
In Chrome, Opera and Internet Explorer it works as expected, but in Firefox I get this strange behaviour. I have added a screenshot of all four browsers showing this page.
UPDATE
This seems to be related to the size of the toolbar in the browser as the width it stops at is identical to the width of the browser toolbar. A colleague has just tried it and his toolbar is 427px and it stopped at this value. I presume this is a Firefox bug.
Your code shrinks properly in Firefox 12 for me.
I think it's one of your addons causing the problem. So you might want to disable a few and see if the problem goes away.
Also, try running Firefox in safe-mode and seeing if the problem exist.
"C:\Program Files\Mozilla Firefox\firefox.exe" -safe-mode
I think I resloved problem with Firefox. Check my answer to the same topic here and give me feedback if it was helpful ;) I don't want to paste the same answer in two places ;)
It looks like this is a genuine bug in Firefox, so I have raised a bug.
I'm using the art sexy lightbox for my pictures presentation and also for html content in joomla. I'm using the Chrome and it works fine and displays everything as it should. The problem starts when i switch to ie8.
When i click on the image to xpand in the lightbox the image displays in the center of the page while the thole frame of the picture is on the left of the image.
I've tried playing with the artsexylightbox css file but couldnt get it to work in both browsers.
does anyone can say why is the difference? I suspect that the browsers treat the absolute,relative orders differently.
please help:(
You could tr to target WEbkit broswers only in your CSS to separate the behaviours of IE and Chrome (Safari ius a webkit browser too).
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Webkit-specific CSS here (Chrome and Safari)*/
#artsexylightbox {
properties here
}
}
Or you could use Conditional Comments to set up a new CSS stlyesheet for IE:
<!--[if lt IE 9]>
<link href="path-to-file/IE.css" rel="Stylesheet" type="text/css"/>
<![endif]-->
Then use setup the properties that work for IE in the IE CSS, and the properties that work for Chrome/Safari in the normal CSS.
Note that even between FF and Chrome, there are a few differences in how they interpret CSS.
Hope that helps :)