|
CSS - <ul><li> Unwanted Space
Hello, im working on styling an unordered list into a file tree. So far, so good.
However, do you see that space that is showing in between each <li>, between the T (elbow2.gif) image, its very unwanted. Code:
/* -- FILE BROWSER -- */
#browseFiles {
padding: 0 0 0 20px;/* 000pix handles indent */
}
#browseFiles ul {
font: 10px sans-serif;
color: #000;
list-style:none;
margin: 0;
padding: 0;
}
#browseFiles li {
/*display:compact;
height: 18px;*/
padding: 0;
margin: 0;
}
#browseFiles .fileDiv {
height: 18px;
background: url(images/elbow2.gif) no-repeat scroll 0 0;
}
#browseFiles .fileLink {
padding: 0 0 0 13px;
margin: 3px 0 0 0;
}
#browseFiles .dir {
list-style:none;
font: bold 10px sans-serif;
margin:0;
padding:0;
}
#browseFiles .file {
padding: 0 0 0 3px;
margin:0;
}
Heres the html Code:
<div id='browseFiles'>
<ul>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
</ul>
</div>
Thank you for the help in advanced. Similar TutorialsHi everyone. I have a header image and directly below it the div that holds my navigation. In FF it works great, but in IE I get about a 5px space inbetween the header image and the navigation div. The navigation div is colored so it's really easy to tell where it stops and starts in IE. Here's my CSS code: Code:
body {
background-image: url(images/bgshadow.gif);
background-repeat: repeat-y;
background-position: 50% 0;
text-align: center;
margin: 0 0;
padding: 0 0;
}
#content {
width: 738px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0 0;
vertical-align: top;
}
#header {
width: 738px;
margin: 0 0;
padding: 0 0;
}
#nav {
width: 738px;
height: 25px;
margin: 0 0;
padding: 0 0;
background-color: #86462F;
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
color: #fff;
}
#nav ul {
width: auto;
float: right;
margin: 5px 0 0 0;
padding: 0 0;
}
#nav ul li {
margin: 0 25px 0 0;
padding: 0 0;
list-style-type: none;
display: inline;
}
and my markup: Code: <div id="content"> <div id="header"> <img src="images/header.jpg" width="738" height="100" /></div> <div id="nav"> <ul> <li>Home</li> <li>Register</li> <li>Go Play!</li> </ul> </div> I've tested the white-space bug in windows IE (taking out all of the white-space in the markup) but that only had a marginal effect on the list. Does anyone have any ideas? Thanks, -Brian Hi there, I'm building a page that requires 100% width & height, and absolutely NO margins on any side. I've applied the following inside my CSS: body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; background-color: 000000; } For this to work in Firefox, I've also had to add the same code just above the head tag (inconvenient, but I don't mind). My problem is the unwanted right margin that appears in IE. I have no idea how to remedy this. You may view the page here. Thanks so much! I am trying to style a css layout. I keep getting a vertical space between two different block containers. here is the html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="menu"> </div> </div> </div> </body> </html> Here is the CSS: Code:
#wrapper{
margin: 0 auto;
width: 977px;
}
#header {
margin: 0;
background: url(images/header_01.jpg) no-repeat 0 0;
width: 977px;
height: 198px;
}
#menu{
margin: 0;
background: url(images/header_02.jpg) no-repeat 100% 0;
float: left;
width: 977px;
height: 44px;
position:relative; top: 100%
}
My theory: the top part of the header is 154 px tall. The bottom part is 44px tall. That makes 198px height. so with header being 198px tall, and the smaller image with a relative position 100% down from the top should correctly line up the two images. But yet I have a HUGE gap?!?! Why? Even if I put 154px instead of 100% for top ... it will not line up correctly. It seems the form that creates unwanted space in IE. Site in question: http://www.phaseninedesign.com/p/uber/ HTML: Code: <div id="topMenu"> <form action="#" method="post"> <div id="reviewsBut"><a href="#"><img src="images/reviewsBut.gif" alt="Reviews" /></a></div> <div id="articlesBut"><a href="#"><img src="images/articlesBut.gif" alt="Articles" /></a></div> <div id="aboutBut"><a href="#"><img src="images/aboutBut.gif" alt="About" /></a></div> <div id="contactBut"><a href="#"><img src="images/contactBut.gif" alt="Contact" /></a></div> <div id="sponsorsBut"><a href="#"><img src="images/sponsorsBut.gif" alt="Sponsors" /></a></div> <div id="loginButTop"><a href="#"><img src="images/loginButTop.gif" alt="Sponsors" /></a></div> <div id="passwordBoxTop"><input type="password" id="password" onFocus="if(this.value=='password')value=''" onBlur="if(this.value=='')value='password';" value="password" /></div> <div id="userTopBox"><input type="text" id="user" onFocus="if(this.value=='Username')value=''" onBlur="if(this.value=='')value='Username';" value="Username" /></div> </form> </div> ----------------------- CSS: Code:
#topMenu{
width: 1005px;
height: 23px;
margin-left: auto;
margin-right: auto;
background-color: #282a1d;
background-image: url(images/topMenuBG.gif);
border-right: 1px solid black;
border-left: 1px solid black;
}
I've tried moving the form outside of the dive that its in, but that makes the space even bigger. EDIT: Realized this is not an HTML issue. If a mod could move this to the CSS forum I would appreciate it. Thanks Please take a look at this page: http://www.4xp.net/template2/ I cannot get the space under the horizontal nav bar to go away. It has to do with the image links, because if I remove then and put plain text in there, that space goes away. It only happens in IE, the space isnt there in FF. Here is my css PHP Code: body { margin-top: 5px; margin-bottom: 5px; background-image: url('images/bg.jpg'); } #header { width: 900px; height: 90px; padding: 0; margin: 0; text-align: left; background-image: url('images/header_bg.jpg'); } img { padding: 0; margin: 0; } #menu { border-top: 1px solid #003366; border-bottom: 1px solid #003366; width: 100%; height: 25px; background: url('images/menu_bg.jpg'); background-repeat: repeat-x; text-align: left; } .menulink { margin-left: 20px; height: 25px; } #page { width: 900px; border: 1px solid #000000; text-align: center; margin-left: auto; margin-right: auto; } #status { width: 900px; height: 25px; vertical-align: middle; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #003333; margin: 0; padding: 0; border: 0; } Any help would be very much appreciated. Thanks everyone! When I browse the website with internet explorer, in the search section, there is a space after the form area. How can I remove it? http://www.refinethetaste.com/html/ I am trying to style a form using CSS instead of tables but am getting unwanted space above form elements when i use float:right to position them to the right of the prompt text. I have spent some time reading about the problem which appears to be an error with IEs rendering of CSS. I have tried several solutions posted on the web with no success. Can anyone recommend a solution to my problem. Thanks. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css" media="screen"> .form { font-size:10px; text-align:left; } .form input { width: 100px; font-size: 9pt; border: 1px solid #891C46; margin-left: 12px; padding-top:0px; float:right; } .form select { width: 100px; float:right; font-size: 9pt; border: 1px solid #891C46; } .form textarea { width: 100px; float:right; font-size: 9pt; border: 1px solid #891C46; } .form li{ list-style-type: none; clear:both; } .form img{ padding-top:10px; float:right; } </style> </head> <body> <table cellpadding="0" cellspacing="0" width="500"> <tr> <td width="50%" valign="top" class="form"> <ul> <li>Your name:<input name="textfield" type="text"></li> <li>Your email address:<input name="textfield" type="text"></li> <li>Your company:<input name="textfield" type="text"></li> <li>Your position:<input name="textfield" type="text"></li> <li>Subject:<select name="select"><option>Digital Advertising</option></select></li> <li>Query/comment:</li> <li><textarea name="textarea" cols="20" rows="8"></textarea></li> <li><img src="/carlton-newsite/img/contactus/send.gif" name="send" width="50" height="25" id="send"></li> </ul> </td> <td valign="top">sfasfasfasdfasdfasdfasdf</td> </tr> </table> </body> </html> I'm *very* new to CSS and to these forums, I'm glad I found them. I'm hoping someone can help me with this problem I'm having. I added a table to this page and there are gaps under each word in each cell of the table. I added the same table to it's own page and the table shows up the way I want it but it won't on the page where CSS is used. It seems as if something in the CSS code is causing the gap under the words. Would anyone know why this is happening and how to fix it? I'm using IE 6 and haven't used any other browser yet to view the pages. Here is my css file http://debsdesignandhosting.com/layout.css in case it's needed. Thanks for any help I thought I should also say, it's not my intention to spam the forum with the info seen in the table. This is a new site not even live yet. This gap problem has me stumped Deb Hi, everyone. Funny I've never run into this before, but I've got a div with a background colour applied, and within it there's an image I want to appear snug to the top, right where the bgcolour starts. Here's the html/css: Code: <TD style='vertical-align:top; text-align:left;'> <div style='background-color:#DA1B28; padding:0px; vertical-align:top; color:white; height:19px; width:385px; margin-left:20px; margin-top:8px;'> <a href='blah.html' style='margin-top:0px;'><img src='images/viewcart.gif' border='0' alt='View Cart!' style='margin-left: 4px; margin-top:0px;'></a> </div> </TD> </TD> I'm getting a bout 2px of space before the image starts; is the only way around this to use a negative margin-top, or am I missing some parameter in one of the styles? Thanks in advance! I've read many forum replies to help getting rid of indents in li & ul items. None of the solutions are working for me. PLease help! I have a footer divided into 3 columns. The text inside each column is left-aligned with no padding/margin except for my twitter feed, which shows up with a ~41px indent. I've tried every combination of padding & negative margin in the CSS, nothing works. Currently: #twitter_update_list li {padding-left:-41px; text-indent:0px; margin-left:-41px; overflow:hidden; display:inline; text-align:left; list-style-position: inside} #twitter_update_list ul li {padding-left:-41px; text-indent:0px; margin-left:-41px; overflow:hidden; display:inline; text-align:left; list-style-position: inside} #twitter_div {padding:-41px 0 0 0; text-indent:0px; margin-left:0 0 0 0; overflow:hidden; display:inline; text-align:left;} My website is marinaporter.blogspot.com Thanks so much... hello all, I have been working on a web site that is constructed 99% using divs and CSS. I have a unwanted space that is appearing in the main image in Internet Explorer on PC. MAc IE, Safari, Mozilla (PC), etc. work fine. Can someone see what is happening...I hope so! You can see the site at www.obsign.com Here is the code that I am working with: Code: <body>
<script language=JavaScript>
function Navigate() {
var number = NavSelect.selectedIndex;
location.href = NavSelect.options[number].value; }
</script>
<table class="boundaries">
<tr>
<td class="vertical">
<center>
<div id="site">
<div class="padding">
<div class="navigation"><div class="navigation">
<a href="index.php?id=2&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('about.jpg','customizations/uploadedmedia/images_navigation/about_over.jpg');" onmouseout="changeImage('about.jpg','customizations/uploadedmedia/images_navigation/about.jpg');"><img name="about.jpg" alt="About Us" src="customizations/uploadedmedia/images_navigation/about.jpg"
width="94" height="30" border="0" /></a><a href="index.php?id=4&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('services.jpg','customizations/uploadedmedia/images_navigation/services_over.jpg');" onmouseout="changeImage('services.jpg','customizations/uploadedmedia/images_navigation/services.jpg');"><img name="services.jpg" alt="Services" src="customizations/uploadedmedia/images_navigation/services.jpg"
width="94" height="30" border="0" /></a><a href="index.php?id=6&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('resources.jpg','customizations/uploadedmedia/images_navigation/resources_over.jpg');" onmouseout="changeImage('resources.jpg','customizations/uploadedmedia/images_navigation/resources.jpg');"><img name="resources.jpg" alt="Resources" src="customizations/uploadedmedia/images_navigation/resources.jpg"
width="94" height="30" border="0" /></a><a href="index.php?id=8&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('contact.jpg','customizations/uploadedmedia/images_navigation/contact_over.jpg');" onmouseout="changeImage('contact.jpg','customizations/uploadedmedia/images_navigation/contact.jpg');"><img name="contact.jpg" alt="Contact" src="customizations/uploadedmedia/images_navigation/contact.jpg"
width="94" height="30" border="0" /></a>
</div>
</div><div class="locations"><img alt="Cincinnati, Ohio - Cleveland, Ohio - Austin, Texas" src="customizations/safeharbor/templates/images/locations.jpg"
width="362" height="30" border="0" /></div><div class="clear"></div><div class="logo"><img src="customizations/safeharbor/templates/images/logo.jpg"
width="195" height="281" border="0" /></div><div class="image"><div class="main_1"><img name="width='533px' height='237px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_1.jpg"
width="533" height="237" border="0" /><br><img name="width='278px' height='21px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_2.jpg"
width="278" height="21" border="0" /><select style="vertical-align:top; padding:0px; border:0px; margin:0px; width:189px;" name="NavSelect" onChange="Navigate(this.form)"><option value="" SELECTED>Choose the Solution for You:<option value="#">Option 1<option value="about:blank">Option 2<option value="#">Option 3</select><img name="width='66px' height='21px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_3.jpg"
width="66" height="21" border="0" /><br><img name="width='533px' height='22px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_4.jpg"
width="533" height="22" border="0" /></div></div>
<div class=""><h1>HOME BODY</h1>
<p class="general_text">Now that you have installed the system, please proceed to customize and populate with content.</p></div>
</div>
</div>
</center>
</td>
</tr>
</table></body>
</body>
</html>
Code:
html {
width:100%;
height:100%;
}
body {
width:100%;
height:100%;
margin:0px;
padding:0px;
background-image: url('http://www.obsign.com/customizations/safeharbor/templates/images/bg.jpg');
background-repeat:repeat
}
img {
margin-bottom: 0px;
}
#site {
text-align:left;
width:770px;
padding:0px;
border:0px;
margin:0px;
background:#ffffff;
border:1px solid #CFC9C0;
}
table {
font-size: 100%;
}
a.breadcrumb {
color: #444444;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-decoration:none;
}
a.breadcrumb:visited {
color: #888888;
font-family: Verdana, Helvetica, Arial, sans-serif;
text-decoration:none;
}
ul {
margin-bottom:5px;
margin-top:5px;
padding:0px;
border:0px none;
list-style-type:square; list-style-image:url('/uploadedobjects/images/bullet.gif')
}
li {
padding-top:3px;
}
.text_highlight {
background: #FDFD00;
color: #000000;
}
.clear {
clear:both;
}
.gentext {
font: normal 110% Tahoma, Verdana, Arial, Arial Narrow, sans-serif;
color:#666666;
}
.gentext a {
font: normal 110% Tahoma, Verdana, Arial, Arial Narrow, sans-serif;
color:#666666;
}
input.liteoption {
background: #efefef;
font: normal 100% Verdana, Arial, Arial Narrow, sans-serif;
color:#444444;
text-align:center;
padding: 1px;
border: 1px solid #dddddd;
border-bottom: 1px solid #aaaaaa;
border-right: 1px solid #aaaaaa;
}
input.searchoption {
font: bold 100% Verdana, Helvetica, Arial, sans-serif;
background-color : #eeeeee;
color : #000000;
border: 1px solid #000000;
}
input.text {
font: normal 105% Verdana, Helvetica, Arial, sans-serif;
border: 1px solid #dddddd;
border-top: 1px solid #aaaaaa;
border-left: 1px solid #aaaaaa;
}
select {
font: normal 100% Verdana, Helvetica, Arial, sans-serif;
color: #000000;
}
.form_label {
font:bold 100% Verdana, Helvetica, Arial, sans-serif;
display:inline;
color:#000000;
}
.search_text{
font:normal 9px Verdana, Helvetica, Arial, sans-serif;
color:#000000;
border-top:#000000;
border-left:#000000;
}
.boundaries {
width:100%;
height:99%;
}
.vertical {
vertical-align:middle;
}
.padding{
padding:16px;
}
.navigation{
border:0px;
margin:0px;
float:left;
width:376px;
}
.locations{
border:0px;
margin:0px;
float:right;
width:362px;
}
.logo{
padding:10px 10px 10px 0px;
float:left;
border:0px;
margin:0px;
}
.image {
padding:10px 0px 10px 0px;
border:0px;
margin:0px;
}
.main_1{
float:right;
background:#EAE3DB;
border:0px;
white-space:nowrap;
margin:0px;
padding:0px;
}
I have some body text on a site I am working on. On Firefox and Safari the text appears with an underline even though it isn't set in the CSS to have this line. Strangely it doesn't happen in Internet Explorer 6. Also, it only happens on one page of the site in Firefox and Safari. Please look at http://certified.tmhdesign.com/know.asp in FF I have a div element with an id of "know" that is appearing under an h1 element with an id of know_header In Firefox there is an unwanted top margin on the div#know (or a bottom margin on the H1 element). I can't seem to understand why? T Hi all, I am recreating some nav links. Instead of having them be text, I am converting them to images. 3 images per link: regular, hover, visited. The test page is here You will see "Home" That is an image. The other 3 haven't been messed with yet and are still text. Here's my problem. As I said, The link itself will just be an image. When hovered over, it will go to the same image, just a different colored one. After clicked, it will display a third image instead, once again a different color. BUT, elsewhere in my CSS I have a section where visited links are set to turn black, and I think THAT'S what causing the home image to disappear after visited. Could ya'll have a look at my source and CSS and tell me what you think I can do to fix this? CSS file is here Thanks! Chris I'm just playing around with some HTML and CSS for my student home page. I'm trying to use divs only, without the aid of any tables. All seems to be going well, except for my content area. I cannot post a link, becuase I'm a new user, but here is the page I'm working on: http://students.uww.edu/beghindb27/. The page is CSS and HTML validated properly, but only views properly in IE 6, not Firefox. In Firefox there appears to be a 10px padding below the content_top and above the content_bot divs. This should not be there, and does not appear in IE. In the past I've been able to remove this by using "!important" in my CSS to have Firefox ignore the accepted padding, but I'm looking for a better way to fix this, or the actual reason these paddings are showing up. CSS: Code: <style type="text/css">
body {
background: #000000 url(images/bg.jpg);
font-family: Arial;
font-size: 12px;
padding: 0px;
margin: 0px;
}
#header {
height: 220px;
width: 820px;
background: url(images/header.gif);
margin-top: 5px;
margin-bottom: 5px;
}
#content_top {
height: 20px;
width: 820px;
background: url(images/content-top.gif) no-repeat;
}
#content_mid_wrapper {
height: auto;
width: 820px;
background: url(images/content-mid.gif) repeat-y;
}
#content_mid {
height: auto;
width: 780px;
}
#content_bot {
height: 19px;
width: 820px;
background: url(images/content-bot.gif) no-repeat;
}
</style>
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<style type="text/css">
body {
background: #000000 url(images/bg.jpg);
font-family: Arial;
font-size: 12px;
padding: 0px;
margin: 0px;
}
#header {
height: 220px;
width: 820px;
background: url(images/header.gif);
margin-top: 5px;
margin-bottom: 5px;
}
#content_top {
height: 20px;
width: 820px;
background: url(images/content-top.gif) no-repeat;
}
#content_mid_wrapper {
height: auto;
width: 820px;
background: url(images/content-mid.gif) repeat-y;
}
#content_mid {
height: auto;
width: 780px;
}
#content_bot {
height: 19px;
width: 820px;
background: url(images/content-bot.gif) no-repeat;
}
</style>
</head>
<body>
<div align="center">
<div id="header"></div>
</div>
<div align="center">
<div id="content_top"></div>
<div id="content_mid_wrapper">
<div id="content_mid">
<p align="justify">
<b><a href="http://www.imdb.com/name/nm0000313/">The Dude</a></b>: Walter, what is the point? Look, we all know who is at fault here, what the **** are you talking about?<br>
<b><a href="http://www.imdb.com/name/nm0000422/">Walter Sobchak</a></b>: Huh? No, what the **** are you... I'm not... We're talking about unchecked aggression here, dude.<br>
<b><a href="http://www.imdb.com/name/nm0000114/">Donny</a></b>: What the **** is he talking about?<br>
<b><a href="http://www.imdb.com/name/nm0000313/">The Dude</a></b>: My rug.<br>
<b><a href="http://www.imdb.com/name/nm0000422/">Walter Sobchak</a></b>: Forget it, Donny, you're out of your element!<br>
<b><a href="http://www.imdb.com/name/nm0000313/">The Dude</a></b>: Walter, the chinaman who peed on my rug, I can't go give him a bill, so what the **** are you talking about?<br>
<b><a href="http://www.imdb.com/name/nm0000422/">Walter Sobchak</a></b>: What the **** are you talking about? The chinaman is not the issue here, Dude. I'm talking about drawing a line in the sand, Dude. Across this line, you DO NOT... Also, Dude, chinaman is not the preferred nomenclature. Asian-American, please.<br>
<b><a href="http://www.imdb.com/name/nm0000313/">The Dude</a></b>: Walter, this isn't a guy who built the ****ing railroads here. This is a guy...<br>
<b><a href="http://www.imdb.com/name/nm0000422/">Walter Sobchak</a></b>: What the **** are you talking about?<br>
<b><a href="http://www.imdb.com/name/nm0000313/">The Dude</a></b>: Walter, he peed on my rug!<br>
<b><a href="http://www.imdb.com/name/nm0000114/">Donny</a></b>: He peed on the Dude's rug.<br>
<b><a href="http://www.imdb.com/name/nm0000422/">Walter Sobchak</a></b>: Donny you're out of your element! Dude, the Chinaman is not the issue here!
</p>
<p><font size="6">beghindb27 [at] uww [dot] edu</font></p>
</div>
</div>
<div id="content_bot"></div>
</div>
</body>
</html>
Thank you. Hello. I've been playing with css for about a week now and after tearing my hair out and calling it a stupid language a number of times, have eventually solved all my problems. However todays problem I thought I'd ask about. There are 3 or 4 white pixels at the corners of my css image changing navigation buttons that I didn't put there. They don't show up when viewed in photoshop or when I use Javascript rollovers. I can't find any help anywhere else either. I'm a bit confused why text in a relatively positioned div, following a floating div, would not align flush along the left edge of the div. My understanding was that the float would remove the div from the flow of the page, thus not affecting the relative div. But the mere presence of the floated div forces an indent of the text in the relative div. What gives? Example |
|||||||