and it's not working...pretty simple stuff but the home/contact/blog links and the blue text is not showing correctly on a 32px height light grey bar below the main navigation at the top of the site. i've attached a screenshot. here's my css in my style sheet... #slogan { width:1050px; height:32px; background-image:url(images/slogan-bkgrnd.jpg); } #sloganleft { float:left; width:300px; } #sloganright { float:right; width:750px; } and here's how i referenced that section in the header.php file of wordpress... <div class="slogan"> <div class="sloganleft" style="font-family:'Impact', sans-serif; font-size:16px; font-weight:normal; color:#004d96;"><a href="/home/" style="color:#004d96;" />Home</a> | <a href="/contact-matt-abbott-palm-beach-county-real-estate/" style="color:#004d96;" />Contact</a> | <a href="/blog/" style="color:#004d96;" />Blog</a></div> <div class="sloganright" style="font-family:'Impact', sans-serif; font-size:16px; font-weight:normal; color:#004d96;">Matt Abbott for Palm Beach County Real Estate | Phone: (561) 352-9608</div> </div>
Well, the fixed width layout is complete accessibility /FAIL/, and generally speaking the inlined CSS style, use of non-breaking spaces to do CSS' job, and double float for nothing are all working against you. While generally speaking you gave us incomplete snippets making it very hard to diagnose, on the whole it looks like your entire layout concept is flawed and should be pitched in the trash. You've got a poster child there of how NOT to build a website. The first step is to get all that STYLE the **** out of the markup, and get some semantics on that bugger. You've got a menu so that should semantically be a list, which means you could also axe a slew of unnecessary classes... Hmm, digging deeper, you seem to be /> closing your anchors BEFORE your content. That's not just invalid markup, it's gibberish since anchors are NEVER 'empty' elements. So to clean up the markup, there is little legitimate reason for it to be much more than this: <div class="slogan"> <ul> <li><a href="/home/">Home</a></li> <li><a href="/contact-matt-abbott-palm-beach-county-real-estate/">Contact</a></li> <li><a href="/blog/">Blog</a></li> </ul> <div>Matt Abbott for Palm Beach County Real Estate | Phone: (561) 352-9608</div> <!-- .slogan --></div> Code (markup): Which for CSS, retaining the stupid malfing fixed width crap for now: #slogan { width:1050px; background-image:url(images/slogan-bkgrnd.jpg); } #slogan ul { float:left; width:300px; list-style:none; } #slogan li { display:inline; } #slogan li a { display:inline-block; padding:0 0.2em 0 0.5em; color:#049; border-left:2px solid #FFF; } #slogan li:first-child a { border:0; padding-left:0; } #slogan div { overflow:hidden; /* prevent float de-indent */ zoom:1; /* trip haslayout, prevent float de-indent legacy IE */ } Code (markup): it's usually best to avoid floating both elements in a two column setup -- set the other to obey the float with the overflow/haslayout method restraining its' box to column scope while allowing it to auto-fill whatever is left over. Makes it simpler since you can make the outer width a different size (like say, semi-fluid and elastic) without having to change all the values inside it. One other thing you're doing is trying to fix the height of an element with text inside it, which is most always broken, inaccessible, and an all around BAD idea. Height should be applied using an eyedropper, not a keg. admittedly this makes using images behind it a pain in the ass, but that's why you don't see image backgrounds behind content on REAL websites, and instead only find it on the sites of those who've been duped into using some photoshop jockeys sleazy PSD -- said "designers" not knowing enough about HTML, CSS or accessibility to be designing jack **** for the web. I'd have to see the whole page though to weigh in more... though you said turdpress so if you think I was harsh on just these little snippets...