Jump to content

list breaking lines after bullets


Luegge
 Share

Recommended Posts

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

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

<!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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...