|
CSS - Space On Top Of The Page. Css Problem Maybe
I am building a new page and I'm having problem having this space on top of it.
here's the situation. All Divs are inside a Parent Div called Container. This div has the following qualities: body { margin-top: 0; padding-top: 0; background-image: url(images/bg.gif); background-repeat: repeat-x; background-attachment: fixed; background-color:#003366; font-family:Arial, Helvetica, sans-serif; } #container { position:relative; width:1000px; height: 1250px; top: 0; margin-left: auto; margin-right: auto; margin-top: 0; border: 1px black solid; z-index: 3; } If I remove the container Div and just have the child Divs then the space on top disappears and the page goes to the top, however it gets aligned to the left. As you can imagine what I want is the page both centered and on top, so I'm pretty much working with the files that have the container, so that's why I'm trying to fix either I'm assuming there is an issue with the CSS of the menu, because it's the only rare addition apart from the normal CSS. If I do in the main parent container position:absolute instead of relative. it then goes to the top, but it's not centered. I've been working on this all day long but can't figure out a solution, if you can please help me out. Similar TutorialsFor some reason, I cannot for the life of me figure out why Firefox is adding space at the top of my page. I have a container div that contains my header, body, and footer. I have done this: Code: #container{
width: 732px;
margin: 0px auto;
}
Too me that should fix the issue. I even tried applying that code to the body{ ... } but that doesn't work either. Has anyone else gone through this before. There is no space in IE6 or IE7. Thanks, teamhonda81 Please have a look at http://www.xxxx.co.uk/cssproblem/ Can anyone tell me why IE renders this page with a small space between the header and subheader divs? And how to fix. Thanks I added a nav bar to my page. when I did so I now get a white space at the top of the page above the pictures I'm not sure why. Here's a link the the page Dead Link(Link removed because it contained copyrighted content that was more than fair use would allow for. I don't want my friend getting in trouble) any help would be appreciated. For some reason, I cannot for the life of me figure out why Firefox is adding space at the top of my page. I have a container div that contains my header, body, and footer. I have done this: Code: #container{
width: 732px;
margin: 0px auto;
}
Too me that should fix the issue. I even tried applying that code to the body{ ... } but that doesn't work either. Has anyone else gone through this before. There is no space in IE6 or IE7. Thanks, teamhonda81 I can't seem to work out where the huge space at the bottom of the pages are coming from. This is the test page http://midnighttempest.com/layouttest.html as you can see at the bottom of the page there is a huge gap under the text which i can't get rid off. Anyone help? Hello, i created a site called knowledgeocity.com and it looks fine in Firefox, but in IE7, there is extra space at the bottom between the logo on the right side and the footer, does anyone know how to fix that? I tried margin bottom, but did not work. thank you Thanks for taking the time to read my question I am starting to make a page, and for some reason I have a white space between two sections of my page. I don't know why. I don't have a domain for this page yet, so I've put it under my band domain. The space is between the Menu and the info portions of the page. Any ideas? http://www.pierced.ca/kelly/ css: Code:
@charset "iso-8859-1";
body {
text-align:center;
margin-top: 10px;
background-color: green;
background-image: url(C:/Documents and Settings/McIntyBD.MAPLELEAF/Desktop/Kelly/images/fall-leaves.jpeg)
/*background-color: #d8d8d8;*/
}
#frame {
width: 640px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: white;
}
#header {
width: 640px;
height: 100px;
color: #A6A6A6;
background-color: #b12514;
padding-top: 20px;
padding-left: 8px;
padding-right: 20px;
padding-bottom: 8px;
/*border: medium solid #E0E0E0;*/
}
#footer {
width: 640px;
height: 20px;
background-color: #b12514;
color: #A6A6A6;
padding-top: 20px;
padding-left: 8px;
padding-right: 20px;
padding-bottom: 8px;
/*border: medium solid #E0E0E0;*/
}
#menu {
color: white;
font-weight: bold;
float: left;
width: 100px;
height: 400px;
text-align: left;
text-transform: uppercase;
font-size: 20px;
background-color: #FD9800;
/*border-left: medium solid #E0E0E0;
border-right: medium solid #E0E0E0;
border-bottom: medium solid #E0E0E0;*/
padding: 8px;
line-height: 25px;
}
#menu a:visited {
color:aqua;
font-size: 12px;
width: 84;
}
#menu a:hover {
color:#005c00;
font-weight: bold;
font-size: 12px;
width: 84;
}
#Menu a {
color:yellow;
font-size: 12px;
width: 84;
}
#info {
background-color: #ffc047;
color: #005c00;
height: 400px;
padding-top: 20px;
padding-left: 8px;
padding-right: 20px;
padding-bottom: 8px;
text-align: left;
font-size: 16px;
}
#info p {
text-indent: 12px;
font-family: ZapfChan MdIt BT;
letter-spacing: 4px;
line-height: 25px
}
a:visited {
color:#FFFF00;
font-size: 12px;
}
a:hover {
color:#FFFFFF;
font-size: 12px;
}
a {
color:#A0E5FF;
font-size: 12px;
}
Hi there, Not entirely sure this is a CSS issue, but something tells me it is... I'm getting a weird space at the top of my pages in IE, which consequently causes the header to not align properly with the header background image. It works just fine with FireFox though. You can view the issue he http://hsdc.groundedgroup.com/ Does anybody know how to remove this space? Thanks in advance. I'm having problems with a web page not viewing correctly in IE7. Here is a link to the page: test(dot)phoenixit(dot)com(dot)au/GBDGP/index(dot)asp The left and right columns should be level (top) with the centre content area. Any help on this would be greatly appreciated. Cheers Hi, I'm new here and hope someone can help! I wasn't sure whether to post this in the CSS or Flash forum; it's a problem caused by Flash which I suspect needs some clever CSS to resolve. My new website is carolineofbrunswick (dot) co (dot) uk. As you can see, there's a ton of blank space off to the right of the pages, and I can't figure out how to get rid of it. It's caused by the Flash objects in the right-hand column. Changing the width attributes on those Flash objects just causes them to not appear at all, though the blank space still exists. Can anyone help? Cliff I am working on a site and have found a problem that I can't explain on my own. I would like someone to look at this site: http://www.canada-training-group.ca and tell me why there is extra space at the top in IE but not in Firefox. Thanks, Timmy-d Thanks for taking the time to read my question. Have posted 2 examples of my problem. Example 1: http://www.pierced.ca/Kelly/indexCOPY.htm Page http://www.pierced.ca/Kelly/kelly1.htm CSS http://www.pierced.ca/Kelly/kelly1.css CSS (this one will download) Here my rounded corners don't line up to the bottom of the "info" area. Not sure why. Example 2: http://www.pierced.ca/Kelly/indexCOPY2.htm http://www.pierced.ca/Kelly/kelly2.htm CSS http://www.pierced.ca/Kelly/kelly2.css CSS (this one will download) Here my rounded corners line up, but I get an extra space under the "menu" section. Not sure why. I am totally stuck. I am not sure how to fix it. I have tried adding height to the menu, but that doesn't work. Thanks for you help, Brad Hi Ya'll, I am currently working on a site and am having a few issues with Firefox. One of the issues is a big space that appears in a product display page between the first and second product. The spacing between the rest of the products is always correct. Since this page is generated from a database I can't understand why the gap only appears in that place and not anywhere else. The code for each block is the same: http://www.cdrom-businesscard.co.uk...?category_id=19 Thanks for any pointers! Hi, If you look at the following page you will see there is a gap under the sidebar elements at the top. LINK HERE In FF its not there yet in IE it is, any ideas how i can remove it? Thanks, Mike Hi guys, I'm having a problem with spacing beneath my image. I have an image at the bottom of a div. When I change the display to block, the space below still remains. When I place the image as a background inside my div it doesn't display. Any help with either or both of these would be great. The page is located he rhodyandcrystal.com/staging/party.html The div on the right has an image as a bg and the div on the left has the image located at the bottom. I just did this so you could see both, and that they aren't working. Thanks again for any help! Duke Hello My problem is maybe a easy to solve one, but I realy don't know how to get it right. I have a list of links and want them equaly vertical spaced between all the line of links. link1 (space) link2 (space) link3 What I got doesn't look right in IE and Netscape at the same time. Is there a css tactic to get it right in both browsers? Please can someone help me? Hi All- For some reason when I use a bunch of DIV tags to position elements on my page, the page keeps getting longer and longer with white space. Does anyone know what will remedy this extra whitespace? Thanks, infinity003 |
|||||||