Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to make this div shift more to the top left corner?

Status
Not open for further replies.
ReportingAnalyst

ReportingAnalyst

MIS
Oct 11, 2006
300
US
Hi,

What can I do make this div within the body tag shift more left? I see thin space of the body on the top and left of the div. How I shift more top and left so that the body background is not seen there?

See this code and let me know if I need to add more properties within the div_Container class?

Thanks.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

<HTML>
<HEAD>
<style type="text/css">
body
{
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color:#5a5b5e;
font-size: 12px;
background-color: #DDDDDC;
overflow: auto;
}
/*This div should be able show a horizontal scroll bar and it contains all the nested divs within it */
.div_Container
{
width:850px;
height: 650px;
background-color: #FFFFFF;
}
</style>

<TITLE>View Commissions Reports</TITLE>
</HEAD>

<body>
<!-- This is the top most level which holds all the content divs -->
<div class="div_Container">
All nested div come here.
</div>
</body>
</form>
</body>
</html>
 
Sort by date Sort by votes
make the following css change:
Code: 
<style type="text/css">
[!]* {
   margin:0px;
   padding:0px;
}[/!]
body
{
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color:#5a5b5e;
font-size: 12px;
background-color: #DDDDDC;
overflow: auto;
}
/*This div should be able show a horizontal scroll bar and it contains all the nested divs within it */
.div_Container
{
width:850px;
height: 650px;
background-color: #FFFFFF;
}
</style>

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
It worked. Thanks.

But what is the meaning of that * ? What does it do?

When I do:

margin-top: 0px
margin-left: 0px

It does achieve the same effect. So what is it that the * does?

Thanks.
 
Upvote 0 Downvote
The asterisk (*) is essentially a wildcard. Kaht's code sets margin and padding to zero for 'all' selectors.
This overrides the defaults for browsers which do vary widely.
Your margin-top and margin-left only appear to do the same thing - there is still a varying margin on the right and bottom, depending on the browser.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Not to mention that Opera (used to?) creates the body gutter using padding and not margin.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
713
bdwilcox
bdwilcox
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
204
lmcate
lmcate
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
756
pmonett
pmonett

Part and Inventory Search

Sponsor

Back
Top