 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
delcypher
Joined: 09 Nov 2008
Posts: 5
|
 Posted: Tue Nov 18, 2008 4:24 pm Problem with <div> alignment with background image |
 |
|
|
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
Does anyone have any ideas? |
|
delcypher
Joined: 09 Nov 2008
Posts: 5
|
| Posted: Wed Nov 19, 2008 6:45 am |
|
|
|
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: 1284
|
|
delcypher
Joined: 09 Nov 2008
Posts: 5
|
| Posted: Wed Nov 19, 2008 7:28 am |
|
|
|
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.  |
|
delcypher
Joined: 09 Nov 2008
Posts: 5
|
| Posted: Thu Nov 20, 2008 12:36 am |
|
|
|
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: 1284
|
| Posted: Thu Nov 20, 2008 4:25 am |
|
|
|
| Glad you caught it, now I can quit looking for an answer. You might post up your final code for others. |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
