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!
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; }
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).
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.
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