Problems with margins and link colours not working

Discussion in 'CSS' started by debozarko, Apr 27, 2011.

  1. #1
    I am trying to get my new website to look like this basic mockup http://www.wellnesswarriorcoaching.c...andingpage.jpg

    When I style my website in Dreamweaver, it looks perfect but when I upload to my ftp site, the white border shows on the left and right of the upper and lower boxes but it does not show on the top or bottom of both boxes. I've added margins to the top and bottom but it doesn't seem to be working and I can't figure out where I've gone wrong. Also, I've styled my links to have an orange colour but they show up blue in both Safari and Firefox (I'm on a Mac). I cannot figure out why the colour will not show either.

    Here is a link to the live working site http://wellnesswarriorcoaching.com/ to show the missing white borders (top and bottom for both boxes) and the wrong coloured link text. As you can see when comparing the jpg mockup and the live site, things just don't look the same.

    Thanks for any help!
     
    debozarko, Apr 27, 2011 IP
  2. extremike

    extremike Peon

    Messages:
    44
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Border:
    In your stylesheet, you are missing the 'px' on the height of the #mainborder div. Change 'height= 512;' to 'height= 512px'

    Link Color:
    You aren't defining the colour correctly, you need to add a # before the hex code. Try this:

    a:link {
    color: #f37e21;
    text-decoration: none;
    }
     
    extremike, Apr 27, 2011 IP
  3. extremike

    extremike Peon

    Messages:
    44
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    As an aside, it is not good practive to rely on hard-coded widths and heights to generate the white borders - this won't allow for different sized content on the site. Far better to add a 10px padding to the container div (with white background) and place another div inside at the same width (without the padding).
     
    extremike, Apr 27, 2011 IP
  4. aap

    aap Well-Known Member

    Messages:
    1,802
    Likes Received:
    39
    Best Answers:
    2
    Trophy Points:
    120
    #4
    I will suggest you to avoid use of Dreamweaver and such software. Better use code editor and manually do coding.
    For this problem you can use firefox firebug plugin to find out what css property is being used.
     
    aap, Apr 27, 2011 IP
  5. debozarko

    debozarko Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
     
    debozarko, Apr 27, 2011 IP
  6. extremike

    extremike Peon

    Messages:
    44
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Try this:

    #mainborder {
    	background-color:#FFFFFF;
            padding: 12px;
    	width: 959px;
    	height: 512px;
    	}
    #maincontent {
    	background-color: #1c305e;
    	width: 959px;
    	height: 487px;
    	margin:0;
    	}
    Code (markup):
    Let me know how it looks
     
    extremike, Apr 27, 2011 IP
  7. debozarko

    debozarko Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Yes!!! That works! Thank you so much!!!
     
    debozarko, Apr 27, 2011 IP