CSS border problem?

Discussion in 'CSS' started by charliestone, Jun 11, 2009.

0
  1. #1
    hi
    i have just created my first site using basic html and css, it looks fine in dreamweaver but when i upload it to the the web , bits of border are missing. i have checked the css sheet but seem to be getting nowhere. If you check the website out you will see for your self (www.c2sdesign.co.uk) , i have included an extract of code for the navigation bar on the site, you will see on the site it has its right border missing but i have included the code in the css.

    #menu{
    Background-image:url(pgimages/menu.jpg);
    background-repeat:no-repeat;
    height: 28px;
    border-bottom:2px solid #000000;
    border-bottom:2px solid #000000;
    border-left:2px solid #000000;
    border-right:2px solid #000000;

    }

    if anyone could shed some light?
    thanks
    charlie
     
    charliestone, Jun 11, 2009 IP
  2. MhW

    MhW Active Member

    Messages:
    370
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    85
    #2
    What I'm trying to understand is why you've set menu.jpg as the background image for the #menu div, when you're also using the same image as an image map?

    Anyway, your problem is being caused by your #banner div and your #menu div being too small.

    To Fix:

    Open peeps.css

    Find:
    #banner {
	background-image:url(pgimages/banner.jpg);
	background-repeat: no-repeat;
	height: 120px;
	border-bottom: 2px solid #000000;
                border-left: 2px solid #000000;
                border-right: 2px solid #000000;
                border-top: 2px solid #000000;
    Code (markup):
    Below, Add:
        width: 700px;
    Code (markup):
    Find:
    	#menu{
	Background-image:url(pgimages/menu.jpg);
	background-repeat:no-repeat;
	height: 28px;
                border-left: 2px solid #000000;
                border-right: 2px solid #000000;
    Code (markup):
    Below, Add:
        width: 700px;
    Code (markup):
    Do that, and you should find everything is fixed and lines up nicely. At least that's what happened when I tried those changes on your site using Firebug. Good luck - let us know how it goes :)
     
    MhW, Jun 11, 2009 IP
  3. charliestone

    charliestone Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Cheers , thats fixed up a treat. i was pulling my hair out that all night!
    The coding probably is all over the place but the more i work with it the better it'l get.
    cheers again man
     
    charliestone, Jun 13, 2009 IP
  4. digitaljai

    digitaljai Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi,

    This is your code:
    #menu{
    Background-image:url(pgimages/menu.jpg);
    background-repeat:no-repeat;
    height: 28px;
    border-bottom:2px solid #000000;
    border-bottom:2px solid #000000;
    border-left:2px solid #000000;
    border-right:2px solid #000000;

    }


    This is my code:
    #menu{
    Background-image:url(pgimages/menu.jpg);
    background-repeat:no-repeat;
    height: 28px;
    border:solid #000000;
    border-width:2px 2px 2px 2px;
    }

    border-width: 2px 2px 2px 2px; --> This means below
    border-width:Top Right Left Bottom;.

    thanks.
     
    digitaljai, Jun 13, 2009 IP