CODEWITHSUNDEEP
htmlcssgoogle-chrome
Michelle Shieh
Michelle Shieh

Reputation: 145

different layout&font-size in different browser

.header{
	z-index:3;
	position:fixed;
	width:100%;
	height:10%;
	top:0px;
	background-color: white;
}

.header .header-bg {
	background-color: rgba(248,221,225,0.7);
	display:table;
	margin:auto;
	height:30px;
	width:30%;
}

.header .title-center{
	text-decoration: underline;
	position:absolute;
	margin:0;
	left:50%;
	top:60%;
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
</head>
<body>
	<link rel="stylesheet" href="css/index.css">

	<div class="header"> 
		<div class="header-bg"> </div>
		<div class="title-center">header</div>
	</div>
</body>
</html>

When I developed a web page, I tested it using Chrome. After finishing, I tested it with firefox/IE/Edge, and found the font-size are much smaller than it used to be in Chrome. When I checked the debug tool on Firefox, it seemed that the size of the same div is not the same for firefox and chrome. Actually, the difference is great.

More wierd, when I click into a modal in chrome, and refresh the window, the path changed to index.html#, then, the layout and div size is almost the same as the other browsers.

Anyone has idea why this happened? and How to deal with it? Thanks in advance!!

The following is part of my code for header.

Upvotes: 1

Views: 1096

Answers (4)

Selvam Elumalai
Selvam Elumalai

Reputation: 693

a) Each browser will have their own default font size predefined.

1) For chrome : Setting > Show Advanced setting > Web Content > Font size

2) For Firefox : Tools > Options > Content > Fonts & Color

Whenever the CSS doesn't have font size mentioned in their styles, browser will use their predefined default font size. Better define font-size in your CSS.

b) index.html# issue Whenever you click on any clickable elements usually anchor hyperlink, browser tries to navigate to that page or section where the href="" if pointing. When a hyperlink doesn't have href="" we'll get "#" as a dummy pointer. Example

<a href="#">Test link</a> or <a href="index.html"> Test link</a>

Refer : https://developer.mozilla.org/en/docs/Web/HTML/Element/a

Upvotes: 1

Santosh Khalse
Santosh Khalse

Reputation: 12730

You should add any default font-family in your css after that you can see same fonts on all browser

and add reset css from http://html5doctor.com/html-5-reset-stylesheet/ in header section!

Upvotes: 1

Łukasz Szcześniak
Łukasz Szcześniak

Reputation: 1444

The problem may be initial values of some elements that differ through browers. The easiest and most reliable way to solve it would be using something like Normalize.css.

Upvotes: 0

Carl Casbolt
Carl Casbolt

Reputation: 112

Each web browser has different defaults for font so you want to reset you CSS before adding your custom style.

Have a read of http://cssreset.com/what-is-a-css-reset/

Upvotes: 0

Related Questions