CSS Forum

**catatung** · 05-08-2010, 04:52 AM

I have a really really strange problem. I'm working on a website and it seems when I preview the site through the local webserver (wampserver) it looks fine, however once I upload it to an internet server and retrieve it through the internet it looks completely different.

I know where to look normally for this type of problem and to simplify the equation I removed all the PHP and simplified the page as much as I could and also converted my external stylesheet to internal.

What I'm left with for demonstration purposes is much less code so you can see what's going on easier. I have no clue why the page would be rendered differently loading from a local server VS from an internet address. I've compared the results of a VIEW SOURCE from Firefox and they are EXACTLY IDENTICAL, however the page is rendered incorrectly. Attached is an image of the differences I'm seeing (which appear to be CSS related) and the code is below. If anyone can solve this I would be extremely appreciative, this is driving me absolutely mad.

The Code:

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="_javascripts/functions.js"></script>
<style>

@charset "utf-8";
body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
}
.layout #container {
    width: 80%;  /* this will create a container 80% of the browser width */
    background: #FFFFFF;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 0px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
}
.layout #header {
    background: #4878CA; 
    position: fixed;
    top:    0;
    left:    inherit;
    width:    80%;
    height: 6%;
    padding-top: 1%;
    text-align: center; /* This is to make sure the NAV bar is aligned correctly
/*    padding: 0 10px 0 20px; this padding matches the left alignment of the elements in the divs that appear beneath it. If an image                                                                        is used in the #header instead of text, you may want to remove the padding. */
}

.layout #spacer1 {
    background: #C5CDF1;
    position:    fixed;
    top:    55px;
    left:    inherit;
    width:    80%;
    height: 2%; /* Space between bottom of NAV bar and maincontent */
    border:    inherit;
    }
    
.layout #registerBox {
/* This is the actual login/reg box */
    background:    #4878CA    ;
    position:    fixed;
    top:    53px;
    left:    68%;
    height:    40%;
    width:    19%;
    border: thin black solid;
    border-top: none;
    display:    none;

}

.layout #loginBox {
/* This is the actual login/reg box */
    background:    #4878CA;
    position:    fixed;
    top:    53px;
    left:    68%;
    height:    14%;
    width:    19%;
    display: none;
    border: thin solid black;
    border-top: none;
}

.layout #buttonDiv{
    /* This is the right end of the header bar box */
    background:    #4878CA;
    position:    fixed;
    top:    0;
    left:    70%;
    width:    20%;
    height: 52px;
    padding-top: 3px;
    font-size: 16px;
    border:    inherit;
    text-decoration: none;
}

.layout #companylogobox {
    background:    #4878CA;
    position:    fixed;
    top:    0;
    left:    10%;
    width:    20%;
    height: 52px;
    padding-top: 3px;
    font-size: 16px;
    border: inherit;
}


.layout #header h1 {
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    border: inherit;
}

.layout #mainContent {
/* remember that padding is the space inside the div box and margin is the space outside the div box prev: padding: 0 20px;  */
    padding: 4% 3%;
    padding-bottom: 1%;
background: #C5CDF1;
    border: 0px;
}
.layout #footer { 
    padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background:#4878CA;
    border: inherit;
} 
.layout #footer p {
    border: inherit;
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}



</style>

</head>

<body class="layout">

<div id="container">

      <div id="header">
    </div>
  
      <div id="spacer1">
    &nbsp; <!-- This is required for the div to show --> 
    </div>

<div id="buttonDiv">
<br />
>>>login<<<
    </div>
  
      <div id="registerBox">
    registerbox
    </div>
  
    <div id="loginBox">
    <br />

    <br />
    &nbsp;<span id="loginErrorMsg" style="color:#FFFFFF; text-align=center">&nbsp;</span>

    </div> 

      <div id="companylogobox">
<br  />This is where company logo goes.
</div>
</li>

  <div id="mainContent">
   </div>
  
   <div id="footer">
    This is the footer.
  <!-- end #footer --></div>
<!-- end #container --></div>


</body>
</html>

The differences I'm seeing - take a look at
http://public.fotki.com/clistfiles/problem/wtf.html

Does anyone have an idea how a page which does not depend on any external files could be rendered differently in the SAME browser where the VIEW SOURCE results MATCH 100% ?? I am completely stumped.

**monkey** · 05-08-2010, 09:25 PM

Have you tried using a different browser? Or making sure the page has actually refreshed and isn't using old CSS info? Hard to guess without seeing the actual page in action.

