CSS - Acronyms Displaying Underlined In Firefox
Similar TutorialsHello All, I have an image with a text label to the right that is linked. Now, I want a little whitespace between the image and the text, so that the text doesn't butt up right against the image. To accomplish this, I could use a non-breaking space ( ) However, the space then becomes part of the link and it gets underlined. So, by adjusting the image's margin (or padding) CSS, I can achieve the desired result... at least in Internet Explorer. Firefox/Safari/Chrome seem to underline a linked image's margin as well. I tried using "padding" CSS instead, but produced the same result. How can I get Firefox/Safari/Chrome to underline JUST the text in a link, and not the image (and it's margin) as well? This is how the code is displayed in IE: http://img407.imageshack.us/img407/2360/pfieeu9.jpg Firefox/Safari/Chrome: http://img407.imageshack.us/img407/5421/pffirefoxvv1.jpg You can see the little extra "nubbin" of underline between the icon image and the text. CSS: Code: a.red10ullink:link {color: #a80000; font-size: 10pt; font-family: arial; text-decoration: underline;} a.red10ullink:visited {color: #a80000; font-size: 10pt; font-family: arial; text-decoration: underline;} a.red10ullink:hover {color: #333333; font-size: 10pt; font-family: arial;} img.icon {vertical-align: middle; border-width: 0px; margin: 0px 5px 0px 0px;} HTML: Code: <a href="somepage.html" class="red10ullink"><img src="icon_pf.gif" alt="" width="20" height="20" class="icon" />Printer Friendly</a> Thanks! I'm working on a client's website and trying to get the navigation menu to look right in firefox, for some reason it seems to ignore all width properties and the table cells overlap, but only in firefox. IE displays it perfectly, any help would be appreciated. www.entsource.com/hcs/ It is source viewable and the css code follows: a.nav { color: black; text-decoration: none; border: 1px solid #6D92A2; width: 150px; padding: 2px; font-family: tahoma; font-size: 11pt; text-align: center; } a.nav:hover { color: #F80808; text-decoration: none; border: 1px solid #F80808; width: 150px; padding: 2px; font-family: tahoma; } table.pane { width: 900px; } td.nav-cell { width: 155px; border-right: 2px solid #6D92A2; } td.main { width: 750px; padding: 10px; } hr { color: #6D92A2; height: 1px; width: 400px; } strong.header { color: white; background-color: #CCCCCC; width: 700px; height: 20px; border-top: 1px black solid; border-bottom: 1px black solid; font-size: 16pt; font-family: tahoma; } strong.bold { color: black; font-size: 16pt; font-family: tahoma; } I am using the below CSS to display a photo at the top of my pages. The CSS worked fine with the original photo (using a template) on both firefox and IE. However, when I changed the photo for my own it stops appearing on IE. Firefox displays the picture perfectly, and the div that holds the image is sized correctly (shows as white space on page). Does anyone know why this may be happening? I am using IE 7. The rest of the CSS is working, even the links to other images I use as backgrounds. Code: #header-photo { clear: both; height: 200px; width: 790px; margin: 0 auto; background: #FFF url(header-photo.jpg) no-repeat center center; } Do screen readers already spell out URLs or do you have to set speak: spell-out; as in: a { speak: spell-out; } And how to handle acronyms in URLs- wrap the whole url in an acronym tag or vice versa? Hello Can anyone tell me where this code is going wrong, works fine in IE, firefox shows all the menu under one another. Here is my code - css Code: div#menuContainer { width:146px; position:absolute; margin:0px; background:#ffffff; height:400px; } ul#mainMenu{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-left:1px solid #ffffff; font-family:verdana, arial, helvetica; font-size:12px;} ul#mainMenu li{ margin:0; padding:0; display:block; float:left; position:relative; width:146px; } ul#mainMenu li a:link{ padding:4px 0; display:block; text-align:center; text-decoration:none; background-color:#333333; color:#ffffff; width:146px; height:25px; border-right:1px solid #ffffff; border-top:1px solid #ffffff; font-family:Arial, Helvetica, sans-serif; font-size:16px;} ul#mainMenu li a:visited{ padding:4px 0; display:block; text-align:center; text-decoration:none; background-color:#999999; border-top:1px solid #ffffff; border-right:1px solid #ffffff; color:#ffffff; width:146px; height:25px; font-family:Arial, Helvetica, sans-serif; } ul#mainMenu li a:hover{ padding:4px 0; display:block; text-align:center; text-decoration:none; background-color:#666666; color:#ffffff; width:146px; height:25px; border-right:1px solid #ffffff; border-top:1px solid #ffffff; font-family:Arial, Helvetica, sans-serif; } ul#mainMenu li a:active{ padding:4px 0; display:block; text-align:center; text-decoration:none; background-color:#999999; color:#ffffff; width:146px; height:25px; border-right:1px solid #ffffff; border-top:1px solid #ffffff; font-family:Arial, Helvetica, sans-serif;} ul#mainMenu li ul.subMenu { display:none; margin:0; padding:0; list-style:none; position:absolute; left:147px; top:0px; padding:1px 1px 0 1px; border-right:1px solid #FFFFFF; background:#ffffff; z-index:1000; } ul#mainMenu li:hover ul.subMenu{ display:block; } ul#mainMenu li ul.subMenu li{ width:146px; clear:left; } ul#mainMenu li ul.subMenu li a:link { clear:left; background-color:#000066; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; } ul#mainMenu li ul.subMenu li a:visited{ clear:left; background-color:#000099; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; } ul#mainMenu li ul.subMenu li:hover a{ clear:left; background-color:#000099; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000;} ul#mainMenu li ul.subMenu li a:active{ clear:left; background-color:#000099; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000;} ul#mainMenu li ul.subMenu li a:hover{ clear:left; background-color:#000099; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; } ul#mainMenu li ul.subMenu li ul.subMenu1{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:147px; top:-2px; padding:1px 1px 0 1px; border-right:1px solid #FFFFFF; background:#ffffff; z-index:900; } ul#mainMenu li ul.subMenu li:hover ul.subMenu1{ display:block; } ul#mainMenu li ul.subMenu li ul.subMenu1 li a:link{ background-color:#000099; } ul#mainMenu li ul.subMenu li ul.subMenu1 li a:visited{ background:#000099; } ul#mainMenu li ul.subMenu li ul.subMenu1 li:hover a{ background:#000099; } ul#mainMenu li ul.subMenu li ul.subMenu1 li a:hover{ background:#000099; } ul#mainMenu li ul.subMenu li ul.subMenu1 li a:active{ background:#000099; } ul#mainMenu li ul.subMenu li a span{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; } ul#mainMenu li ul.subMenu li:hover a span{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; } ul#mainMenu li ul.subMenu li a:hover span{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; } html 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=utf-8" /> <title>Untitled</title> <link rel="stylesheet" type="text/css" href="menu_style.css" /> </head> <body> <div id="menuContainer"> <ul id="mainMenu"> <li><a href="#" name="Home">Home</a></li> <li><a href="#" name="Services">Services</a></li> <ul class="subMenu"> <li><a href="#" name="internet marketing">Internet Marketing</a></li> <li><a href="#" name="web development">web development</a></li> <li><a href="#" name="e-commerce">e-commerce</a></li> </ul> <li><a href="#" name="About">About Us</a></li> <li><a href="#" name="case studies">Case Studies</a></li> <li><a href="#" name="Jobs">Jobs at toltech</a></li> <li><a href="#" name="Contact Us">Contact Us</a></li> <ul class="subMenu"> <li><a href="#" name="Location">Location</a></li> <li><a href="#" name="Enquiry Form">Enquiry Form</a></li> </ul> </ul> </div> </body> </html> Thanks in advance, gillian can anyone help me figure out why the css javascript menu does not display the same in IE and Firefox? Are there common problems? I've built a website using only div's and I am only having problems with one of them... I have the div with a margin-left : 48px; In IE this aligns the div with a section of text above it (the result I had wanted) however in Firefox it displays about 20pixels to the left of the IE display. If I set the margin-left : 96px; it aligns properly in Firefox but is then messed up in IE. I have an attachment of my code its not very large. Is there any fix for this problem? For some reason the table isn't being positioned properly in firefox, but it is in IE. The attribute top:15% seems to not be used in firefox, does anyone know if I should be doing it another way? Here is my css: Code: div.leftBorder { position:absolute; height:100%; width:15%; background-color:#DDDDDD; } p.imgText{ font-size:18px; position:absolute; left:1%; top:1%; color:#CC0000; } table.menuTable{ position:relative; top:15%; } Here is the html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="specs.css"> <title></title> </head> <body> <div class="leftBorder"></div> <p class="imgText">MEDITECH Interface Specifications</p> <center> <table class="menuTable" cellspacing=0> <!-- Spec number menu Title --> <tr> <th class="menuTitle">Spec. Number</th> <th class="menuTitle">Description</th> </tr> <!-- Spec number menu --> <tr> <td class="menuSpec"><a href=".\R404.htm" target="iframe">R404</a></td> <td class="menuDesc">MEDITECH MAGIC C/S Admissions System to Other Vendor Ancillary System</td> </tr> <tr> <td class="menuSpec"><a href=".\R469.htm" target="iframe">R469</a></td> <td class="menuDesc">EDI Integration: ANSI Formats 270 and 271 for Insurance Eligibility </tr> <tr> <td class="menuSpec"><a href=".\R948.htm" target="iframe">R948</a></td> <td class="menuDesc">MEDITECH MAGIC C/S ITS Orders to Other Vendor Image Viewing System</td> </tr> <tr> <td class="menuSpec"><a href=".\R949.htm" target="iframe">R949</a></td> <td class="menuDesc">MEDITECH MAGIC C/S ITS Reports to Other Vendor Image Viewing System</td> </tr> <tr> <td class="menuSpec"><a href=".\R953.htm" target="iframe">R953</a></td> <td class="menuDesc">Other Vendor Image Status Updates to MEDITECH ITS Application</td> </tr> </table> <iframe name="iframe" frameborder=0 marginwidth=10 width=70 height=70></iframe> </center> </body> </html> I am trying to create a text box that has no border but has the entired box appear to be underlined. That is, I would like a 20 char box to appear like it has 20 underscores in it. However, I do not want to use a mask to do this, since I do not want any underscores in it. I want this to look like a host-based program. I don't want the text to show up as underlined as it's typed in, I would like it to appear just as an already underlined text box. So we can say that I want to record First Name and Last Name. so it would look like First Name:____________________ Last Name:____________________ Any ideas on how to do this? here is my code so far Code: input.termbox {color:#3333FF; background-color: #FFFFFF; font-family:Terminal; font-size: 15px; text-decoration:none font-weight: normal; border: none; Here is a quick visual layout of my page (container) (div banner) (div left column) (div middle content) (div right column) (div footer) In my (div left column) is a list that is aligned right which works great. However, lower in the (div left column) I wish to make another list and align it left. The problem is it won't align all the way to the left. It stops at about the center of the div. I didn't notice it on the first list because it aligned right just fine but it also stops in the middle. Here is the HTML: (go easy on the coding, I'm still pretty new at this stuff) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" href="css/common.css" type="text/css" media="screen" /> <title>Las Vegas Floor Care</title> </head> <body id="body"> <div id="container"> <div id="banner"> </div> <div id="content"> <div id="content_left"> <div class="links"> <ul class="list"> <li><a href="index.htm"><span class="list_big">H</span>OME <span class="list_big">P</span>AGE</a></li> <li><span class="list_big">R</span>ESIDENTIAL</li> <li><span class="list_big">C</span>OMMERCIAL</li> <li><span class="list_big">C</span>ONTACT <span class="list_big">U</span>S</li> </ul> </div> <div class="special_offers">Special Internet Offers</div> <img class="image_center" src="images/coupon.jpg" /> <ul class="list_offers"> <li>Test 1</li> <li>Test 2</li> </ul> </div> <div id="content_middle"> <div id="content_middle_top"> </div> <p class="text"><img src="images/slogan.jpg" style="float:left; margin-right:2px" /> At Las Vegas Floor Care we use Prochem truck mount extractors, which have been rated number one for over 30 years. We also use the Bridgpoint brand of treatment solutions that are eco friendly, pet friendly, and are even biodegradable. We offer carpet repair, cleaning, and protection making you get more out of your carpet no matter what the situation. We also offer 3 different types of tile cleaning to fit the condition of your tile and your pocket book.</p> <br /> <p class="text">We cater to all aspects of cleaning ranging from the average home owner who wants clean floors to the executive who needs to keep their office in tip top shape, and everything in between. There is no job too big or small. We offer several service packages for home owners with yearly service contracts.</p> <div id="content_middle_bottom"> </div> </div> <div id="content_right"> <img class="image_center" src="images/contact.jpg" /> <div class="side_text">If you have questions or would like to schedule a cleaning, please contact us at <span class="contact_number">(702) 756-0148</span>.</div> </div> </div> <div id="bottom"> <img src="images/bottom_top.jpg" align="top"/> <p class="bottom_text"> Phone: (702) 756-0148 <br /> Fax: (206) 350-7320 <br /> </p> </div> </div> </body> </html> Here is the CSS: Code: #banner {position:relative; width:700px; height:130px; clear:both; background-image:url(../images/banner.jpg)} #body {text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; background-image:url(../images/bg.jpg); margin-top:20px; background-position:center} #bottom {position:relative; text-align:right; width:700px; clear:both; background-color:#970000} .bottom_text {font-family:Calibri; font-size:14px; text-align:right; margin:0px 8px 0px 4px; color:#CCCCCC} .contact_number {font-family:Calibri; font-size:12px; color:#970000} #container {width:700px; margin-left:auto; margin-right:auto; text-align:left} #content {position:relative; width:700px; overflow:auto; background-image:url(../images/content_bg.jpg); background-position:center} #content_left {float:left; width:138px; margin-right:5px; clear:left} #content_left_bottom {width:138px; background-color:#FF3399} #content_left_top {width:138px; background-color:#FF3399} #content_middle {float:left; width:414px} #content_middle_bottom {width:414px; height:100px; background-image:url(../images/middle_bottom.jpg)} #content_middle_top {width:414px; height:30px; background-image:url(../images/middle_top.jpg)} #content_right {float:left; width:138px; margin-left:5px; clear:right} #content_right_bottom {width:138px; background-color:#00FF00} #content_right_top {width:138px; background-color:#00FF00} .image_center {margin-left:auto; margin-right:auto; text-align:center; display:block} .links a:link {text-decoration:none; color:#666666} .links a:visited {text-decoration:none; color:#666666} .links a:hover {text-decoration:underline; color:#970000} .links a:active {text-decoration:none; color:#970000} .list {font-family:Calibri; font-size:14px; list-style:none; text-align:right; margin:0px 4px 20px 4px; border-bottom:solid; border-bottom-width:1px; border-bottom-color:#666666; padding-bottom:10px; padding-right:4px; color:#666666} .list_big {font-family:Calibri; font-size:18px} .list_offers {font-family:Calibri; font-size:12px; list-style:none; text-align:left; margin-left:0px; overflow:auto; color:#666666} .side_text {font-family:Calibri; font-size:12px; text-align:justify; margin:0px 4px 0px 4px; color:#666666} .special_offers {font-family:Calibri; font-size:18px; text-align:center; margin-left:4px; color:#970000} .text {font-family:Calibri; font-size:14px; text-align:justify; margin:0px 4px 0px 4px; color:#666666} Thanks ahead of time for any help. Hi there, I customized the content module so the title of an article displays an image before the text and the text is displayed with two colors!! The relevant part of the code is at follows: Code: <h2 class="title"> <?php if ($params->get('link_titles') && !empty($this->item->readmore_link)) : ?> <a href="<?php echo $this->item->readmore_link; ?>"> <div><span class="image-title"></span> <?php $titles = explode(" ",$this->item->title); for ($i=0; $i<count($titles)-1; $i++){ echo '<div style="float:left;padding-left:7px;color:#303030;">'.$this->escape($titles[$i]).'</div>'; }?> <div style="color:#06cfef;float:left;padding-left:7px;"><?php echo $this->escape($titles[$i]);?></div></div></a> <div style="clear:both;height:0px;"></div> <?php else : ?> <div><span class="image-title"></span> <?php $titles = explode(" ",$this->item->title); for ($i=0; $i<count($titles)-1; $i++){ echo '<div style="float:left;padding-left:7px;">'.$this->escape($titles[$i]).'</div>'; }?> <div style="color:#06cfef;float:left;padding-left:7px;"><?php echo $this->escape($titles[$i]);?></div></div> <div style="clear:both;"></div> <?php endif; ?> </h2> In both IE and Google Chrome everything is displayed as wanted (apart from ie which has some positioning problem but i'm not focusing on that now) In firefox, I can see the content loading correctly but just before the page finish loading the image disappears... I just can't understand why!! You can take a look at this url: Can anyone please help?? Thanks Hello, a bit of a .css n00b and needs your help. After changing a .css sytle sheet to suit my a needed color shceme the links become underlined when the color is changed. Anyone willing to to tell why. Any help appreciated. A sample of the link code: /*- Links */ #primary a:hover, #primary a:visited:hover, .secondary a:hover, .secondary a:visited:hover { text-decoration: none; } h2 a:hover, h2 span a:hover { color: #423525 !important; <!---27d to 423525 --> text-decoration: none; } a{ color: #423525C; <!---27d to 423525 --> text-decoration: none; } .itemtext a:visited { color: #b41; } Thanks. I have a div on a web page set up so that all the links inside that div should not be underlined. Works great on every OS and browser I have tested it on... except one particular computer running Windows XP and Internet Explorer 8. That computer shows the links underlined. Other computers running Windows XP and Internet Explorer 8 show the links not underlined as intended. Is there some kind of personal browser setting in Win/IE8 that overrides the style sheet? I looked in Internet Options and found the option to underline links Always/Hover/Never, but that option seems to be set to always by default, and does not override the style sheet on other computers. 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. Hi everyone A bit of a call for help with some niggly issues - all found on the following page and css: http://www.crashingbydesign.com.au/rsaa/index.html http://www.crashingbydesign.com.au/rsaa/home.css 1. Two of the absolutely positioned divs don't show up at all in IE6, but they're fine in Opera 7.5 and Firefox 1.0PR. The ones with id's "title" and "utility" are the problem ones and I can't see what the problem is with IE. In addition to this, this div shows up in a different position in both Opera and Firefox (10 pixels higher in Opera). Please help!! 2. The links in the "mainnav" div are only clickable either at the very top of the <a> element (Firefox) or the very bottom of the <a> element (Opera), however in IE the whole <a> element is completely clickable. I can't see any element that is overlapping. What is going on?? All help appreciated. Cheers Bevester Hi, I'm using a right-to-left layout and I can't find a way to display my list items correctly on Firefox. When I insert something into the rtl div with a float, the list item does not wrap correctly. 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> <style type="text/css"> <!-- #content { margin:0 200px 0 20px; border: 2px solid #000; direction:rtl; } #floatdiv { width:100px; height:100px; margin:10px; border: 1px solid #000; float:left; } --> </style> </head> <body> <div id="content"> <div id="floatdiv"</div> <p>This is a test</p> <ul> <li>item 1</li> <li>item 2</li> </ul> </div> </body> </html> Is there a problem in my code? Thanks, Ehud. I've got two questions of which one is to gather some opinions to help me decide what's best. 1) color notation in CSS: Any recommendations as to what notation I should use? examples: color: rgb(255,234,0) color: slateblue color: #FF99CC color: #F9C Is there some recommendation here? I'm quite used to the long hex notation e.g. #FF99CC. Is the short notation also very much accepted? And should I be using those at all or should I prepare myself with a new site to switch to rgb(). 2) text-decoration yes or no? I was thinking the following: A) when it's absolutely clear that some text presents a link, like e.g. in a menu or some newscolumn with a brief description and a bold title, then it's "okay" to set text-decoration: none. Maybe an underline or colorchange when hovering. B) When it's not absolutely clear what's a link, like some word in a paragraph text, use underline or at least some other colour which is consistent over the website for being a link. Also, with point B I was thinking of choosing: A new link: text-decoration with color and text-decoration gone with hover, for a nice effect. With a visited link: I) text-decoration but normal paragraph color and again text-decoration gone when hovering OR... II) no text-decoration, but still with that color and text-decoration when hovering. It troubles me coz I can't make up my mind. Something keeps telling me that I should try to keep those text-decorations like with B-I and simply remove the colour, instead of relying on colour to indicate a link. So forget about B-II?! Ah, it was this site which works on my conscious not to rely on color for links: http://lists.w3.org/Archives/Public/www-style/2003Mar/att-0002/01-part#colorunits Anybody got some comments or tips? And yes also some tip on the CSS I want things to be "user-friendly" enough, but this also means that I don't want text to be broken up too much. Some people even suggested that I should take ALL links out of the paragraph and simply mention them below the paragraph. All good points, but which way to go I'm trying to make a small box that is entirely clickable with text inside that is not underlined. Could someone explain to me why this code does not work, and what I need to do to fix it? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <style type="text/css"> * { margin: 0; padding: 0; } body { font-family: helvetica; padding: 30px; } .box { width: 250px; height: 75px; padding: 40px 10px 10px 25px; background: #FFCE4E url('images/gradient_bg.jpg') repeat-x; border-radius: 5px; border: 1px solid #E8A935; } .box h3 { font-size: 19px; color: #333; padding-bottom: 5px; } .box p { font-size: 14px; color: #CC0000; font-style: italic; } a .box { text-decoration: none; } </style> </head> <body> <a href="#"> <div class="box"> <h3>Main text goes right here.</h3> <p>Smaller italicized text goes here.</p> </div> </a> </body> </html> My logo is defined as a background image in my .css. It appears in IE when I print/print preview, but in FF it does not. This is the .css code for the logo div: #logo { float: left; margin-left:1px; width: 200px; background:url(../images/mm-logo.jpg) no-repeat; height:50px;} Any ideas or suggestions? |