CSS - Changing How Links Are Shown ...
I've changed how links are rendered - problem is that I can't stop same thing being done on images as links.
Code: a { text-decoration: none; border-bottom: 1px dotted; } a:hover { text-decoration: none; border-bottom: 1px solid; } And it works great on ordinary links (<a href="#">Text here</a>) but I cant turn it off when I have an image as a link (<a href="#"><img ... /></a>). I tried this : Code: a img { border: none; /* tried border: 0px; also */ } img { border: none; /* tried border: 0px; also */ } And it doesn't work The only way I could achive the result is to specify an class for each link: Code: .img-link { border: none; } .img-link:hover { border: none; } // in HTML <a href="#" ... class="img-link"><img ... /></a> Similar TutorialsIs there a way to tell the browser not to change the color of a visited link? I have an anchor around some text, but I don't know the color setting of the text. When I visit the link, I just want the text to retain its color based on the other CSS declarations in effect for the text. So, is there a way to specify a:visited { color: do-not-change; }? When you go near a link the cursor flickers and then goes back to default, cant get it to show normally for any link. Works on my windows PC but not on my Mac Even tried a{ cursor:pointer; } but the same thing happens... http://pd-scammell.co.uk/site/ Any ideas? Thanks. I have differences between how elements I state in CSS are shown. Sometimes it's IE that makes the problems (mostly with overflow) but this time it's FF. I have a content, to which I decided to make a "wrap" border from right and left (shown in red on the screenshots). The name of the element is #content_wrap. Could you take a glance at the links below and help me out finding the problem that causes this difference between the display in IE and FF? The way I see the page using IE (the way it's supposed to be - shown via green) The way I see the page using FF (the wrap is not at it's full height - show via green) The complete page (the CSS is included in the html file) P.S. If you have any other comments and suggestions, they are welcome. The code for the problem are below. I have two examples in my html file. One using styles directly and one using styles via a file. The styles are identical. The first div tags that uses styles directly shows correctly, but the other div tags doesn't even show at all - or at least not with 'height' in '.page' set to 'auto'. If it's set for example to 200px that div will show but not the sub ones. This is strange since if using the same styles directly this isn't even a problem at all. Code: <!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"> <head> <title>Testing...</title> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body style="margin: 0px; padding: 0px; text-align: center; background-color: #A0A0A0"> <div style="position: relative; width: 950px; height: auto; margin: 10px auto; padding: 0px; background-color: #FFFFFF"> <div style="position: absolute; top: 0px; left: 0px; width: 950px; height: 150px; margin: 0px; padding: 0px;"> <div style="position: absolute; top: 0px; left: 0px; width: 20px; height: 150px; margin: 0px; padding: 0px; background-color: #C08080;"></div> <div style="position: absolute; top: 20px; left: 30px; width: 890px; height: 130px; margin: 0px; padding: 0px; background-color: #80C080;"></div> <div style="position: absolute; top: 0px; left: 930px; width: 20px; height: 150px; margin: 0px; padding: 0px; background-color: #8080C0;"></div> </div> </div> <div class="page" style="top: 200px;"> <div class="header"> <div class="header-left"></div> <div class="header-image"></div> <div class="header-right"></div> </div> </div> </body> </html> Hello, I am using image borders and the CSS I have works on FireFox, Chrome, Opera and Safari, but not IE. Here is my CSS and HTML; Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="" > <head> <style> div { width: 200px; margin: 0px auto; border-width: 0px 2px 0px 2px; -moz-border-image: url(b.PNG) 0 41 repeat; -webkit-border-image: url(b.PNG) 0 41 repeat; -o-border-image: url(b.PNG) 0 41 repeat; border-image: url(b.PNG) 0 41 repeat; } </style> <head> <body> <div>Hello this is my test <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div> </body> </html> I have tried it on IE6 to 8 and image borders show on none of these. Is there any hack/way how to support image borders also on IE? Hi, I have a table with a scroll bar. My problem is that it works in ie but not in mozilla,netscape7.1, firefox...When I load the page in mozilla, the table is not shown, it's as if it were set to hidden, and it's really weird because the first time that I load the page, the table is shown with the scroll bar just for a moment and then hides..... I used a div tag that contains the table to be shown. I've tried different things as changing the z-index, using the display attribute, but none of them worked. Here is the style defined for the div tag: Code: div.tableContainer_plegado{height: 420px; overflow: auto; width:100%;} Please help me! Thanks in advance! Hello, I have a weird problem with IE7. My solution works fine on FireFox, IE8 and even IE6, but on IE7 the button image does not want to load. Here is the HTML and CSS. Code: <!DOCTYPE html> <html> <head> <style> .sayhello{ background: url("hello.png") no-repeat scroll 0 0 transparent; border: medium none; height: 49px; margin-top: 10px; text-indent: -9999px; text-transform: capitalize; width: 85px; } </style> </head> <body> <input type="button" onclick="javascript:alert('hello');" value="Say Hello!!" class="sayhello"> </body> </html> I can get the button to show if I set the button as position:absolute or else display:block. However these would create me other problems. Is there any other way how I can get the button to show? considering I want to show the button in relative position and next to other buttons. Hi all, I use an background image for a menu. Code: #menu a, #menu a:hover { height: 20px; width: 150px; text-decoration: none; padding-left: 40px; padding-top: 3px; padding-right: 3px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 11px; margin-bottom: 10px; background-position: 0px; vertical-align: middle; } #menu a { color: #9E007F; background-image: url(../imgs/nav/subNav/subNav_bg.gif); background-repeat: no-repeat; } #menu a:hover { color: #FFF; background-image: url(../imgs/nav/subNav/subNav_bg_over.gif); background-repeat: no-repeat; } It works fine in IE but not in firefox. Somehow the background image is not completely shown. It stops after the last letter. Any suggestions?? Grtz, I am using an external CSS where I am defining the color of my links when un-visited, visited etc. The problem is in Netscape 7.1/7.2 those links which are calling my other pages, are being shown up as visited when clicked,. But those where I say href='javascript:void(0);my js function' are not being shown with the correct 'visited' link color. They are being shown in the color specified for 'un-visited' links!! Can someone help?? Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them. HTML Code: div id="bar-links"> <center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td> </tr> <tr> <td background="images/barlist_02.gif" width="20"></td> <td background="images/barlist_03.gif" width="456"> </p> <div id="bar-links"> <h4><a href="#" title="Riley's Pub">Riley's Pub</a> <a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> <a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> <a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> </h4> </div> </td> <td background="images/barlist_04.gif" width="24"></td> </tr> <tr> <td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td> </tr> </table> </div> CSS Code: #bar-links { text-indent:inherit; text-align:left; } Hi, how can I set the <a> tag (of <a href...) to be of some color in one div and some other color in another div? Anyone know why the margins change on the links when I hover over them with IE. (check left column navigation) http://section31.us/temp/tortilla/tortilla.html Note: This works fine on firefox, but goes ape**** on IE. I need some help. I'm starting out with php and i'm already stressing out. Here's the challenge: I have to make a page that contains 3 radio buttons the radio buttons control which color font you'll like to display on that page the page must reference itself (no outside css stylesheet) I must use the switch function to switch the stylesheet. So far, this is what I have. Can someone help me figure out what I'm doing wrong? Thank you. Dan --------------clipping starts here--------------------- <html> <head> <title></title> <body style="font-family:Arial, Helvetica, sans-serif; color: green;"> </table> <tr> <td> <form name="stylecolor" method=POST" action asgn_2j.php"> Green <input type="radio" name="style" value="a"> Blue <input type="radio" name="style" value="b"> Red <input type="radio" name="style" value="c"> <INPUT TYPE=HIDDEN NAME=stylecolor VALUE=true> <INPUT TYPE=submit NAME="SUBMIT" VALUE="Submit"> $stylecolor=$HTTP_POST_VARS['stylecolor']; switch($stylecolor) { case 'a' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: green;">)' ; case 'b' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: blue;">)' ; case 'c' echo '(<body style="font-family:Arial, Helvetica, sans-serif; color: red;">)' ; default: echo 'you didn't choose' ; break; } </form> </td> </tr> </table> </body> </html> Hello, I have been looking all ovet the forums and google and cant find a code to do this. what i am trying to do is when someone prints a page, i want the footer that is automataly printed at the bottom of the page to change. Lets say your on www.yahoo.com and you print the page. the footer will say http://www.yahoo.com what i am trying to find is a code that i can change the footer to say whatever i wanted. so if your on yahoo.com and press print it says "HELLO" (for example). Thanks In Advance. I'm revamping my personal webpage. (What I've done so far is at http://homepage.mac.com/johntstuart/mockup/ ) I've been told there is a way for JavaScript to replace the content of a DIV, when the user selects from the navigation. Can anyone point me in the direction of this JavaScript? And any tutorials? hey all, so im way behind the times when it comes to creating webpages with div's instead of nested and renested tables. I can nest tables with the best of them but when it comes to using div's and css instead i just can't figure out how to precisely place things! Does anyone know of a guide that explains how to use divs effectively instead of tables? thanks - legit I have a header.inc and a css style sheet that are called to each page of a website via php. In the style sheet there are two styles that I would like to change depending on the section of the website. For example: in the style sheet css id "subnav" has background: #E8EDF5 and cssi id "subtitle" has background #E8EDF5 however in each major section of the website I would like to change the background colors of the divs that have id "subnav" and "subtitle". Is there type of php statement that I could place at the top of my website pages that would allow me to specify the colors of these two css ids? Hope I have made this clear. Hi am looking for help changing a form select box with css. I am trying to get the select box in line with the rest of the scroll boxes and arrows on my site.... http://www.peteromoore.com/site3/brochure.htm is there any way to change the select box arrow to match the arrow beside it??? any help would be appreciated. Hello first of all I'm new here Well I have a linked css file where I define some basic style for <a> tag. But there are some <div> where I want to override the basic <a> defines and I have no idea how. Here is what I mean: Code: a{ color: #ffffff; } .someDivClass{ ..some defines.. But here I also want to make <a>'s color red for example. } Hope you understood me Thanks a lot. I have an existing two column layout that uses a 175px left border to create the column. This layout is terrible. It creates all kinds of problems in Firefox. I just need to make it more simple. I know there are better ways to create a 2col layout, if some of CSS experts here could help, I'd be grateful. Also, all divs have to stay in their place in the code. The page is here |