**catatung** · 05-09-2010, 12:58 AM

Hey Monkey,

Yes I have tried refreshing, F5, even ctrl-F5 refreshing to totally abandon the cache.. I was assuming though that the VIEW SOURCE would show any differences caused by use of an old cache..

I did try another browser, IE which I know has tons of problems being standards compliant and it doesn't look correct but they do both display the same.

I would just like to establish how this behavior is happening so I can understand it and plan around it or make a plan to avoid it... It's bad enough to have to worry about how IE is going to butcher a page up because it's not standards compliant but now this just makes everything seem so much harder. I can't code in an environment that might possibly show everything different than it will look when I upload the site.

Thanks for trying to help and if you have any other ideas throw them at me they are appreciated. Hardly ever does something make me actually say "I'm Stumped" but this is one of those times. I've simplified the site down to just one file and an internal stylesheet so it would be easy for anyone who wants to experiment with loading it up via a local wampserver vs an internet site. I've got it on my Linux box which is on the local network and thats enough to cause problems so it doesn't have to be a true internet address, just something that isn't local to the machine that you are browsing from.

**monkey** · 05-09-2010, 06:14 AM

Stab in the dark, but I'm guessing you aren't using clear both to make the footer work right. I've always found them to be annoying myself.

**LadynRed** · 02:59 PM

Without seeing the site itself, as is, on your server, it's impossible to tell what's going on. I have never seen a site look differently locally then it does from a web server UNLESS there's a pathing issue, or a file naming issue. On a windows server, the filename case sensitivity doesn't exist, but it DOES exist on linux-based servers.

There may be other factors with the hosting server that could cause problems, like mime types etc.

As for IE, while I do not disagree that it's a pain in the neck, supporting IE7 and 8 is not nearly the chore that supporting earlier versions was. If you're trying to support IE6, my advice, don't. The sooner we stop supporting that thing, the sooner it will die it's much-overdue death.

I would strongly suggest that you get rid of all that 'position: fixed' stuff.. it's unnecessary and not the best way to achieve the layout. It's also the most likely source of your problems. Learn to use the normal document flow and I would suggest using floats and margins to put things where you want them. That whole 'spacer' div is completely pointless - spacing is what margins and padding are for.

**catatung** · 06:49 PM

Hi,

Thanks for the advice people. I was using the fixed positioning for a Navigation bar which stays at the top of the page, preventing the need to scroll back up to the top for navigation. Outside of that I don't intend to use fixed positioning. The spacer div was an attempt at making something look right before I learned about IE's broken box model. In the future I will use CSS/padding/margin adjustments in an IE-specific rule.

I know what you mean about case sensitivity and pathnames - and that was where I looked first. I've always used relative paths but I renamed the CSS file temporarily and the entire page looked way different, so I know it was loading it. I have since put them internally to make the smallest example possible to display the problem.

