Jump to content

list breaking lines after bullets


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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...