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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Sep 2004
    Posts
    347
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Little padding problem - FF

    Hey guys, as you can see when you view http://www.c-pawd.moved.in/Parry/ in FF it has the navigation going out of the body.
    I understand this is probably what is supposed to happen with my code, but since I test in IE first, it works in IE.

    I am positive the problem is with this CSS:
    Code:
    #navlist
    {
    border-bottom: 1px solid #FFCC66;
    margin-bottom: 30px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding: 0;
    padding-left: 190px;
    background-color: #CC3333;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    padding-bottom: 3px;
    padding-top: 3px;
    width: 668px;
    }
    Thanks for the help guys.

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Don't know why I can't figure this out. When I change the character encoding to utf-8, and you should, too, the problem goes away but your rounded corners get messed up in both IE and FF. I've never used charset=windows-1252 so I can only assume that it is MS specific somehow?

  • #3
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try taking out the "width: 668px;" from the #navlist?

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    it is the padding as span said. take it off and add text-align: center

    Code:
    #navlist
    {
    border-bottom: 1px solid #FFCC66;
    margin-bottom: 30px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding: 0;
    background-color: #CC3333;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    padding-bottom: 3px;
    padding-top: 3px;
    width: 668px;
    text-align: center;
    }

    as drhoward said, adding a proper doctype and encoding throws off your corners. Looking at your source it appears you want the sidebar box to remain the same width and that long links should be broken into 2 lines. The 4 corner image approach seems a little to complicated for this. You can easily (easier way ) make one rounded box image and slice off the top and bottom of it. Give the sidebar div the top image background and the background color. then make the ul have the bottom image and a transparent background. you'll need to turn off all the padding and the margins of the ul and give it the same width as the container. then you wont have to do all the fancy 4 positioned divs to make them sit right.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    Regular Coder
    Join Date
    Sep 2004
    Posts
    347
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, thanks for that harbinger.
    Not sure what you mean about my 4 corner box, as I don't use any images.
    This seemed the easiest method and didn't use any images.

    Note: the reason I would like to keep it like it is because I don't really know how to do it any other way, I just got this way from http://www.fireandknowledge.org/arch...images-part-1/

    Thanks again.
    Last edited by Scootertaj; 12-09-2005 at 10:59 PM.

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Ah I get it now.

    On the corners messing up I think it might be the way windows saves the html file or something. After saving it on my computer the • were changed to actual bullets in the html. That caused the page to freak out on the corners.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #7
    Regular Coder
    Join Date
    Sep 2004
    Posts
    347
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So are you saying I should get rid of the • ?

    Thanks harbinger

  • #8
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    nope. I think after i saved your page the doc type may have changed the • to actuall bullets. onlu\ine it works fine. offline it fraked until I changed the bullets back to •.

    I can only assume its a doctype thing. Online it works so be it.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #9
    Regular Coder
    Join Date
    Sep 2004
    Posts
    347
    Thanks
    0
    Thanked 0 Times in 0 Posts
    K, sounds good


  •  

    Posting Permissions

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