The more I investigate this the more I am leaning towards a firefox bug. IE is consistant between the two... Firefox is showing the same source for both situations (loading the page as c:\wamp\www\fix\index.php vs http://localhost/fix/index.php). Therefore either Firefox is lying about what source it was fed to render what it's showing or it's rendering one of the sources differently for some reason....

I'm going to make a video showing the problem - I'll post the link in a little bit.

Thanks!

**catatung** · 05-09-2010, 07:25 PM

Here is the link: http://www.facebook.com/video/video.php?v=407600612752

Make sure to play it in full screen and click "View in High Quality" if it comes up looking low quality. This should demonstrate what I'm experiencing.

Any more ideas??

**catatung** · 05-09-2010, 07:33 PM

oh and re: the footer, it looked right before I started deleting whatever I could to make the example as small as possible... This is just a tiny bit of code from my page but enough to demonstrate the problem I was having... But when I get to that part I will play with using clear both, thanks for the tip.

**monkey** · 05-09-2010, 11:51 PM

I had a good chuckle at your buddy's reply about a virus or too many things open. Bit busy right now to look over it again, but I'll try to come back and see if I can spot something. Ladynred makes good points also.

**catatung** · 05-10-2010, 02:20 PM

Haha me too, at least he's trying to help. Though in concept he brings up a good point, that would be an interesting virus to write, something that attacks CSS code or HTML code somehow... Peoples internet browsing would be totally screwed up... It's a good thing I have better things to do than work for the dark side and write things like that

I'm going to play with removing the position fixed aspects... Though I am seeing the font is a different size and I'm wondering if that is the root of the problem? Also I've simplified the problem since LadynRed responded; I've found that browsing to the file via c:\xxx\yyy\index.php presents the same problem so that eliminates any OS/server triggered issues. She is definitely right about what she says, and in my troubleshooting approach I've tried to pull out every variable possible.

So my concern and attention is now more directed at a particular aspect of my original problem - Why is Firefox showing a different type of font/size in 2 situations where the "view source" is identical? Perhaps defaults are processed differently when it's reading a local file vs communicating to a port, even be it a local one? I keep leaning towards a Firefox bug.

I would like to solve this though, it's got me curious. In any event though, I think what I will do is make a samba share and map it to my windows W: drive that points to the Linux server's WWW directory... I can have Dreamweaver save it's files there and I will just preview it through the internet to prevent any issues. I'm just glad I caught this relatively soon in my development of the site. It would have really been frustrating after all that testing to publish it and see it look all wacked out. I expect that of IE, not Firefox!!

If you have any ideas or find anything let me know. I would love to know the why behind this behavior!

**LadynRed** · 03:00 PM

Quote:

I learned about IE's broken box model.

IE's box model was fixed, in IE6, over 2 years ago - provided you have installed all the patches. IE7 and 8 no longer have box model issues.

Quote:

Why is Firefox showing a different type of font/size in 2 situations where the "view source" is identical?

Do you have any extensions installed in FF?

Quote:

Perhaps defaults are processed differently when it's reading a local file vs communicating to a port, even be it a local one?

No, it does not care.

I tested your code, as is, on my local machine, and then from my test server, it looks exactly the same in Firefox and IE7 no matter where I view it from.

I modified your code, taking out all that positioning. I say get the layout working correctly first, then put in fancy following box you want:

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="_javascripts/functions.js"></script>
<style>

@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.layout #container {
width: 80%; /* this will create a container 80% of the browser width */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
position: relative;
min-height: 600px;
}
.layout #header {
background: #4878CA;
/*position: fixed;
top: 0;
left: inherit;*/
width: 80%;
height: 6%;
padding-top: 1%;
/*text-align: center;*/ /* This is to make sure the NAV bar is aligned correctly */
margin: 0 auto;

/* padding: 0 10px 0 20px; this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}

.layout #registerBox {
/* This is the actual login/reg box */
background: #4878CA ;
/* position: fixed;*/
/*top: 53px;
left: 68%;*/
float: right;
height: 40%;
width: 19%;
border: thin black solid;
border-top: none;
display: none;

}

.layout #loginBox {
/* This is the actual login/reg box */
background: #4878CA;
/* position: fixed;*/
top: 53px;
/*left: 68%;*/
float: right;
height: 14%;
width: 19%;
display: none;
border: thin solid black;
border-top: none;
}

.layout #buttonDiv{
/* This is the right end of the header bar box */
background: #4878CA;
/* position: fixed;*/
/*top: 0;*/
/*left: 70%;*/
float: right;
margin-right: 10%;
width: 20%;
height: 52px;
padding-top: 3px;
font-size: 16px;

}

.layout #companylogobox {
background: #4878CA;
/* position: fixed;*/
top: 0;
margin-left: 10%;
float: left;
width: 20%;
height: 52px;
padding-top: 3px;
font-size: 16px;

}

.layout #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
border: inherit;
}

.layout #mainContent {
/* remember that padding is the space inside the div box and margin is the space outside the div box prev: padding: 0 20px; */
padding: 4% 3%;
padding-bottom: 1%;
background: #C5CDF1;
border: 0px;
clear: both;
}
.layout #footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#4878CA;

}
.layout #footer p {

margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

</style>

</head>

<body class="layout">

<div id="container">

<div id="header">header
</div>

<div id="companylogobox">
<p>This is where company logo goes.</p>
</div>

<div id="buttonDiv">
<p>>>>login<<<</p>
</div>

<div id="registerBox">
registerbox
</div>

<div id="loginBox">

 <span id="loginErrorMsg" style="color:#FFFFFF; text-align=center"> </span>

</div>

<div id="mainContent">
<p>mainContent</p>
</div>

<div id="footer">
This is the footer.
</div>
</div>

</body>
</html>

**catatung** · 05-10-2010, 04:02 PM

Hi Lady,

Hmm, I have IE7 on my computer and it was showing div's differently than Firefox was. I did read about a quirks mode / standards compliant mode - is there a way to particularly turn it on? Do I have to use the strict DTD to turn on standards compliant mode?

