Jump to content

thichtomo

Members
  • Content Count

    4
  • Joined

  • Last visited

Posts posted by thichtomo

  1. The code is as following:

     

    file:index.php

    <?php 	include("fix.php");?>

    file: fix.php

    <html>	<head>		<title></title>		<link rel="stylesheet" type="text/css" href="styles/styles.css" />	</head>	<body style="margin:0px;">		<h1 style="background-color:red;margin:0px;">Problem</h1>	</body></html>

    When I open file fix.php in firefox and chrome are ok (there is no margin between tag h1 and top boundary of browsers).

    However, when I open file index.php, in firefox is OK (no margin), but in Chrome, there a margin between them.

    Please, explain to me the reason. Is it because of the function require () ???

  2. I have a piece of code like following:

    body {	margin:0px;	font-family:"Segoe UI",Tahoma,Verdana;	font-size:14px;	background-color:#E3E3E3;}h1 {	background-color:#9dc45f;}
    <html>	<head>	    <title></title>	    <link rel="stylesheet" type="text/css" href="styles/styles.css"/>	</head>	<body>	    <div id="header">	        <h1>Tag h1 is displayed differently in Chrome and Firefox. Please, tell me why? </h1>            </div>	</body></html>

    In Chrome, there is no margin between <h1> and top boundary of browser (as expected). But in Firefox, there is still a distance, approximately 19px, between them. I don't find out the reason of this issue. Please, tell me why!

  3. Although I do not know exactly why browsers do not render it the same, the correct way to achieve this make the following changes in bold:

     

    #center { border: 1px solid #FFFFFF; border-radius: 10px; height: 200px; left: 50%; margin: -100px 0 0 -250px; position: absolute; top: 50%; width: 500px;}

    If we use: position:absolute, it works well even in firefox. In my opinion, if we put margin-left and margin-right as auto, browsers will automatically set divs horizontally center.

  4. I have a piece of CSS as following (in order to align a div vertically center)

    #center {	position:relative;	height:200px;	width:500px;	top:50%;	margin:-100px auto 0px auto;	border-radius:10px;	border:1px solid white;}

    In Chrome, it works well, as in the first illustration:

     

    chrome_div_vertical_align.png

     

    but in Firefox, it's displayed as following:

     

    firefox_div_vertical_align.png

     

    Please, explain to me the reason of the issue. You can check this issue in your browser by link: http://thichtomo.com/example/

×
×
  • Create New...