Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Right floated div breaks background image right edge

    I am building a new site where the background is esentially a rounded box, the middle part of the page is just the left and right sides of the box repeated using the div layout-main.

    The problem is I float some infomation panes on the right, and the right side of the main 'box' is not shown, if I use a real box ie. border: 1px solid #00000 that shows fine.

    Example:

    http://mrzippy.org.uk/test/

    Any ideas?

    Don't worry I've fixed, I added a 2px right margin to the right hand containter.
    Last edited by MrZippy; 11-24-2005 at 11:28 PM.

  • #2
    Regular Coder
    Join Date
    Oct 2005
    Posts
    196
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Nice site may I add.

  • #3
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually I still have a problem, I have made a few more changes and juist tested in Firefox and I have the same problem as before.

    I am using Firefox 1.0.7 Mac version.

    Works OK on Safari and Opera 8.5 on the Mac.

    Any ideas?

    And thanks for you comments! I have loads of work to do yet, the artwork I am using is just temporary to test the layout techniques.
    Last edited by MrZippy; 11-25-2005 at 12:05 PM.

  • #4
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just tested IE6 PC and it's OK there too.

    Any idea for a fix for Firefox rendering?

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    give the spacer a height:

    Code:
    			.spacer	{
    					clear: both;
    					height: 20px;
    					background-color: #f3c;
    			}
    i made it pink so i could see it (you'll probally not want it pink )

    p.s. IE will automatically make it 17px hight so you might as well make it that hight as well in your css so it looks the same across the board.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #6
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, that fixed it

    Want to see a better demo

    http://centerstageproject.com/test/
    Last edited by MrZippy; 11-25-2005 at 11:53 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •