EXPRESSIONENGINE require your two images to match up, (Web server application)
EXPRESSIONENGINE require your two images to match up, so the bottom of the lb_header.leaf.jpg will match the top of the lb_menuback_leaf.jpg. Let s look at the default CSS for the header: #header { margin: 0 0 10px 0; color: #030; height: 100px; width: 750px; border: 1px solid #663; background: . url({site_url}themes/site_themes/logical_blocks/lb_header.gif); } The margin properties make use of CSS shorthand again, and a significant attribute is the 10px bottom margin, which creates the white space dividing header from navigation. Notice that if a CSS value is 0, you need not add px to it. Note also the height property, which works perfectly in all browsers, and I suggest that you make your masthead equal to the specified 100px. If you do decide to use a masthead image that is taller or shorter than 100px, be sure to edit the height reference in the #header id accordingly. With that understood, you can now hack the CSS for the header. Note the change to margin, and the border-bottom rule in addition to the existing all sides border declaration. Also, the image reference has changed to reflect the new image file: #header { margin: 0 0 0 0; color: #030; height: 100px; width: 750px; border: 1px solid #663; border-bottom: 0px; background: url({site_url}themes/site_themes/ . logical_blocks/lb_header_leaf.gif); } So, you removed the 10px space between the two elements and also removed the bottom border of the header. Next, look at the default nav_wrapper CSS. There are many elements powering the actual navigation tabs, displayed simply by the presence of the unordered list menu in the template. You need not worry about that right now; let s just look at the navigation wrapper: #nav_wrapper { padding: 20px 0 0; border-left: 1px solid #336; border-right: 1px solid #336; border-top: 1px solid #336; background: url({site_url}themes/site_themes/ . logical_blocks/lb_menuback.gif); font: bold 10px ‘Lucida Grande’, Verdana, Arial, Sans-Serif; } 157