Thanks for taking the time out to try my code. The add-ons I have installed are AVG Safe Search, Adblock Plus, DOM Inspector, Skype extension for Firefox and Webslingplayer. I can take them out and try it again, though I would think any behaviors induced from an add-on, whether a file loaded via local filesystem VS pulled in from a webserver on a port would affect the rendering in both situations.

My real curiosity is how Firefox can render a page two different ways with one source. Essentially, as I understand it, the *view source* option shows the data which was read into the browser and used to render the page. From that point the browser uses all of this information to display the page the way it decodes it. Correct me if I'm wrong, but to continue my thought - If that is the case then no matter where it's read from, if it's the same source code, there should be no way for it to look different.

I can get around this problem I'm sure, by developing to the testing server directory directly and testing it via the internet to ensure I'm developing around accurate feedback whenever I preview the site during development. But now I am curious how Firefox could do that, and what reason could be behind two visual versions generated from the same exact source code.

**LadynRed** · 05-11-2010, 02:27 PM

Quote:

Do I have to use the strict DTD to turn on standards compliant mode?

No.
Quirks mode generally happens when you have NO doctype specified.

Quote:

My real curiosity is how Firefox can render a page two different ways with one source.

It doesn't.. it's displaying what's fed to it by the server. What you see in "view source" is the rendered code if scripting like PHP is involved. I had no problem seeing it locally and on my server, they were exactly the same, using your unaltered code.

How are you previewing the site on your local machine?

**catatung** · 05-11-2010, 04:26 PM

The setup that I have is wampserver and Dreamweaver. I develop to c:\wamp\www which is the documentroot of the wampserver. I preview with F12, which browses to http://localhost/index.php.

The first time I noticed the problem was when I copied C:\wamp\www to my linux www directory and accessed it over the internet. I saw the difference. I've since determined, for the sake of simplicity, that browsing to c:\wamp\www\index.php causes the same problem.

In essence, this is the same file. index.php in the documentroot directory is the exact same file as would be fed via http://localhost. That's what's confusing me, and thats why I say it is displaying two pages that look different based on loading the same source. IE7 displays the page the same no matter which way I load it. But Firefox has the differences that you can see in my video.

It's very strange.

**catatung** · 05-11-2010, 06:04 PM

I've simplified this even more. Take a look at this code:

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<style>
#centerbox {
position: fixed;
top: 100px;
left: 100px;
border: solid thin black;
font-size: 100px;
}
</style>

<p>This is paragraph text.</p>
<div id="centerbox">
This is text inside a div.
</div>


</body>
</html>

This shows differently if I load it via c:\wamp\www\test.htm VS http://localhost/test.htm. That can't be right.

**catatung** · 05-11-2010, 06:13 PM

I've just tested my original code on my linux server, Firefox Version 3.0.2. It renders the page the same by the internet address that reads in the file VS local file loading (/data/www/fix/index.php).

This leads me to believe it's a problem with the OS itself. I am thinking that the OS somehow interjects and puts in it's own default font if it knows that a web page was loaded from a local file rather than an internet address. Anyone agree? Linux does not exhibit this problem. And unless Firefox changed something between 3.0.2 and 3.0.6 I would say the difference has to be in the environment of it.

I know I can explicitly specify the font to solve this.. Though I am interested in understanding and finding out why one source can display two different ways, not just working around the "problem"

**LadynRed** · 05-12-2010, 11:20 AM

If you're using a font that ONLY exists on YOUR system, that others viewing your site from a web server would not have, then the browser is going to substitute with a 'standard' font, so the font thing does make sense in that scenario.

**catatung** · 05-12-2010, 04:59 PM

That is true but in my testing I am using the same computer, same browser, same everything. The only difference is I am loading the page via local file via the filesystem vs. through a server running locally on the computer, so I can't see how it should be making any changes or compensations... It's probably a windows bug, or dare I say "feature" as programmers always call these things

**catatung** · 05-14-2010, 05:15 PM

I've also noticed that the result from loading as a file (c:\xxx\yyy\file.php) vs loading via an internet address share the same result, so Lady that is probably why you didn't see a difference...

The differential result comes from loading via a local webserver (wampserver) running on the local machine that I am browsing from and browsing to http://localhost/file.php. It could be said that maybe the local webserver is doing something to cause firefox to render the page differently, however since the "view source" shows the same in both scenerios, that shoots that theory down... Unless firefox is lying about the source it was given from wampserver which I doubt.