|
CSS - Make Empty Unordered Lists
I am having a problem with a menu generated by a CMS. Basically it generates a series of nested unordered lists for the navigation. It only shows a parents children menu items if you are within that section. The problem is that it still outputs the unordered list and list item elements for the other child menus, but just leaves them blank. Leaving something like this:
Code: <ul><li></li> <li></li> <li></li> <li></li> <li></li> </ul> This works fine in Firefox... but of course when you get to IE, it leaves big vertical spaces in the navigation. Unfortunately, I can't attach any IDs or classes to the child UL or LI elements. There is only one ID on the main UL, <ul id="subnav">. So my question is, can anyone think of a way that I can modify my CSS to take out those blank spaces created by empty <ul>s in IE? You can see the page he http://www.holidaytravelincentives.com/index.php/products/air-accommodations/ Similar TutorialsTake a look at my code... http://www.trinitysql.co.uk/jubilee2005/ Those links at the top are a <ul> with fixed height and width... What I want to do is push the text down to the bottom and make the whole area of the <li> link... Any help you couyld give me would be very much appreciated! Thanks! Working on converting the layout in the attached image and I'm having a problem with the main menu. Here are my problems: *trying to push down the menu items. Setting padding-top only seems to extend the borders up above the horizontal line and doesn't push the text down. *getting the highlight color above the text. Some ideas I had were trying to set a background image for each list item (but how can I do this without the borders extending above the horizontal line) or setting a background image of the whole unordered list (but with this will "break" when users have different font sizes). Any thoughts? Layout is attached as well as what little code I have since I'm just starting on this project. Thanks in advance, -b I can't seem to find any issues of this on the web, or maybe I'm not doing a correct search. here's my problem. I'm creating a horizontal menu with an unordered list <ul> with each <li> tag using a background image. My problem is, in IE (both ie6 & 7), the menu seems to display having a staggered cascading effect. Firefox works great as usual... see screenshot at http://clubsix1.com/images/cascade_effect.png Here's my CSS code: Code:
#masthead ul#mystuffnav {
padding:0;
margin:0;
width:334px;
}
#masthead ul#mystuffnav li {
float:left;
margin-bottom:1px;
clear: both;
}
/* Fancy Buttons, My Stuff Nav */
#masthead ul#mystuffnav a.button,
#masthead ul#mystuffnav a.button:link,
#masthead ul#mystuffnav a.button:visited {
padding:3px 7px 5px;
text-decoration:none;
outline:none;
/*display:block; OQO */
font-size:10px;
float:left;
text-align:center;
margin:0 1px 0 0;
line-height:1em;
}
Help is GREATLY appreciated! =) How do I go about making my unordered list use a image file or the bullet? Code: <ul> <li><a href="#onesweetcoma">One Sweet Coma </a></li> <li><a href="#untitled">Untitled</a></li> <li><a href="#freedomfound">Freedom Found </a></li> <li><a href="#yourwords">Your Words</a></li> <li><a href="#reprise">Reprise</a></li> <li><a href="#cantpullaway">Can't Pull Away </a></li> <li><a href="#sleepingawake">Sleeping Awake</a></li> <li><a href="#wherewestand">Where We Stand</a></li> <li><a href="#echooffthewalls">Echo Off the Walls </a></li> </ul> my image name is bullet.png Hello, I need to make some unordered lists within a page appear with a graphic as a bullet, and some appear with a disc. My current code is: Code:
ul {list-style-image: url(../img/redarrow.gif)}
But this makes all unordered lists appear with the graphic, and of course if I comments out that code, all unordered lists appear with a disc. Please let me know if it is possible to code it so that I can have both in a page. Thanks! Hi, Trying to create a menu using <ul> tags and to have a nice spacing between <li> items. I have tried the line-height property but it seems like IE ignores them. Firefox formats the line-height properly. Can anyone help me? Should the line-height be applied to ul or li tags? /Hubba Bubba Here is a menu I am trying to build. I used different background colors to see what sections are doing what. Essentially what I am trying to achieve is that the menu items defined by the <li> (green) tag have text vertically centered in them and be the same height as the ul section (yellow). Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My site</title>
<style type="text/css">
body { background: black; }
#level0 {
background: red;
clear: both; } /* end #level0 */
#level1 {
background: orange;
width: 957px;
margin: auto; } /* end #level1 */
#level1 ul {
background: yellow;
clear: both;
text-align: right;
border-right: thin solid #cfcfcf;
margin: 0;
padding: 0;
height: 40px; } /* end #level1 ul */
#level1 ul li {
background: green;
line-height: 40px;
font-size: 12px;
padding-top: 13px;
padding-bottom: 13px;
vertical-align: middle;
border-left: thin solid #cfcfcf;
text-align: right;
margin: 0;
color: #9f9f9f;
padding-left: 1em;
padding-right: 1em;
display: inline; } /* end #level1 ul li */
#level1 ul li.active { background: blue; } /* end #level1 ul li.active */
#level1 ul li a {
background: purple;
color: #9f9f9f; } /* end #level1 ul li a */
#level1 ul li a:hover {
background: inherit;
text-decoration: none; } /* end #level1 ul li a:hover */
#level1 ul li.active a:hover {
text-decoration: none;
background: none; } /* end #level1 ul li.active a:hover */
</style>
</head>
<body>
<div id="level0">
<div id="level1">
<ul>
<li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li><li class="active"><a href="#">Link 4</a></li><li><a href="#">Link 5</a></li><li><a href="#">Careers</a></li><li><a href="#">Link 6</a></li>
</ul>
</div>
</div>
</body>
</html>
What happens is that this version renders as I want it in Safari, one pixel too high in Opera and Firefox, and several pixels too short in IE. What are some things I can try to fix this behavior so that it is consistent (-ly correct ) across browsers? Again for those that have helped me on other threads I greatly appreciate it. I have used CSS before but this is my first time using it for layout and am struggling with it a bit. Quick question... I am trying to make an unordered list and have the first level have no indent/margin. But I want the second level to be indented 15 pixels. I'm having problems getting this done. Any suggestions? Thanks www.l33tmonkey.com/sun/index.html completely ignoring the image issues, which are next on the list to sort out, I have a problem. I've gotten hold of two seperate scripts with permission from the author, and they wouldn't wrk together so I linked them externally as two seperate files. Both scripts cater to IE and other common browsers using conditional comments and are reasonably tidy even after I've been playing with them So here's the problem, the horozontal menu, with the two drop down sub menus, needs to float to the right, the float attribute is already present within the menu script, however, the float attribute will only work when set to the left. I altered it to the right and the menu went haywire. the scripts and index source can be viewed freely. Any help on this would be really appreciated, I'm no expert on CSS I've got an odd bug in IE7 that's got me completely stumped. I'm using drupal for sort of an art/comic site, and I've built my own theme off of the Zen theme, for anyone who's familiar with it. My main page works just fine. Once I get to either the gallery or forum things start to collapse and get weird. My sidebar loses it's positioning, and the width of the list items in the unordered list shrink down to the size of the image or tex they contain, rather than extending to fill their container. The only consistency I can find here is that they're both using unordered lists, but beyond that I'm not sure what's going on. I've tried to go through and swat any obvious CSS and HTML errors, so any advice or insight on this would be much appreciated. eta: looks like I can't post an opening topic with links yet, so I'll have to post them as a reply or something. First off, I apologize if my explanation is bad. Also, please refer to the link below. You will have to delete from the spaces from the URL because I was not allowed to post a url since I am a new user :/ http://img240. imageshack. us/my.php?image=forumexplanationje5.jpg This is what I want to do... I want to make a "table" in css. I want to make the "table" always be 890px. The css for the orange items would be .orange { margin:0px; padding:20px; } Now, I want the width of the orange items to be the width of the text in them + the padding. So basically the width is going to be dependant on the text in the tag. My problem is that I don't know how to make the blue part fill up the rest of space without knowing what the width of the orange part is. Please help, thanks. 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 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> I'm trying to change the list style from 'disc' to 'none' for some sections of my site, and I'm running into problems. The page in question is found at luv . deepwaterchurch . com then click on "Global Partners" I'm trying to hide the discs for the lists in the twitter feed (left column) and the news feeds (inline in the main content) I've tried adding list-style:none to what I think are the appropriate elements in my stylesheet, but nothing is working. I'm sure it's a simple fix, but I can't find it. 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. Here are a couple of questions, all are in reference to THIS LAYOUT 1) There seems to be an Internet Explorer issue where bullets don't always show up on list items, any ideas how to fix this? 2) It wont validate in XHTML simply because of two urls I use, anyone have any hacks as to how to fix this? 3) I've only been able to test on IE and Firefox, so if anyone is on a different browser and can let me know of any other issues it would be amazing. Thanks in advanced! 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? 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; }
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! |
|||||||