Luegge Posted May 1, 2012 Share Posted May 1, 2012 Hi there, I encountered a problem with a navigation menu that I was programming and I was hoping someone could help me on this one. The problem is relatively easy to describe: In the CSS nav bar tutorial on w3schools, there is an advanced example: http://www.w3schools...rtical_advanced Everything is fine with this example. In my case, I'd like to include the bullets in the navbar and I therefore change the ul tag to the following: ul{list-style-type:disc;list-style-position: inside;margin:0;padding:0;} Everything looks fine with Google Chrome, but in Firefox and IE, linebreaks appear after the bullets. How do I fix this? Thanks in advance. Link to comment Share on other sites More sharing options...
Ingolme Posted May 1, 2012 Share Posted May 1, 2012 That is because the <a> elements are blocks and the bullet is outside of the <a> elements. Block elements always force a line break before and after them. The only solution would be to give a non-repeating background image of a disc to the <a> elements with position "left center" Link to comment Share on other sites More sharing options...
dsonesuk Posted May 1, 2012 Share Posted May 1, 2012 <!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><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">#nav {width: 180px; float:left;}#nav ul{list-style-type:disc;list-style-position: inside;margin:0;padding: 0;text-indent:0;}#nav li{width:150px; overflow:hidden;text-indent:0;margin:0;padding:0;line-height:30px;}#nav a{display:block;font-size:16px;font-family:Arial, Helvetica, sans-serif;font-weight:bold;color:#FFFFFF;background-color:#98bf21;width:120px;text-align:center;padding:0 4px;line-height:30px;text-decoration:none;text-transform:uppercase;float:right;margin:0;height:30px;}#nav a:link, #nav a:visited {}#nav a:hover,#nav a:active{background-color:#7A991A;}</style><!--[if IE 7]><style type="text/css">#nav a{float:none;}</style><![endif]--></head><body><div id="nav"><ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li></ul></div></body></html> Link to comment Share on other sites More sharing options...
Luegge Posted May 1, 2012 Author Share Posted May 1, 2012 First of all, thank you for your responses. The only solution would be to give a non-repeating background image of a disc to the <a> elements with position "left center" Yeah, I imagined that solution, but tried to avoid it, to avoid sending images... @dsonesuk: Your solution allows the bullets to be on the same line and i may even extend the background color to include the bullets, but i'd like the whole line to be "clickable" as in a real navigation menu ;-) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now