Jump to content

local host not equal test server

eazyGen

By eazyGen
in CSS Help

 Share

Recommended Posts

eazyGen Member

eazyGen

Posted
Posted

H guys.

 

This may be a daft question.

 

I have an app that I am building and testing locally using Firefox. Periodically I upload the files to my server's test environment. However, when I run the same code there, again using Firefox, I am finding that my CSS seems to be messed up because my page is wider. I have checked that all the files are present and correct and had a look using Web Developer, but I cannot quite understand what is going on. My local host is using Apache via XAMPP, and my test server is also running Apache.

 

Is there something simple that I may need to do to ensure each environment is the same?

 

Many thanks in advance for any assistance.

 

S

Link to comment
Share on other sites
eazyGen Member

eazyGen

Posted
  • Author
Posted

Are you using %s in you mark up?

You should post some code. HTML and CSS

Thanks for getting back to me.

 

Here is the whole page - it is small - a simple log in with little validation at this time:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-gb">

<head>

  <title>Login to eazyGen</title>
  <meta name="description" content="eazy-Gen" />
  <meta name="keywords" content="Code Generator" />
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <meta name="generator" content="eazy-Gen" />
  <meta name="robots" content="index,follow" />

  <link href="../client/css/ezLogin.css" rel="stylesheet" type="text/css" />
  <link href="../client/css/ezControls.css" rel="stylesheet" type="text/css" />
  <link href="../client/css/ezFacts.css" rel="stylesheet" type="text/css" />
  <link href="../client/css/ezGlobalCSS.css" rel="stylesheet" type="text/css" />
  <link rel="shortcut icon" href="../client/images/logos/favicon/favicon.ico" type="image/x-icon" />
  <link rel="icon" href="../client/images/logos/favicon/favicon.ico" type="image/x-icon" />

</head>

<body id="body"> <!-- Body -->

  <div id ="ezContainer"> <!-- Outer Container -->

  <div id = "ezHeaderLogo"><img src="../client/images/logos/eazygen_logo.gif" alt="eazyGen Logo" title="eazyGen - the Web Site Generator" height="52" width="82" /></div>
  <div id = "ezHeaderText">eazyGen - The Web Site Generator</div>
  <div id = "ezHeaderLine"><hr></hr></div>

    <form id="ezLoginForm" method="post" action="ezLogin.php"> <!-- Log In Form -->

      <p><label for="username" class="formLabel">Username :</label>
      <input type="text" name="username" id="username" class="formInput" value=""/></p>
      <p><label for="ipassword" class="formLabel">Password :</label>
      <input type="password" name="password" id="ipassword" class="formInput"/></p>


      <p><input type="submit" name="submit" value="Login" class="ezButton"/></p> 

   </form> <!-- End Log In Form -->

  </div> <!--  End Outer Container -->

</body> <!-- End Body -->

</html>

 

And here is the main CSS for the page:

 

This is the CSS - I have commented out the selectors and classes to aid posting into the forum !!!

/* Log In Style Sheet */

/* This contains the whole page. */

/* Header */
//#ezHeaderLogo {		padding-left:10px;
				padding-top:10px;
				float: left;
} /* End Header Logo */

/* Header Text */
//#ezHeaderText {	    padding-right:10px;
				padding-top:10px;
                    padding-bottom: 0px;
				font-family: helvetica,  courier;
				float: right;
				font-size: 24pt;
				color: #0D658E;
} /* End Header Text */

/* Decorative Line */
//#ezHeaderLine {     padding-right:5px;
                padding-top:0px;
                    width: 55%;
                    height: 2px;
                float: right;
                    color: #0033CC;
} /* End Decorative Line */


/* Main Container */
//#ezContainer {      width: 1024px;
                    height: 1000px;
                    padding: 0;
                    margin-top: 0;
                    margin-right: auto;
                    margin-bottom: 0;
                    margin-left: auto;
                    background-color: #ffffff;
                    border: solid 2px;
                    border-color: #575757;

} /* End Main Container */


/* The Form */
//#ezLoginForm {      position:relative;
                    border-radius: 25px;
                    box-shadow: 2px 2px 4px grey;
                    margin-top: 200px;
                    margin-left: auto;
                    margin-right: auto;
                    border: 1px solid #BEBEBE;
                    width: 600px;
                    height: 180px;
                    padding: 50px;



} /* End The Form */

//#ezLoginError {

                    margin-left: auto;
                    margin-right: auto;

}


/* Body Style */

//#body{
                  background-color: #c0c0c0;
                  background-image: url("../images/decoration/binary.jpg");
                  background-image: repeat;
                  margin: 0%;
} /* End Body */

 

Any further assistance much appreciated.

 

S

 

Link to comment
Share on other sites
sunfighter Newbie

sunfighter

Posted
Posted

I do not see any reason for this behavior. Everything you display is relative to it's main container <div id ="ezContainer"> and that is centered inside of the browser page.

 

Your

messed up because my page is wider.
== How can your page be wider? This is all controlled by your browser FF and that should be the same size wither displaying a local file or one from the internet.  Maybe your environment on your computer displays in FF differently that true FF via the internet.

Maybe your zoom is set wrong. Hit ctrl-zero to reset that and check internet again.

Link to comment
Share on other sites
eazyGen Member

eazyGen

Posted
  • Author
Posted

I do not see any reason for this behavior. Everything you display is relative to it's main container <div id ="ezContainer"> and that is centered inside of the browser page.

 

Your

messed up because my page is wider.
== How can your page be wider? This is all controlled by your browser FF and that should be the same size wither displaying a local file or one from the internet.  Maybe your environment on your computer displays in FF differently that true FF via the internet.

Maybe your zoom is set wrong. Hit ctrl-zero to reset that and check internet again.

Well I'll be jiggered.

 

You prompted me to play around with the zoom settings. I zoomed out once and the page was fine. I then closed the browser, re-opened it and went back into my test page and it was still good. I visited a few other web pages and they were fine too.

 

This would seem to mean that zoom settings are stored for each page on FF ? I must have zoomed in on my test page either by accident or for some reason, not realising my zoom would persist across browser settings. Is that right behaviour would you say?

 

Either way, many thanks for pointing me in the correct direction.

 

S

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.