Solved

CSS Table Background Images

Posted on 2007-11-17
28
1,230 Views
Last Modified: 2012-06-21
Hi,

I want to use images for the border of a table, and also the border of each cell. I have five images that need to be used:

paneltop.gif - Top of the table
panelbottom.gif - Bottom of the table
panelbackground.gif - Sides of the table (needs to be repeated on y axis to fill the gap between the top and bottom images.)
panelcell.gif - Background for cells.
panelheadercell.gif - Background for the top cell.

The cells must have a width of 182. The table must have a width of 230 for the cells to fit inside the border image. But if I set cell spacing to 48 the cells are too far apart from each other vertically. So Im using nested tables. One for the border images, and the other to hold all the content and cell backgrounds. Heres the HTML for my nested tables so far:

<table width='230' cellspacing='0' cellpadding='0' border='0' class='SidePanel_Background'>
      <tr>
            <td>
            
            
                  <table width='182' align='center' border='0' class="SidePanel">
                        <tr ><td height='20' /></tr>
                        <tr>
                              <td width='100%' class='SidePanel_Title'>
                                    <span class='SidePanel_Title'>Navigation</span>
                              </td>
                        </tr>
                        <tr>
                              <td width='100%' class='SidePanel_Row'>
                                    <a href='index.php'>Home</a>
                              </td>
                        </tr>
                  </table>
                  
                  
            </td>
      </tr>
</table>

And heres the CSS used to set the background images etc:

table.SidePanel_Background { background: url('images/paneltop.gif') top no-repeat; }
table.SidePanel { padding: 0; border-spacing: 2; vertical-align: top; }
td.SidePanel_Title { text-align: center; background-image: url('images/panelheadercell.gif'); height: 27px; }
span.SidePanel_Title { color: #ffffff; font-weight: bold; font-size: 16px; }
td.SidePanel_Row { text-align: center; background-image: url('images/panelcell.gif'); height: 23px; }

So far paneltop.gif (top border image),  panelcell.gif (cell background)  and panelheadercell.gif (top cell background) shows fine.

But I don't know how to put the bottom border image on at the same time as the top one. If I create a new cell for it, the cells of the nested table wont overlap it... I also dont know how to repeat panelbackground.gif to fill the gap between the top and bottom border images. I can only repeat the image without the top and bottom border images.

To give you a better idea of what im trying to do, here are links to the images im using:
Top - http://img232.imageshack.us/img232/4748/paneltopxn0.gif
Bottom - http://img130.imageshack.us/img130/3268/panelbottomtp7.gif
Background - http://img130.imageshack.us/img130/7870/panelbackgrounddr6.gif
Header cell - http://img130.imageshack.us/img130/7146/panelheadereu5.gif
Cell - http://img130.imageshack.us/img130/6417/panelcelliu9.gif

And heres what I want it to look like:
http://img220.imageshack.us/img220/5151/examplees2.gif

Thanks
mms_master
0
Comment
Question by:mms_master
  • 14
  • 11
  • 3
28 Comments
 
LVL 29

Accepted Solution

by:
Göran Andersson earned 175 total points
ID: 20305553
As long as you are using tables for layout, you will be having problems... ;)

Here it is, using css for layout.

Tested in Firefox 2, IE 5.5, IE 6, IE 7, Netscape 8, Opera 9, Safari 3.
css:
 

.SidePanel { position: relative; width: 229px; background: url(panelbackgrounddr6.gif); }

.SidePanel .Top { height: 60px; background: url(paneltopxn0.gif); }

.SidePanel .Content { position: relative; margin-top: -37px; padding-bottom: 22px; }

.SidePanel .Content .Title { margin: 2px 25px; height: 27px; background: url(panelheadereu5.gif); text-align: center; }

.SidePanel .Content a { display: block; margin: 2px 25px; height: 23px; background: url(panelcelliu9.gif); text-align: center; }

.SidePanel .Bottom { position: absolute; bottom: 0; width: 229px; height: 60px; background: url(panelbottomtp7.gif); }
 
 

html:
 

