CSS - Problems Highlighting Text With Div Tags...
The new version of the website I work on is now structured using CSS to position divs, whereas the old site was done entirely using tables.
The thing is, it's no longer possible to select the text properly now its inside div tags - many of the other divs get highlighted completely, and the target text gets highlighted in an unpredictable manner - whereas on the old site, with its table format, this was not a problem. Please help! Similar TutorialsHi all, I am trying to prevent the highlighting of text on my site only on a product description. I currently employ techniques using the BODY tag, but I believe this is doing more harm than good because it does not allow highlighting/cutting in any other areas. I have seen some class(es) on other sites where highlighting was not permitting ONLY in the product description (a table) Is there a way to disable highlighting of text "IN A TABLE" via CSS or JAVA, and without the tricks of transparent layers and IFrames? Thanks much in advance http://digitalspline.com/projects/gameCitadel/ if you left click to the left of the layout, it highlights all the text. Anyone know why? Everyone, I'm having an issue with the first DIV intensive site I am doing: IE will not recognize links or allow me to highlight text, or fill in forms in the left side of DIVs that I have on a site I am developing: httP://www.ephire.com/mack If you try and click the "more" link up top, or goto the "contact" link, no joy in IE, but Firefox works just fine: Here is the code I think is the culprit: Code: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_bg.png', sizingMethod=scale); And here is the whole page. I'm seriously stumped...I tried going through and deleting things line by line and jacking with settings, and the only thing that allowed anything to work was messing with the section of code above. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>MACK Insurance</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> <!--[if IE]> <style> * html #wrapper { background: url(images/body_t.gif) 24px 0px no-repeat; backgro\und: none; } * html #ie { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_t.png'); height: 39px; width: 434px; position: absolute; margin-left: 24px; } * html #body { background: url(images/body_bg.gif); backgro\und: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_bg.png', sizingMethod=scale); } .footerie { display: block; disp\lay: none; } .footer { display: none; disp\lay: block; } </style> <![endif]--> </head> <body> <center><table><tr><td> <div id="ie"></div> <div id="wrapper"> <h1><a href="/"><img src="images/logo.jpg" width="200" height="30" alt="logo" /></a></h1> <div id="body"> <div class="inner"> <div id="content"><div> <font face="Arial" size="2"><b>Health, Life, Disability</b></font> <br>Designed Benefits Associates is dedicated to finding the best health care program to suit the needs of a family or individual. <br><br>Our specialty is paired programs that protect not one, or two, but multiple areas of life. <a href="index_01.html"><img src="images/btn_more.gif" width="52" height="6" alt="more" /></a> </div></div><!-- end content --> <div id="page_title"> <img src="images/title_main_page.gif" width="47" height="200" alt="main page" /> </div><!-- end page_title --> <div id="news"><div><div> <font face="Arial" size="1"><b>Things to Consider</b></font> <img src="images/picture_3.jpg" width="96" height="56" alt="picture 3" /> <p>04-20-2006</p> <p>As your insurance broker, we daily search for the best priced health plans with the optimum benefits, so you can spend time doing what's important.<br><br><br></p> </div></div></div><!-- end news --> <div class="clear"></div> </div><!-- end .inner --> <div id="footer"> <img src="images/footer.gif" width="435" height="196" alt="footer" class="footer" /> </div><!-- end footer --> </div><!-- end body --> <div id="paper"> <div class="inner"> <font face="Arial" size="2"><a href="http://www.ephire.com"><b>Health</b></a></font> <a href="http://www.ephire.com"><img src="images/picture_1.jpg" width="130" height="74" alt="picture 1" /></a> <br><br> <font face="Arial" size="2"><a href="http://www.ephire.com"><b>Life</b></a></font> <a href="http://www.ephire.com"><img src="images/picture_2.jpg" width="130" height="74" alt="picture 2" /></a> <br><br> <font face="Arial" size="2"><a href="http://www.ephire.com"><b>Disability</b></a></font> <a href="http://www.ephire.com"><img src="images/picture_4.jpg" width="130" height="74" alt="picture 4" /></a> <p>A single plan can add peace of mind, all three together can insure stability.</p> <center><font face="Arial" size="1"><a href="contact.html"><b>Contact</b></a> - <a href="index.html"><b>Home</b></a> - <a href="testimony.html"><b>Testimony</a></font></center> </div><!-- end .inner --> </div><!-- end paper --> </div><!-- end wrapper --> <div style="clear:both;position:relative;display:block;margin-top:530px;" > </div></td></tr></table></center> <center><br><table><tr><td> <br><br><br><center>Powered by <a href="http://www.ephire.com">ephire</a></center></td></tr></table> </body> </html> Any help is appreciated~ Heya, i've made dis treeview type "component", and sumthing is bugging me. I used divisions and addEventListener("click", wutevafunc, false) + the setTimeout funtion to enable users to expand a subnode-containing-division by double clicking the node in the tree which contains dis.. the script works.. but you double click the actual text, it gets highlighted (like, if you where to click and drag it, to copy it). Wrapping a span round the text, makes it a lill neater, since it won get highlighted if you do the double click next to the text (the containing div is wider than the text).. I tried scripting out of this too, by calling the click method on another element when the doubleclick was confirmed. so, question, is it possible to make text non-highlightable with css? i cant seem to find a css-"knob" for that anywhere.. I'm wondering how to "vertical-align: middle" the text in the anchor tags. I haven't got that part to work. Code: a.aMenuLinks:link { color: #666666; font-family: tahoma, sans-serif; font-size: 8pt; font-style: normal; font-weight: bold; text-decoration: none; text-indent: 15px; width: 100%; height: 25px; display: block; } Thanks... Hi, we have a site that is having some issues with text formatting, and I'm hoping someone can help vs. changing the template. the site is paydayleads(dot)com and as you can see, even text formatted in <p> tags are not coming up as new paragraphs, everything is grouped together, etc. I was able to format a list alright, but I am trying to figure out how to troubleshoot the regular paragraph problems. Any ideas? If Im not in the right place can anyone suggest where to go? Ok, so here is my page: http://a.parsons.edu/~sean/weargreen/home.html and here is the design I layed out in photoshop http://a.parsons.edu/~sean/weargreen/homeimg.gif In FireFox the text is placed a few pixels lower than the text in IE. Though I have fiddled around with the placement and lineheight and all that, I can't get them to look the same. Here are screenshots IE: http://a.parsons.edu/~sean/weargreen/iescreen.gif FF: http://a.parsons.edu/~sean/weargreen/ffscreen.gif Any advice or help would be greatly appreciated. Thanks! In Firefox, my text will align perfectly. However, IE will not show the text in the proper spot and I can't come up with a way to over come this. Heres my css document: /* CSS Document */ #header { margin: auto; background-image:url(images/header.jpg); width:800px; height:158px; left: auto; top: auto; right: auto; bottom: auto; background-position: center; } #headernav { font-family: "Times New Roman", Times, serif; font-size: 14px; font-style: normal; color: #4B60AF; font-weight: normal; word-spacing: 12px; margin-top: -42.5px; margin-right: auto; margin-bottom: auto; margin-left: auto; any suggestions? BTW the text is in headernav Hi guys, I just wanted to say that I think devshed is a kick butt place for getting help with all sorts of CSS problems... always seems whenever I post that someone really helpful ends up helping me solve the problem in a way I hadn't thought of... So here's the issue: I need to put two elements into a div, one aligned on the left side and one aligned on the right Now what I'm looking at is the section where I have the Home text and the Quick News. So I've put the design into XHTML and CSS he But I can't seem to get the news line to move over properly. Any suggestions? I have used float:right but it just doesn't seem to work. I tried putting a div in and align=right but that pushes the element onto the next line which I don't want. Any ideas guys? There simply has got to be an easy way to align text within a div that I'm missing somehow. Thanks! Argh! I want to have a little icon as a link with a caption under it. It should be a no brainer. Like this: PHP Code: <a class="a" style="line-height: normal;" href="http://www.oregonetail.com/etail.html"><img src="/images/heart_innovation_icon.jpg" height="60" width="39" alt="heart innovation poster" border="0" />E-tail Neighbors</a> Here's the thing, there's a GAP between the graphic and the caption, and if the caption has to go an extra line because of the width constraint of the <div> that this is in, there's a huge GAP between the lines. I want the caption BUTT UP against the bottom of the picture and if the caption wraps, I want the second line of it BUTT UP against the first one NO GAP. I've been twiddling around with line-height but NOTHING I DO alters this in the slightest. BTW the "a" class is nothing but font-size: .75em my next test is to take that out and see if that helps, but I don't have a clue what is the root cause of this. This should be so ffing basic!!! Removing the "a" class didn't work. Here is a little context: Code: <div> <div style="width:88px; float:left" > <a href="https://estore.villageprofile.com/itemdetail.cfm?nItemid=546&viewby=exhibit&nexhibitID=2&subview=37" target="_blank"> <img src="/images/corv_ebook_cover.jpg" style="width:88px; height:100px" border="0" /> <span class="a" style='line-height: .5;'>FREE Town Guide</span></a> </div> <div style="float: left; width:50px;"> <a href="http://www.corvallisiba.org"><img src="/images/ciba_tiny.jpg" height="33"; width="50" alt="ciba logo" border="0" /> <span style='line-height: .5;'>CIBA Member</span></a> </div> On one of them I took the span out in case *THAT* was causing it and applied the styles to the "<a" tagged item as in the first exmple. NOTHING changed. PLEASE HELP! I've got some text setup in a <div> of mine, and the lines of text are so long that they scroll off the side of the screen. I want these lines to wrap to a new line so they don't scroll off the screen. How do you make text in a <div> not be able to be more wide than like, x% of the screen? To view my problem go to my url he my site Hi all, I noticed that when I give the text-align style as "justify", the words are unevenly spaced to justify the alignment. But it looks really weird if there are only two long words in a sentence and many small letter words in the next line. Can any1 suggest a way to align the text inside a <p> to be evenly spaced as well as justified. How to make the text to hyphenate (i.e split words with a '-' and display it in the next line). Is there a CSS property to accomplish this. I wud be grateful to recieve comments. Thanks in Advance. - John im sure this may be answered somewhere on this forum inside another post, but using search, i could not find anyone who had actually asked this specific question... i found a few posts back in 2002 that never got a responce... i'd hope we'd have an answer 3 years later... anyhow, my question is quite simple... i think.. i have a div that is 50px in height, and has some text inside it.. the text aligned center, and now i want it to vAlign center.. but the CSS doesnt seem to work... my problem is that the text in that field changes quite often, and having to constantly change margins in CSS would be a pain. anyhow, now for a snippit Code: .advertboxtitle { margin:10px 0px 0px 110px; height:50px; border:1px dashed #900; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#CCFFFF; font-weight:bold; text-align:center; } .advertboxtitlevalign { vertical-align:middle; } Code: <div class="advertboxtitle"> <span class="advertboxtitlevalign">From X-Box to Xbox</span> </div> anyhow, reason why it is in a span is because i read that inline elements react to vertical-align:middle... but apparently not... anyhow, here is a link.. http://defunctgames.com/helpfix/middle.htm the text needs to be align verticaly in the dashed red box. thanks I am working on a site and I have a lot of the design worked out but I am running into a problem. The client wants to two columns. one in the center with a background image and a second off to the side as a sidebar. The second div is working as I want it to so far but the problem is placing the background image on the first div and getting the text to appear on top of it. Any help would be appreciated. Code: <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } img#bg { position:fixed; top:0; left:0; width:100%; height:100%; } #content { position: absolute; top:75; left:180px; z-index: 1; width: 800px; height: 600px; background-image:url('WEROCK-NETWORK-BG2.png'); } } #sidebar { position: absolute; top:95; left:1000px; z-index: 1; width: 175px; height: 600px; background-color: #FFFFFF } } </style> <!--[if IE 6]> <style type="text/css"> html { overflow-y: hidden; } body { overflow-y: auto; } img#bg { position:absolute; z-index:-1; } #content { position:static; } </style> <![endif]--> <script language="JavaScript"> function maximizeWin() { if (window.screen) { var aw = screen.availWidth; var ah = screen.availHeight; window.moveTo(0, 0); window.resizeTo(1024, 768); } } </script> <body onload="javascript:maximizeWin()"> <img src="WEROCK-NETWORK-BG.png" alt="background image" id="bg" /> <div id="content"> test </div> <div id="sidebar">Sidebar test</div> </body> </html> I am having two problems with a theme I have for PHPBB3. One problem is the text that you type into textboxes when making a new post, updating your profile, or a few other spots is white on a very light grey background; therefore, hardly showing up. The second problem is that the page display a white line at the bottom of a few pages (but not others) and the line goes away if you resize the IE window smaller, but reappears again if you full screen it. I know the first problem has to exist in the stylesheet.css file; however, I am not sure where to make these changes as I am not familiar with PHPBB stylesheets. If anyone could help it would be greatly appreciated. Thanks! Forums: Click Here Stylesheet: Click Here Pictures of my problems: Text problem- Line Problem - Seems that if class's are applied to individual TD tags, no matter how i try to implement row highlighing, the TD class will overide the highlighting color. A simple way to implement row highlighting is: <TR onmouseover="this.style.backgroundColor='navy';" onmouseout="this.style.backgroundColor='grey';"> however, a TD with a class that set's a DIFFERENT backgroundColor will disregard the TR mouseover. Any help? Hey everyone, the admins have implemented a new hack to the forums, allowing you to post your code with nicely coloured text rather than just the normal black or the old php stuff. More details can be found he http://forums.devshed.com/t279108/s.html Html code: [hig hlight=html4strict]your code here[ /highlight] For example: html4strict Code: Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <h1 class="header_text"> Nice One! </h1> <p id="main_content"> <span style="color:red;">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html>
The same goes for CSS highlighting: [hig hlight=css]your code here[/high light] css Code: Original - css Code /*Comments*/ body { property:value; } body, div { property:value; }
As you can see from the thread I linked, there are many many other languages supported, but these three examples are more likely to be used than any other in this particular forum... Have fun with it, and please do use this feature, I'm sure it will make things much easier for us to read/understand, rather than just posting chunks of code. Enjoy! --Jon. I have created a bit of CSS similar to the way faqs are expanded and contracted by clicking. It constitutes a list of maxims some of which are further expanded and some of which are not. An example of this is displayed here, http://yogaredux.meripol.net/node/12. What I am looking for is some kind of CSS which is content depended. If the answer part is filled I want it to have a different colour from when it is empty. Is there any kind of Javascript, CSS or a combination of the two that can implement it? H all, I have a horizontal navigation bar which basically looks like this: Thing0 | Thing1 | Thing2 | Thing34 What I want to do is when I select a link to a new page, I'd like (using CSS) to have that link highlighted so that the user can see which page he is on. It's either that or hardcoding the name to each page...but since it's already in the Nav bar, I thought highlighting the link on the nav bar serves as a heading as well... Possible? |