|
CSS - Where Is This Ghost Text Coming From In Ie6?
There is some text appearing below the footer (see red background colored area) in my layout in IE6 and I don't know why. Can someone please take a look at:
http://rikahs.com/dermody/test.htm in IE6? Here is a screenshot of the text: Thank you. Similar TutorialsTake a look at Forgot your password link is ghosted. Some research indicated this might be the ghost text bug caused by <!-- comments --> but I have removed all comments from the page except for one for ie conditionals. The page is at http://sportshook.com/ . View it on IE7. If you have experience with this bug please help me. Thank you!!! Aen 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... The DIV is set to 100% height... http://www.webpagedesignrus.co.uk/DECS/services.php Can you please tell me how to fix this? The site has to be done in 30 minutes... Please help, Thanks. The url has been blocked? So I'll try this way: spidersandmilkdotcomforwardslashspiderdotcss I am trying to design a template and have spent hours trying to figure out where I'm going wrong. I am fairly experienced, but am used to designing with tables and read that it's better to design with DIV tags and assign CSS to position the elements (http://www.csszengarden.com ). The URL to the site I am designing is: http://www.electracustomhomes.com/new.php Here is the XHTML code: Code:
<!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" xml:lang="en" lang="en">
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
</head>
<body>
<div id="page">
<div id="template_header_top">
<div id="template_header_01"> </div>
<div id="template_header_02"> </div>
<div id="template_header_03"> </div>
</div>
<div id="template_header_bottom">
<div id="template_header_04"> </div>
<div id="template_header_05"> </div>
<div id="template_header_06"><div id="search">{search}</div></div>
</div>
<div id="template_left"></div>
<div id="content">
<div id="sidebar">
<div id="menu">
{menu template='simple_navigation.tpl' collapse='1'}
</div>
<div id="news">
<h2>News</h2>
{news number='3' detailpage='news'}
</div>
</div>
<div id="main">
<h2>{title}</h2><div id="print">{print showbutton=true script=true}</div>
{content} <br />
<div class="left49">
<p>{cms_selflink dir="previous" label=""}</p>
</div>
<div class="right49">
<p>{cms_selflink dir="next" label=""}</p>
</div>
</div>
</div>
<div id="template_right"></div>
<div id="template_footer">
<div id="template_bottom_left"></div>
<div id="template_bottom"></div>
<div id="template_bottom_right"></div>
</div>
</div>
</body>
</html>
And the CSS to accompany it: Code:
* {
margin:0;
padding:0;
}
body {
text-align: left;
font-family: Arial, Helvetica, sans-serif;
background-color: #620E0C;
color: #000;
}
img {
border: 0;
}
a,
a:link
a:active {
text-decoration: underline;
background-color: inherit;
color: #620E0C;
}
a:visited {
text-decoration: underline;
background-color: inherit;
color: #620E0C;
}
a:hover {
text-decoration: none;
background-color: inherit;
color: #0000FF;
}
div#page {
border: none;
margin: 0 auto;
width: 800px;
color: #000;
}
div#content {
clear: both;
width: 775px;
height: 100% !important;
background-color: #ccc;
color: #000;
margin: 0px;
padding: 0px;
}
div#template_left {
height: 100%;
width: 12px;
background: url(uploads/images/template_left.jpg) repeat-y left top;
float: left;
}
div#template_right {
height: 100%;
width: 12px;
background: url(uploads/images/template_right.jpg) repeat-y right top;
float: right;
}
div#main {
width: 200px;
height: 100%;
float: right;
}
div#sidebar {
width: 200px;
height: 100%;
}
div#menu {
width: 180px;
height: 100%;
}
div#menu dfn {
display: none;
}
div#menu li {
list-style: none;
}
div#news {
width: 180px;
height: 100%;
}
div#template_footer {
clear: both;
height: 40px;
color: #fff;
background-color: #620E0C;
margin: 0px;
padding: 0px;
}
div#template_bottom_left {
width: 12px;
height: 40px;
background: url(uploads/images/template_bottom_left.jpg) no-repeat left bottom;
}
div#template_bottom {
width: 775px;
height: 40px;
background: url(uploads/images/template_bottom.jpg) no-repeat center bottom;
}
div#template_bottom_right {
width: 12px;
height: 40px;
background: url(uploads/images/template_bottom_right.jpg) no-repeat right bottom;
}
I hope I've given all the information you might require... like I said, I really don't know why it's not working. Thanks in advance, Marcus This is kind of an odd situation. Hopefully someone who's better at CSS than I am can see what I'm doing wrong. Unfortunately, since I'm a new member to this forum, I can't post links to the pages in question. So I'll try to explain the situation the best way I can. I have a page that was originally created using one style sheet. Another webmaster in our company made some adjustments for me, but she attached a different style sheet, one that's used for another website, and used that for the changes. I've been trying to just incorporate the styles from her sheet into the original style sheet. I even took that style sheet and made a copy of it and put it in my folder. But there's something in her style sheet that sets the layout, so whenever I delete it, the formatting goes just a little off. I don't think I'm explaining this very well. Ideally, I'd like to just keep it all in one style sheet, but the page doesn't seem to like that. And I can't really modify the problem style sheet, because it's used by other pages. It's really hard to explain without viewing the two sample pages. Don't know the rules here yet, but maybe if somebody has a suggestion, I can send you the links and you can look at them yourself. If anyone understands this rambling mess, I'd really appreciate your help. Thanks, Ann Daman Is there by chance a feature of MS Front Page that helps us out by changing height and width attributes to upper case, which CSS does not recognize? If so, is there a way to disable this feature? What is the popular alternative (among those in the know) to MS FP? The "normal-html-preview" screen format in FP is great. Or, can we simply get rid of the height and width calls in "img src=" links? Thank you for any attention to this. Ed I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced. any idea ? tutorial? let me know if i need to explain more. Good Morning All, Been having a slight problem with the visual in the screenshot below. The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement. ***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned. text ----------------------------------------------------------- rather than text ------ and obviously by the css, the underline on the headers is a small image, repeated - x. Please see relevant css information. * (line 23) { margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; } h2, h3, h4, h5, h6 (line 101) { font-size: 1.2em; font-weight: normal; padding-bottom: 4px; margin-top: 0.6em; margin-right: 0pt; margin-bottom: 0.8em; margin-left: 0pt; text-align: center; } .contentArea h2, #secondaryNavigation h2 (line 114) { background-color: transparent; background-image: url("../images/h2_gradient_bg.gif"); background-repeat: repeat-x; background-attachment: scroll; background-position: left bottom; color: #0066cc; } Many Thanks in advance. Marc. can someone help me with this? here is the page&css I have been working on... the page file the css file I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site? this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!! I know how to position regular text using the in-line style "text-align:right", but when I try to do that with a link I get nowhere. Simplified example: Code: <html> <body> <td><p style="text-align:right">Google</p></td> <td><a href="http://www.google.com" style="text-align:right">Google</a></td> <td><a style="text-align:right" href="http://www.google.com">Google</a></td> <td><span style="text-align:right"><a href="http://www.google.com">Google</a></span></td> <td style="text-align:right"><a href="http://www.google.com" style="text-align:right">Google</a></td> <span style="text-align:right"><td><a href="http://www.google.com" style="text-align:right">Google</a></td></span> </body> </html> The first body line works fine to move the text to the right, but the link in lines 2-5 of the body are stuck on the left. Any suggestions? (My actual code invokes a class from a css page in a particular <td> and I'm trying to force a link in that <td> to the right using an in-line style; while I can do that for regular text I haven't found the secret of doing that for a link.) i have almost perfected the text wrap for this page.... http://defunctgames.com/helpfix/relevent.php4 problem is, i put a margin-top:50px on the image, and i want the text above the image, to flow all the way to the left. thus fully wraping the text. I saw a website that was throwing text that was written and recalling it with a link into a textbox...are there any tuts or anyone help me out with this one thanx aim rpduece Hi. See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should. Please also read some comments in the code. Code: <html><body><center><br><br> Why does image not force the outermost span to be at least as high as image?<br> If the text are long enough and gets below the bottom border of image it look good though.<br><br> NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br> In my real application I'm using an <a href=" ...> around the outer span in examples below.<br> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;"> <span style="display:block; float:left"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0"> </span> <span style="display: block; color: white;"> Text here. </span> </span> </td></tr></table> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left"> Text here. </span> </td></tr></table> </center></body></html> Based on the questions I see being asked and answered here, I'm concerned many of you will laugh at my ignorance, but here goes anyway. I want to know how to use CSS on just a little text. For example, let's say I want to render One-Two-Three-BOOM as text on a Web page, except that what I really want is for the BOOM part to be in a larger font and bold-faced. Can that be done using CSS? Can I select the BOOM part in Front Page 2003 and impose a CSS style to those four letters and only those four? Everything I try, based on the CSS file I'm using, results in applying the new style to all of the text within a whole paragraph. I want to be able to apply the style to just a little text at a time. As another example, I want to render the following two lines Johnny G. Doe 123 West South Street in such a way that, using CSS to control everything, I can get the second line to appear in a smaller font. I can get it to work if there's a <p> between the two lines, but not if I want to separate them with a <br>. I'm not asking whether it's a good idea to use CSS this way, I'm just asking how to do it. I will try to attach a file to this thread that shows the first several lines of the CSS file I'm using, in case that makes a difference. If this doesn't work, please let me know. Thanks. --Johnny Is it possible to have text run around a div positioned with absolute positioning? Hmm, This is a problem that has plagued me for a while, but just recently decided to find a solution. Basically I like to single out words for empasis on certain pages. Well with EM that's fine. However on a new website I'm coding I need to do (TYPE 1 FONT) (TYPE 2 FONT) (TYPE 3 FONT). All are different decorations. Is there a way to create a tag for each word? Thanks. I'm having trouble with a page I'm working on- I posted here a few weeks ago with something sort of similar. This time, though, I'm at a loss, I've tried several different things but nothing worked. http://www.geocities.com/nny555/eup/newschedule.html As you can see, the div where the content is, the text is stretching right through the div. Is there any way to fix this? Hi, Howdo you get text and and image on the same line. I want text and 2 images on the same line but the image appears on the next line like a <br> has been entered. There is plenty of room for all data.Each has its own <div>. |
|||||||