|
CSS - Space Between Lines Of A List
I was wondering if anyone knows how to get a space between blocks in a list. If you have list that have more that one line in a block it looks better to have gaps greater than the leading to separate them.
I can't figure how to accomplish this, does anyone have any ideas. Similar TutorialsHi, I am writing a code for form: Code: private name: <input size="10" name="private_name" type="text"> last name: <input size="10" name=last_name" type="text"> I want to increase the space between the two lines I tried to use the css line-height and it did increase the vertical space between the two lines. However only in the part of the words. In the case of the two input boxes instead of more space they become "taller", I can understand the logic behind this, what I don't know is a way to increase the vertical space between the two lines that will work in the case of the input boxes as well. How can I solve this? Thank in advance I'm going through hell trying to make a site look the same in IE and Firefox. The biggest problem is the gaping spaces IE adds between elements. What is the best way to fix this? Example at patrolmag.com/new. Any advice or help would be most appreciated. P.S. How the page looks in Firefox 3 is ideal. I just need to make at least IE7 come somewhere close to matching it. I have a few lines of text which have different formatting setups. But there seems to be an extra space between the two lines of text. Why is this? Here is the css for the text: Code:
h1{
color:#534741;
text-decoration : none;
font : 20px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
text-align:left;
font-weight: bold;
padding-left: 18px;
}
h2{
font-size: 16px;
color:#1133aa;
text-align:left;
padding-left: 0px;
padding-right: 20px;
}
h3{
font-size: 12px;
color:#534741;
text-align:left;
padding-left: 0px;
padding-right: 20px;
}
Here is the text itself: Code:
<div id="centerformbottom">
<h1>or call</h1>
<div id="centerformbottomleft">
<h2>Janine Todd</h2>
<h3>312.848.9388
<a href="mailto:janine@imaginehealthsolutions.com ">janine@imaginehealthsolutions.com </a></h3>
</div><!--centerformbottomleft-->
<div id="centerformbottomright">
<h2>Bob Brodell</h2>
<h3>312.659.4242
<a href="mailto:bob@imaginehealthsolutions.com">bob@imaginehealthsolutions.com</a></h3>
</div><!--centerformbottomright-->
</div><!--centerformbottom-->
Here's a link to the page itself: http://www.childevangelismncwi.org/ImageHealth/Contact.htm Thanks! I have a list that I've created with the list-style-type being an image. For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly? Below is the code. The cell that these lists sit in has has an id of 'cellid'. Code:
#cellid {
margin: 0 0;
padding: 0 0;
}
#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}
#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}
The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space? Thanks, Brian Im having spacing issues with my main navigation. I cant get rid of the spaces between the li. There are these white spaces between the dark gray navigation. Ive tried putting negative px in my li and my paddings/margins for li are 0. I am fairly new to css and this is my first list navigation. Any help is appreciated. THANKS Code: CSS #pipe {
font-size:13px;
}
#pipe ul {
float: left;
margin-top: 74px;
margin-left: 143px;
padding: 0;
display: inline;
}
#pipe ul li {
margin-top: 0px;
margin: 0px;
padding: 0px 0px;
/*border-left: 1px solid #000;*/
list-style: none;
display: inline;
width: 100%;
}
#pipe ul li.first {
background-image: none;
margin-left: 0;
margin-right: 0;
border-left: none;
list-style: none;
display: inline;
}
#pipe li a:link {
/*background-image:url(images/navline.gif);*/
background-color:#999;
color:#333333;
padding: 19px;
margin-right: 0px;
text-decoration: none;
}
#pipe li a:visited {
/*background-image:url(images/navline.gif);*/
background-color:#999;
color:#333333;
padding: 19px;
margin: 0px;
text-decoration: none;
}
#pipe li a:active {
/*background-image:url(images/navline.gif);*/
background-color:#999;
color:#333333;
padding: 19px;
margin: 0px;
text-decoration: none;
}
#pipe li a:hover {
color:#ffffff;
background-image:url(images/navline_on.gif);
padding: 19px;
margin: 0px;
text-decoration: none;
}
Code: HTML <div id="pipe"> <ul> <li><a href="(a href="")">HOME</a></li> <li><a href="(a href="")">WHAT WE DO</a></li> <li><a href="(a href="")">SEMINAR</a></li> </ul> </div> Hi, I have a list inside a div section. However for some reason there is some space srounding this list. The div has a padding of 5px. I want to remove the space of the list so that the actual list is only 5px away from the div border. Here is some html and CSS code of what I did so far: Code:
<html>
<head>
<style>
#box {
width: 200px;
border: 1px solid #000000;
padding: 5px;
}
#box ul li{
padding: 0;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</body>
</html>
I also tried margin: 0px, however that was a disaster. And also tried clear:both but did not work either. Does anyone have any sugestions? thanks and regards, sim085 Hello My problem is maybe a easy to solve one, but I realy don't know how to get it right. I have a list of links and want them equaly vertical spaced between all the line of links. link1 (space) link2 (space) link3 What I got doesn't look right in IE and Netscape at the same time. Is there a css tactic to get it right in both browsers? Please can someone help me? I'm having a "can't think" day. How would I get rid of the space(s) between the image icon and the <li> folder or file name on my test website? On the left-hand side of my test website, there is a directory tree listing. You'll see that php files are indicated with an php file icon for example. I don't want that much space between the file name and the file icon. Test website: www seemyinvestments dot com 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 Seems like most people use unordered lists for menus. Code: <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> Others use definition lists. They claim it is less buggy with IE. Code: <dl> <dt>menu1</dt> <dt>menu2</dt> <dt>menu3</dt> </dl> Any thoughts on whether unordered lists or definition lists are best? Also, I sometimes see the menu text surrounded by a SPAN tag. I believe this has to do with only being able to assign one attribute to an element, but am uncertain. Can anyone help explain? Also, if I want a single HTML to work with various CSS, is it a good idea to always include the SPAN tag? Code: <ul> <li><span>menu1</span></li> <li><span>menu2</span></li> <li><span>menu3</span></li> </ul> Thanks Anyone knows of a method to cause a vertical line to come all the way down ? Currently it stops where the text stops. but i want it to go all the way to the buttom of the document regardless of the text. (right now i use box border on one side) Thanks! I have finished my transparency box backgrounds.. and, thanks to some help here.. have them working in multiple browsers.. Now, I have received a call.. that one person sees "black lines" through the boxes on the transparent boxes on the attractions and info pages.. (user is using IE and 1024x768) -I cannot recreate this problem on any machine.. is there some little strange bug that causes this on certain browsers? http://www.tkwebbiz.com/Gina2 Thanks so much.. *again*.. *Smiles* Hi, Have an unordered list which I use as a menu. I have set the list-style-type property to none because I don't want any bullets or anything. When I look at the menu within a bordered div, it seems like there is a margin to the left of the <ul>. Eventhough there are no bullets in the <ul>, the <li> are still placed at the same location from the left. How can I left adjust the unordered list so that there are no visible margin at the left side? /Hubba Bubba Hi I have a vertical menu containing main and subcategories. subcats are hidden, when a main cat is clicked then subcats are displayed, all is done with css no javascript. here is the structure, Code:
<ul id="nav">
<li class="level item-1 nav-clothes active parent">
<a href="/clothes.html"><span>Clothes</span></a>
<ol class="level item-1">
<li class="level1 nav-clothes-shirts">
<a href="/clothes/shirts.html"><span>Shirts</span></a>
</li>
<li class="level1 nav-clothes-tanks">
<a href="/clothes/tanks.html"><span>Tanks</span></a>
</li>
<li class="level1 nav-clothes-raincoats">
<a href="/clothes/raincoats.html"><span>Raincoats</span></a>
</li>
<li class="level1 nav-clothes-dresses">
<a href="/clothes/dresses.html"><span>Dresses</span></a>
</li>
<li class="level1 nav-clothes-swimsuits">
<a href="/clothes/swimsuits.html"><span>Swimsuits</span></a>
</li>
<li class="level1 nav-clothes-outerwear last">
<a href="/outerwear.html"><span>Outerwear</span></a>
</li>
</ol></li>
<li class="level item-2 nav-beds parent">
<a href="/beds.html"><span>Beds</span></a>
here is my all related css, external css file, Code:
#nav { font-size:13.5px; color:#000; padding:0 0 0 0; margin:-20px 0 0 0; width:100%;}
/* All Levels */
#nav li { text-align:left; }
#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav li li.parent {}
/* 0 Level */
#nav li { clear:both; position:relative; display:block; }
#nav li.active a { color:#000; text-decoration:underline; }
#nav a { float:left; padding:2px 14px 11px 0px; color:#000; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#000; text-decoration:underline; }
#nav .item-1 ul a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616;}
#nav .item-2 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-3 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-4 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-5 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-6 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-7 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-8 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-9 ul a {padding:0 0 0 0; color:#1A1616;}
#nav ul li a { padding:0 0 0 0;}
#nav ul li a:hover { padding:0 0 0 0; text-decoration:none;}
/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding:6px 0 0 29px; background:#FFFFFF; border-left:1px solid #E8E7E7; border-right:1px solid #E8E7E7; }
#nav ul li.over {}
#nav ul li.last { background:#FFFFFF; padding-bottom:15px; }
#nav ul a,
#nav ul a:hover { float:none; padding:0;}
#nav ul li a { font-weight:normal !important; }
/* 2nd level */
#nav ul { position:absolute; width:199px; top:23px; left:-10000px; background:url(../images/bg_sub_menu.gif) 0 0 no-repeat; padding:23px 0 0 0; border-bottom:1px solid #E8E7E7; margin-left:100px; }
/* 3rd+ Level */
#nav ul ul { top:5px; background:none; padding-top:0; border-top:1px solid #E8E7E7; }
/* Show Menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }
#nav ul li a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616; }
#nav ul li a:hover { color:#1A1616 !important; }
#nav ul span,
#nav ul li.last li span { padding:3px 15px 4px 15px; }
#nav li ul { display:none; }
#nav li:hover ul{display: block; }
#nav ol { margin-left:5px; margin-bottom:10px; }
#nav ol li { padding-left:15px; background-image:url(../images/ol_bg_lines.gif); font-size:12px; font-weight:normal; }
#nav ol li.last { background-image:url(../images/ol_bg_lines_last.gif); }
inline css code to overwrite the default behavior for target page Code:
ul#nav {margin : 0 10px; margin-bottom:0px;}
ul#nav li {height : 14px; margin-top : 5px;}
ul#nav li a, ul#nav li a:hover {}
ul#nav ul {margin-top : -8px; background : url(/images/drop-ul-bgr.gif) no-repeat; }
ul#nav ul li {height : auto; margin-top : auto;}
ul#nav ol li a { padding:0px; }
ul#nav ol li { margin:0px; padding:5px 0 5px 15px; }
ul#nav ol { border:#ccc 1px solid; padding-bottom:30px; }
I am attaching a screenshot to explain the problem, i have given border to the OL to explain the problem. In the screenshot the pink arrow is pointing the place, BEFORE BEDS, where i want to give more space but the child list keeps overlapping rather than pushing the parent list downwards. any help is much appreciated I am really stuck with this. I had a webpage where there were rows with three boxes on, that all floated left. After the third there was a line break and then the next line also had three boxes, etc. The boxes all have the same width, but different heights (not dramatically different). I am now wanting to allow the number of boxes on the line to vary with the width of the browser window. By removing the break every three lines this would work if all the boxes were the same height. As they are not, the box that should go onto the next line down might go down and a bit to the left before being "stopped" by a taller box. I expected this behaviour, but I'm not sure how to go further and get around it. Thanks for any ideas, Thomas I need some help. I am a relative beginner with CSS and have a problem that is eluding me. Specifically in the right-hand sidebar on this page (FriendsAcrossTheWater.org/blog), you will note that all the links are on separate lines by themselves. I do not want this behavior and I am not sure what is causing it nor what to do to correct it. Can you help? Thanks, Bob Ross Hi there, I would like to get some opinions on what would be the best way, or even a good way, to display a list of lines from a database, such as product descriptions (a link), prices (text) and buy now links. For example: Segate Hard Drive 250gb $150.00 Buy Now Maxtor Hard Drive 300gb $200.00 Buy Now etc I thought it would be best to have a <ul> with each line being an <li>. Further to this, I tried having each line as a <li> element, with each column (price, buy now etc) an <li> element, displayed inline. This actually worked well, but I had trouble doing an alternate background color thing, which I think was due to my funny css code. I gave each <li> a class selector, so that different formatting could be applied, and I had each <li> float:left; and a width, to give a column style display. Would a table be the best way to display the 3 (or more) columns? I've removed tables from the site layout, and can see how they would make sense for this, as it basically is tabular data, repeated over and over again. Or would having each line as a <p> with say each column having its own <label> possibly be best? Or some variation on of the 3, or something else all together? I realise everyone would have their preferred style and there is no 'best', 'right or wrong' way etc. I'm trying to find a way that I can work with, one that could be considered 'the norm', or 'best practise'. I haven't posted any code, but can if people need more of an idea of what I am trying to do. Cheers Scott Am I commenting lines incorrectly? If I prefix a line with two slashes // in the CSS, firefox will ignore it. IE will recognize it and perform the CSS styling. For instance: Code: table.myTable tr td
{
background-color: red;
//background-image: url('mypic.jpg');
}
The TD element will not have a background in firefox. It WILL have the background image in IE. P.S. I am using IE8 on Win7 RC1 (build 7100). Thank you CSS Validator Two lines of CSS won't validate because they are used to fix a navigation issues in IE. Without those two lines there is a huge height gap between each list element in IE. Anyway I can hide these two lines from the validator? |
|||||||