page is disarranged when zoom in/out in browsers

Question

lloydsbackyard 0 Light Poster

13 Years Ago

please help on my codes ...this works good in firefox but in internet explorer it gets disarrange. also, if im gonna zoom in/out in both browsers it also got disarrange.thanks

index.php

<?php
session_start();
//Unset the variables stored in session
unset($_SESSION['SESS_ID']);
unset($_SESSION['SESS_LNAME']);
unset($_SESSION['SESS_FNAME']);
unset($_SESSION['SESS_MNAME']);
unset($_SESSION['SESS_SUFFIX']);

if (isset($_GET['page']))
{
    $pg = $_GET['page'];
}
else
{
    $pg=1;
}
?>

<style type="text/css">
  body {
    background-image:url(images/login.jpg);
    background-position:center center;
    background-repeat:no-repeat;
    margin-top: 260px;
    background-attachment:fixed;
}

</style>

<html>
<body>
<div>
     <?php
        if ($pg==1){
        include 'admin/login.php';
        }
     ?>
</div>
</body>
</html>

login.php

<?php
include 'config/connect.php';
?>
<style type="text/css">
<!--
.ed{
border-style:solid;
border-width:thin;
border-color:#0076a3;
font-weight: bold;
padding:8px;
margin-bottom: 4px;
}
#button{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size: large;
border-color:#0076a3;
padding:5px;
background-color:#0076a3;
height: 36px;
width:70px;
}
table{
    margin-top: 143px;
    margin-left: 600px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
-->
</style>
<html>
<body>
<form action="" method="post">
<table border="0" style="border-collapse: collapse" cellpadding="3" >
<tr>    
    <td><font color="white">I.D. Number</td><td><font color="white">Password</td><td></td>
</tr>
<tr>
    <td><input type="text" size="25" name="idNumber" class="ed"></td>
    <td><input type="password" size="25" name="password" class="ed"></td>
    <td><input type="submit"name="login"value="Login" id="button"> </td>
</tr>
</table>
</form>
</html>


<?php
if (isset($_POST['login'])){    


    $idNumber = $_POST['idNumber'];
    $password = md5(strtoupper($_POST['password']));       
    $result = mysql_query("SELECT * FROM users WHERE idNumber='$idNumber' AND password='$password'");
    $record = mysql_fetch_array($result);
        $accountType = $record['accountType'];    

        if ($accountType=='ADMINISTRATOR')
    {
        //Create query
        $qry="SELECT * FROM empInfos WHERE idNumber='$idNumber'";
        $results=mysql_query($qry);
                if(mysql_num_rows($results) > 0) {
                //Login Successful
                session_regenerate_id();
                $member = mysql_fetch_assoc($results);
                                $_SESSION['SESS_ID'] = $member['id'];
                                $_SESSION['SESS_IDNUMBER']=$member['idNumber'];
                                $_SESSION['SESS_LNAME']=$member['lName'];
                                $_SESSION['SESS_FNAME']=$member['fName'];
                                $_SESSION['SESS_MNAME']=$member['mName'];
                                $_SESSION['SESS_SUFFIX']=$member['suffix'];
                                $_SESSION['SESS_ACCOUNT']=$accountType;                                
                session_write_close();                               
                header("location: admin.php");
                exit();
            }

        }
        else if ($accountType=='TEACHER')
    {
        //Create query
        $qry="SELECT * FROM empInfos WHERE idNumber='$idNumber'";
        $results=mysql_query($qry);
                if(mysql_num_rows($results) > 0) {
                //Login Successful
                session_regenerate_id();
                $member = mysql_fetch_assoc($results);
                                $_SESSION['SESS_ID'] = $member['id'];
                                $_SESSION['SESS_IDNUMBER']=$member['idNumber'];
                                $_SESSION['SESS_LNAME']=$member['lName'];
                                $_SESSION['SESS_FNAME']=$member['fName'];
                                $_SESSION['SESS_MNAME']=$member['mName'];
                                $_SESSION['SESS_SUFFIX']=$member['suffix'];
                                $_SESSION['SESS_ACCOUNT']=$accountType;                                
                session_write_close();                               
                header("location: admin.php");
                exit();
            }

        }
        else if ($accountType=='CASHIER')
    {
        //Create query
        $qry="SELECT * FROM empInfos WHERE idNumber='$idNumber'";
        $results=mysql_query($qry);
                if(mysql_num_rows($results) > 0) {
                //Login Successful
                session_regenerate_id();
                $member = mysql_fetch_assoc($results);
                                $_SESSION['SESS_ID'] = $member['id'];
                                $_SESSION['SESS_IDNUMBER']=$member['idNumber'];
                                $_SESSION['SESS_LNAME']=$member['lName'];
                                $_SESSION['SESS_FNAME']=$member['fName'];
                                $_SESSION['SESS_MNAME']=$member['mName'];
                                $_SESSION['SESS_SUFFIX']=$member['suffix'];
                                $_SESSION['SESS_ACCOUNT']=$accountType;                                
                session_write_close();                               
                header("location: admin.php");
                exit();
            }

        }
}
?>

html-css session web-design

Edited 13 Years Ago by Member #120589 because: wrong forum

2 Contributors
4 Replies
302 Views
1 Hour Discussion Span
Latest Post 13 Years Ago Latest Post by lloydsbackyard

Dani AI

Generated 9 Months Ago

— this is a CSS/layout issue, not PHP. was right to flag the inline sizing. Common causes for “disarranged” layouts between Firefox and Internet Explorer and when zooming are: missing DOCTYPE (triggers quirks mode in IE), large fixed pixel offsets for positioning, relying on table layout for non-tabular content, and background/attachment rules that behave differently across engines.

Checklist and concrete fixes (apply in order):

Ensure standards mode and basic head metadata are present (HTML5 doctype, charset, viewport).

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
</head>

Move styles into a stylesheet and add a simple box model reset:

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

Replace fixed top/left pixel offsets with a responsive centered container (flexbox keeps the form centered at any zoom/width):

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: url('/images/login.jpg') center/cover no-repeat;
}
.login-box { width: 360px; max-width: 90%; padding: 16px; }

Stop using the size attribute for inputs; set widths in CSS so fields scale consistently:
```
.login-box input { width: 100%; padding: 8px; }
```
Prefer semantic markup (divs/labels) or CSS Grid/Flex for form layout instead of tables unless the data is truly tabular.

Debugging tips: force a visible outline to see computed boxes (* { outline: 1px dashed rgba(0,0,0,0.1); }), inspect computed styles in DevTools (check width, padding, box-sizing), and confirm IE is not running in Compatibility/quirks document mode. Adopting a fluid container and removing hard pixel offsets usually resolves zoom and cross-browser shifts. If layout still breaks, reduce the page to a minimal HTML+CSS example to isolate the offending rule.

All 4 Replies

Member #120589

13 Years Ago

This won't be due to php. It'll be a css issue. I noticed that you are also using inline sizing - do it all in a css file or head style tag. Need to move to html/css forum?

Edited 13 Years Ago by Member #120589

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

lloydsbackyard 0 Light Poster · Answer 1 · 2013-09-08T09:07:49+00:00

ok ill try it there thanks..ill just mark this as solved?

Member #120589 · Answer 2 · 2013-09-08T09:12:33+00:00

Member #120589

13 Years Ago

No I'll move... OK, done :)

Edited 13 Years Ago by Member #120589

lloydsbackyard 0 Light Poster · Answer 3 · 2013-09-08T09:18:03+00:00

lloydsbackyard 0 Light Poster

13 Years Ago

ok thanks..

page is disarranged when zoom in/out in browsers

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers