|
CSS - Extra Space Before Table
I have an extra PHPNuke (Ravennuke 2.02) module for the start page. Several pieces of information are displayed in various cells of a table. I have a problem were there is some extra space at the beginning of a table that I cannot get rid of. I saved the output and uploaded he
http://www.linux-tutorial.info/index_test3.html after the site title and before the tag line "The place where you learn Linux", there is a large space. In this example, the title is in a separate table, followed by a new table for the information blocks. If I put them in the same table the space appears before the title block. The relevant block of code looks like this: Code: <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr valign="top"> <td class="welcome_title_box" valign="top" colspan="2"> <div align="center" class="welcome_main_title"> Welcome to the <br>Linux Knowledge Base and Tutorial</div> </td></tr></table> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr><td valign="top" width="50%"> <span class="subtitle">"The place where you learn Linux"</span> <br><br> Looking for an in-depth and easy-to-understand introduction to Linux? Then look no further! <br> We don\'t just show you how to execute a handful of commands and use a few utilities. The Linux Tutorial goes beyond the basics, providing you with the knowledge necessary to get the most out of your Linux system. <br><br> Jump right in by clicking <a href="http://www.linux-tutorial.info/modules.php?name=MContent&pageid=224"> here</A>. </td> If I removed the highlighted code, the space appears before the site title. If I remove the whole DIV containing the title, I still have the space above the tag line. This says to me that it is not related to the division. It seems that this row or the table itself is pulling the formatting from somewhere else. That would be a logical consequence of the cascading aspect of CSS, but I do no see where it is gettign the space from. Admittedly I am not all that good with CSS/formatting, so it is possible (if not likely) that I overlooked something. Note that in the index_test3.html, I close the table at the end of the first row (prior to the list of news and threads) then open a new table: Code: </table><table border="0" cellpadding="0" cellspacing="0" width="100%" > If I change BGCOLOR for the first table and then change the line above to this: Code: </table>HERE<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="RED"> The space is after the word "HERE". If I remove this code, the extra space is right after the row/div with the site title and before the row with the tag-line. This all make me think that the extra space is being added before the next table, as opposed to at the end of the previous table. There are a number of posts in the CSS forum that I tried like changing the margin (style="margin: 0px"), but none of the solutions solved the problem. I have tried all sorts of combinations of spacing and alignment, but I cannot get rid of this space. I have tried loaded the page with multiple browsers (Konqueror, FIrefox, IE 6) with the same results, so I do not think it is a browser specific issue. Any and all input is greatly appreciated. Similar TutorialsOK...thbbt. Situation 1 (the one that works as I want) Code: <table style="width: 100%">
<tr>
<td style="width: 15em">Column 1</td>
<td>Column 2</td>
</tr>
</table>
In Situation 1, the second column expands to be all of the remaining width. This is good. Situation 2 Code: <table style="width: 100%">
<tr>
<td style="width: 15em">Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</table>
In Situation 2, column 2 and 3 share the remaining space. I want column 2 to take no more than exactly the space it needs. I want column 3 to expand to take all the remaining space. The only way I've found that (sorta) works is to actually use the old HTML width="" attribute and make it a percentage that's impossible. If you make it 95% or something, then all the other columns squeeze down pretty far. The issue with this approach is that it ignores the style width of the first column and just crushes it as much as possible. Anyone have an idea? Thanks Tim http://www.zombiepolitics.com Just when I thought I had this down .. I dont. I have a CSS layout .. there are two main divs side by side, the navigation rests at the top of the right div. problem is in IE 6 there is so much extra space at the top that my navigation doesnt line up with my header .. in FF its no problem. What is the workaround for this? I'm working on a web site that has a jFlow slideshow (not implemented just yet) and I was mocking up a page with just a plain img in its place. When the page is viewed in FF 3.5, there is extra space to the right and bottom of the image. However, it shows as expected in IE8. I can't figure this out for the life of me. If I "use border box model" from the Google Web Developer toolbar in FF, it shows as desired as well. Here's a link to the file: http://www.websimage.com/3238/index2.html I've been trying to figure this out for a while now and I'm getting nowhere but frustrated, so any help you could provide would be *greatly* appreciated. EDIT: I've found some information regarding box-models, and have applied the -moz-box-model: border-box; which seems to have eliminated the additional space within the gray div...however, there is an additional 10px of unwanted padding on the right & left of it now. I can live with this, but I don't want to if I don't have to. Edit #2: If I take out the margin-left: auto; and margin-right: auto; (to center it) the extraneous padding is not on the left, but is added to the extraneous padding on the right. All the math adds up when it comes to the widths and padding specified for the respective "wrappers" so I'm at a loss as to what's causing this. So I am trying to move from designing in <tables> and move on to the beauty of the CSS box-model design. I have been inspired by one of the ZenGarden designs and wanted to see if I could try and duplicate it's flow. I am running into a problem. I have created the outer box "#mainBox" and nested within this I have a child "#pageHeader." Problem is that there is this big amount of space (that is present in both IE6 AND FireFox 1.0) at the bottom of "#pageHeader." See the attached pic for the exact detail. Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head><title>The Shalom Foundation</title>
<style type="text/css">
<!--
body {
text-align:center;
background-color:#666666;
margin:0 0 50px 0; /* top right bottom left */
}
p{
padding:0;
margin:0;
text-align:justify;
}
#mainBox {
float:right;
margin:9px 12px 0 0;
padding:0px;
width:733px;
text-align:left;
background-color:#999999;
}
#pageHeader{
background: url(images/layout/header.jpg) no-repeat top left;
padding:0;
margin:0;
text-indent: -15000px;
height: 290px;
overflow: hidden;
}
#nav{
position:absolute;
right:100px;
margin:0;
background: url(images/layout/menu.jpg) no-repeat top left;
padding:0;
margin:0;
width:136px;
height: 302px;
overflow: hidden;
}
-->
</style>
</head>
<body>
<div id="mainBox">
<div id="pageHeader">The Shalom Foundation</div>
<div id="nav">Nav</div>
<div id="contentHdr"><table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle"><img src="images/layout/hdr_about_us.gif"></td></tr></table></div>
<div id="content"><p>Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult homo, aliqua
portio creaturae tuae, et homo circumferens mortalitem suam, circumferens testimonium peccati sui et testimonium, quia superbis resistis: et tamen
laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum, donec
requiescat in te. da mihi, domine, scire et intellegere, utrum sit prius invocare te an laudare te, et scire te prius sit an invocare te. sed quis te
invocat nesciens te? aliud enim pro alio potest invocare nesciens. an potius invocaris, ut sciaris? quomodo autem invocabunt, in quem non crediderunt?
aut quomodo credent sine praedicante? et laudabunt dominum qui requirunt eum. quaerentes enim inveniunt eum et invenientes laudabunt eum. quaeram te,
domine, invocans te, et invocem te credens in te: praedicatus enim es nobis. invocat te, domine, fides mea, quam dedisti mihi, quam inspirasti mihi
per humanitatem filii tui, per ministerium praedicatoris tui.</p></div>
<div id="rightNav">rightNav</div>
<div id="pageFooter">pageFooter</div>
</div>
</body>
</html>
Thanks in advanced for any help! I have 2 columns. The main one and the sidebar. The problem is that the sidebar extends down the page further then the main column. I am using a color in the background. The color does not extend all the way down. The main area stops about half way down the sidebar and just leaves white space there. The whole page is colored except for this square of white in the middle. Also if I extend the main area content to be longer then the sidebar then the sidebar will have white underneath it instead. I've been trying to setup a basic template for a site. In firefox I got it looking pretty good, but in IE there seems to be about 3 pixels of extra space to the left of the header image. The url is: http://igocity.aoeex.com/ If you look in firefox, you can see the black box where the login form is, and the banner image to the right of it are side-by-side with no space between them. This is what I want. In IE, there is about 3 pixels of white space between the login box and the banner image. This causes the image to drop down below the login box instead of it being beside it normally. For now, I've expanded the width of the outer div so they are side by side, but with the space. I can't figure out why this space is there, or how to get rid of it. Any suggestions? The HTML for the header looks like so: Code: <div id="headerDiv"> <div id="loginBox"> <form method="post" action="/login.php"> <input type="text" value="" class="txtUsername" name="txtUsername" /><br /> <input type="password" value="" class="txtPassword" name="txtPassword" /><br /> <a href="login_help.php" class="loginTroubleLink">>> login trouble?</a> <input type="submit" value="log in" name="btnLogin" class="btnLogin"/> </form> </div><img src="images/road_trip_banner.jpg" width="540" height="80" id="headerBannerImage"/> </div> CSS can be seen at: http://igocity.aoeex.com/css/template_css.css I'm having a weird quirk happening at the bottom of a page I am developing. There is extra space, maybe 80-100px of it, showing up at the bottom in my container div (which I have id'd as "reality"). Can anyone suggest what might be shoving all that extra space in there? html page: http://www.iainhamp.com/reality/hyborianwar.html css page:http://www.iainhamp.com/reality/reality_hyborian.css Thanks for any help you can provide. - iain 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 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 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 pin down why I have extra space to the right of my containing DIV on my home page. All of the sub-pages (similar page layout) render fine, but the home page displays a bunch of space to the right. Any ideas? You can see what I mean at www . deepwaterchurch . com Hi, Can anyone please explain why the more text I add to the main content area 'full-size' div.... the more spacing gets added below it. Is there a way to stop this? example herel Code:
/*begin normal CSS
----------------------------------------------------*/
body {
text-align: center;
background: #362f25;
color: #333;
font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#wrap {
margin: 0 auto;
width: 960px;
text-align: left;
background: #f8f4f2 url(images/bg-wrap.gif) repeat-y 0px 0px;
padding-bottom: 5px;
}
/*classes
----------------------------------------------------*/
.full-size {
margin-left:20px;
margin-top:20px;
width: 700px;
font: 12px;
position:relative;
left:180px;
top:-370px;
}
/*header
----------------------------------------------------*/
#header {
height: 50px;
background: #362f25;
color: #d2cccb;
font: 15px "Palatino Linotype", Arial, Helvetica, sans-serif;
}
/* left nav menu
----------------------------------------------------*/
#navcontainer
{
width: 170px;
border-right: 1px solid #000;
padding: 0 0 0 0;
margin-bottom: 10px;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #90bade;
color: #333;
position:relative;
left:0px;
top:-30px;
}
#navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navcontainer li
{
border-bottom: 1px solid #90bade;
margin: 0;
}
#navcontainer li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 15px solid #006865;
border-right: 10px solid #203654;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #navcontainer li a { width: auto; }
#navcontainer li a:hover
{
border-left: 15px solid #203654;
border-right: 10px solid #006865;
background-color: #2586d7;
color: #fff;
}
Please take a look at a site I'm developing: http;//www.b4itwascool.com The CSS is he http://www.b4itwascool.com/css/main.css I'm also using a Lightbox 2.0, so that CSS is he http://www.b4itwascool.com/css/lightbox.css 1. There is a lot of extra space below the footer. I assume this is where the containers would have been had I not relatively repositioned them? How do I remove this space? 2. I want the right "steel" beam to repeat-y to the bottom of the page. I don't know why that's not working. 3. If you click the top links, you will see that sometimes the footer falls within the left "column", and sometimes it falls within the right column. How do I ensure it always falls to the right, like the way it appears on the homepage? thanks for any advice! I'm going through hell trying to make a site look the same in IE and Firefox. The biggest problem is the gaping spaces IE adds between elements. What is the best way to fix this? Example at patrolmag.com/new. Any advice or help would be most appreciated. P.S. How the page looks in Firefox 3 is ideal. I just need to make at least IE7 come somewhere close to matching it. 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 Simple layout but having issues with the left sidebar float aligning flush with the container next to it on top in IE. Works perfectly in FF of course. Here is the link to the page: http://www.kofc2332.org/new_site/ All help/suggestions/guidance is appreciated. Well from everything I can read this has something to do with collapsing margins; however, I have maintained a 0 margin, padding, and border throughout the document and just now does this space problem appear. If you pull up the page in IE I have a black bar directly underneath my nav bar. In Firefox that black bar appears about 10 pixels or so below the nav bar. What gives? I have tried everything and nothing works. If anyone can please look at what I have so far I would appreciate it. Thanks again. The CSS is in the HTML doc (no seperate CSS file yet) Link: http://trinitylifebaptistchurch.org/test/index3 Thanks for taking the time to read my question. I have 16 pictures on my page. In FF I have no extra space under each picture and in IE6 I do. Why? In IE you can see the container color (the non Orange colors) but in FF you don't. I've tried a bunch of stuff but can't figure it out. http://stuccotech.bravehost.com/ CSS: Code: html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: #000000;
background-image:url(MainBackground.jpg);
background-repeat: no-repeat;
background-position: top center;
}
.TheFrame {
height: 20px;
width: 20px;
background-color: white;
float: right;
}
.MainContainer {
width: 646px;
height: 549px;
background-color: #3f3f3f;
overflow: hidden;
padding: 0px;
margin: 0px auto;
background-image:url(BehindLogo.png);
background-repeat: no-repeat;
background-position: top left;
}
.LogoArea {
height: 200px;
width: 200px;
/*background-color: white;*/
float: left;
margin: 0px;
padding: 0px;
display: inline;
}
.Logo {
float: left;
height: 120px;
width: 240px;
padding: 0px;
margin: 0px 0px 0px 2px;
display: inline;
background-image:url(LogoWithText.png);
background-repeat: no-repeat;
background-position: top left;
}
.NavBarMain {
background-color: #966200;
height: 120px;
width: 370px;
float: right;
margin-right: 20px;
margin-top: 10px;
padding: 0px;
display: inline;
}
.NavBarContent {
background-color: orange;
height: 90px;
width: 370px;
float: right;
margin: 0px;
margin: 30px 0px 0px 0px;
padding: 0px;
}
.TextBox1 {
float: left;
margin: 5px 0px 0px 10px;
padding: 5px;
width: 190px;
height: 305px;
overflow: hidden;
display: inline;
}
p.MainText {
color: white;
font-size: 14px;
}
p.MainText:first-line {
text-indent: 5px;
}
.ContentText {
color: white;
font-size: 14px;
}
.PortfolioHolder {
width: 414px;
height: 365px;
float: right;
margin: 25px 20px 0px 0px;
padding: 0px;
display: inline;
background-color: orange;
}
.MainPictureFrame {
width: 414px;
height: 318px;
float: right;
margin: 0px;
padding: 0px;
/*display: inline;*/
background-color: red;
}
.PortfolioPicture {
width: 414px;
height: 318px;
}
.PicInfoContainer {
float: left;
width: 414px;
height: 47px;
color: white;
font-size: 12px;
}
.SubPictureFrame {
width: 96px;
height: 72px;
margin: 10px 0px 0px 10px;
padding: 0px;
float: left;
background-color: yellow;
}
.SubPictureFrameFirstRowFirstColumn {
width: 96px;
height: 72px;
padding: 0px;
margin: 0px;
float: left;
background-color: purple;
}
.SubPictureFrameFirstRow {
width: 96px;
height: 72px;
padding: 0px;
margin: 10px 0px 0px 0px;
float: left;
background-color: blue;
}
.SubPictureFrameFirstColumn {
width: 96px;
height: 72px;
padding: 0px;
margin: 0px 0px 0px 10px;
float: left;
background-color: aqua;
}
.BottomNavContainer {
width: 550px;
height: 14px;
float: right;
margin-right: 40px;
margin-top: 10px;
}
.BottomNavHolder {
float: right;
}
.BottomNav {
font-size: 12px;
height: 14px;
margin-right: 20px;
float: left;
}
.PortfolioListContainer {
float: left;
width: 204px;
height: 250px;
overflow: auto;
display: inline;
background-color: #5f5f5f;
margin: 0px 0px 0px 5px;
padding: 0px;
border-top: 1px #ffffff solid;
}
.ListItemHome {
float: left;
width: 76px;
height: 20px;
padding: 0px 0px 0px 4px;
margin: 0px;
border-right: 4px solid white;
}
.ListItemBuilding {
float: left;
width: 110px;
height: 20px;
padding: 0px 0px 0px 4px;
margin: 0px 0px 0px 80px;
border-left: 4px solid white;
display: inline;
}
.ButtonContainer {
float: left;
display: inline;
background-color: aqua;
width: 204px;
height: 30px;
padding: 0px;
margin: -5px 0px 0px 5px;
}
.HomesButton{
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right: 4px solid white;
width: 80px;
height: 30px;
margin: 0px;
float: left;
}
.CommercialButton{
border-width: 0px;
width: 120px;
height: 30px;
padding: 0px;
margin: 0px;
float: left;
}
a.BottomNav:link {
text-decoration: none;
color: #D3D3D3;
}
a.BottomNav:visited {
text-decoration: none;
color: gray;
}
a.BottomNav:hover {
text-decoration: underline;
color: white;
}
a.BottomNav:active {
text-decoration: none;
color: white;
}
a.ContentText:link {
text-decoration: none;
color: #D3D3D3;
}
a.ContentText:visited {
text-decoration: none;
color: gray;
}
a.ContentText:hover {
text-decoration: underline;
color: white;
}
a.ContentText:active {
text-decoration: none;
color: white;
}
a.ListItemHome:link {
text-decoration: none;
color: #D3D3D3;
}
a.ListItemHome:visited {
text-decoration: none;
color: #D3D3D3;
}
a.ListItemHome:hover {
text-decoration: underline;
color: white;
}
a.ListItemHome:active {
text-decoration: none;
color: white;
}
a.ListItemBuilding:link {
text-decoration: none;
color: #D3D3D3;
}
a.ListItemBuilding:visited {
text-decoration: none;
color: #D3D3D3;
}
a.ListItemBuilding:hover {
text-decoration: underline;
color: white;
}
a.ListItemBuilding:active {
text-decoration: none;
color: white;
}
Thanks, Brad I have been testing with Opera, Mozilla & IE. I am using STRICT DTD, and I checked my CSS with w3.org validation checker, so I would think that Opera and Mozilla would be compliant, but they are the ones giving me problems. I have table cells that only have images in them and they have extra padding, or margins at the bottom. WHY?! I have removed all the padding and margins from everything in the rows and added then removed the heights of the cells - neither worked. I have checked my code more times than I can count - and it is right. WHY IS MOZILLA AND OPERA ADDING EXTRA SPACE AT THE BOTTOM OF THE CELL?!?!?!?!?!? I have something similar to the following: <div id="outer"> <div id="inner">Stuff</div> </div> #inner { top: -175px; } which lets me position background elements as needed so everything blends together well. The idea is that the outer layer background element needs to start lower than the inner layer and repeat until it contains the entire inner layer, and then stop. However, since I shift the inner layer upwards 175px, it gets the top where it needs to be, but it seems like it leaves 175px of the outer background repeating at the bottom...I don't need this space at the bottom. How can I remove it or make it disappear? An old draft of the file can be seen at Old Draft. The outer layer is the "carpet" background that repeats down the side and fades off in each direction. It needs to start where it does so it doesn't overlap the faded walls (applied to body tag). However, I want the desk area starting where it is now rather than where the faded walls end (too low on the page), so I shifted it upwards... I want to get rid of all carpet below the desk area, but the outer div expanded to contain the inner div, then the inner div was shifted upwards out of the top of the outer div, but outer div bottom did not shift upwards as well. |
|||||||