|
CSS - Hanging Indent & Highlighting Problem
Hey,
I'm building a rather elaborate javascript popup menu, and I'm trying to get some distinction between some of the long-text menu items. I have no padding after the <p> tags because then I get an extra space at the bottom of my menu. So I'm trying get a hanging indent to work: my CSS styles: .question_indent { text-indent:-10px; padding-left: 10px; } .popupmenu p{ color: white; font-size: 0.80em; display: block; padding-left: 6px; padding-right: 6px; margin-top:0px; margin-bottom:0px; } Here's my problem: with my javascript highlight-on-hover function, the hightlight starts in the middle of the first letter of the menu item with a hanging indent. I can't figure out a way to get around it (e.g. can't find anything on google). function subhighlight(obj) { if (subhighlighted!=null) { //unhighlight last link subhighlighted.style.background = ""; subhighlighted.style.color = "#f7f7f7"; } subhighlighted=obj; if (subhighlighted!=null) { //highlight current link subhighlighted.style.background = "#f7f7f7"; subhighlighted.style.color = "#376092"; } } Here's some of my menu item code: sublinkset[0]= '<p class="question_indent">llooong text repeat llooong text repeat llooong text repeat llooong text repeat.</p>' sublinkset[0]+='<p class="question_indent"><a href="about_us.html" id="11">But that\'s just a summary. Click to read more.</a></p>' Similar TutorialsI'm having this issue where 1st paragraph is not indented then all the rest are.... I don't want any indentation.... yet for some reason something is causing it to. How can i investigate what's causing this? Thanks. (btw there's no UL or LI involved in this only P I've used bullet image for a list but it give more indent then i want to use. I've checked the padding and marging for the other DIV ID's and set all to zero but also there is more indent in the left side. How is it possible to reduce the left indent for the list? Code:
.test1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
height: 15px;
color: #003366;
text-align: left;
list-style-image: url(bullet1.gif);
border: 1px solid #000099;
list-style-position: outside;
width: 150px;
margin: 0px;
padding-top: 5px;
padding-bottom: 5px;
}
#test2{
width:215px;
background-image: url(1bg-menu-v-mid.gif);
background-repeat: repeat-y;
border: thin solid #000066;
float: left;
}
Hi everyone. Here is the url http://v3p2.stealthwd.ca/ its the dev version of my companies soon-to-be-new website. The font-face code is... Code: @font-face {
font-family: 'SlingLight';
src: url('/fonts/sling/slinglight-webfont.eot');
src: url('/fonts/sling/slinglight-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/sling/slinglight-webfont.woff') format('woff'),
url('/fonts/sling/slinglight-webfont.ttf') format('truetype'),
url('/fonts/sling/slinglight-webfont.svg#SlingLight') format('svg');
font-weight: normal;
font-style: normal;
}
Any idea why its timing out? Thanks Hello all- I have news headlines set up to display in a list. Each headline starts and ends with a quote. When a given head wraps, the next line begins directly under the quote mark: "This is Headline 1" "This is Headline 2 and When It Wraps, the First Line Falls under the Quote Mark" Ideally, I'd like to have the initial quote mark in each head hang out from the text, so that wrapped lines in that list item align underneath the first letter, rather than the quote mark. Is it possible to use a character, i.e., the quote mark, as a list marker? Thanks in advance... - Tom Tedeschi In the example below, why would there still be an indent on the ul li? Thanks for the help. Code: <!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">
<!--
a:link {
text-decoration: none;
color: #333333;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #999999;
}
a:active {
text-decoration: none;
color: #000000;
}
#wrapper{
width:760px;
background-image: url(http://www.itsjustjeff.com/CGStest/images/navback.jpg);
background-repeat: repeat-y;
background-position: 0px 0px;
float:left;
}
#navlist ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
#navlist li {
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #666666;
line-height: 21px;
}
#navbox{
margin:0;
padding:0;
width:156px;
float:left;
}
body {
background-color: #CCCCCC;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="navbox">
<ul id="navlist">
<li>| <a href="index.php">information</a></li>
<li>| <a href="informacion.php">informacion</a></li>
<li>| <a href="locations.php">locations</a></li>
<li>| <a href="pininfo.php">PIN# information</a></li>
<li>| <a href="resources.php">resourcess</a></li>
</ul>
</div>
</div>
</body>
</html>
Anyone know a trick to get text-indent applied to a text input field working on the default value in IE? Code: <input type="text" name="name" value="Full Name" /> text-indent does not apply to that initial value in IE. Once you start typing text it does. 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'm using a web application for an online survey system. The pages rendered are XHTML transitional ("<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">")... but it doesn't validate (a big problem, I know). It looks like this initially... ...and I'm trying to indent the entire element below the header text like so... ...but the problem is that it applies the change not only the parent TABLE/DIV combo, but then the children as well (which is why the radio buttons ended up being shifted over too I believe). I can't change any of the code of the application, but the application references an external CSS file that I can edit only (so I can't change the fact that there aren't many/any classes assigned to the elements to use directly... but I can modify this one file and have the changes applied). What I've tried thus far is to use either of the following... Code: TABLE DIV {position: relative; left: 25px;}
TABLE DIV {padding-left: 25px;}
I found the tree using Firebug for Firefox. Is there a way to make the CSS code be applied to only the first/parent TABLE/DIV combo and not it's children? Maybe I could start with BODY TABLE DIV or something? I would really appreciate any assistance possible. I'm trying to construct a nav menu using <li>'s, with each <li> element indenting 5px more than the one above it. Is this possible using just one class for all the <li> elements? I'm using Wordpress and the use of the nav loop precludes me from being able to assign each <li> element it's own class (unless I hard code the navigation). Thanks in advance for any help. Hi I want to increase the indent size in my pre tag. How can this be done? Thanks, Jake For my paragraph elements I want the text-indent: property to apply to every new line..... Instead of just the first line... How is this done? thank ye. Hi, I'm trying to change the horizontal indent of my lists b/c I feel that the indent is too much. It's taking up too much space. Therefore, I looked around and came up with this: Code: ul, ol
{
list-style-position: inside;
margin-left: 0px;
padding-left: 0px;
}
It does work (you can change 'margin-left' to whatever you prefer), but the problem is sublist items are not indented further. They are forced to the same distance as the parent list. For instance, Code: <ul>
<li>item 1</li>
<li>item 2</li>
<ul>
<li>item 2.1</li>
<li>item 2.2</li>
</ul>
<li>item 3</li>
</ul>
will look like: Code: * item 1 * item 2 o item 2.1 o item 2.2 * item 3 in stead of: Code: * item 1 * item 2 o item 2.1 o item 2.2 * item 3 It does this in both FF and IE. Does anyone have any tips? Thanks, Matt I actually am having two problems, the one I alluded to in the subject and one I posted previously but got no response. This time, I'm including a URL and a CSS link in the hopes that someone might be able to help me out. The problem I posted earlier is regarding my navigation column and footer being omitted about 80% of the time in IE5/Win. Obviously, that's a huge problem. Of the browsers I've tested, it only happens in IE5/Win. The second problem is a bizarre issue regarding list items and the copy of the website. For some reason, in both IE5/Win and IE6/Win, the copy in the main column is slightly indented when there are list items (i.e. my navigation links!). This doesn't happen in any other browser I've tested and let me tell you, it's really cramping my style, because it makes the copy look like crap. Anyway, here's the URL of a test page: I've removed the page link. And here's the CSS link: http://dev.homedecorbuyer.com/stylesheets/default.css * Note: about 8 lines of CSS are on a different stylesheet, but only have to do with color and the header graphic. Please help. Whenever I can lend a helping hand on this forum, I post; it's my way of paying it forward. Any assistance would be greatly appreciated. I have a tag which pulls down from the .p tag. What I was looking to do is, just remove the top margin from my custom tag. The result is, the first line indents but does not for the rest of the paragraph. Any suggestions??? p { font-size: 11px; margin:10px 10px 10px 10px; line-height: 140%; color:#333333; } .table_content { font-size: 11px; margin-top: 0px; } Hi, I have a drop down menu using <UL> and <LI>. Is there a way i can reduce the left indent from where the bullet point would normally be? Many thanks 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 Can anyone tell me how to remove the left indent for nested ul tags in IE? 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. Hey gang, I'm trying to change the indent of an unordered list. I have made this mock up just using spaces to illustrate what I'm trying to accomplish: I mark it up as: <ul> <li>Perennials</li> <ol>Artemisia</ol> ... ... </ul> I cannot get the <ol> indent to decrease from its default. I have tried playing with the padding and margin, but I need it to go back, not forward. What is the CSS to decide how many px/em the ol is indented? I'm sure this is simple, but I can't figure it out! Any help would be great. Thanks. i want to add styles to the text area content such as bold, itallic, indent, color and size (like our fourms Post new Thread text area). how is it possible wating for ur reply bye |
|||||||