CSS - Unwanted Space Under Horizontal Nav Bar - Im Going Insane
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! Similar TutorialsHello, 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. Hi 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 I'm a CSS novice, struggling to understand the nuances of some open source CSS I'm using for a site. The main horizontal navigation has an extra item at the end of the row and I can't figure out why. Can you help me get rid of it? Here is my include for the navigation: <ul> <li><a href="/index.shtml">Home</a></li> <li><a href="/about.shtml">About</a></li> <li><a href="/ultreyas.shtml">Ultreyas</a></li> <li><a href="/weekends.shtml">Weekends</a></li> <li><a href="/FAQs.shtml">FAQs</a></li> <li><a href="/servant_community.shtml">Servant Community</a></li> <li><a href="/resources.shtml">Resources</a></li> <li><a href="/stay_in_touch.shtml">Stay in Touch</a></li> <li><a href="/donate.shtml">Donate</a></li> </ul> Here is the CSS: /*----------------------------*/ /* 2.4 - Navigation - Level 2 */ /*----------------------------*/ .nav2 {clear: both; margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: 1.0em;} .nav2 ul {float: left; width: 770px; margin: 0px; padding: 0px; border-top: solid 1px rgb(54,83,151); border-bottom: solid 1px rgb(54,83,151); background-color: rgb(64,134,204); font-weight: bold;} .nav2 li {display: inline; list-style: none; margin: 0px; padding: 0px;} .nav2 li a {display: block; float: left; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(54,83,151); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;} .nav2 a:hover, .nav2 a.selected {color: rgb(50,50,50); text-decoration: none;} .buffer {clear: both; width: 770px; height: 30px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);} I'd like "Donate" to be the last item, but there is another empty box appearing to the right of it. Much obliged, Laurie 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! 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. 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. 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> 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 have a question which I had trouble finding the answer to. I have a div with a width of 100% (which works out to be about 800px give or take), I then have several other div elements inside of that div. For example: Code: <div id='outer'> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> Each inside div has an identical, fixed width. What I need is for each of those inside divs to be spaced evenly so that It fills up the entire outer div. That could mean, depending on the content, that the space between each inner div is 5px, 20px, etc. Hope that makes sense. I am pretty close, but not quite there. any body know what i need to add to this CSS to get the 2px looking white space that sits to the left of each <li>? Code: <ul id="navlist"> <li><a href="index.html">Home</a></li> <li><a href="about_us.html">About Us</a></li> <li><a href="contact_us.html">Contact Us</a></li> <li><a href="contact_us.html">Contact Us</a></li> <li><a href="contact_us.html">Shipping Information</a></li> <li><a href="contact_us.html">Return Policy</a></li> <li style="border-right:none;"><a href="showcart.cfm">View Cart</a></li> </ul> Code: #navlist li { font-size: 12px; font-family: Helvetica, Times, serif; display: inline; list-style-type: none; padding-right: 10px; padding-left: 10px; border-right: 1px solid black; background-color: #D5DED9; } Hi, I have the following code and under the main menu, it's a space as you can see under Contact for example for the entire menu. If I want to move down the menu with margin-top, the bottom will exceed the bottom of logo.png image. How do I insert an image here ? http :// imageshack.us/photo/my-images/600/44485569.jpg/ this is css code body { margin: 0; padding: 0; border: solid 1px black; } #nav { position: relative; margin: 0px auto; width: 960px; padding: 10px 0px 10px 0px; border: solid 1px red; } ul { list-style-type: none; margin: 0; padding: 0; font-family: Georgia; font-size: 21px; } ul a { text-decoration: none; padding-left: 25px; padding-right: 25px; display: block; color: #843bbb; } ul a:hover { color: #bd66ff; } ul a:visited { color: orange; } li { float: left; } How can I achieve same positioning with logo on left side, menu on right side, and I want somehing like an add in the middle using float and divs and not a table ? Thanks. Hi Folks, I'm having problems with some of the divs on my site. Here is the site with the problem areas colorized to highlight the issue... example I have 3 columns, but the problem arises in the area marked "panel2". I want the div containing this text to stretch to fill the remaining available space so that the border-left attribute reaches the footer, encapsulating the text in the middle column. I can't use the border-right attribute of the middle column because of the small indent between panels 1 and 2. I've scoured forums and googled till my fingers hurt, but can't seem to come up with a satisfactory explanation as to why I can't do this. the CSS is he styles.css Any help/suggestions or comments would be appreciated more than I can describe!! Thanks in advance!! 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, 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 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; } 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... 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. |