|
CSS - Problems With Extra Space Above And Below Horizontal Unordered List.
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 Similar TutorialsI am creating a website for a game (unnamed so far) the template is located at syckgamingleague(dot)com in Firefox this site looks perfect works extremely well. In Opera the navigation doesn't seem to be working like I want it. In IE it seems as if everything that should be vertically aligned to the middle doesn't appear to do that. I am just looking for a fix for the Opera navigation error currently but if you know the cause of the IE problems and would like to help that would be great. The website is located at the URI: syckgamingleague(dot)com I will include images for the display of each of the browsers mentioned above. Firefox at the above link in root folder Firefox_Polkamon.jpg Opera at the above link in root folder Opera_Polkamon.jpg IE at the above link in root folder InternetExplorer_Polkamon.jpg Sorry for no links but this forum would not allow it. Name for game isn't Polkamon it is more of a codename than anything currently game isn't named. 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!! 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 Working on converting the layout in the attached image and I'm having a problem with the main menu. Here are my problems: *trying to push down the menu items. Setting padding-top only seems to extend the borders up above the horizontal line and doesn't push the text down. *getting the highlight color above the text. Some ideas I had were trying to set a background image for each list item (but how can I do this without the borders extending above the horizontal line) or setting a background image of the whole unordered list (but with this will "break" when users have different font sizes). Any thoughts? Layout is attached as well as what little code I have since I'm just starting on this project. Thanks in advance, -b 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 So I am trying to move from designing in <tables> and move on to the beauty of the CSS box-model design. I have been inspired by one of the ZenGarden designs and wanted to see if I could try and duplicate it's flow. I am running into a problem. I have created the outer box "#mainBox" and nested within this I have a child "#pageHeader." Problem is that there is this big amount of space (that is present in both IE6 AND FireFox 1.0) at the bottom of "#pageHeader." See the attached pic for the exact detail. Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head><title>The Shalom Foundation</title>
<style type="text/css">
<!--
body {
text-align:center;
background-color:#666666;
margin:0 0 50px 0; /* top right bottom left */
}
p{
padding:0;
margin:0;
text-align:justify;
}
#mainBox {
float:right;
margin:9px 12px 0 0;
padding:0px;
width:733px;
text-align:left;
background-color:#999999;
}
#pageHeader{
background: url(images/layout/header.jpg) no-repeat top left;
padding:0;
margin:0;
text-indent: -15000px;
height: 290px;
overflow: hidden;
}
#nav{
position:absolute;
right:100px;
margin:0;
background: url(images/layout/menu.jpg) no-repeat top left;
padding:0;
margin:0;
width:136px;
height: 302px;
overflow: hidden;
}
-->
</style>
</head>
<body>
<div id="mainBox">
<div id="pageHeader">The Shalom Foundation</div>
<div id="nav">Nav</div>
<div id="contentHdr"><table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle"><img src="images/layout/hdr_about_us.gif"></td></tr></table></div>
<div id="content"><p>Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult homo, aliqua
portio creaturae tuae, et homo circumferens mortalitem suam, circumferens testimonium peccati sui et testimonium, quia superbis resistis: et tamen
laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum, donec
requiescat in te. da mihi, domine, scire et intellegere, utrum sit prius invocare te an laudare te, et scire te prius sit an invocare te. sed quis te
invocat nesciens te? aliud enim pro alio potest invocare nesciens. an potius invocaris, ut sciaris? quomodo autem invocabunt, in quem non crediderunt?
aut quomodo credent sine praedicante? et laudabunt dominum qui requirunt eum. quaerentes enim inveniunt eum et invenientes laudabunt eum. quaeram te,
domine, invocans te, et invocem te credens in te: praedicatus enim es nobis. invocat te, domine, fides mea, quam dedisti mihi, quam inspirasti mihi
per humanitatem filii tui, per ministerium praedicatoris tui.</p></div>
<div id="rightNav">rightNav</div>
<div id="pageFooter">pageFooter</div>
</div>
</body>
</html>
Thanks in advanced for any help! http://www.zombiepolitics.com Just when I thought I had this down .. I dont. I have a CSS layout .. there are two main divs side by side, the navigation rests at the top of the right div. problem is in IE 6 there is so much extra space at the top that my navigation doesnt line up with my header .. in FF its no problem. What is the workaround for this? I'm working on a web site that has a jFlow slideshow (not implemented just yet) and I was mocking up a page with just a plain img in its place. When the page is viewed in FF 3.5, there is extra space to the right and bottom of the image. However, it shows as expected in IE8. I can't figure this out for the life of me. If I "use border box model" from the Google Web Developer toolbar in FF, it shows as desired as well. Here's a link to the file: http://www.websimage.com/3238/index2.html I've been trying to figure this out for a while now and I'm getting nowhere but frustrated, so any help you could provide would be *greatly* appreciated. EDIT: I've found some information regarding box-models, and have applied the -moz-box-model: border-box; which seems to have eliminated the additional space within the gray div...however, there is an additional 10px of unwanted padding on the right & left of it now. I can live with this, but I don't want to if I don't have to. Edit #2: If I take out the margin-left: auto; and margin-right: auto; (to center it) the extraneous padding is not on the left, but is added to the extraneous padding on the right. All the math adds up when it comes to the widths and padding specified for the respective "wrappers" so I'm at a loss as to what's causing this. Hi, I'm just diving in to CSS layout and gradually working through CSS IE bugs. I'm having so much trouble sorting this one out though! I've got a fairly standard menu using UL and LI in a left hand container. Everything displays nicely in Firefox 1.5 and looks ok - initially in IE6 until you hover over the menus. In Firefox they change background colour and font colour as I want, however in ie6 when you hover the background doesn't change colour and the menu all squishes up together! Where am I going wrong?? Here's the CSS for the elements: Code: #leftcol{
float:left;
padding: 0;
width: 170px;
background-color: #FFFFFF;
}
#SectionNav {
background-image:url(../assets/images/sectionNavBack.png);
background-repeat: no-repeat;
background-color: transparent;
width:150px;
height: 323px;
left: 0px;
top: 0px;
padding-left: 0px;
display: block;
}
#SectionNav ul{
margin-top: 0px;
padding-top: 25px;
background-color: transparent;
list-style-type: none;
font-size: 80%;
list-style-image: url(../assets/images/ballBullet.png);
display: block;
}
#SectionNav ul li a{
color: #FFFFFF;
display: block;
margin-top: -5px;
padding-botton: 10px;
margin-bottom: 10px;
text-decoration: none;
height: 21px;
background-image: url(../assets/images/SectionBtnBack.png);
font-weight: 200;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#SectionNav ul li a:hover, #SectionNav ul li a:focus {
background-color: #0000FF;
color: #FFCC00;
}
Here's the HTML: Code: <div id="leftcol"> <div id="SectionNav"> <ul> <li><a href="index.php">Home</a></li > <li><a href="#">News</a></li > <li><a href="#">Handicaps</a></li > <li><a href="#">Leaderboard</a></li > <li><a href="#">Competions</a></li > <li><a href="#">Media</a></li > <li><a href="#">Courses</a></li > <li><a href="#">Links</a></li > </ul> </div> <!--End of SectionNav--> </div> I've played around with the various margins etc but no joy. The page can be found at: http://beta.sussexeast-gs.org.uk/index.php Excuse the colours they're there to help me with layout for now. Thanks I'm trying to change the list style from 'disc' to 'none' for some sections of my site, and I'm running into problems. The page in question is found at luv . deepwaterchurch . com then click on "Global Partners" I'm trying to hide the discs for the lists in the twitter feed (left column) and the news feeds (inline in the main content) I've tried adding list-style:none to what I think are the appropriate elements in my stylesheet, but nothing is working. I'm sure it's a simple fix, but I can't find it. Apologies for such a novice question. I'm creating a few Ordered and Unordered Lists and some of the List Items wrap to a second or third line. My additional lines are wrapping out to the left margin of the number or bullet, rather than wrapping only to the left margin of the text in the first line. What is the command to style List Items to wrap so that the text all aligns left on the same margin, rather than aligning with the bullet or number? How do I remove the indenting that happens on a UL with CSS? I want a vertical list but I don't want it to indent as it messes up my design. Here are a couple of questions, all are in reference to THIS LAYOUT 1) There seems to be an Internet Explorer issue where bullets don't always show up on list items, any ideas how to fix this? 2) It wont validate in XHTML simply because of two urls I use, anyone have any hacks as to how to fix this? 3) I've only been able to test on IE and Firefox, so if anyone is on a different browser and can let me know of any other issues it would be amazing. Thanks in advanced! I'm hoping I can get a bit of help addressing the display of an unordered list. I'm trying to view the list horizontally, and not vertically. Here is the code, and thanks in advance. CSS -------------------------------- #pages { margin-top: 12px; float: right; margin-right: 125px; font: normal 14px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; color: #000; } #pages ul { list-style-type: none; margin: 0; padding: .5em 0; display: inline; } #pages li a { display: block; width: 1.5em; height: 1.5em; padding: 0; text-align: center; vertical-align: text-middle; text-decoration: none; } #pages a:link, #pages a:visited { margin: 0 10px 0 10px; text-decoration: none; color: #000; } #pages a:link#pagescurrent, #pages a:visited#pagescurrent { border-bottom: 1px solid #000; background: transparent; color: #000; } #pages a:hover { background-color: #949494; color: #fff; } HTML -------------------------- <div id="pages"> <ul> <li><a href="#" id="pagescurrent" title="next slide">1</a></li> <li><a href="#" title="next slide">2</a></li> <li><a href="#" title="next slide">3</a></li> <li><a href="#" title="next slide">4</a></li> </ul> </div> I've been trying to setup a basic template for a site. In firefox I got it looking pretty good, but in IE there seems to be about 3 pixels of extra space to the left of the header image. The url is: http://igocity.aoeex.com/ If you look in firefox, you can see the black box where the login form is, and the banner image to the right of it are side-by-side with no space between them. This is what I want. In IE, there is about 3 pixels of white space between the login box and the banner image. This causes the image to drop down below the login box instead of it being beside it normally. For now, I've expanded the width of the outer div so they are side by side, but with the space. I can't figure out why this space is there, or how to get rid of it. Any suggestions? The HTML for the header looks like so: Code: <div id="headerDiv"> <div id="loginBox"> <form method="post" action="/login.php"> <input type="text" value="" class="txtUsername" name="txtUsername" /><br /> <input type="password" value="" class="txtPassword" name="txtPassword" /><br /> <a href="login_help.php" class="loginTroubleLink">>> login trouble?</a> <input type="submit" value="log in" name="btnLogin" class="btnLogin"/> </form> </div><img src="images/road_trip_banner.jpg" width="540" height="80" id="headerBannerImage"/> </div> CSS can be seen at: http://igocity.aoeex.com/css/template_css.css I have 2 columns. The main one and the sidebar. The problem is that the sidebar extends down the page further then the main column. I am using a color in the background. The color does not extend all the way down. The main area stops about half way down the sidebar and just leaves white space there. The whole page is colored except for this square of white in the middle. Also if I extend the main area content to be longer then the sidebar then the sidebar will have white underneath it instead. I'm having a weird quirk happening at the bottom of a page I am developing. There is extra space, maybe 80-100px of it, showing up at the bottom in my container div (which I have id'd as "reality"). Can anyone suggest what might be shoving all that extra space in there? html page: http://www.iainhamp.com/reality/hyborianwar.html css page:http://www.iainhamp.com/reality/reality_hyborian.css Thanks for any help you can provide. - iain |
|||||||