We help IT Professionals succeed at work.

white space around elements

jecommera
jecommera used Ask the Experts™
on
Please find code and files attached.
I have removed all padding and margin and looking at box model there should be no space
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
Please advise how to remove the space with CSS using best practice

thanks

Author

Commented:
adding file
tester.zip
Consultant & Challenge Subduer
Top Expert 2009
Commented:
First of all, you really need to use a doctype. Put this before the <html> start tag:
<!DOCTYPE html>

Open in new window


The horizontal space is because of the white-space in the markup between the <li> elements. One solution is to float the list-items instead of just giving them display:inline. Another is to hide the white-space inside a comment:
<div id="header">
	<ol>
		<li class="tabs"><img src="image1.jpg"/></li><!--
		--><li class="tabs"><img src="image2.jpg" alt="Payment" title="Payment"/></li>
	</ol>
	
</div>

Open in new window

This explains what is causing the vertical gap and how to fix it:
That mysterious gap under images