|
CSS - Unwanted Indent Of Text In Relative Div
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 Similar TutorialsI'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... Here's two pages of the same website that I'm working on. The problem appears in the menu when you hover over it to get to the submenu. I've narrowed the problem down to the single line of code on line 232 'position: relative' which is for the content div beneath the div containing the navigation div. I have not used any css3 opacity properties yet I'm getting an unwanted opacity problem. Working Site Broken Site 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 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 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. I want to create a div that goes right under an input, I can get it to look fine in FF but not IE using absolute positioning. Is there anyway I can position the new div relative to the input rather relative to containers around it? OK here is my setup. I have a 3rd party search on my page, the script produces results and the only edit I have access to is the css...(and the actual script ) not the <div> layout of the results page. The script generates a block and then an alt block for the search results with an image floating beside the text (if there is one available) My first problem was the amount of output text varies but does have a maximum.....I have fixed this by specifying the height of the result block to contain it. My real problem is the sizes of my thumbnail images vary and this allows my text to flow all around it if the image height doesn't fill the area as you can see in my screenshot. edit: apparently I can't post images but here is a link to the image http://img.photobucket.com/albums/v288/schmooot/various%20posted/sample.gif here is my css pertaining to the section Code:
.result_image { float: left; display: block; }
.result_image img { margin-top: 5px; border: 1px solid #EF3013; max-height: 75px; max-width: 75px; }
.result_block { margin-top: 0px; margin-bottom: 0px; background: #BBBBBB; border: 1px solid #000000; height: 100px;}
.result_altblock { margin-top: 0px; margin-bottom: 0px; background: #DDDDDD; border: 1px solid #000000; height: 100px;}
I would like the text to stay 80px from the left of the box always.....regardless of what size the image is. I attempted to force it by specifying the image width to be 75px and it did work but then it force resized my images to fit and some of them need to retain the aspect. I made them retain their aspect ratio by using the max-width and max-height attributes but now some images don't have the height to fill the space So really how do I make the 'block' containing the image to always be the same height of the text beside it (or just to always be 100px)...or force the text 'block' to stay with an 80px left margin. The image is within the text block as you can see in the output source below so I can't just add a margin to the block...also I cannot edit the actual <div> output as I do not have access to the place it is defined... but here it is for reference Code: <div class="result_altblock"><div class="result_image"><a href="item link"><img src="image" alt="" class="result_image" /></a></div><div class="result_title"><b>4.</b> <a href="link">Title</a></div> <div class="description">Description</div> <div class="infoline"></div> </div> <div class="result_block"><div class="result_image"><a href="item link"><img src="image" alt="" class="result_image" /></a></div><div class="result_title"><b>4.</b> <a href="link">Title</a></div> <div class="description">Description</div> <div class="infoline"></div> </div> Hi, I have centered a table horizontally and vertically. To do this I put a table inside a table. so i don't want to use absolute positioning, as the position would change if the window size changes... My problem, with relative positioning, is that I can't figure out how to put my "some text" over an image -which is inside the table cell- in the exact position i want, without "collateral damage"... The collateral damage is that if I put the <div> tag inside the table (see example 1), it will occupy the space and as result the image wll be moved down and layout won't be centered vertically anymore... If I put the <div> tag outside the table (see example 2), as result there will be more occupied space at the top, and the layout isn't centered anymore... Here you can see the code i used for both example 1 and example 2: example 1: <html> <head> <title>relative problem - example 1</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <table border=1> <tr> <td width="640" height="480"> <div id="Layer1" style="position:relative; left:50px; top:50px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> example 2: <html> <head> <title>relative problem - example 2</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <div id="Layer1" style="position:relative; left:0px; top:200px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <table border=1> <tr> <td width="640" height="480"> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> thx for letting me know... 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>
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. 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 Hi I want to increase the indent size in my pre tag. How can this be done? Thanks, Jake Can anyone tell me how to remove the left indent for nested ul tags in IE? 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. 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, 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>' 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 |
|||||||