|
CSS - Remove Space Surounding A List.
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 Similar TutorialsI'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 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 How can I remove the space between an image bottom and a td in Mozilla? <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> <head><title></title> <style type='text/css'> td,img { padding:0px; border-width:0px; margin:0px; } </style> <script type='text/javascript'> </script> </head><body> <table border='1'><tr><td> <img src='http://www.kallery.net/Q_strg/kallery/85_153_1_1155924038.jpg' /> </td></tr></table> </body></html> http://users.wpi.edu/~sigep/goron2.html How would I remove the space around the images in the navbar so that they are all right next to one another and line up properly on the page? Hi I have a page that looks something like this Code:
<style>
#container {
border: solid 1px #000000;
width: 600px;
padding: 10px;
}
#banner {
height: 200px;
width: 600px;
background-color: #FF0000;
font: bold 20px Arial, Helvetica, sans-serif;
}
#layer {
position: relative;
top: -198px;
height: 196px;
width: 150px;
z-index: 1;
left: 2px;
background-color: #FFFFFF;
}
</style>
<div id="container">
<div id="banner">Hello</div>
<div id="layer">This is a layer</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
</p>
</div>
If you view that site, you will see that there is an empty space below the banner-div, which is reserved for the layer. I need to get rid of that empty space, in other words, I want the text to begin right after the banner-div. Any ideas how I can accomplish this? Using relative positioning for the text is not possible, because of the structure of the rest of the page (which I haven't pasted here). [edit] Floating the layer will work partially, the text will begin right below the layer, but there is still an empty space on the left side of the text - that has to go too. [/edit] All help is appreciated. Thank you in advance - Kimppa The website I created has a large blank space at the bottom. I want 30px between the bottom and the layout. At the top, I could create the space I want. Margin-bottom: 30px doesn't do the trick. I tried so many things but I just can't get it fixed. I think something is set too height or something? If someone could figure it out, I would be forever grateful! You can check out the site and css he I can't post the url because I'm a new user Can a mod post my url? EDIT: I have set the url as my homepage in my profile! Just click my username to check out the site. Hi there, Not entirely sure this is a CSS issue, but something tells me it is... I'm getting a weird space at the top of my pages in IE, which consequently causes the header to not align properly with the header background image. It works just fine with FireFox though. You can view the issue he http://hsdc.groundedgroup.com/ Does anybody know how to remove this space? Thanks in advance. Hi , I am trying to creating a pagination list, the list is dynamically generated, I have one little issue where I wasnt able to remove the last pipe. How do I remove the last pipe "|".? And it should work in both IE6 and Firefox. I have attached the html and css. The list should look like this back < 1 | 2 | 3 | 4 | 5 .... 10 > next currently it look like this( notice the extra pipe after 5 ) back < 1 | 2 | 3 | 4 | 5 | ... 10 > next Thanks in adavance /**** CSS CODE **/ .paginate-d { border:0px solid red; padding:10px 0 25px 25px; ; margin:0; } .paginate-d ul { list-style-type: none; } .paginate-d li { float: left; display: inline; margin: 0 5px 0 0; display: block; font-weight:900; border-right:1px solid #000; padding:0 5px 0 0 ; } .paginate-d li.next { border:0px solid red; padding-left:1px; } .paginate-d li.back { height:20px; border:0px solid red; padding-right:1px; } .paginate-d li img { vertical-align: bottom; padding-right:2px; padding-left:2px; } .paginate-d li.paginate-current { font-weight:normal; } .paginate-d li.totpage { border:0px solid red; padding:0; } <!--Start paginate bit TEST 2--> <div class="paginate-c"> <ul class="paginate-d"> <li class="back"><a href="#">back <span class="back-img"><img src="images/global/red_back.jpg" border="0" /></span></a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li class="paginate-current">3</li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li class="totpage">..... <a href="#">18</a></li> <li class="next"><a href="#"><span class="forward-img"><img src="images/global/red_forward.jpg" border="0" /></span> next </a></li> </ul> </div> <!--End paginate bit--> I am really stumped -- I need to stack images on top of one another using an unordered list but I get a few pixels of whitespace at the bottom no matter what I do. I know this could be acheived using divs instead but I would like to figure it out using lists. I broke the code into as simple a form as possible and put it below. Removing everything between the </li> tag and the next <li> tag does not work. I tried adding "height: 20px;" under "#nav ul li" to force the images to stack on top of each other -- this works in Safari and Firefox but not in IE Windows. If I remove the DocType tag or switch it to xhtml transitional the images do stack in Safari but not in Firefox or IE. Am I missing something here or is this just not possible? Appreciate any help. The code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css list test</title>
<style type="text/css" media="screen">
img {
border: 0;
}
#nav {
padding: 0;
margin: 0;
}
#nav ul {
padding: 0;
margin: 0;
list-style-type: none;
}
#nav ul li {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><img src="http://test.mightylab.com/images/colors/blue.jpg" width="40" height="20" /></li>
<li><img src="http://test.mightylab.com/images/colors/yellow.jpg" width="40" height="20" /></li>
<li><img src="http://test.mightylab.com/images/colors/red.jpg" width="40" height="20" /></li>
</ul>
</div>
</body>
</html>
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> 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. 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? 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 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. Hi, I have an OL list (the numbered one) and the horz gap between the list item number (as automatically generated by OL) and the text of the LI is too big (according to client). Looks fine in FF but is bigger alright on IE (ahem naturally .....) I've played with the CSS for both the OL & LI styles even setting all margins and paddings to 0 but without effect on the gap. Is there any way to style that gap? Code below. Kevin <ol class="most_read"> <li class="most_read_li">Apples</li> <li class="most_read_li">Oranges</li> </ol> .most_read { text-align:left; color:#808080; font-size:10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:normal; margin-left:30px; padding:0px; margin-top:5px; } .most_read_li { margin-bottom:7px; margin-right:7px; } Hi I am creating a navigation bar using unsorted list and CSS. I have given my CSS and HTML code here Code: #navcontainer
{
width: 200px;
margin-top:150px;
}
#navcontainer ul#navlist
{
width:200px;
clear:left;
text-align:left;
margin-left:0;
padding-left:0;
list-style:none;
font-size: 12px;
font-weight:bold;
line-height: 14px;
}
#navcontainer ul#navlist li
{
margin-left:0;
padding: 0px;
display: block;
list-style:none;
border-bottom: 1px solid gray;
}
#navcontainer ul#navlist li.last
{
border-right: 0;
background:none;
}
a.linkText {
padding: 10px;
display: block;
color : #444444;
font-family : arial;
font-size : 11px;
font-weight : bold;
text-decoration : none;
height:25px;
}
a.linkText:link {
color : Aqua;
/* you can define other styles if necessary */
}
a.linkText:visited {
color : Maroon;
/* you can define other styles if necessary */
}
a.linkText:hover {
color : Blue;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a class="linkText" href="#">Item One</a></li>
<li><a class="linkText" href="#">Item two</a></li>
<li><a class="linkText" href="#">Item three</a></li>
<li><a class="linkText" href="#">Item four</a></li>
<li><a class="linkText" href="#">Item five</a></li>
</ul>
</div>
The problem is, when I select the next list item, previously selected list item should come to the original color. Is there any way I can achieve this? Your guidence will be appreciated. Many thanks I'm working on a custom MovableType site for a sports news company, and after including FCKeditor into the backend to allow for more freedom in styling, etc, I've found that the css styles for the blog entries and the output from the editor just don't mix. Is there some way I can clear all the inherited css definitions and just let the text display as itself? Hi, I remember reading that there is a css attribute for removing all browser-specific formatting from an element, for example forms, H tags and divs (which are pre-formatted differently in ie and firefox) but I can't recall what it was! Does anyone know how this is achieved as I find it very laborious when creating stylesheets to have to remember to reset all of these elements' formats. - before anyone says it, I know I could set up a generic, cross-browser-ready stylesheet for use with all my sites, and this is a system I already employ, I am simply concerned with saving bytesize and achieveing smaller stylesheets that are more easy to work with. I remember it was something like this: instead of: form{ margin:0px; padding:0px; } I'm sure you can do something like: form{ preformatting:none; } Does anyone know what I'm talking about? Or did I dream it?... cheers in advance |
|||||||