CSS - Hanging Quote Mark In Unordered List

Hi,
I'm just diving in to CSS layout and gradually working through CSS IE bugs. I'm having so much trouble sorting this one out though!

I've got a fairly standard menu using UL and LI in a left hand container. Everything displays nicely in Firefox 1.5 and looks ok - initially in IE6 until you hover over the menus. In Firefox they change background colour and font colour as I want, however in ie6 when you hover the background doesn't change colour and the menu all squishes up together!

Where am I going wrong??

Here's the CSS for the elements:

Code:

#leftcol{
	float:left;
	padding: 0;
	width: 170px;
	background-color: #FFFFFF;
	
}

#SectionNav {
	background-image:url(../assets/images/sectionNavBack.png);
	background-repeat: no-repeat;
	background-color: transparent;
	width:150px;
	height: 323px;
	left: 0px;
	top: 0px;
	padding-left: 0px;
	display: block;
	
}

#SectionNav ul{
	margin-top: 0px;
	padding-top: 25px;
	
	background-color: transparent;
	list-style-type: none;
	font-size: 80%;
	list-style-image: url(../assets/images/ballBullet.png);
	display: block;
}

#SectionNav ul li a{
	color: #FFFFFF;
	display: block;
	margin-top: -5px;
	padding-botton: 10px;
	margin-bottom: 10px;
	text-decoration: none;
	height: 21px;
	background-image: url(../assets/images/SectionBtnBack.png);
	font-weight: 200;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

#SectionNav ul li a:hover, #SectionNav ul li a:focus { 
	background-color: #0000FF;
	color: #FFCC00;

}

Here's the HTML:
Code:

<div id="leftcol">
<div id="SectionNav">
  	<ul>
		<li><a href="index.php">Home</a></li
		>
		<li><a href="#">News</a></li
		>
		<li><a href="#">Handicaps</a></li
		>
		<li><a href="#">Leaderboard</a></li
		>
		<li><a href="#">Competions</a></li
		>
		<li><a href="#">Media</a></li
		>
		<li><a href="#">Courses</a></li
		>
		<li><a href="#">Links</a></li
		>
	</ul>
  </div>
<!--End of SectionNav-->
</div>

I've played around with the various margins etc but no joy.

The page can be found at:

http://beta.sussexeast-gs.org.uk/index.php

Excuse the colours they're there to help me with layout for now.

Thanks

Apologies for such a novice question.

I'm creating a few Ordered and Unordered Lists and some of the List Items wrap to a second or third line. My additional lines are wrapping out to the left margin of the number or bullet, rather than wrapping only to the left margin of the text in the first line.

What is the command to style List Items to wrap so that the text all aligns left on the same margin, rather than aligning with the bullet or number?

I'm hoping I can get a bit of help addressing the display of an unordered list. I'm trying to view the list horizontally, and not vertically. Here is the code, and thanks in advance.

CSS --------------------------------
#pages {
margin-top: 12px;
float: right;
margin-right: 125px;
font: normal 14px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
color: #000;
}

#pages ul {
list-style-type: none;
margin: 0;
padding: .5em 0;
display: inline;
}

#pages li a {
display: block;
width: 1.5em;
height: 1.5em;
padding: 0;
text-align: center;
vertical-align: text-middle;
text-decoration: none;
}

#pages a:link, #pages a:visited {
margin: 0 10px 0 10px;
text-decoration: none;
color: #000;
}

#pages a:link#pagescurrent, #pages a:visited#pagescurrent {
border-bottom: 1px solid #000;
background: transparent;
color: #000;
}

#pages a:hover {
background-color: #949494;
color: #fff;
}



HTML --------------------------
<div id="pages">
<ul>
<li><a href="#" id="pagescurrent" title="next slide">1</a></li>
<li><a href="#" title="next slide">2</a></li>
<li><a href="#" title="next slide">3</a></li>
<li><a href="#" title="next slide">4</a></li>
</ul>
</div>

