Cryptic CSS problem. Can't get rid of a margin. Must be simple, but I need a second pair of eyes. Here's the visual http://64.2.138.205/web07/support/support.asp The problem is that I don't want that 2 or 3 pixel blue line above the widefire logo. Actually, it is not a line or a border, but it is a gap between the two sections that I cannot close for the life of me. Seems like I've tried everything. Here's the simple code in xhtml. Hope someone can help. <style> #bodyInside { color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; margin-bottom: 20px; margin-top: 10px; padding: 0px; } #container { margin: 0px; padding: 0px; border: 0px; width: 800px; } #logo { float: left; margin-left: 0px; margin-right: 60px; margin-top: 0px; margin-bottom: 0px; } #topNav li { float: left; margin-left: 3px; margin-right: 1px; margin-top: 20px; margin-bottom: 0px; color: #FFFFFF; } #topNav li a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; display: block; padding: 2px; margin: 0px; border: 1px solid #003399; } #topNav li a:hover { text-decoration: none; border: 1px solid #00CCFF; margin: 0px; } #solutions { border-bottom: 10px solid #FFFFFF; margin: 0px; padding: 0px; } #solutionContent { margin: 0px; padding: 0px; background: #FFFFFF; border-bottom: 1px solid #000066; } #wftSupport { float: right; padding-left: 20px; padding-bottom: 10px; padding-right: 20px; padding-top: 5px; } .introRight { padding: 20px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; color: #000000; text-align: justify; margin: 0px; } </style> <body id="bodyInside"> <div id="container"> <img id="logo" src="../images/logo.gif" alt="wireless testing solutions"/> <ul id = "topNav"> <li><a href="../technology/technology.asp">technology</a></li> <li><a href="../applications/applications.asp">applications</a></li> <li><a href="../solutions/solutions.asp">solutions</a></li> <li><a href="../contact/contact.asp">contact us</a></li> <li><a href="../company/company.asp">company</a></li> <li><a href="../support/support.asp">support</a></li> <li><a href="../employment/employment.asp">employment</a></li> </ul> <img id="solutions" src="../images/supportTitle.jpg" alt="wireless testing solutions"/> <div id="solutionContent"> <img src="../images/wftsm.jpg" id="wftSupport"/> <p class="introRight"><span class="big14"><strong>ComHouse Wireless offers telephone support, e-mail problem reporting and field support for all of their WideFire Technology products</strong>. <p/> </div> <div id="BottomNavSection"> <ul id="bottomNav"> <li>home</li> <li>site map</li> <li>privacy</li> </ul> <p id="bottomAddress">Copyright © 2007 ComHouse Wireless, LP. All rights reserved. </p> </div> </div>
That border is underneath the widefire logo at the end of the content area, so that didn't do the trick. But thanks anyway, and if you see something else, let me know.
That's it. Now, the question of why, if it can be briefly explained. Why does the top image need to be floated when it takes up all available block level space up anyway?
But, it doesn't. An img is an inline replaced element. The bottom of the img is aligned on the inline box baseline, by default. The baseline allows space below it for letter descenders, you know, qypgj. That descender space amounts to 3 or so px at normal font sizes. By floating the img, it automagically becomes {display: block;}, which you could have done directly without the float's side effects. When having a block img isn't feasible, simply re-align it vertically: {vertical-align: bottom;}. cheers, gary
Ah yes. As soon as you said inline, I thought "okay then why not display:block?" and sure enough you recommend that later. I too only use floats when needed as they remove the object from the flow and can cause non intuitive things to happen. Plus, now I no longer have to clear the next object. Saaawwweeeeett. Muchos grassyass sinyourass. ((grins))
Hi gary, I saw your website. How come you can't make it work in IE 6? Is it just that you don't want to? I admit I go through a few extra considerations when appeasing IE, but it usually seems to me that all I have to do is be very explicit in all of my margins and paddings and then, the two usually agree perfectly. In fact, I've yet to have a page that is not identical in Firefox, Opera and IE although I never say never. Anyway, just curious because you obviously seem like you know what you are doing.
I actually removed a couple of hacks that had originally made it work for IE. I recently viewed the page in IE7, and as I note on the page, IE7 seems not to break the layout. Otherwise, IE7 provides no improvement. Since the site is mostly about how to do things with css, it is critical that the visitor know that IE is a second rate browser that requires special consideration to make even the most basic of things work correctly. The site's index page is a dramatic example of that. cheers, gary
display: block; on the #toc ul? Haven't tried it, just a guess. Anyway, I know what you're saying and thanks again for the help. My customers all use IE and they are not saavy, so I can't tell them to throw IE out to make my life easier.
Ahh, but if you're a developer, the issue isn't which browser your customers use, but which browsers their customers use. If you're coding for your own site, and your code is IE centric, you will have crap for code. Non-IE users will stay away in droves, reinforcing your belief that you have only IE users. Even the most optimistic IE apologists concede to an 85-86% market share. Are you happy to arbitrarily deselect 1 of every 6 potential customers? cheers, gary
Well, actually, the demand is that both be identical, as far as the customers go. Your right if it's a personal site, but when people are paying for it, they don't want to hear somebody call them and ask them what's wrong with their website, so I am not as fortunate, in that respect. Agreed, it's always extra work, or extra specifications, but so far, I've seen that it can always be done, and it's rare that it requires a hack. But it definitely does increase my development time, so I'm never happy about that. Soon, that will finally change. IE 7 is much closer, but I still have to develop for IE 6. Hassle.