<div class="SidePanel">

	<div class="Top"></div>

	<div class="Bottom"></div>

	<div class="Content">

		<div class="Title"></div>

		<a href="#">Home</a>

		<a href="#">test 1</a>

		<a href="#">test 2</a>

		<a href="#">test 3</a>

		<a href="#">test 4</a>

		<a href="#">test 5</a>

	</div>

</div>
 

Yes, that's all. :)

Open in new window

0
 
LVL 14

Expert Comment

by:xberry
ID: 20305628
Sorry to say, but my estimation is:
  can't see myself how to get this on nicely with your table solution.

I suggest you slice your corners and borders to fit into one of those
techniques:  

http://roundedbox.andreas-kalt.de/
http://www.dragon-labs.com/articles/octopus/#
http://www.schillmania.com/content/entries/2006/04/more-rounded-corners/

overview over css corner solutions:
http://www.smileycat.com/miaow/archives/000044.php

Don't get me wrong, I see that yours is not rounded corners but
equally you may slice up your four corners and four different sides
into 8 different images for div-elements that overleap and
use techniques mentioned in my samples above.

Least to say - looks like some work though.  
0
 
LVL 14

Expert Comment

by:xberry
ID: 20305633
Eh sorry green ghost for crossposting,
So looks like you have worked it out brilliantly already ; - )
0
 
LVL 5

Author Comment

by:mms_master
ID: 20305684
GreenGhost, I've never seen anything done like that before, but you learn something new every day :)
It's brilliant, Ive just got 2 little problems. I've uploaded another image because its easier to show you than explain to you.

http://img266.imageshack.us/img266/4818/problemng7.gif

xberry, as you've allready said, GreenGhost has it pretty much worked out. But thanks for the reply anyway :)
0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20305773
Use line-height: 27px; to center the title text vertically. You might want to use line-height: 25px; on the links also.

If you use position: absolute; instead of position: relative; on the .SidePanel class, you can move the background image from the .SidePanel class to the .SidePanel .Content class, and change padding-bottom: 22px; to margin-bottom: 22px;. You can put another div around the side panel with position: relative; if you don't use absolute positioning.
0
 
LVL 14

Expert Comment

by:xberry
ID: 20307742
>> But thanks for the reply anyway :)
No problem, only one tip to give you on your way:

Forget about table elements using for layout purpose in future,
as you've seen already it may look addicting to solve things that way, but
mostly leads to dead end. Other reason is, tables are thought for
presenting data sheets in your website, nothing else, for
layout CSS only is the solution for layout and in case native HTML
are not suitable for your arranging content, you create artificial block elements with divs
or inline with span elements. Ok, enough for the prayer ; - ))
0
 
LVL 5

Author Comment

by:mms_master
ID: 20307762
Thanks that works great. I had to keep the position as relative because if I add another uhhh well its not a table now so what ever it is... if i add another one below it was overlapping the first one when i had position: absolute;

I want to do a similar thing for a different table, with different images. I don't want to ask you to do it again, because I want to learn to do it myself. Im going to mess about now and see how well i do. But one thing that confuses me, is in the code below why is Bottom above Content? i moved them to see what happens and bottom overlaps content. But I cant work out how you know what order to put them in to stop them overlapping. If you use layers in graphics, the top layers are on the top... in this case the bottom is at the top in the code but appears underneath on the site. if that makes sense.
<div class="SidePanel">

	<div class="Top"></div>

	<div class="Bottom"></div>

	<div class="Content">

		<div class="Title"></div>

		<a href="#">Home</a>

		<a href="#">test 1</a>

		<a href="#">test 2</a>

		<a href="#">test 3</a>

		<a href="#">test 4</a>

		<a href="#">test 5</a>

	</div>

</div>

Open in new window

0
 
LVL 5

Author Comment

by:mms_master
ID: 20308050
I've found 2 problems with what you gave me GreenGhost :( I tried to fix them, but i can't figure it out.

First of all ive added top: 5px; to .SidePanel so that theres a ga between that and my banner (which works fine). But then if I add another SidePanel below the navigation one, it doeasn't leave the 5px gap, and i don't know why.

