I'm using CSS to center my pages...which works fine, however I would also like to eliminate the small space at the top so my page is flush with the top of the screen...both in IE and FireFox. The CSS code I'm using is: - #container {
-
width: 980px;
-
margin-right: auto;
-
margin-left: auto;
-
margin-top: none;
-
-
}
Thanks in advance for any advice..
19 32233
Hi torweb,
Browsers usually add default margins and paddings on the body and other elements. To eliminate this, write:
My #Container is a Div ID. If I change the code to: - #container {
-
width: 980px;
-
margin-right: auto;
-
margin-left: auto;
-
margin-top: none;
-
padding: 0px;
-
margin: 0px;
-
}
It still doesn't remove that space. If I put the padding and margin within the body definition, my page no longer centers. Is this not working as my style section is referring to a div.
Thanks
As just a feeling pointed out some browsers add padding and margins where there are none. This has nothing to do with your div because it's already there. Add the code that he provided and it should work.
Thanks, Death
Am I doing this wrong as I thought I did put the margin and padding amounts in my container definiton... - #container {
-
width: 980px;
-
margin-right: auto;
-
margin-left: auto;
-
margin-top: none;
- padding: 0px;
-
margin: 0px;
-
}
Am I doing this wrong as I thought I did put the margin and padding amounts in my container definiton... - #container {
-
width: 980px;
-
margin-right: auto;
-
margin-left: auto;
-
margin-top: none;
-
padding: 0px;
-
margin: 0px;
-
}
-
lol yes try it like this. - * {
-
margin:0;
-
padding:0;
-
}
-
-
#container {
-
width: 980px;
-
margin-right: auto;
-
margin-left: auto;
-
margin-top: none;
-
padding: 0px;
-
margin: 0px;
-
Thanks, Death
Well...it may be time to hit the bottle. Here is the whole page code (temp page) and still a space. If I can get this figured out I'll always be able to help others like myself.
Thanks - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-
"http://www.w3.org/TR/html4/loose.dtd">
-
<html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-
<title>Untitled Document</title>
-
-
<style type="text/css">
-
<!--
-
{
-
margin:0;
-
padding:0;
-
}
-
-
#container {
-
width: 980px;
-
margin-right: auto;
-
margin-left: auto;
-
margin-top: none;
-
padding: 0px;
-
margin: 0px
-
}
-
-->
-
</style>
-
</head>
-
-
<body>
-
<div id="container">
-
<table width="100%" border="0" cellspacing="0" cellpadding="0">
-
<tr>
-
<td bgcolor="#CCCCCC"> </td>
-
</tr>
-
</table>
-
</div>
-
</body>
-
</html>
You didn't add the asterisk(sp?).This is what you added:
This is what you needed to add: - * {
-
margin:0;
-
padding:0;
-
}
-
Thanks, Death
You didn't add the asterisk(sp?).This is what you added:
This is what you needed to add: - * {
-
margin:0;
-
padding:0;
-
}
-
Thanks, Death
Death - thanks to you. I have the same issue and your solution worked fine, well in IE, but in FF, it now aligns left when it is set to align center. (same issue that original poster had.)
Thanks for all the great help Death....this worked great in IE and Firefox: -
<style type="text/css">
-
<!--
-
#container {
-
width: 980px;
-
margin-right: auto;
-
margin-left: auto;
-
}
-
* {
-
margin:0;
-
padding:0;
-
}
-
-
-->
-
</style>
Death - thanks to you. I have the same issue and your solution worked fine, well in IE, but in FF, it now aligns left when it is set to align center. (same issue that original poster had.)
Post your code or a link and I'll be glad to help you.
^_^ Thanks, Death
Thanks for all the great help Death....this worked great in IE and Firefox:
[HTML] <style type="text/css">
<!--
#container {
width: 980px;
margin-right: auto;
margin-left: auto;
}
* {
margin:0;
padding:0;
}
-->
</style>
[/HTML]
No problem it's what I'm here for.
^_^ Death
Death where do you live!!!!! I WANT TO HUG YOU AND NEVER LET GO this has saved me sooooooooooooooooooo much time and before it was SUPER annoying to fix and you have practically just stopped me from commiting suicide think of it as you have saved many peoples lives and work that was not need to be done THANK YOU!!!!!
Death where do you live!!!!! I WANT TO HUG YOU AND NEVER LET GO this has saved me sooooooooooooooooooo much time and before it was SUPER annoying to fix and you have practically just stopped me from commiting suicide think of it as you have saved many peoples lives and work that was not need to be done THANK YOU!!!!!
Your welcome... Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Hi, I was having the same problem as the original poster. The code provided fixed it, but only in FF. In IE the page is now left aligned. Please help.
The code: -
* {
-
margin:0px;
-
padding:0px;
-
}
-
-
-
div.container {
-
width:950px;
-
height:700px;
-
background-position:center center;
-
margin-left:auto;
-
margin-right:auto;
-
font-family:calibri, arial, verdana, 'times roman';
-
font-size:1em;
-
color:white;
-
background-color:#181717;
-
}
Also I want to make a banner start furhter down the page, but when I put a top margin on it the container makes the space again. The code is the same as shown but with the addition of: -
div.heading {
-
width:650px;
-
height:100px;
-
border-style:inset;
-
border-width:1px;
-
border-color:white;
-
background-color:black;
-
font-family:BankGothic Md BT;
-
font-size:3em;
-
color:white;
-
text-align:center;
-
background-position:center;
-
margin-left:auto;
-
margin-right:auto;
-
margin-top:10px;
-
}
torweb and AJM Project,
When posting code samples you are expected to surround your code with the [code][/code] tags. I have edited your posts to include them. In the future please use the code tags.
Thank You,
Kevin
@Death Slaught
Worked a treat for me too Death - FF 3.5, Safari, IE8, Flock.
When I figure out how to get Trackbacks on Blogger, I'll give you some of those too!
Hey thats so simple
Set your margin for <body> tag
body{
text-align:center;
margin-top:0px;
}
Thanks Death. Would you mind explaining what the '*' defines though?
@a new eRRoR
An asterisk, '*', in CSS is "The Universal Rule". When HTML is rendered in your browser, margin and padding are added to the elements. For example:
If you have an image on your page. - <img src="iamanimage.gif" alt="I am an image" />
Even without any stylings added to the page, the placement of the image could differ in Internet Explorer and Firefox. Internet Explorer could basically say, - img {
-
margin: 10px 20px 10px 30px;
-
padding: 0 5px 0 5px;
-
}
and Firefox could say, - img {
-
margin: 20px 10px 20px 10px;
-
padding: 5px 0 5px 0;
-
}
These values are not literal but I'm using them to give you a basic idea of what's going on. These values are added to whatever rules you create in your CSS. Thus the extra or lack of margin and padding across each browser. Thanks,
{\_/}
(' . ')
(")[Death](")
(")(") Sign in to post your reply or Sign up for a free account.
Similar topics
by: Thomas Elser |
last post by:
Hi,
I made a site using CSS absolute positioning for all my
content on the page. Now I try to figure out if it is possible
to center the pages without giving up the absolute positioning.
Can...
|
by: Jennie |
last post by:
I am looking for a way to make the web page have a formfeed so the info from
that spot will go to the top of the next printed page when I file>print the
web page. I want it not to break on the...
|
by: opt_inf_env |
last post by:
Hello,
I have the following fragment in my html document:
<h2>Text 1</h2>
<small>Text 2</small>
If I see this fragment with browser I see empty line between text1 and
text2. Do you know...
|
by: Harris Kosmidhs |
last post by:
Please check http://www.episfaleia.gr/links.php
Why doesn't the page centers on screen?
After googling I use for #page margin-left:auto and margin-right:auto.
thanks
|
by: blueplato |
last post by:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>...
|
by: dangermouse |
last post by:
ok First time here and this is no doubt something really obvious I am overlooking. I use the following css and html to try and center a container div on a page. For the life of me it will not center...
|
by: Turbot |
last post by:
Hello there,
I have a .net user control that I am displaying on a web page using
the following syntax for my object tag:
<object id='objLauncher' name='objLauncher' Style='width:600px; height:...
|
by: FrEaKmAn |
last post by:
Hello
I'm wondering if I can align some div to the center of the page (horizontal and vertical). We are talking about the option to scroll up/down and that div still stays at the center. I know...
|
by: cleary1981 |
last post by:
Hi,
Heres my xsl stylesheet. Its work in progress but it works. What I want to do however is to make one page in the middle (drawings) a landscape page. Can anyone explain how to do this as all...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
| |