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.
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
I am developing a website with slightly different CSS code for desktop and mobile. On mobile I use vw units for responsive font-sizes, which is preferred over media queries as mobile screen sizes change every other year and a different approach would require me to update the media queries as well every time.
Now, I think I have found buggy behaviour in Chrome mobile when it comes to font sizes with vw.
I kindly invite you to check out these two pages on mobile, both with Firefox and Chrome:
http://gusto-gelateria.al/
http://gusto-gelateria.al/ice-cream-recipes/
Firefox is correctly showing the font-sizes as i expected, while on Chrome:
font sizes are wrong throughout the page
the font size in the footer on the first page is different than on the second page ( footer fonts are the same on both pages on Firefox, as expected )
Am I missing something here, or Chrome doesn't handle well vw?
If this is not an obvious coding error I did, I may file a bug, but I want a confirmation before doing it.
Take as an example this vw declaration for the footer:
footer address div {
display: block;
font-size: 3vw !important;
}
That declaration appears in both browsers' dev tools as well, so it is being rendered both on Firefox and Chrome, but apparently they interpret it in different ways.
As I said above, my CSS for mobile is different than on desktop, so for inspecting it you should use the mobile device emulation from the browser dev tools (for Chrome see https://developers.google.com/web/tools/chrome-devtools/device-mode/ )
I believe that the root of your problem is that you don't have a viewport meta tag in the head of either of your pages. Without this, the default behaviour of browsers is to scale the page to fit the screen.
Start by adding the viewport tag in the head of all your pages:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title here</title>
...
</head>
Once you do this you'll see more consistent behavior between browsers, and from one page to another.
More about the viewport meta tag
Hope this helps!
The font-size difference is likely Mobile Chrome font-boosting. Elements with dynamic height get boosted automatically. A solution is to give the element or parent a max-height:
.parent {
max-height: 999999px;
}
But it's probably best to apply that max-height directly to the element containing your text so it doesn't effect anything else you might be doing in your layout.
Test it on a real device, since Chrome's Dev Tools doesn't show the boosting.
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<fieldset class="fieldset_New_border">
<legend> Specimen Actions</legend>
My Table Goes Here ..............
</fieldset>
.fieldset_New_border{
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius:25px;
}
Is there any specific way to get IE9 to show border-radius?
Its working fine on mozila and on other browser.
I cannot seem to get it to work myself.
Please find below two files. Is there any wrong in that.
Same Code is working with curved border on other browsers but not working on ie 9.
first : add a background or border-color,
second: this should work without "x-ua-compatible", in IE press f12 and have a look at the documentmode and browsermode and have a look on the dozens of questions asking for the same
Rounded corners on fieldsets will not work in IE v9 and lower versions. Try changing that to div and see what happens.
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'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.