|
HTML - Ahh! - Blank Line Breaks And Unordered Lists
Hey guys, this may seem as an easy solution but I've been pulling hair over it. How do I get rid of the blank line breaks that appear before and after unordered lists?
I attached a picture to this thread of what I am exactly talking about. Thanks in advance! Similar TutorialsI'm trying to make a sidebar to navigate through the website and basically lays out the entire site on the sidebar (which is a tree with nodes and leafs etc), but when it tries to display the text, it gets really squished up on the right side, but there are still horizontal scrollbars -.- This is the html after all the PHP stuff: Edit: I put in "width:100em;" in the li section of css. It formatted the text properly, but then the scrollbar continues on forever. Is there any way to find out how many pixels are needed to format the text properly? More specifically, is there any way (javascript, php) to find the length of a string in pixels? HTML 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>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div#navigation").height(window.innerHeight-16);
});
</script>
<!--<link type="text/css" rel="stylesheet" href="Styles.css" />-->
<style type="text/css">
#navigation {
position:absolute;
width:25%;
height:500px;
background-color:#C0C0C0;
margin:0px;
border:0px;
padding:0px;
float:left;
overflow:scroll;
overflow-x:scroll;
overflow-y:scroll;
}
#main {
width:75%;
height:100%;
}
li {
overflow:visible;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>
</head>
<!--Use a tree for this-->
<div id="navigation" >
<ul><li>FoodFoodFoodFoodFoodFoodFoodFoodFoodFoodFoodFoodFo</li>
<ul><li>FruitFruitFruitFruitFruitFruitFruitFruitFruitFruit (Level 2)</li>
<ul><li>RedRedRedRedRedRedRedRedRedRedRedRedRedRedRedRedRe (Level 3)</li>
<ul><li>CherryCherryCherryCherryCherryCherryCherryCherryCh (Level 4)</li>
<li>StrawberryStrawberryStrawberryStrawberryStrawberry (Level 4)</li>
<ul><li>Uber BerryUber BerryUber BerryUber BerryUber Berry (Level 5)</li>
<ul><li>Extreme StrawberryExtreme StrawberryExtreme Strawb (Level 6)</li>
<ul><li>WOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWOWWO (Level 7)</li>
<ul><li>supercalifragilisticexpialadocioussupercalifragi i (Level 8)</li>
</ul></ul></ul></ul></ul><li>YellowYellowYellowYellowYellowYellowYellowYellowYe (Level 3)</li>
<ul><li>BananaBananaBananaBananaBananaBananaBananaBananaBa (Level 4)</li>
</ul></ul><li>MeatMeatMeatMeatMeatMeatMeatMeatMeatMeatMeatMeatMe (Level 2)</li>
<ul><li>BeefBeefBeefBeefBeefBeefBeefBeefBeefBeefBeefBeefBe (Level 3)</li>
<li>PorkPorkPorkPorkPorkPorkPorkPorkPorkPorkPorkPorkPo (Level 3)</li>
</ul></ul></ul></div>
</html>
Okay, so here's what I'm trying to do- This is a short excerpt of my page, the part that is causing the problem: HTML Code: <font color=#333333><b>Category: <div id="category" align="left">Category</div></b></font> I want to DISPLAY the Html code on my site, so I'm using < and > to achive this. Its working perfectly. Now, in the code that is being displayed- is an actual HTML code, that I want to turn into html. Here's where the problem is. As you can see- the actual Html code is: HTML Code: <div id="category" align="left">Category</div> I made sure not to change the tags, so that the browser will accept it as html. Now- my problem is that when I publish this on my site, an ugly page break appears before & after the real html code. I want to be able to copy the code that appears, and just simply paste it onto another part of the site- BUT, because of the line break that occurs, the HTML isn't displayed properly. Normally, a simple line break like this one won't affect anything- but I'm using WORDPRESS for my pages, and wordpress recognizes every time a line break happens, it makes a <br> code. So even if you press the enter key in HTML, it automatically ends up being a <br> code and breaks the whole html code. How will I make it so that the line break DOESN"T happen? TL;DR: I want to display HTML code on my site, but I want to have an ACTUAL HTML CODE inside the html code to be displayed. When I do this, a line break happens before and after the ACTUAL HTML CODE. How do I get rid of this? What my page currently looks like: HTML Code: <font color=#333333><b>Category: <div id="category" align="left">Category</div></b></font> Please help, everything is greatly appreciated! Forgive me for this rather elementary question...I'm a T-shirt printer and I've learned enough html to build my own website, but I have a lot more to learn about it...Anyway the problem I'm having is when I add an image and want the next paragrah, or headline to display below the image, I've been accomplishing it by adding line breaks until it appears below rather than off to one side. Sometimes I have to add as many as seven or eight <br />'s to achieve my purpose. Is there a better way to make something appear below an image? I am trying to build a page using drupal CMS but I have a problem. Whenn add checkbox, text and submit button together, each of them gets in a different line. It looks like i use <br> although i don't. Adding content with a WYSIWYG editor seems to be working into the editor content area. But when I save it, it appears again in different lines,no matter in which place of the frontpage I add it. So I guess I guess the reason is the style.css file. But I can't find the exact line that damages my code. In pictures below you can see 1)the content correctly presented into WYSIWYG editor 2)The content in frontpage (awful) 3)The simple html i use 1) http://www.teicrete.gr/libsite/files...wyg_editor.JPG 2) http://www.teicrete.gr/libsite/files...page_error.JPG 3) http://www.teicrete.gr/libsite/files/3_simple_html.JPG Any help would be great... Thanks in advance! For some reason whenever I have an img tag it causes an automatic line break. I was wondering if anyone else has encountered this problem. Basically i'm trying to add an small icon to the left of an active link. So the code basically looks like this.. <img src="icon.jpg"><a href="link.html">text link</a> The end result is a icon on one line and the link rests below it instead of everything being on one line. This is the first time this has ever happened and i'm wondering if this is normal? I realize this may seem like a noob question but any help would be appreciated. Thanks. hi y'all. my site looks fine in firefox (as usual) but ie is doing something weird. behavior is identical in IE 6 and 7, incidentally. the problem is in the sidebar. see the underlined titles for each section? in IE, a mysterious line break appears above each. what's going on? Hi I have the following code loading an external .txt file into a DIV <?php $content = file_get_contents($_SERVER['DOCUMENT_ROOT']."/text_files/about_text.rtf"); echo htmlspecialchars($content); ?> It loads, but the line breaks are ignored, so it appears as one continous string of words. How do I make the html display the text file's line breaks? Thanks for your time and info Shaun Ok simple right? I have a <form> in the left margin of a page. Where ever I insert </form> tag I get an obnoxious blank line. I really need this blank line gone. The page is dynamically generated (sometimes the form is there and sometimes not). There is a style sheet for the page and I can put extra html code in if the form is generated. It seems like this should be easy but it has eluded me for some time now. At first I just put the tag at the bottom but now I must have another form on the page that doesn't work inside the first. G'day, My unordered list (vertical nav menu) is displaying differently in IE and Firefox. IE displays each item with a large amount of space between them, while FF does not. I want to have a few pixels space between each item, and how do I do this so FF and IE both show the same? Here is the code: Code: #leftnav ul {
list-style-type:none;
color: #fff;
display: block;
text-align: left;
margin: 0px;
padding: 0px;
}
.menu A:link {
display : block;
padding-left : 0px;
text-decoration : none; color:#000000;
font-family: Verdana;
font-size: 8pt;
font-weight: bold;
}
<div id="leftnav">
<ul>
<li class="menu"><a href="#">Home</a></li>
<li class="menu"><a href="#">Services</a></li>
<li class="menu"><a href="#">PT One on One</a></li>
<li class="menu"><a href="#">PT Group Fitness</a></li>
<li class="menu"><a href="#">Pre & Post Natal Fitness</a></li>
<li class="menu"><a href="#">Senior Fitness</a></li>
<li class="menu"><a href="#">Fit Kids</a></li>
<li class="menu"><a href="#">Pre Wedding Packages</a></li>
<li class="menu"><a href="#">About Us</a></li>
<li class="menu"><a href="#">Testimonials</a></li>
<li class="menu"><a href="#">Monthly Tips</a></li>
<li class="menu"><a href="#">Impel Thanks</a></li>
<li class="menu"><a href="#">Contact Us</a></li>
</ul>
</div>
Thanks for any help guys, very much appreciated. Cheers, Jamie I'm having a very odd problem with unordered lists. I have made them before like this and they have worked just fine, its odd that now its not working on any browsers. Did HTML standards change lately? Code: <ul style=" list-style-type:circle"> <li><a href="#sitespecs">Site Specs</a></li> <li><a href="#sitehistory">Site History</a></li> </ul> http://www.animeffz.com/codegeass/siteinfo.php Thats all the code i have involved with it =/ but nuttin is showing up. Not a single mention of them in my CSS also. Hey Guys, This is my first post of what I'm sure will be many more, you have a wonderful set up here on HTMLforum.com. I redesigned our eShop last week and I'm running on Mac OS X so I do most of my development in Firefox and Safari. I spent half of my day yesterday trying to sort through this IE issue with no luck.... If you go to http://www.yumsshop.com and look at the navigation menu on the left hand side you will see the various categories and sub categories for the lower level navigation around the shop. In Firefox and Safari everything displays how it should so take a look in one of those browsers so you can see how it is supposed to look. Now switch over to Internet Explorer and Welcome to my Nightmare, lol. For whatever reason the menu is staggered and completely out of alignment. I don't know if I need to have a separate style sheet just for IE with a browser detection code or what but I'm definitely in the dark on how to get this properly working. Any help is going to be much appreciated. Thanks, Taylor Leach Yums Shoes I have an unordered list on my page and the links continue after the /a in the webpage. The link can be clicked until the end of the line instead of just the words themselves. Also, with IE7 I noticed that the hover changes all the way until the next list item starts. Here's the link and css info: http://www.yotti.de/englishcourses.html .rccovers { position:absolute; width:650px; margin:0 0 0 150px; text-align:justify; } .rccovers a { color: #666; cursor: pointer; display:block; text-decoration:none; font-weight:700; } .rccovers a:hover { font-size:12px; background:#fff; color:#000; } Thanks for any help you can give. I have a list that's unordered, and I'm having a hard time figuring out how to make it centered as a whole instead of individual lines. The list would look something like: * Item 1 - Subitem 1 - Subitem 2 * Item 2 - Subitem 1 I want to center the entire unordered list, not center each row individually. Any ideas? Hi, I have a bit of a problem. I am learning HTML and CSS, and I am trying to make a simple menu withh a background button up state and a horizontal unordered list across, with a hover effect of a new bg image over the initial ones. Please help! Thanks in advance. Hi all, Im having a problem with unordered lists. When I view it in Dreamweaver, the bullet points are small, but when I view in browser, they are huge. Ive tried adding classes to the CSS, but not sure what im doing wrong. Ive got one class that is: .bulletList { padding:0px; margin:12px; } I tried adding a different class for the actual lists: .bulletSize { font-size:12px; } But all this did was change the size of the font and not the size of the bullet point. Can anyone suggest what I could do to fix this? Thanks in advance Hello, I'm trying to program a couple unordered lists into my web page and I encountering a problem. I can't seem to align them with the top of the cell. They act as if there's an extra list item above the first one. Here's the URL to the page: http://www.cactusridgerr.com/CCRR/comfort.htm Here's the code for the bottom two cells with the lists in them: Code: <tr> <td style="vertical-align: top; padding-left: 0px; padding-top: 0px;"> <ul type="disc" style="margin: 1em;"> <li>Elegant dining room</li> <li>Fireside lounge</li> <li>Library and computer room</li> <li>Craft room & country kitchen</li> </ul> </td> <td style="vertical-align: top; padding-left: 0px; padding-top: 0px;"> <ul type="disc" style="margin: 1em;"> <li>Wellness and exercise spa</li> <li>Beauty salon</li> <li>Theater and multi-purpose room</li> </ul> </td> </tr> Does anyone know why they refuse to be aligned with the top of the cells? Hello there, My site header buttons aren't showing up in Google Chrome. Design fees, web design and answers, are the only buttons that show in Chrome. The header buttons show up fine in IE, Firefox, Safari and others. Site is dreamboxdesigndotcomdotau Any help appreciated! I just designed and coded this site last night: www.cteaguedesign.com In Safari, the alignment and breaks on the table are perfect, but in any other browser, the topmost cell seems to slide up, and other problems seem to occur here. I realize that every page views differently in different browsers (i.e. IE), but I honestly didn't expect Firefox to act up on me. Visit the page, check the code, and tell me what the problem is. I'm stumped. Hello, I am using a JSP to populate a web page for a report. I get the results I want, but for some reason I get a whole lot of white space in between my title and my report body. I went through the HTML that was produced and did not see any extra <BR> lines or anything like that, so on a more fundamental level, does anyone know why you might get a whole lot of white space between things? Any debugging tips and HTML knowledge are appreciated! Thanks, Steve Is there a way I break (<br />) between rows in tables? I'm actually not totally looking to break, but somehow get an invisible space in between each row. I realize I can make the tables border="0" and just have a row of nothing, but I want to make the rest of tables borders see-able. Example HTML Code: <table border="1">
<tr>
<td>Text here</td>
</tr>
Somehow get an invisible break
<tr>
<td>Text here</td>
</tr>
</table>
|
|||||||