CSS - Space Between Boxes Problem

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

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.

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!

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

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

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

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 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

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

So i just wrapped up some initial styling for a personal website i'm working on, http://www.sociospatial.com/

Looks fine in firefox. Has some minor issues in chrome/webkit, which I'll iron out later. Haven't dared to load it up in IE yet. In Opera, though, I'm having a problem that I don't know where to start.

So without having to paste alot of code, I have a wrapper div and a footer div, just so that I can have the footer hug either the bottom of the viewport or the bottom of the page, whichever is lower. I also wanted some background elements to the page, but I wanted them to hug the bottom as well (load up the page in firefox and resize to viewport to see), so I ended up with something like this:

Code:

<div id="footer">
  <span id="left-bg"></span>
  <span id="right-bg"></span>
</div>

and the styling for these is something like (I can post the actual/more if need be)
Code:

div#footer {
  position: relative;
  height: 25px;
  width: 100%;
}

span#left-bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 400px;
  height: 600px;
  background: transparent url(some-url.png) no-repeat 0 0;
  z-index: -1;
}

span#left-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 400px;
  height: 600px;
  background: transparent url(some-url.png) no-repeat -400px 0;
  z-index: -1;
}

in firefox/webkit at least, these function as i want, so I have 2 spans that spill up through the top of the containing footer div, but still hides behind normal content. If my wrapper content is minimal, it appropriately hugs the bottom of the viewport and i don't have any vertical scrollbar. If I have a lot of content in the wrapper, I have a vertical scrollbar, but the footer and the spillout background elements are all waiting for me at the bottom of the page.

in opera (9), the two spans hug the bottom of the (initial) viewport as I would hope, but I *do* have a vertical scrollbar (even when the content in the wrapper does not necessitate it), and scrolling down reveals that I have a *huge* amount of space that's just empty body background below the footer. This empty space seems vaguely correlated with the "height" values of the spans (the lower the height value, the smaller the empty black background space under the footer), and the vertical scrollbar goes away completely under one of these conditions:
a) i add "overflow:hidden" to the div#footer styling (but of course this stops the span elements from spilling through the top)
b) using the W3-dev opera tools, if I disable both spans
c) after I disable both spans, I enable only one or the other (if I just disable one after both have been enabled, the vertical scrollbar stays, so I have to disable both first).

