|
CSS - Text Wrangler Is Inserting Mystery Symbols
I thought it might have been carriage returns, but it's not. For some reason, Textwrangler is showing either question marks (for firefox for windows) or little boxes (for IE for windows). The problem isn't happening for Safari or FF for mac.
I can't figure out what it is. the site Similar TutorialsHi, Was wondering if there was any possible way to insert text into a webpage using CSS. I have a website created with over 200 pages so far, and the people I'm creating it for all of a sudden decided that they want a line at the bottom of each page stating their name. I have a CSS created for the background and I was wondering if I could insert a line in that sheet that would add the text to all pages. Is it possible or am I just dreaming? LOL. I'm trying to avoid having to go through all those pages doing copy/paste..hehe. If this is not possible, any other ideas or help of any kind would be appreciated. Thanks, Christa Problem with IE8 http://kool-invention.mine.nu/~httpd2/bug.JPG take look at: http://kool-invention.mine.nu/~httpd2/ with firefox and ie or other web browsers. why the right column in logo and page content is slightly going down? in Firefox it works perfectly. i tried to research on Google but i couldn't find an answer. Code: <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php echo $site_name; ?> - <?php echo $site_title; ?></title>
<link href="style/<?php echo "$site_style"; ?>/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, div {font-family:Verdana;font-size:14px}
.b {width:100%;text-align:center}
.l {height:100px;overflow:auto}
.l_l {width:150px;float:left}
.l_r {width:650px;float:right}
.p {border:1px solid black;overflow:auto}
.p_l {width:150px;float:left}
.p_r {width:650px;float:right}
.f {height:30px}
.s {height:10px}
.l, .p, .f {
width:800px;
margin-left:auto;
margin-right:auto;
text-align:left;
border:1px solid black
}
</style>
</head>
<body>
<div class="b">
<div class="l">
<div class="l_l">left</div>
<div class="l_r">right</div>
</div>
<div class="s"></div>
<div class="p">
<div class="p_l">left</div>
<div class="p_r">right</div>
</div>
<div class="s"></div>
<div class="f">foot</div>
</div>
</body>
</html>
please help. I've got a form that I'm trying to lay out. I've prepared examples. http://www.dollardns.net/devshed/example1.html This is approximately what the form should look like. But I don't like how I managed to pull it off. I've explicitly declared a height for the middle row in my form. I want this to be automatic based on the contents. http://www.dollardns.net/devshed/example2.html But this is what happens if I take out the explicit height. The float lefts for the inner "box"es confuse the parent div into thinking it has no content. So the height collapses, and chaos results. http://www.dollardns.net/devshed/example3.html I've also tried making the "box"es use a display of "inline". But that doesn't work possibly cause inline elements are not supposed to contain block elements. Any recommendations? I've been toying with a CSS Layout for a new site with a faux-columns (ALA style) two-column with clearing footer design. It also calls for a small gradient bar under the header that repeat-x;'s a gradient bitmap accross the bar. I've done things like this before (in fact, in the same document -- the HTML background) but for some reason this isn't working. I've checked the path in the url() for the element's background: tag, but no luck. Can anyone see what I'm missing here? Help is much appreciated. URL for Layout Test: http://www.gravitymusic.com/aiden/CSSTest/front.html URL for CSS Document: http://www.gravitymusic.com/aiden/CSSTest/style.css Thanks! I cannot figure out how to get rid of the bottom margin on my body tag. It's driving me nuts. It's set to zero explicitly yet there's still a gap between the body tag and the bottom of the page. I don't think it's a browser bug since it happens in both FF and Opera. site: gohanman.com/cms/image/tid/3 (forum rules say I can't link) There has to be something simple, but I don't know any way to change the bottom margin other than setting margin-bottom... Hi gang, First of all, take a look at this page: http://www.cheeyewear.com.au/news.php I've made a website for a client and they are saying they can't use/interact with the menu on the right. I've tested every browser PC and Mac and they are all working fine. It happened after I added in the new footer code but I can't re-produce the issue at all. She says she sees the issue "Safari and at work Google Chrome". I know she uses a PC at her work. She's finding the same issue with this page: http://www.cheeyewear.com.au/eye_testing.php Can anyone else out there no interact with the right column on these pages?? Thanks!! Ham Forget it, I solved the issue. How does one delete a post like this... If I have <div class="menu"> <table> <tr> <td>Home page</td> </tr> and in my style sheet td.menu { color:red; } then too bad for me. I have to put class=menu in every <td> tag. There must be a better way. Hi, I need some help inserting a Logo before my site Header. i'm do not know much about CSS as my former designer put this together and am now left in the lurch inserting my company logo. this is the current masthead code #masthead { padding:0; margin:12px 0 24px 0; height: 30px; position: relative; display:block; clear:both } #masthead h2, #branding h2 { float:left; text-transform:capitalize; margin:0; padding:0 } #masthead h2 a, #branding h2 a { color:#fff } #masthead .description, #branding .description { float:left; color:#999; margin: 10px 12px; padding-left:12px; border-left: 1px solid #999; font-size:11px } would appreciate anyone if you could help me with the code to insert a logo before the Title. Thanks! Hi everyone, I wasn't sure if I could do this with CSS or if I'd need to do something in my PHP to get this working. If it's not CSS, please could the mods move this to the PHP forum. So here's my problem: I have a site, www.geeknews.co.za, which is an article site that I want google adsense to run in. The problem is that the articles are inserted from the database dynamically, and I don't know how to add the google tags so that it doesn't appear after the article has finished. The page on geeknews.co.za is a static page. Just so you can see what I'm going for. Any ideas on how to do this? Thanks Hi, was wondering if someone could please enlight me on this. Im creating what look like MS Word doc pages for a site and I would like to have it such that the body content div remains the same distance from the top and bottom of its container div regardless of whether header or footer divs are inserted into the same container div. How would I achieve this? Shall I use z-index in the .header and .footer classes and make them higher than the z-index of the .body class so as to stop them from affecting the margin of the body content div? Thanks in advance. I took an example from w3.org (shown below) and it doesn't work. From http://www.w3.org/TR/css3-content/ Quote: 4.2.2. Inserting multiple '::before' and '::after' pseudo-elements In contrast with the previous section, the selector '::before(2)' represents a pseudo-element before another, both of which are contained at the start of an element. For example, the following rules: div { content: 'A' } div::before { content: 'B'; } div::before(2) { content: 'C'; } ...would result in the following rendering objects: ,-----------------------. | ,---. ,---. | | | C | | B | A | | `---' `---' | `-----------------------' The '::before' selector is exactly equivalent to '::before(1)'. A pseudo-element only exists if all the elements and pseudo-elements leading up to it exist. For instance, in the following example, only one pseudo-element is generated, the first one: div { content: 'A' } div::before { content: 'B'; } div::before(2) { content: inhibit; } div::before(3) { content: 'C'; } It would result in the following rendering objects: ,-----------------------. | ,---. | | | B | A | | `---' | `-----------------------' So my code is 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Page</title>
<style type="text/css" media="screen">
div { content: 'A' }
div::before { content: 'B'; }
div::before(2) { content: 'C'; }
</style>
</head>
<body>
<div>Test Div</div>
</body>
</html>
And the output is "BTest Div". Firefox error console comes up with Quote: Warning: Function token for non-function pseudo-class or pseudo-element, or the other way around, when reading 'before'. Ruleset ignored due to bad selector. Line: 10 I get a similar error when I validate it with W3.org using CSS level 3 Quote: 10 div Parse Error div::before(2) { content: 'C'; } I just find it odd because I copied the example off of their site and then when I validate it the code comes back as invalid. Any ideas? Hope I'm posting this in the right place - was contemplating the HTML forum for a while but thought this would be the right place to post in. I'm trying to implement microdata into a site I'm developing to get Google's Rich Snippets search results. http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=176035 At the moment, implementing microdata seems to break my layout. For instance, wrapping prices on my site with Code: <span itemprop="price">119.99</span> seems to change the font size and other properties of the price's font style. The same thing happens when I wrap Code: <div itemscope itemtype="http://data-vocabulary.org/Product">...</div> around my template. Any idea why this is happening? I don't think there are any CSS styles in my site that are referencing to the microdata at all. 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. 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. 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> |
|||||||