HTML Help

delcypher · Joined: 09 Nov 2008 Posts: 5

Hi I started working on a "box" which will be appearing on the website I'm making at the moment, but I'm having issues with the rendering.

http://www.unicycle.org.uk/dev/navbox/test.htm

If you take a look at the page (images may take a while to load as the server is slow). You can see that bottom left rounded corner has a slight problem (there's a small white line - padding problem maybe?), but the bottom right corner is a really big problem because it is not appearing anywhere where it should be. The bottom right corner image is the background of a <div class="botright"> tag inside the <div class="contentright"> tag. I've then said.
Code:
.botright {
float:left;
position: absolute;
bottom:0;
background: url('img/botright.gif') no-repeat;
height:172px;
width:71px;
}

which should position the <div class="botright"> tag at the bottom of the <div class="contentright"> tag just like I did for the bottom left corner, but it's not working at all!

I've positioned it using the same principle as the bottom left corner, which leaves me to believe that Code: <div class="contentright"> </div> is some how larger is height than Code: <div class="contentleft"></div> .

Although I could post the whole code here it's probably easier if you just view the source of the page (the HTML & CSS are all self contained).

Also in IE the text overflows the element despite me using Code: overflow:hidden;

Does anyone have any ideas?

delcypher · Joined: 09 Nov 2008 Posts: 5

I've made a horrible fix that involves using:

Code: postion:relative;
top:628px;

the new version is at http://www.unicycle.org.uk/dev/navbox/nasty-test.htm

But the I still get two really annoying vertical white lines appearing in my box, can anyone help me get rid of them?

I also dislike the way I've done this because it's not very fluid e.g. if my main content box has more text in it, is hidden.

Is there..

1. A way to make it so my box changes its height depending on the amount of text in it?

2.Is there to a way to size the boxes so that when the text size is changed the box size changes accordingly?

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Here's a real simple way to get rounded corners http://www.curvycorners.net/ and here's another method using images http://www.search-this.com/2007/02/12/css-liquid-round-corners/#more-150

delcypher · Joined: 09 Nov 2008 Posts: 5

The second link you gave me was interesting (much more fluid than mine), I'll try making one soon if I can't get what I'm trying to do now to work.

But I'm still interested with the issue of why what I've made has two vertical white lines in it.

Thank-you for the link though. :D

delcypher · Joined: 09 Nov 2008 Posts: 5

Problem solved :) By bottom right image was too small (width) by 1px. It wasn't obvious to me though because I told photoshop to make the image the correct size, it just didn't for some strange reason.

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Glad you caught it, now I can quit looking for an answer. You might post up your final code for others.