|
CSS - A List Of Links Space Problem
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? Similar TutorialsI 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 What is the best way to evenly space these links inside the div? PHP Code: <div id="contain_header"> <div id="header"> <a href="index.php" class="nav">Homepage</a> <a href="manufacturers.php" class="nav">Manufacturers</a> <a href="contact.php" class="nav">Contact Us</a> <a href="carfinder.php" class="nav">Advanced Car Search</a> <a href="specialoffers.php" class="nav">Special Offers</a> <a href="faq.php" class="nav">FAQ's</a></div> </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. 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 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 Can someone help me with the correct cascade for the class "item-list" within "newscontent"? This is within Drupal and the default or system css for "item-list" seems to be overriding anything I try for the ul or li. I've created a new css file for this particular block. So I want a new style for the li text links within the ul that are in the class"item-list" within "newscontent". I've tried but I can't figure out the proper cascade. Thanks in advance. <div class="newscontent"><div class="item-list"><ul><li><a href="path/?q=link">This is the link</a></li> 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! I'm having problems with a web page not viewing correctly in IE7. Here is a link to the page: test(dot)phoenixit(dot)com(dot)au/GBDGP/index(dot)asp The left and right columns should be level (top) with the centre content area. Any help on this would be greatly appreciated. Cheers Hi Ya'll, I am currently working on a site and am having a few issues with Firefox. One of the issues is a big space that appears in a product display page between the first and second product. The spacing between the rest of the products is always correct. Since this page is generated from a database I can't understand why the gap only appears in that place and not anywhere else. The code for each block is the same: http://www.cdrom-businesscard.co.uk...?category_id=19 Thanks for any pointers! I am building a new page and I'm having problem having this space on top of it. here's the situation. All Divs are inside a Parent Div called Container. This div has the following qualities: body { margin-top: 0; padding-top: 0; background-image: url(images/bg.gif); background-repeat: repeat-x; background-attachment: fixed; background-color:#003366; font-family:Arial, Helvetica, sans-serif; } #container { position:relative; width:1000px; height: 1250px; top: 0; margin-left: auto; margin-right: auto; margin-top: 0; border: 1px black solid; z-index: 3; } If I remove the container Div and just have the child Divs then the space on top disappears and the page goes to the top, however it gets aligned to the left. As you can imagine what I want is the page both centered and on top, so I'm pretty much working with the files that have the container, so that's why I'm trying to fix either I'm assuming there is an issue with the CSS of the menu, because it's the only rare addition apart from the normal CSS. If I do in the main parent container position:absolute instead of relative. it then goes to the top, but it's not centered. I've been working on this all day long but can't figure out a solution, if you can please help me out. Thanks for taking the time to read my question. Have posted 2 examples of my problem. Example 1: http://www.pierced.ca/Kelly/indexCOPY.htm Page http://www.pierced.ca/Kelly/kelly1.htm CSS http://www.pierced.ca/Kelly/kelly1.css CSS (this one will download) Here my rounded corners don't line up to the bottom of the "info" area. Not sure why. Example 2: http://www.pierced.ca/Kelly/indexCOPY2.htm http://www.pierced.ca/Kelly/kelly2.htm CSS http://www.pierced.ca/Kelly/kelly2.css CSS (this one will download) Here my rounded corners line up, but I get an extra space under the "menu" section. Not sure why. I am totally stuck. I am not sure how to fix it. I have tried adding height to the menu, but that doesn't work. Thanks for you help, Brad I am working on a site and have found a problem that I can't explain on my own. I would like someone to look at this site: http://www.canada-training-group.ca and tell me why there is extra space at the top in IE but not in Firefox. Thanks, Timmy-d Hi guys, I'm having a problem with spacing beneath my image. I have an image at the bottom of a div. When I change the display to block, the space below still remains. When I place the image as a background inside my div it doesn't display. Any help with either or both of these would be great. The page is located he rhodyandcrystal.com/staging/party.html The div on the right has an image as a bg and the div on the left has the image located at the bottom. I just did this so you could see both, and that they aren't working. Thanks again for any help! Duke Hi, If you look at the following page you will see there is a gap under the sidebar elements at the top. LINK HERE In FF its not there yet in IE it is, any ideas how i can remove it? Thanks, Mike Hi All- For some reason when I use a bunch of DIV tags to position elements on my page, the page keeps getting longer and longer with white space. Does anyone know what will remedy this extra whitespace? Thanks, infinity003 |
|||||||