Display online is different than on my hard drive.

boggarty · 15th April 12, 07:14 PM

This may be an IT question but I am at my wits end.

I have moved from windows xp to windows 7 and since then when I design my pages they don't display the same online as on my hard drive. But if I view the files on my partners machine he file appears as I have written the code.

I always start my css with

body, div, h1, h2, p
{
margin:0px;
padding:0px;
}

but if I then use "margin-top" what ever is above shifts down eg.

div 2
{
margin-top:20px
}

the html is like this

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>

<body>
<div class="contain">

<div>the is is <br />
20px from the top</div>

</div>
</body>
</html>

Css is

body, div, h1, h2, p
{
margin:0px;
padding:0px;
}

body
{
font-size:14px !important;
font-family: Arial, helvetica, sans-serif;
color:#000;
background-color:#fff;
}

.contain
{
margin-left: auto;
margin-right: auto;
width:1240px;
height:769px;
background-image: url(images/bg-top.jpg);
background-repeat:no-repeat;
}

div 2
{
margin-top:20px
}

so in this case the "contain" div it shifts 20pixels down

chrishirst · 15th April 12, 08:31 PM

Well,.. Errm, ... Yes. ... adding a 20 pixel top margin will certainly "move" an element down 20 pixels.

So it should be at this point I should tell you that;

A/ A space in HTML is a delimiter, so div 2 is NOT a valid reference.

B/ classnames and IDs must NOT begin with a numeric, so the '2' is ignored and the margin-top rule is applied to all div elements in the document instead.

The differences between the two machines will be due to the browser in use, probably IE7 or IE8 on XP and IE9 on Windows 7.

boggarty · 16th April 12, 09:54 AM

Thanks for your reply. I firstly will hae to appologies as I copy and pasted the wrong code.

It goes like this:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>

<body>
<div class="contain">

<h1>The <br />
title</h1>

<div id="facebook"><img alt="facebook" src="images/facebook.png" /></div>

</div>
</body>
</html>

and the CSS:

body, div, h1, h2, p
{
margin:0px;
padding:0px;
}

body
{
font-size:14px !important;
font-family: Arial, helvetica, sans-serif;
color:#000;
background-color:#fff;
}

.contain
{
margin-left: auto;
margin-right: auto;
width:1240px;
height:769px;
background-image: url(images/bg-top.jpg);
background-repeat:no-repeat;
}

img{border:none;}

h1
{
margin-top:50px;
text-align:center;
margin-left: auto;
margin-right: auto;
}

#facebook
{
margin-top:40px;

}

That may make things easier, sorry about that.

I always under the impression that if you use a class or id it only effects the div (or h1 etc) you are in, not the one that contains it.

The silly thing about displaying different is it a problem accross all browsers explorer, crome and firefox. As I said viewed from my machine its a problem but with files on my machine but viewed on another machine they look as intendend. Yet as an experiment we but the files onto the other machine and the html files displayed wrong on that machine but fine on mine acroos the network, again across all browsers thats why I think its an IT problem. I would post up a link but it would display fine.. the irony. What i am trying to do is have the text over the image. but even then when i have done other projects I have found this has happened even when a div is is inside 3 or four others. The main problem is margin-top.

chrishirst · 16th April 12, 11:27 AM

Do both machines have EXACTLY the same screen resolution set?
The same display card/rendering engine to convert from CSS pixels to screen pixels?
Your document is set to display at a fixed width, do both machines handle that width?

There are many many other "issues"

Quote:

I always under the impression that if you use a class or id it only effects the div (or h1 etc) you are in, not the one that contains it.

It affects the element(s) that it is applied to, however as your class name is malformed (div 2) it is NOT seen as a classname, as I said earlier the space is invalid in the name your rule would be seen as a descendant selector and therefore only affect a child <2> element of a div element.
BUT as there is no <2> element in HTML and classnames or IDs cannot start with a number, is is ignored so the rule applies to <div> elements.

Thirdly:
Running a HTML document "locally" does NOT always work the same as running the HTML document from a server. Some things are blocked in 'local' rendering by the security that is built in to browsers.

15th April 12, 07:14 PM	#1
boggarty WLC Member Join Date: Apr 2009 Location: Lincolnshire Posts: 14	Display online is different than on my hard drive. This may be an IT question but I am at my wits end. I have moved from windows xp to windows 7 and since then when I design my pages they don't display the same online as on my hard drive. But if I view the files on my partners machine he file appears as I have written the code. I always start my css with body, div, h1, h2, p { margin:0px; padding:0px; } but if I then use "margin-top" what ever is above shifts down eg. div 2 { margin-top:20px } the html is like this <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> <title>Untitled Document</title> </head> <body> <div class="contain"> <div>the is is <br /> 20px from the top</div> </div><!-- end of contain --> </body> </html> Css is body, div, h1, h2, p { margin:0px; padding:0px; } body { font-size:14px !important; font-family: Arial, helvetica, sans-serif; color:#000; background-color:#fff; } .contain { margin-left: auto; margin-right: auto; width:1240px; height:769px; background-image: url(images/bg-top.jpg); background-repeat:no-repeat; } div 2 { margin-top:20px } so in this case the "contain" div it shifts 20pixels down

15th April 12, 08:31 PM	#2
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: Display online is different than on my hard drive. Well,.. Errm, ... Yes. ... adding a 20 pixel top margin will certainly "move" an element down 20 pixels. So it should be at this point I should tell you that; A/ A space in HTML is a delimiter, so div 2 is NOT a valid reference. B/ classnames and IDs must NOT begin with a numeric, so the '2' is ignored and the margin-top rule is applied to all div elements in the document instead. The differences between the two machines will be due to the browser in use, probably IE7 or IE8 on XP and IE9 on Windows 7.

16th April 12, 09:54 AM	#3
boggarty WLC Member Join Date: Apr 2009 Location: Lincolnshire Posts: 14	Re: Display online is different than on my hard drive. Thanks for your reply. I firstly will hae to appologies as I copy and pasted the wrong code. It goes like this: <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> <title>Untitled Document</title> </head> <body> <div class="contain"> <h1>The <br /> title</h1> <div id="facebook"><img alt="facebook" src="images/facebook.png" /></div> </div><!-- end of contain --> </body> </html> and the CSS: body, div, h1, h2, p { margin:0px; padding:0px; } body { font-size:14px !important; font-family: Arial, helvetica, sans-serif; color:#000; background-color:#fff; } .contain { margin-left: auto; margin-right: auto; width:1240px; height:769px; background-image: url(images/bg-top.jpg); background-repeat:no-repeat; } img{border:none;} h1 { margin-top:50px; text-align:center; margin-left: auto; margin-right: auto; } #facebook { margin-top:40px; } That may make things easier, sorry about that. I always under the impression that if you use a class or id it only effects the div (or h1 etc) you are in, not the one that contains it. The silly thing about displaying different is it a problem accross all browsers explorer, crome and firefox. As I said viewed from my machine its a problem but with files on my machine but viewed on another machine they look as intendend. Yet as an experiment we but the files onto the other machine and the html files displayed wrong on that machine but fine on mine acroos the network, again across all browsers thats why I think its an IT problem. I would post up a link but it would display fine.. the irony. What i am trying to do is have the text over the image. but even then when i have done other projects I have found this has happened even when a div is is inside 3 or four others. The main problem is margin-top.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode