|
CSS - Wierd Problem With Indent.
I'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 Similar TutorialsHey, 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>' Hi, I have a realy strange problem that I'm hoping someone can shed some light on. I've been building a new site, nice html and css, but seemingly randomly the layout completely breaks in Firefox 3, IE7/8 is always fine. This only occurs in page sections where there is a block level element (heading, div, para etc) inside of an anchor. <a href=""><h2>Some text</h2></a> Using firebug I saw that the html gets duplicated like so: <a href=""></a> <h2><a href="">Some text</a></h2> - notice that in this one the h2 and <a> have switched places! <a href=""></a> and after a bit of experimenting I found that removing the h2 made it work, and that everything's fine as long as a block level element isn't inside the <a>. In the stylesheet the anchor has display:block; Does anyone have any idea why this is happening, and why in FF only? I've been building sites for 3+ years and have never seen this before! Thanks. 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 Guys, I'm working on a form, and for the life of me, I can't get these divs to sit side by side. You can see the test page at www.details.at/search_test.cfm It's a small form with a few fields and selects I want each element to sit side by side in a single row. Here is the code. I thought display:inline; would do the trick, but it's not working. Code: <style>
#control_panel
{
padding:0 0 1em 2em;
width:600px;
float:left;
}
.smalltext
{
font-family: arial, helvetica, sans-serif;
color: #000000;
font-size: .7em;
}
.input
{
font: .9em Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
color: #146eb4;
border: 1px solid #146eb4;
}
label
{
text-align: left;
display: block;
}
div.search_cell
{
display: inline;
}
</style>
<div id="control_panel">
<form action="http://test.at" METHOD="post">
<div class="search_cell">
<INPUT class="input" NAME="search_box" value="" size="25" maxlength="200">
<label for="search_box"><span class="smalltext">search</span></label>
</div>
<div class="search_cell">
<select class="input" name="range">
<option value="50">50</option>
<option value="Any">Any</option>
<option value="1" >1</option>
</select>
<label for="search_box"><span class="smalltext">within</span></label>
</div>
<div class="search_cell">
<select class="input" name="range_measure">
<option value="Miles">Miles</option>
<option value="kilometers">Kilometers</option>
</select>
<label for="search_box"><span class="smalltext">range</span></label>
</div>
<div class="search_cell">
<span class="smalltext">of</span>
</div>
<div class="search_cell">
<INPUT class="input" value="" type="Text" name="location" size="10">
<label for="location"><span class="smalltext">city & state or postal</span></label>
</div>
<div class="search_cell">
<INPUT class="input" type="submit" name="Submit" value="Go">
</div>
</form>
</div>
</div>
Hi, im making a site for a friend but cant seem to understand why the css works fine on one page and the exact same css fails on another. CSS: Code: #topmenu_wow {
background-image: url(images/wow_menu.png);
height: 73px;
width: 1030px;
display: block;
background-repeat: no-repeat;
position: relative;
margin-right: auto;
margin-left: auto;
}
#topmenu_war {
background-image: url(images/war_menu.png);
height: 73px;
width: 1030px;
display: block;
background-repeat: no-repeat;
position: relative;
margin-right: auto;
margin-left: auto;
}
#menupos {
top: 15px;
position: relative;
}
html for the menu: Code: <div id="topmenu_war"><!--this is the one row im changing, topmenu_war (not working) or topmenu_wow (working)--> <span id="home"><a href="index.html"><span id="menupos">Home</span></a></span> <span id="info"><a href="info.html"><span id="menupos">Info</span></a></span> <span id="demo"><a href="demo.html"><span id="menupos">Demo</span></a></span> <a href="#"><span></span></a> <span id="pricing"><a href="pricing.html"><span id="menupos">Pricing</span></a></span> <span id="order"><a href="order.html"><span id="menupos">Order</span></a></span> <span id="support"><a href="support.html"><span id="menupos">Support</span></a></span></div> The working page The bugged page I've tried to put each file in a own folder with a own css (eg /wow/index.html) but no luck. Any help is welcome! Regards - mrsarun http://xplozive.net/ When you go to that in firefox and rollover one of the links on the left, the content bg color shortens...anyway to fix this? Hi, Im not sure what the problem is with my code, but it gives me full borders when I ask for only top and bottom. Here is my CSS. css Code: Original - css Code .logo{ width: 100%; border: 1px solid #FFFFFF; font-size: 32px; } .menu{ width: 150px; height: 320px; border: 1px solid #FFFFFF; text-align: left; } a.menu{ border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; color: #FFFFFF; width: 100%; }
.logo{
Here is my html of that part. html Code: Original - html Code <span style="float: left"> <div class="menu"> <a href="" class="menu">asdf</a><br /> <a href="" class="menu">asdf</a><br /> <span style="float: left"> <div class="menu"> <a href="" class="menu">asdf</a><br /> <a href="" class="menu">asdf</a><br /> Here is what it outputs. http://blacknine.net/test.html Hello, I am experincing something strange with a basic table enclosed in my content div... The situation: I have basic layout, a header with 2 columns. The main content div holds the left hand side of the page and all works well... except the table. It shoots off the screen and a horizontal scroll bar apears and the table aligns up next to the far left div when viewed in Firefox, but aligns properly when viewed in IE 6. If I enclose the table in a paragraph tag, it displays properly but then fails XHTML validation stating that I have enclosed a block element within a line element. I have gone over and over the table tags, and all seems correct... went to the w3c and mimicked their sample table and have gotten the same prob. Has anyone else experinced this?? DIscovered any solutions?? Help! Thanks. edit... here is the code: the CSS portion: #header { color: #a47716; border-top: .1px solid #e5eca9; margin: 0; padding: 0; height: 100px; background: #ccdd99 url("./headerBG.png") repeat-x; } h1.header, h2.header { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: medium; color: #a47716; border-bottom: none; } #content { padding: 40px 10px 10px 10px; background: #fff; margin: 0px 25% 20px 5px; border-top: 2px groove #87c6ae; border-right: 2px outset #87c6ae; border-left: 2px groove #87c6ae; width: 75%; } #rightCol { margin: 0px; position: absolute; top: 140px; width:20%; right: 0; padding: 30px 10px 10px 10px; } #footer { margin: 0 25% 0 5px; padding: 0; text-align:center; font-size:small; } The XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>the title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- @import allTheStyleSheets.css; --> </style> </head> <body> <!-- begin page header --> <div id="header"> <?php include('./incHeader.php')?> </div> <!-- end page header --> <!-- begin tab menu --> <div id="tabMenu"> <?php include('./incNav.php')?> </div> <!-- end tab menu --> <!-- begin main content --> <div id="content"> <table summary="A summary."> <caption> The Caption</caption> <tr> <th id="topic">Topic</th> <th id="issue">Issue</th> <th id="action">Action</th> </tr> <tr> <td headers="topic"><h3>Heading</h3> <p><a href="http://murphyzone.no-ip.com/GCCBFM/news/blog/index.php?p=10">Comment</a></p></td> <td headers="issue">cell content</td> <td headers="action">cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action"> cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action">cell content</td> </tr> <tr> <td headers="topic">cell content</td> <td headers="issue">cell content</td> <td headers="action">cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action"> cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action"> cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action"> cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action">cell content</td> </tr> </table> </div> <!-- end main content --> <!-- begin right column --> <div id="rightCol"> the right column... </div> <!-- end right column --> <!-- begin footer --> <div id="footer"> <?php include('./incFooter.php')?> </div> <!-- end footer --> </body> </html> Thanks again. so I have a <h2> tag within a <div id="content"> tag, and I want the h2 tag to be about 115px from the top of the content div. Yet everytime I set the margin, it pushes both the <h2> tag AND the <div id="content"> tag down by 115px. Here's my CSS code: #content{ background: #bd1f1f url("images/body_bkgrnd.jpg"); } #content h2{ font: 34px/30px Helvetica; color: black; margin: 115px 0px 0px 0px; width: 544px; } And here's the relevant HTML: <div id="content"> <h2> Great themes, amazing icons, and the best kit of templates. </h2> </div> <!-- end content --> And here's a picture to show what I mean: [IMG]C:\question.jpg[/IMG] Thanks guys! 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. Hi I want to increase the indent size in my pre tag. How can this be done? Thanks, Jake 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. 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 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 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. |
|||||||