How do I remove the indenting that happens on a UL with CSS? I want a vertical list but I don't want it to indent as it messes up my design.

Hello all,

I'm a relative newbie with css, so any help is greatly appreciated. I am trying to come up with some xhtml/css that can appropriately display several images and text inside of an unordered list. For example, say I have this:

Code:

<ul>
  <li>TEXT<img />TEXT<img /><a>LINK</a></li>
</ul>

I am trying to come up with a way that the text inside the <li> tag always is displayed at the same level as the top of the text, if that makes sense. Also, I'd like the list element to be of uniform height and width. Finally, I'd like the second image and link to be all the way to the right of the list element. Here's what I've got so far:

Code:

<ul style="vertical-align: top; list-style: none;">
  <li id="li_1" style="list-style:none;">
    <span style="width:150px; vertical-align:text-top;">1.) 
      <img src="/images/document.png" height="40px"/>TEXT
    </span><span style="float:right">
      <img src="/images/close.png" height="40px" />
      <a href="#" onclick="return false;">[Edit]</a>
    </span>
  </li>
</ul>

Simply put, this currently looks like crap. Any suggestions? Thanks in advance.

when using unordered lists, is there any way to get more than 3 different bullet designs as you go into deeper nests? after the 3rd nest, the same bullet design is used over and over again.

Hello,

I've created a menu by using an unordered list. Some of the list's items have submenus which is done with another unordered list nested inside the first. So my menu/list would look something like this:

( XX = the bullet image )

Code:

XX Item 1
XX Item 2
XX Item 3
      XX Item 3-1
      XX Item 3-2
XX Item 4

I was wondering if it is possible to use a different bullet image for the nested/indented unordered list? So the menu/list would now look like:

( XX and ZZ = the bullet images )

Code:

XX Item 1
XX Item 2
XX Item 3
      ZZ Item 3-1
      ZZ Item 3-2
XX Item 4

My existing code is:

Code:

<ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li>Item 3
         <ul>
          <li><a href="#">Item 3-1</a></li>
          <li><a href="#">Item 3-2</a></li>
          </ul>
        </li>
        <li><a href="#">Item 4</a></li>
        </ul>

And my existing ul CSS is:

Code:

ul {
	list-style-position: outside;
	list-style-type: square;
	margin-left: 18px;
	margin-bottom: 0px;
	padding: 0px;
	list-style-image: url(/graphics/layout_05/list_bullet.gif);
	margin-top: 0px;
	margin-right: 0px;
}

Thank you for any and all help!

Hi,

I am using linked-in stylesheets for my webpage and have an unordered list, which is inside a div, for the phone number and email address (which is an email link) which are in the top right corner of the page. The whole page is in a container div.

I am trying to 'text-align' these two <li> elements to the right, the phone number does this but the email link just won't move to the right and is staying on the left! I have put the 'text-align: right' attribute for the 'ul' and the 'li' and the 'a' but to no avail.

The weird thing is, I also have an undordered list for my navigation which is also on the same page, running horizontal on the left side of the page, but these seem to work fine for the alignment (each link is centered nicely in their boxes).

Why won't the email link align right?!

My stylesheet code:

#garden-designer-contactbar ul {
display: block;
position:absolute;
text-align: right;
font-size: 20px;
font-family: verdana, arial, helvetica, sans-serif;
color: #666666;
left:541px;
top:0px;
width:179px;
height:51px;
margin: 0;
padding: 0;
list-style-type: none;
z-index:6;
}

#garden-designer-contactbar li {
display: block;
text-align: right;
}

#garden-designer-contactbar a {
display: block;
position:absolute;
text-align: right;
font-size: 12px;
font-family: verdana, arial, helvetica, sans-serif;
color: #666666;
font-weight: normal;
}


My page code:

<div id="garden-designer-contactbar">
<ul>
<li>020 0000 000</li>
<li><a href="mailto:email@email.co.uk?subject=Garden Design" title="email Garden Design" align="right">email@email.co.uk</a></li>
</ul>
</div>

Does anyone know what might be going on? My container div for the whole page is set to 'text-align: left' but I tried removing that attribute and it just made other text on the page that wasn't specifically aligned, centre. And the email link seemed to stay where it was.

Any help much appreciated!

I am creating a website for a game (unnamed so far) the template is located at syckgamingleague(dot)com in Firefox this site looks perfect works extremely well. In Opera the navigation doesn't seem to be working like I want it. In IE it seems as if everything that should be vertically aligned to the middle doesn't appear to do that.

I am just looking for a fix for the Opera navigation error currently but if you know the cause of the IE problems and would like to help that would be great.

The website is located at the URI: syckgamingleague(dot)com

I will include images for the display of each of the browsers mentioned above.

Firefox at the above link in root folder Firefox_Polkamon.jpg

Opera at the above link in root folder Opera_Polkamon.jpg

IE at the above link in root folder InternetExplorer_Polkamon.jpg

Sorry for no links but this forum would not allow it.
Name for game isn't Polkamon it is more of a codename than anything currently game isn't named.

Hey,

I've run into some trouble with a menu.

Below is my CSS:
css Code:
Original - css Code #menu ul{ background: url(img/bg_menu.png) repeat-x #15365E; height: 28px; padding: 0 5px; } #menu ul li{ float: left; margin: 0 5px; } #menu ul li a{ color: #CCC; display: block; font-size: 0.75em; text-decoration: none; height: 28px; line-height: 28px; }

  

 #menu ul{ background: url(img/bg_menu.png) repeat-x #15365E; height: 28px; padding: 0 5px; }


 #menu ul li{ float: left; margin: 0 5px; }


 #menu ul li a{ color: #CCC; display: block; font-size: 0.75em; text-decoration: none; height: 28px; line-height: 28px; } 

As you can see, this is a horizontal menu using an unordered list with its list items floated left. I would have used inline on the list items as I prefer it to floating in this scenario, but the links within those list items are displayed as blocks so as to allow me to properly align a background image (not included) in links of a certain class - and block elements don't go inside inline ones nicely.

This is just fine in modern browsers. However, IE6 displays the links at 100% width (whereas other browsers contain the link text nicely), which ends up displaying the horizontal menu as a vertical list.

I'd rather avoid assigning a width to each menu item (that does fix the problem, but it's messy and harder to update). That's the only fix I've come up with.

Please let me know if you need any further information - otherwise, thank you in advance for any assistance!

Hi Everyone,

I'm new to the forum and somewhat new to CSS.

I am developing a simple webpage that has a horizontal unordered list serving as a navigation bar.

Firefox adds what looks like about 20px of extra space above and below the entire list while internet explorer shows it aligned top left.

Eventually I would like to center the unordered list top and bottom, but I can't seem to get any alignment formatting to work at all.

Here is the problem code:
Code:

<div id="navbox">
	<ul id="navbar">
    <li><a href="index.html">HOME</a></li>
    <li><a href="http://showrooms.canadatrader.com/7010/7622">INVENTORY</a></li>
    <li><a href="formapp.html">APPLY NOW</a></li>
    <li><a href="mailto:rjtria@gmail.com">EMAIL ME</a></li>
   </ul>
  </div>

And the corresponding CSS:
Code:

#navbox {
	background-color: #B1C5D0;
	height: 50px;
	width: 760px;
	overflow: visible;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #333;
	border-right-color: #333;
	border-bottom-color: #333;
	border-left-color: #333;
	color: #036;
	font-weight: bold;
	font-size: 130%;
	font-family: "Courier New", Courier, monospace;
	line-height: normal;
}
#navbar li {
	display: inline;
	list-style-type: none;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: dotted;
	border-right-style: dotted;
	border-bottom-style: dotted;
	border-left-style: dotted;
	padding-right: 10px;
	padding-left: 10px;
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