i'm not quite sure what exactly is going on here, nor really what issue I'm trying to track down (I don't know what to enter for a google search, for example) - I'm kind of new at this. Anyone have any clues to contribute? I'll add more information if needed.

Hi, I have centered a table horizontally and vertically. To do this I put a table inside a table.

so i don't want to use absolute positioning, as the position would change if the window size changes...

My problem, with relative positioning, is that I can't figure out how to put my "some text" over an image -which is inside the table cell- in the exact position i want, without "collateral damage"...
The collateral damage is that if I put the <div> tag inside the table (see example 1), it will occupy the space and as result the image wll be moved down and layout won't be centered vertically anymore...

If I put the <div> tag outside the table (see example 2), as result there will be more occupied space at the top, and the layout isn't centered anymore...

Here you can see the code i used for both example 1 and example 2:

example 1:

<html>
<head>
<title>relative problem - example 1</title>
</head>
<body>
<table width="100%" height=100% border="1">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<table border=1>
<tr>
<td width="640" height="480">
<div id="Layer1" style="position:relative; left:50px; top:50px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;">
some text some text some text some text some text some text some text some text some text some text some text some text
</div>
<img src="http://www.pbworks.net/images/help.jpg" width="640" height="480">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>



example 2:

<html>
<head>
<title>relative problem - example 2</title>
</head>
<body>
<table width="100%" height=100% border="1">
<tr>
<td width="100%" height="100%" align="center" valign="middle">
<div id="Layer1" style="position:relative; left:0px; top:200px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;">
some text some text some text some text some text some text some text some text some text some text some text some text
</div>
<table border=1>
<tr>
<td width="640" height="480">
<img src="http://www.pbworks.net/images/help.jpg" width="640" height="480">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

thx for letting me know...

I'm *very* new to CSS and to these forums, I'm glad I found them. I'm hoping someone can help me with this problem I'm having. I added a table to this page and there are gaps under each word in each cell of the table. I added the same table to it's own page and the table shows up the way I want it but it won't on the page where CSS is used. It seems as if something in the CSS code is causing the gap under the words. Would anyone know why this is happening and how to fix it?

I'm using IE 6 and haven't used any other browser yet to view the pages. Here is my css file http://debsdesignandhosting.com/layout.css in case it's needed. Thanks for any help

I thought I should also say, it's not my intention to spam the forum with the info seen in the table. This is a new site not even live yet. This gap problem has me stumped

Deb

I have 4 or 5 form controls that I want in a horizontal line. Each form control has a label above it, and I'm using <br>s to position the form control below the label.

I thought that wrapping each "label<br>form control" with a <span> would turn the whole thing into an inline block, where the next <span> would line up next to it, like the next <td> in a <tr>.
Code:

<div id=secondline>
  <span id=ed>
    <b>Event Definition</b>:<br>
    <textarea name=inject cols=45 rows=6></textarea>
  </span>
  <span id=after>
    <b>After</b><br>
    <select name=next size=8 multiple>
      <option value=0>0
      ...
      <option value=100>100
    </select>
  </span>
</div>

but, alas, it doesn't work like that.

How can I get Code:

<tr>
  <td>label<br>form_control</td>
  <td>label<br>form_control</td>
</tr>

behavior without using tables?

hi,

Im making a site, and i decided to use CSS instead of tables. I have used basic CSS before, but it gets abit harder when i start making boxes etc.

Here is my code so far -

layout.css - (one that gets included on each page)

Code:

@import "style.css";
	
body {
	margin:10px 10px 0px 10px;
	padding:0px;
}
	
#leftcontent {
	position: absolute;
	left:10px;
	top:50px;
	width:200px;
	background:#fff;
	border:1px solid #000;
}

#centercontent {
	
	background:#fff;
 		margin-left: 199px;
 		margin-right:199px;
	border:1px solid #000;		
	voice-family: "\"}\"";
	voice-family: inherit;
  	margin-left: 201px;
  	margin-right:201px;
}

#shoutbox {
	position: absolute;
	right:10px;
	top:50px;
	width:200px;
	background:#fff;
	border:1px solid #000;
}

#rightcontent {
	position: absolute;
	right:10px;
	top:50px;
	width:200px;
	background:#fff;
	border:1px solid #000;
}
	
#banner, #footer {
  background:#fff;
	height:40px;
	border-top:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;
	voice-family: "\"}\"";
	voice-family: inherit;
	height:39px;
}

#footer {
  background:#fff;
	height:40px;
	border-bottom:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;
	voice-family: "\"}\"";
	voice-family: inherit;
	height:39px;
}

#banner h1 {
	font-size:16px;
	padding:10px 10px 0px 10px;
	margin:0px;
}
	
#shoutbox, #rightcontent p {
	font-size:10px
}

style.css - text formatting etc.

Code:

body {
	font:	12px/1.2 Tahoma;
	background:#ddd;
	padding:0px;
	margin:0px;
}
	
a {
	text-decoration:none;
	font-weight:bold;
	color:#c00;
}
	
pre {
	font-size:11px;
	color:blue;
}
	
ol {
	margin-right:40px;
}
li {
	margin-bottom:10px;
}

p,h1,pre {
	margin:0px 10px 10px 10px;
}
		
h1 {
	font-size:14px;
	padding-top:10px;
}

it produces a good layout, with a header, 3 coloums and a footer. whoever, the boxes expand at different rates and the footer doesnt move down. the header also doesnt expand. i know how i can fix this, but i dont know how to fix it without making it so that its locked at a resolution. i would like the site to exapand as the window is made larger.

here is an image of what i get -



and this is what i am aiming to acheive -



as you can see, i want all the boxes to be the same length, which is defined by the size of the largest box. also, i want to create 2 or more boxes on the left, only the bottom of which gets made longer. on the first image you cannot see the extra box because it is covered by the other one :-/

i would be greatful for any help you guys can provide me

thanks,

dynamyt