son Posted March 28, 2011 Share Posted March 28, 2011 I have an issue with a separation line in between list elements coming out and over the container they are placed in. Also, the images I use for navigation (will create home, about etc once issue sorted) are aligned to top of container and somehow the space to bottom of container is bigger. I tried to have margin and/or padding applied to images and list elements, but could not solve this issue. The current code is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">#nav {background-color:red; margin:20px 0;}#nav li {list-style:none; border-right:blue 1px solid; display:inline; padding:3px 30px; margin:0;}#nav a {color:#FFF; font-size:14px; padding:10px 0; border:#00CC99 1px solid;}#nav a:hover, #nav a.current {color:#808000;}</style></head><body><h1>Test for nav</h1><div id="nav"><ul><li><a href="#"><img src="assets/nav/test.png" width="35" height="16" alt="test" /></a></li></ul></div></body></html> Any ideas?Son Link to comment Share on other sites More sharing options...
cousineaug Posted March 29, 2011 Share Posted March 29, 2011 <style type="text/css">#nav {background-color:red; margin:20px 0;}#nav li {list-style:none; border-right:blue 1px solid; display:inline; padding:3px 30px; margin:0;}#nav a {color:#FFF; font-size:14px; padding:10px 0; border:#00CC99 1px solid;}#nav a:hover, #nav a.current {color:#808000;}</style> try this<style type="text/css">#nav {background-color:red; margin:20px 0; height:18px;}#nav li {list-style:none; border-right:blue 1px solid; display:inline; padding:0px 30px; margin:0;}#nav a {color:#FFF; font-size:14px; padding:0px 0; border:#00CC99 1px solid;}#nav a:hover, #nav a.current {color:#808000;}#nav img {vertical-align:middle;}</style> added height to the container divremoved the padding (top and bottom) - not sure what it was supposed to toadded alignment to the imageit seems with the borders that a font size of 14px equates to a height of 18px for the background colour.Guy Link to comment Share on other sites More sharing options...
son Posted March 30, 2011 Author Share Posted March 30, 2011 Hi Guy,That is working now! Cheers. Will remember to work with heights of container div and not try to use padding for top and bottom of elements inside...Son Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.