Consider this code below:
<!doctype html>
<html>
<body>
<div style="background-color: yellow; width: 100vw; height: 100vh; text-align: center;">
<button style="display: block; margin-left: auto; margin-right: auto;">This is a button</button>
</div>
</body>
</html>
I tried to run it in Chrome and Mozilla, it produces the output below:
However, when I tried to run it in android browser, the button is in the LEFT side, seems like margin-left and margin-right doesnt work on the android browser. Any idea why?
You need to refresh your browser a few times, it must've cached the css. It looks the way you expect on android 4.4.
To Clear cache on chrome for android:
Touch Chrome menu > Settings.
Touch (Advanced) Privacy.
Touch Clear browsing data.
If it still does not work with my demo then let me know what version and browser you're using on android.
UPDATE: (for those wondering)
This was solved by adding a width to the element that is being centered. In order for margin:auto; to work on some old browsers, in this case we added width:auto;
Demo to test http://jsfiddle.net/Lw543yys/.
<>
<>
I would recommend using "reset.css" (or) "normalize.css"
I used one https://code.google.com/p/reset5/
which will fix browser issues across multiple browsers
You can also use http://necolas.github.io/normalize.css/
then your CSS will behave properly in all browsers
Related
I need some help. While I was working on a project in Chrome, I wanted to test it in Firefox and was puzzled as to why it looked so different.
Can anyone explain to me why the green div containing the image doesn't adjust its width relative to the child? Is it a bug? Is it a feature? Is it a bugfeature?
Research
It works, as I expect in Chrome, where it looks like this:
But in Firefox, there is a lot of weird white space (this is the same image as the first):
Also, here is a screenshot of the following browsers (starting from the left) Firefox, Opera and Internet Explorer 11:
As you can see, it works like I expect in Opera, but not in FF and IE11. It doesn't work in Edge either.
My findings
It looks to me like Firefox forgets to recalculate the parent's width after the image has been resized.
Here is a screenshot without height constraints (100% of the parents 200px height):
If I readd the height constraint, it looks like this:
As you can see, the width is the same. Note that the green div's width is 510px. That is the the same as the image (500px) + the padding (5px + 5px).
The code
I tried to add a jsFiddle, for your convenience, but curiously, I were not able to reproduce the error there (it worked as it was supposed to).
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
.wrapper {
height: 200px;
}
.div1 {
float: left;
background-color: green;
}
.div1 img {
height: 100%;
padding: 5px;
}
.div2 {
background-color: blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="div1">
<img src="http://placehold.it/500x500">
</div>
<div class="div2">
<h1>Heading</h1>
</div>
</div>
</body>
</html>
I'll answer my own question in hope of helping someone else
TLDR:
I was missing the HTML5 doctype declaration, which looks like this: <!DOCTYPE html>.
Longer version:
While writing this question, it suddenly struck me that it could be caused by the lack of a doctype declaration. A quick test confirmed my suspicion. All I was missing was the <!DOCTYPE html> declaration!
It's safe to say that I'll update my snippet to include a doctype. I used Visual Studio's doc snippet and never gave it another thought. Note that the html snippet already includes a doctype. (In VS: If you type html or doc and hit tab in an HTML document, a quick HTML template will appear)
Why
Without a doctype declaration, the browser renders the page as best it can, in the so called quirks mode. In quirks mode the browser has to guess how the page is supposed to look with primary focus on backwards compabillity. Therefor the result naturally deviates from newer specifications.
The doctypes was invented to differentiate legacy sites from those using newer specs back when IE and Netscape was a thing. You can read more about it on MDN here:
Doctype
Quirks mode
Nice to know:
Make sure you put the DOCTYPE right at the beginning of your HTML document. Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older.
-MDN
In HTML5, the only purpose of the DOCTYPE is to activate full standards mode.
-MDN
How to see which mode is being used
On Windows, click alt to bring up the good old toolbar, then go to Tools ➡ Page info
I've got html+css code running and looking good on explorer 10.
When i open the page in chrome the only differnce is the resolution.
Things (like headlines for examp.) that take 100% of the screen in explorer takes something like 75%-80% in chrome.
That causes white spaces to apper on the remaining 20%-25%.
is there any solution that doesn't require massive modifications in the code?
thanks.
*any code will demonsrate the issue, for examp:
<!DOCTYPE html>
<html>
<body>
<div >
This takes all the screen in explorer 10 but not in chrome.................................................................................................................................................................................................................................................................................
</div>
</body>
</html>
Use a "reset" CSS file. Here are some of the more popular ones: http://www.cssreset.com/
The problem here is that the "user agent stylesheet" is different between browsers, so a reset stylesheet will impose specific styles, thus making all browsers look approximately the same.
That problem is because you are not providing any CSS code to the file!
When there is nothing to process, the browser adds its own style. Which are known as "User-agent stylesheet". Which have their own styling techniques.
To minimize this, you can add just a few of the codes such as:
body {
margin: 0;
padding: 0;
}
This way, you can minimize the browser's override to control and change the auto margin and auto padding techniques!
In Google Chrome, if you just create a simple file like the one you have. And run it after saving it, you will find that browser automatically adds
margin: 8px;
And some of the other styles to the document on its own! That is because of the browser's CSS sheet.
In chrome my website is cramped at the bottom.
I have used a clear float to clear it and it works in Firefox but in Chrome, the bottom is all cramped? (I'll not mention IE because haven't tested yet but can fix for IE just don't know how to for Chrome)
http://justbedroomdesigns.com/
Try to change css to this,
.post-block {
width: 370px;
height: auto;
float: left;
clear: none;
padding: 5px 2px 2px 2px;
}
Perhaps you should correct the errors in your HTML first. For instance, decide if it should be HTML or XHTML, never reuse ID values, etc. If the problems still occur, ask again.
Take a look at this short post:
http://www.minitek.gr/tutorials/css-tutorials/item/12-how-to-fix-google-chrome-css?.html
More about Chrome rendering can be found here http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
One problem that I had with Chrome CSS is that when page is loaded locally (using XAMPP) it looks different
than when it's loaded from server.
Certain pages display terribly in IE generally, what is the best approach to solving these issues?
You forgot to add a doctype, so your page is in Quirks Mode.
Add this (the HTML5 doctype) as the very first line:
<!DOCTYPE html>
and it should look better.
Although, changing the Document Mode manually (using Developer Tools; hit F12), it still doesn't look right. There are evidently other problems with the page.
The most pertinent problem (after escaping Quirks Mode) is this:
<body style="margin: 0; padding; 0;background-color: 4DA2CA;">
Internet Explorer is not showing any background colour because you forgot the # before the colour. (And you have padding; 0, with a ; instead of :)
This will work:
<body style="margin: 0; padding: 0; background-color: #4DA2CA">
But you shouldn't be using inline styles in the first place..
This would be better:
<body>
with CSS in your stylesheet:
body {
margin: 0;
padding: 0;
background-color: #4DA2CA
}
you mean that in IE the Div's are smaller.Thats because in IE css border,margin are included in the width declared.So, if you have given a div width of 100px and a margin of 10px both sides then in IE the actual visible width of this div will be 100-10-10=80px.To solve the problem you can use child css decleration.
Considering our example if you want to show this div 100px width in both the browsers do the following
.mydiv{ /*This deceleration will be understood by all the browsers*/
margin:10px;
width:120px;
}
html>body .mydiv{ /*This deceleration will not be understood by IE browsers so other will override the width*/
width:100px;
}
Using this you can uniform the width of your Divs across both IE and non-ie browsers
Instead of pointing out the reason for each element's different way of rendering in IE, I would strongly recommend not re-inventing the wheel each time you create a new page element.
Even in modern standards-complaint browsers, CSS can be very unpredictable, so it's better to use bullet-proof snippets of code from trusted sources such as
CSS the Missing Manual
CSS the Definitive Guide
CSS Cookbook
Start out with working blocks of HTML/CSS and modify them to your liking and test cross-browser from there. The whole process will be much less frustrating.
I developed a small site (100% css layout). I have tested it on IE, Firefox and it looks fine.
After I upload it on my hosting company web server layout is broken only on internet explorer. I mean css is loaded properly but some elements are not at their places. I checked several times the css files on my local pc and the webserver and they have same content.
For example
#main{
position: relative;
width: 960px;
margin: 0 auto;
}
The code above puts #main div at the center of the screen. On my pc it work fine on IE, Firefox etc. But on web server that div floats to left on IE
What could be wrong ?
Internet Explorer has a number of things it uses to determine document rendering mode. The document being local or on the Internet is one of them.
Add
<meta http-equiv="X-UA-Compatible" content="IE=edge">
And then check the documents are consistent (either broken in both or working in both). If so, that confirms what the problem is and you just need to fix the CSS to work with IE in its best standards mode.
Microsoft provide more details.
Also make sure you aren't using the Compatibility button on the toolbar to force compatibility with older, buggier versions of IE.
For earlier versions of IE, you needed to add an extra bit of CSS to get things centered, i.e.:
body {text-align: center};
Then you'd also need to add text-align:left; to the first child div so the text isn't centered:
#main{
position: relative;
width: 960px;
margin: 0 auto;
text-align: left;
}
If the browser is behaving as an earlier version I reckon this could be the issue, so try adding this to your code.