My other problem is that in FireFox .SidePanel .Content overlaps .SidePanel .Bottom. It also appears to be too high up.
However it doesn't in IE7.

Ive attached my code so you can see any changes ive made. (which isnt much)
css:
 

.SidePanel { position: relative; top: 5; width: 229px; }

.SidePanel .Top { height: 60px; background: url('images/paneltop.gif'); }

.SidePanel .Content { position: relative; margin-top: -37px; margin-bottom: 25px; background: url('images/panelbackground.gif'); }

.SidePanel .Content .Title { margin: 2px 25px; height: 27px; background: url('images/panelheadercell.gif'); line-height: 27px; text-align: center; color: #ccbb99; font-weight: bold; font-size: 16px; }

.SidePanel .Content a { display: block; margin: 2px 25px; height: 23px; background: url('images/panelcell.gif'); line-height: 23px; text-align: center; color: #ffffff; }

.SidePanel .Bottom { position: absolute; bottom: 0; width: 229px; height: 60px; background: url('images/panelbottom.gif'); }
 

html:
 

<div class="SidePanel">

	<div class="Top"></div>

	<div class="Bottom"></div>

	<div class="Content">

	<div class="Title">Navigation</div>

		<a href="?sid=<?php echo $SID; ?>">Home</a>

		<a href="?sid=<?php echo $SID; ?>">Items</a>

		<a href="?sid=<?php echo $SID; ?>">Quests</a>

		<a href="?sid=<?php echo $SID; ?>">test 3</a>

		<a href="?sid=<?php echo $SID; ?>">test 4</a>

		<a href="?sid=<?php echo $SID; ?>">FAQ</a>

	</div>

</div>

<div class="SidePanel">

<div class="Top"></div>

<div class="Bottom"></div>

<div class="Content">

	<div class="Title">Links</div>

		<a href="http://www.kightonlineworld.com/">Knight Online</a>

	</div>

</div>

Open in new window

0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20308327
> in the code below why is Bottom above Content? i moved them to see what happens
> and bottom overlaps content.

Exaclty for that reason. The layers are displayed on top of each other, and the first elements are behind the others. If you want to place the Bottom element after the Content element, you can use z-index on them to specify which is displayed on top of the other.

> First of all ive added top: 5px; to .SidePanel so that theres a ga between that and my
> banner (which works fine). But then if I add another SidePanel below the navigation
> one, it doeasn't leave the 5px gap, and i don't know why.

You are using relative positioning to move the elements. Both panels are moved five pixels down from their default position. There is no gap between them in the default position, so there is no gap when both of them has been moved. You can use margin or padding to create extra space between the elements.

> My other problem is that in FireFox .SidePanel .Content overlaps .SidePanel .Bottom.
> It also appears to be too high up.

Yes, the content element overlaps the bottom element. Otherwise the bottom would not be able to form a border around the bottom part of the content. The content element also overlaps the top element for the same reason.

In the style for the content element, margin-top: -37px; decides how much it overlaps the top element and margin-bottom: 25px; decides how much extra space is added below it so that it doesn't completely overlap the bottom element.

> However it doesn't in IE7.

As always, what Firefox renders is correct, and if IE renders it differently, that's incorrect. You have to work around the bugs in IE.

What doctype do you have on the page?
0
 
LVL 5

Author Comment

by:mms_master
ID: 20308459
Ive changed top: 5px; to padding-top: 5px; and it works as I want. Thanks.

I understand the overlapping now. The bottom just needs moving down in FireFox but not in IE. How can I do it in one without the other?

My doctype is strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20308958
You shouldn't try to make different layout for different browsers. The first goal should be to make a layout that works in any browser. Otherwise you are stuck with adding more and more specialized styling for every new version of every browser out there.

If you use z-index to put the links on top of the bottom element, it works just fine.

You need at least two links in the panel, though, otherwise the top and bottom elements overlap.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<style>

body { margin: 0; padding: 0; }

.SidePanel .Position { position: relative; width: 229px; margin: 5px; }

.SidePanel .Top { height: 60px; background: url(http://img232.imageshack.us/img232/4748/paneltopxn0.gif); }

.SidePanel .Content { margin: -37px 0 -38px 0; background: url(http://img130.imageshack.us/img130/7870/panelbackgrounddr6.gif); }

.SidePanel .Content .Title { margin: 2px 25px; height: 27px; background: url(http://img130.imageshack.us/img130/7146/panelheadereu5.gif); line-height: 27px; text-align: center; color: #ccbb99; font-weight: bold; font-size: 16px; }

.SidePanel .Content a { display: block; position: relative; margin: 2px 25px; height: 23px; background: url(http://img130.imageshack.us/img130/6417/panelcelliu9.gif); line-height: 23px; text-align: center; color: #fff; z-index: 2; }

.SidePanel .Bottom { position: relative; width: 229px; height: 60px; background: url(http://img130.imageshack.us/img130/3268/panelbottomtp7.gif); z-index: 1; }

</style>

</head>

<body>
 

<div class="SidePanel">

   <div class="Position">

      <div class="Top"></div>

      <div class="Content">

         <div class="Title">Navigation</div>

         <a href="?sid=<?php echo $SID; ?>">Home</a>

         <a href="?sid=<?php echo $SID; ?>">Items</a>

         <a href="?sid=<?php echo $SID; ?>">Quests</a>

         <a href="?sid=<?php echo $SID; ?>">test 3</a>

         <a href="?sid=<?php echo $SID; ?>">test 4</a>

         <a href="?sid=<?php echo $SID; ?>">FAQ</a>

      </div>

      <div class="Bottom"></div>

   </div>

</div>
 

<div class="SidePanel">

   <div class="Position">

      <div class="Top"></div>

      <div class="Content">

         <div class="Title">Links</div>

         <a href="http://www.kightonlineworld.com/">Knight Online</a>

         <a href="#">test</a>

      </div>

      <div class="Bottom"></div>

   </div>

</div>
 

</body>

</html>

Open in new window

0
 
LVL 5

Author Comment

by:mms_master
ID: 20312301
Thanks that worked. :)
I've got one last problem
Im trying to learn to do this myself, so I don't need to keep asking everytime I need a new layout.
I've made another layout which works fine in FireFox but not in IE and I can't fix it.

Heres an img:
http://img266.imageshack.us/img266/1632/ievsfirefoxgm4.jpg

Could you please point out what you had to change, so that I can learn from it.
Thanks
css:
 

.NewsBox { position: relative; left: 5%; width: 90%; padding-top: 5px; }
 

.NewsBox .Content { position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; }
 

.NewsBox .Content .Body { position: absolute; left: 0px; top: 27px; width: 100%; color: #ffffff; background-color: #000000; }

.NewsBox .Content .Body .Left { position: absolute; left: 0px; top: 0px; width: 4px; height: 100%; background: url('images/newsbodyleft.gif') repeat-y; }

.NewsBox .Content .Body .Right { position: absolute; right: 0px; top: 0px; width: 4px; height: 100%; background: url('images/newsbodyright.gif') repeat-y; }

.NewsBox .Content .Body .Bottom { position: absolute; left: 0px; bottom: 0px; width: 100%; height: 4px; background: url('images/newsbodybottom.gif') repeat-x; }

.NewsBox .Content .Body .LeftCorner { position: absolute; left: 0px; bottom: 0px; width: 6px; height: 6px; background: url('images/newsbottomleftcorner.gif'); }

.NewsBox .Content .Body .RightCorner { position: absolute; right: 0px; bottom: 0px; width: 6px; height: 6px; background: url('images/newsbottomrightcorner.gif'); }

.NewsBox .Content .Body span { margin-left: 4px; margin-right:4px; }
 

.NewsBox .Content .Title { position: relative; left: 0px; top: 0px; width: 60%; height: 27px; }

.NewsBox .Content .Title .Center { position: relative; top: 0px; width: 100%; height: 27px; background: url('images/panelheadercellcenter.gif') repeat-x; }

.NewsBox .Content .Title .Left { position: absolute; left: 0px; top: 0px; width: 52px; height: 27px; background: url('images/panelheadercellleft.gif'); }

.NewsBox .Content .Title .Right { position: absolute; right: 0px; top: 0px; width: 52px; height: 27px; background: url('images/panelheadercellright.gif'); }

.NewsBox .Content .Title .Text { position: absolute; left: 0px; top: 0px; width: 100%; height: 27px; line-height: 27px; text-align: center; color: #ccbb99; }
 

.NewsBox .Content .Date { position: absolute; left: 60%; top:0px; width: 40%; height: 27px; }

.NewsBox .Content .Date .Center { position: relative; top: 0px; width: 100%; height: 27px; background: url('images/panelheadercellcenter.gif') repeat-x; }

.NewsBox .Content .Date .Left { position: absolute; left: 0px; top: 0px; width: 52px; height: 27px; background: url('images/panelheadercellleft.gif'); }

.NewsBox .Content .Date .Right { position: absolute; right: 0px; top: 0px; width: 52px; height: 27px; background: url('images/panelheadercellright.gif'); }

.NewsBox .Content .Date .Text { position: absolute; left: 0px; top: 0px; width: 100%; height: 27px; line-height: 27px; text-align: center; color: #ccbb99; }
 

html:
 

<div class='NewsBox'>

	<div class='Content'>

		<div class='Body'>

				<span class='Text'>1st line test.</span><br />

				<span class='Text'>2nd line test.</span><br />

				<span class='Text'>3rd line test.</span><br />

				<span class='Text'>4th line test.</span><br />

				<span class='Text'>5th line test.</span><br />

				<span class='Text'>6th line test.</span>

				<div class='Bottom'></div>

        <div class='Left'></div>

        <div class='Right'></div>

        <div class='LeftCorner'></div>

        <div class='RightCorner'></div>

		</div>

		<div class='Title'>

			<div class='Center'></div>

			<div class='Left'></div>

			<div class='Right'></div>

			<span class='Text'>News Box Test</span>

		</div>

		<div class='Date'>

			<div class='Center'></div>

			<div class='Left'></div>

			<div class='Right'></div>

			<div class='Text'>18/11/2007</div>

		</div>

	</div>

</div>

Open in new window

0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20314716
Internet explorer has a funny idea that an element has to be at least one character high, even if you specify a smaller height. That's why the background in corners repeat, and the bottom line is out of place. Put overflow: hidden;  on them to allow them to be smaller than one character high.

If you can't get the left and right elements to be 100% the height of the body element, you can place another element inside body (surrounding the text lines), and put the left background on body and the right background on the element inside it.
0
 
LVL 5

Author Comment

by:mms_master
ID: 20330817
Thanks.
I know I've allready said this once, but i've got one "last" problem :)
Im going to increase the points to 150 because I asked for help with the second table.

The one that I tried to do myself overlaps. I cant use padding because it means that the first table would end up too far down the page. So im not sure how to do it. Heres an img to show exactly whats happening:
http://img510.imageshack.us/img510/9757/overlapjf6.jpg
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20331716
The Content and Body element are positioned absolutely, which means that each is layers of it's own and doesn't affect the size of it's parent. If you don't position the absolutely, they will affect the size of the NewsBox element.
0
 
LVL 5

Author Comment

by:mms_master
ID: 20336365
Your probably fed up of these words :) but ive got two "last" problems.
Ill increase the points to 175 instead of 150 for you.

First problem:
The boxes I made have corner images with some transparent pixels to give the effect of rounded edges.
However the Right, Left and Bottom div's I used to add the border images have a 100% width or height so that they put a border along the whole edge. Because of that, the image from them fills the space that should be transparent which removes the rounded edge effect. (if that makes sense)

Heres an e.g. of what I want to do. (This is for Bottom).
(2px gap) ------------------- Bottom Border Image ------------------- (2px gap)

So that theres a 2 pixel gap at either end instead of filling 100% of the box. I've tried margin and padding, but they just seem to push the image to one side so that it sticks out 4 extra pixels.

Second problem:
Although Ive now used the div's for the navigation and content tables, my main page layout is done using a table. The top row has a colspan of 3. The second row has 3 columns. The middle column contains the div box im working on now. The third row also has a colspan of 3 and contains the site copyright. e.g.

(------------------------------- Banner ------------------------------- )

(---- Nav ----)  (------------ Content ------------)  (----  Links  ----)

(------------------------------ Copyright ------------------------------ )

The div box is in the Content cell, and overlaps the Copyright cell. There is actualy more than one div box, one below another. So if I use margin to stop the overlap, the boxes move too far apart. I would like to keep the table for the page layout instead of using div's for everything if possible.

Thanks
0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20336503
To make the bottom div take up the full with short of four pixels, don't use absolute positioning and don't specify the width. Put it below the lines and use "margin: 0 2px". A div element by default uses the full available with, and if you put margins on it, they will reduce the available width. If you specify the width as 100% and put a margin on it, it will be the full width of the parent and put the margin outside of that.

You can't use that on the side borders, though. I think that you have to put a piece of side border on each of the lines.

Regarding the second problem, a div doesn't outside a table cell unless you do something to prevent it from taking up space. If you have floating elements so that they don't take up space, just put a clearing element below them. I find a class like this being very useful for that:

.Clear { clear: both; height: 0; overflow: hidden; }
0
 
LVL 5

Author Comment

by:mms_master
ID: 20340902
My first problem is solved, thanks.

>"a div doesn't outside a table cell "
Do you mean it doesn't overlap a table cell?
If yes then ill upload an image to show whats happening.

>"If you have floating elements"
I don't have any elements with "position: float;" as I don't quite understand that property yet.

Also, does line-height work with text in Firefox? I've set "line-height: 10px;" on a span containing text. It works in IE7 but not Firefox.

>"Tested in Firefox 2, IE 5.5, IE 6, IE 7, Netscape 8, Opera 9, Safari 3."
Can I ask how you have IE5.5 IE6 and IE7 on one machine? or do you use more than one machine or VM's?
0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20341177
> Do you mean it doesn't overlap a table cell?

I mean that a div doesn't go outside the table cell (or any parent element for that matter) unless you do something to remove it from the layout flow, like using floating or positioning.

> Also, does line-height work with text in Firefox? I've set "line-height: 10px;"
> on a span containing text. It works in IE7 but not Firefox.

What you have seen is very likely that it works according to the standard in Firefox, and IE7 gets it wrong. A span is an inline element, and doesn't have any fixed size. Applying line-height to an inline element would affect the distance between lines in the text, but would not specify the size of the element.

> Can I ask how you have IE5.5 IE6 and IE7 on one machine?
> or do you use more than one machine or VM's?

I use a program called Multiple IEs:

http://tredosoft.com/Multiple_IE

However, it has some problems with more advanced features, so I use Virtual PC when I need a completely accurate test environment.
0
 
LVL 5

Author Comment

by:mms_master
ID: 20357464
Sorry I haven't replied for a couple of days. I've been unable to use my computer due to other commitments. I'm not at home at the moment and don't have the website with me, so I can't continue with the question until I go home.
0
 
LVL 5

Author Comment

by:mms_master
ID: 20360649
I've uploaded another image to show whats happening. I set bordercolor to red on the table containing the divs so you can see where they overlap.

http://img236.imageshack.us/img236/1046/overlapkp2.jpg

> "I mean that a div doesn't go outside the table cell (or any parent element for that matter) unless you do something to remove it from the layout flow, like using floating or positioning."

I've attached the html for the divs and their containing cell so you can see if I have removed them from the layout flow.
html:
 

<td width='790' valign='top' class='PageContent1'>

<div class='NewsBox'>

	<div class='Content'>

		<div class='Body'>

			<span>Line 1</span><br />

<span>Line 2</span><br />

<span>Line 3</span><span>... (<a href='news.php?id=3&sid=giin6rt2cj8tj0jhgnsas01bk0'>read more</a>)</span>			<div class='Left'></div>

    	    <div class='Right'></div>

			<div class='Bottom'></div>

			<div class='LeftCorner'></div>

	        <div class='RightCorner'></div>

		</div>

			<div class='Title'>

			<div class='Center'></div>

			<div class='Left'></div>		

			<div class='Right'></div>

			<span class='Text'>

        		<span class='MiniNews_Title'><a href='news.php?news=3&sid=giin6rt2cj8tj0jhgnsas01bk0'>Test 3</a></span>			</span>

		</div>

		<div class='Date'>

			<div class='Center'></div>

			<div class='Left'></div>

			<div class='Right'></div>

			<div class='Text'>

        		<span class='MiniNews_Title'>21/11/2007</span>			</div>

		</div>

	</div>

</div>
 

<br />

<div class='NewsBox'>

	<div class='Content'>

		<div class='Body'>

			<span>Line 1</span><br />

<span>Line 2</span><br />

<span>Line 3</span><span>... (<a href='news.php?id=2&sid=giin6rt2cj8tj0jhgnsas01bk0'>read more</a>)</span>			<div class='Left'></div>

    	    <div class='Right'></div>

			<div class='Bottom'></div>

			<div class='LeftCorner'></div>

	        <div class='RightCorner'></div>

		</div>

			<div class='Title'>

			<div class='Center'></div>

			<div class='Left'></div>		

			<div class='Right'></div>

			<span class='Text'>

        		<span class='MiniNews_Title'><a href='news.php?news=2&sid=giin6rt2cj8tj0jhgnsas01bk0'>Test 2</a></span>			</span>

		</div>

		<div class='Date'>

			<div class='Center'></div>

			<div class='Left'></div>

			<div class='Right'></div>

			<div class='Text'>

        		<span class='MiniNews_Title'>21/11/2007</span>			</div>

		</div>

	</div>

</div>
 

<br />

<div class='NewsBox'>

	<div class='Content'>

		<div class='Body'>

			<span>Line 1</span><br />

<span>Line 2</span><br />

<span>Line 3</span><span>... (<a href='news.php?id=1&sid=giin6rt2cj8tj0jhgnsas01bk0'>read more</a>)</span>			<div class='Left'></div>

    	    <div class='Right'></div>

			<div class='Bottom'></div>

			<div class='LeftCorner'></div>

	        <div class='RightCorner'></div>

		</div>

			<div class='Title'>

			<div class='Center'></div>

			<div class='Left'></div>		

			<div class='Right'></div>

			<span class='Text'>

        		<span class='MiniNews_Title'><a href='news.php?news=1&sid=giin6rt2cj8tj0jhgnsas01bk0'>Test 1</a></span>			</span>

		</div>

		<div class='Date'>

			<div class='Center'></div>

			<div class='Left'></div>

			<div class='Right'></div>

			<div class='Text'>

        		<span class='MiniNews_Title'>17/11/2007</span>			</div>

		</div>

	</div>

</div>
 

		</td>

Open in new window

0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20361358
I can't tell by only looking at the html code, I need to see the css code also. But, obviously you have removed some elements from the layout flow, otherwise they could not possibly go outside the cell.

It looks like it's the lines in the Body div that take up the actual space, but then you have used relative positioning to move them down, to make space for the title, so that they are displayed further down than they would otherwise have been.

One solution could be to just place an element with clear:both; below the boxes.
0
 
LVL 5

Author Comment

by:mms_master
ID: 20361408
I've added <div class='Clear'></div> below the tables and it still overlaps.

Heres my css:
.Clear { clear: both; height: 0; overflow: hidden; }
 

.NewsBox { position: relative; left: 5%; width: 90%; padding-top: 15px; }
 

.NewsBox .Content { position: relative; height: 100%; width: 100%; left: 0px; top: 0px; }
 

.NewsBox .Content .Body { position: relative; left: 0px; top: 27px; width: 100%; height: 100%; background-color: #000000; }

.NewsBox .Content .Body .Left { position: absolute; left: 0px; top: 0px; width: 4px; height: 100%; background: url('images/newsbodyleft.gif') repeat-y; overflow: hidden; }

.NewsBox .Content .Body .Right { position: absolute; right: 0px; top: 0px; width: 4px; height: 100%; background: url('images/newsbodyright.gif') repeat-y; overflow: hidden; }

.NewsBox .Content .Body .Bottom { position: relative; left: 0px; bottom: -2px; height: 4px; margin: 0px 2px; background: url('images/newsbodybottom.gif') repeat-x; overflow: hidden; }

.NewsBox .Content .Body .LeftCorner { position: absolute; left: 0px; bottom: -2px; width: 6px; height: 6px; background: url('images/newsbottomleftcorner.gif'); overflow: hidden; }

.NewsBox .Content .Body .RightCorner { position: absolute; right: 0px; bottom: -2px; width: 6px; height: 6px; background: url('images/newsbottomrightcorner.gif'); overflow: hidden; }

.NewsBox .Content .Body span { margin-left: 4px; margin-right:4px; color: #ffffff; }
 

.NewsBox .Content .Title { position: absolute; left: 0px; top: 0px; width: 60%; height: 27px; }

.NewsBox .Content .Title .Center { position: relative; top: 0px; left: 0px; height: 27px; margin: 0px 2px; background: url('images/panelheadercellcenter.gif') repeat-x; }

.NewsBox .Content .Title .Left { position: absolute; left: 0px; top: 0px; width: 52px; height: 27px; background: url('images/panelheadercellleft.gif'); }

.NewsBox .Content .Title .Right { position: absolute; right: 0px; top: 0px; width: 52px; height: 27px; background: url('images/panelheadercellright.gif'); }

.NewsBox .Content .Title .Text { position: absolute; left: 0px; top: 0px; width: 100%; height: 27px; line-height: 27px; text-align: center; color: #ccbb99; }

.NewsBox .Content .Title a { color: #ccbb99; }
 

.NewsBox .Content .Date { position: absolute; left: 60%; top:0px; width: 40%; height: 27px; }

.NewsBox .Content .Date .Center { position: relative; top: 0px; height: 27px; margin: 0px 2px; background: url('images/panelheadercellcenter.gif') repeat-x; }

.NewsBox .Content .Date .Left { position: absolute; left: 0px; top: 0px; width: 52px; height: 27px; background: url('images/panelheadercellleft.gif'); }

.NewsBox .Content .Date .Right { position: absolute; right: 0px; top: 0px; width: 52px; height: 27px; background: url('images/panelheadercellright.gif'); }

.NewsBox .Content .Date .Text { position: absolute; left: 0px; top: 0px; width: 100%; height: 27px; line-height: 27px; text-align: center; color: #ccbb99; }

Open in new window

0
 
LVL 5

Author Comment

by:mms_master
ID: 20361420
>I've added <div class='Clear'></div> below the tables and it still overlaps.

Sorry, I meant I've added it below the divs.
0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20363927
Right, the Body div is moved 27 pixels down, so it protrudes below the Content div.

Try to add padding-bottom to the Content div, so that it gets large enough to take up the space where the Body div is positioned.
0
 
LVL 5

Author Comment

by:mms_master
ID: 20377891
If I add padding-bottom: 27px; to the Content div the News Boxes move too far away from each other.
I noticed that I allready had padding-top: 15px; on the NewsBox div, so I changed that to "margin-top: 5px; padding-bottom: 27px;" instead of adding padding to the Content div. It works... the News Boxes are slightly further apart than I wanted them to be, but it'll do.

I've increased the points to 175 as I said I would.
Thanks for the help.
mms_master
0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20377969
In the html code you showed before, you have line breaks between the boxes. If you remove these, and only use css to set the distance between them?
0
 
LVL 5

Author Comment

by:mms_master
ID: 20378004
I forgot about them, thanks :)
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
WPF issue with Trigger 2 66
what style is causing the padding 3 24
Box Model and Styling 12 20
Help cleaning out CSS 2 24
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now