WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > HTML & XHTML > Display online is different than on my hard drive.

Reply
  Thread Tools Display Modes
Old 15th April 12, 07:14 PM   #1
boggarty
WLC Member
 
Join Date: Apr 2009
Location: Lincolnshire
Posts: 14
Default 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
boggarty is offline   Reply With Quote
Old 15th April 12, 08:31 PM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,196
Default 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.
chrishirst is offline   Reply With Quote
Old 16th April 12, 09:54 AM   #3
boggarty
WLC Member
 
Join Date: Apr 2009
Location: Lincolnshire
Posts: 14
Default 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.
boggarty is offline   Reply With Quote
Old 16th April 12, 11:27 AM   #4
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,196
Default Re: Display online is different than on my hard drive.

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.
chrishirst is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:46 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.