I know it's not much.. but it's making me crazy.
I have tried zeroing out all padding / margins to no avail...

Any help would be greatly appreciated!!
Thanks in advance!
Celeste

Hello,

I was wondering if anyone could shed some light on this problem I'm having with my navigation bar. I've Googled and tried every [seemingly] logical combination, but can't get it to work -- and it's driving me nuts!

Basically, I have a div containing an unordered list and an image. The image is a non-semantic hack I've had to put in for the design, without making it massively complicated... Anyway, the problem is with the ul, which contains lis that are just images (tabs). Like so:

Code:

<div id="tabs">
  <ul>
    <li><a href="..."><img src="..."></a></li>
    <li><a href="..."><img src="..."></a></li>
    [etc.]
  </ul>
  <img src="filler.png">
</div>

Each image is a different width; and the above is simplified for clarity... Anyway, this works perfectly in Firefox, Opera and even IE. However, in Safari and Chrome, the lis have a few extra, blank pixels of padding on the right edge of the image; whereas I want all the images to butt-up against each other.

My CSS is as follows:

Code:

#tabs {
  word-spacing: -4px; 
}

#tabs ul {
  display: inline; list-style: none;
  margin: 0px; padding: 0px;
}

#tabs li {
  display: inline;
}

The word-spacing for the div removes the spacing you automatically get in Firefox/Opera/IE -- I found -4px was enough to remove the gap entirely -- but in Safari/Chrome, a gap remains. If you make the value even smaller (e.g. -5px, -60px, etc.) it makes no difference in any browser; if you make it bigger, then the gaps widen in all browsers. However, WebKit browsers always have that extra padding on the right edge.

Any ideas on how to get rid of this?... I've tried "display: inline-block", "-webkit-border-horizontal-spacing" with various values, "white-space: nowrap"; even altering the HTML so that the images and lis have explicitly defined widths. Nothing works!

Hey,
I'm building a rather elaborate javascript popup menu, and I'm trying to get some distinction between some of the long-text menu items. I have no padding after the <p> tags because then I get an extra space at the bottom of my menu. So I'm trying get a hanging indent to work:

my CSS styles:

.question_indent {
text-indent:-10px;
padding-left: 10px;
}

.popupmenu p{
color: white;
font-size: 0.80em;
display: block;
padding-left: 6px;
padding-right: 6px;
margin-top:0px;
margin-bottom:0px;
}

Here's my problem: with my javascript highlight-on-hover function, the hightlight starts in the middle of the first letter of the menu item with a hanging indent. I can't figure out a way to get around it (e.g. can't find anything on google).

function subhighlight(obj) {
if (subhighlighted!=null)
{
//unhighlight last link
subhighlighted.style.background = "";
subhighlighted.style.color = "#f7f7f7";
}
subhighlighted=obj;
if (subhighlighted!=null)
{
//highlight current link
subhighlighted.style.background = "#f7f7f7";
subhighlighted.style.color = "#376092";
}
}

Here's some of my menu item code:

sublinkset[0]= '<p class="question_indent">llooong text repeat llooong text repeat llooong text repeat llooong text repeat.</p>'

sublinkset[0]+='<p class="question_indent"><a href="about_us.html" id="11">But that\'s just a summary. Click to read more.</a></p>'

Hi everyone. Here is the url

http://v3p2.stealthwd.ca/

its the dev version of my companies soon-to-be-new website.

The font-face code is...

Code:

@font-face {
    font-family: 'SlingLight';
    src: url('/fonts/sling/slinglight-webfont.eot');
    src: url('/fonts/sling/slinglight-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/sling/slinglight-webfont.woff') format('woff'),
         url('/fonts/sling/slinglight-webfont.ttf') format('truetype'),
         url('/fonts/sling/slinglight-webfont.svg#SlingLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

Any idea why its timing out?

Thanks