|
CSS - Odd Css Problem With Links
I'm having a problem with CSS and links. The class for the links is correctly added to the anchor tag and there is nothing wrong with the code. The links are supposed to remain the same except when hovering which all it does then is change the color of the text and put add an underline. However when testing this out, it doesn't work in FF at all and in IE it's fine until you click the link and then it goes back to acting like FF does. It almost appears as if the .link:visted part was setup differently than the rest, but it's not. Here's the code:
Code:
a.navtextlink:link{
color: #666666;
font-weight: none;
text-decoration: none;
}
a.navtextlink:active{
color: #666666;
font-weight: none;
text-decoration: none;
}
a.navtextlink:hover{
color: #000000;
font-weight: none;
text-decoration: underline;
}
a.navtextlink:visited{
color: #666666;
font-weight: none;
text-decoration: none;
}
If you want to view a live sample, you can do so here. Thanks for any help you can provide. Similar TutorialsGuys, no time to introduce myself or anything I've been beating my head with this for half an hour now Baiscly I have a div box 700x20px .. And i want a couple of links to be inside it and aligned in the middle of the div (Vertically). However what works in opera doesnt work in FF and IE (all latest versions). And vice versa. If it works in IE it doesnt work in Opera. here's a screenie i5.tinypic.com/544biwz.jpg i have also upped it online he fotoz.hit.bg/new-transitional.html View Source and you can view the whole css, i still havent moved it to seperate file, cuz im not finished with the desgin itself. Thanks in advance! I guess I am not understanding how this works. I am having a problem with creating font/color styles on sublinks. I want all site wide links to be the 12px blue. And the links on my submenu I want to be 10px white. How do I achieve this? Heres my code: a:link { font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif; font-weight: normal; font-size: 12px; color: #000066; } a:visited { font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif; font-weight: normal; font-size: 12px; color: #000066; } a:hover { font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif; font-weight: normal; font-size: 12px; color: #0099FF; text-decoration: none; } a:active { font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif; font-weight: normal; font-size: 12px; color: #000066; } .sublinks a { color:#FFFFFF; font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif; font-weight: normal; font-size: 10px; text-decoration: none; } .sublinks a:visited{ color:#FFFFFF; font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif; font-weight: normal; font-size: 10px; text-decoration: none; } .sublinks a:hover{ color:#0000FF; font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif; font-weight: normal; font-size: 10px; } .sublinks a:active{ color:#0000FF; font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif; font-weight: normal; font-size: 10px; text-decoration: none; } And here are my links: <div align="center" class="sublinks"><a href="index.php?page=areasofpractice">Areas of Practice</a></div> and the page is: http://www.caffreysmith.com As you can see, the links are not taking css effect. Please help! If you go to www.brightfusehosting.com/newindex.php you'll see what I mean. The nav menu is screwed up, and the links on the gray tables resemble that almost of the nav bar links. View in IE to replicate the issue. I am useing this css code : Code:
a.buttonlike:link, a.buttonlike:visited,
a.buttonlike:hover, a.buttonlike:active {
text-decoration:none;
vertical-align:middle;
background-color:#dddddd;
color:#000000;
height:16px;
padding:3px;
margin: 0px 2px 0px 0px;
border-left:1px solid #ffffff;
border-top:1px solid #ffffff;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
text-align:center;
font-size: 12px;
}
to make the "buttons" on the right side of this page : http://tampabay-online.org/eventdet...erby=firstnames but when I change the margin top (because it doesn't quite fit right from Code: margin: 0px 2px 0px 0px; to Code: margin: anythingpx 2px 0px 0px; it doesn't seem to make a differance, it stays right where it is. and adding a <br /> to the line before it makes the "buttons" too far down. Any ideas? Thanks Hello all, I am trying to style links on my page and cannot figure out how to do so. I am using a JQuery Framework and perhaps somehow that is messing me up. attached are the two Jquery javascript files. I want to make the links blue, please tell me how to do that. Thank you. Code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>jQuery UI Example Page</title> <link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript"> $(function(){ // Tabs $('#tabs').tabs(); }); </script> <style type="text/css"> /*demo page css*/ body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} .demoHeaders { margin-top: 2em; } #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} ul#icons {margin: 0; padding: 0;} ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} ul#icons span.ui-icon {float: left; margin: 0 4px;} .SearchOptions a {color:#990066} </style> </head> <body> <!-- Tabs --> <h2 class="demoHeaders">Tabs</h2> <div id="tabs"> <ul> <li><a href="#tabs-1">Buy Books</a></li> <li><a href="#tabs-2">Sell Books</a></li> </ul> <div id="tabs-1"> <form> <table> <tr> <td>Item 1 <input type="text" name="Item1" /></td> <td>Item 2 <input type="text" name="Item2" /></td> <td>Item 3 <input type="text" name="Item3" /></td> <td>Item 4 <input type="text" name="Item4" /></td> </tr> <tr> <td><a href="" class="SearchOptions">More Search Options</a></td> <td><a href="" class="SearchOptions">More Search Options</a></td> <td><a href="" class="SearchOptions">More Search Options</a></td> <td><a href="" class="SearchOptions">More Search Options</a></td> </tr> <tr> <td>Item 5 <input type="text" name="Item5" /></td> <td>Item 6 <input type="text" name="Item6" /></td> <td>Item 7 <input type="text" name="Item7" /></td> <td>Item 8 <input type="text" name="Item8" /></td> </tr> <tr> <td><a href="" class="SearchOptions">More Search Options</a></td> <td><a href="" class="SearchOptions">More Search Options</a></td> <td><a href="" class="SearchOptions">More Search Options</a></td> <td><a href="" class="SearchOptions">More Search Options</a></td> </tr> </table> </form> </div> <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div> </div> <a href="" class="SearchOptions"> dadadada</a> </body> </html>
This is going to be difficult to explain, but i will try my best. I have a table on my webpage, and the height is not defined as my content will define how much space the table height should take up. In my table, there are two columns. One is for all my content (text/images) and the other is for a link. Now this link is set out like this, Quote: <td width="50" bgcolor="#000000"> <div id="j"><a href="j.html"></a></div></td> Now, my CSS code to style this link is like the following, Quote: #j { display: block; width: 50px; height: 100%; background: url('normal.gif') no-repeat 0% 50% !important; } #j a { display: block; width: 50px; height: 100%; background: url('normal.gif') no-repeat 0% 50% !important; } #j a:hover { background: #FFFFFF url('hover.gif') no-repeat 0% 50% !important; } Now the thing is, the website works great in firefox. Firefox picks up the height 100% great. However, in Internet Explorer, it doesnt pick up the height 100% business. so what occurs, the gif images are displayed at the very top of the column (i think internet explorer somehow interprets it as height="0") Now, what is my easiest solution? This is a real blow in the design of my page because i was just browsing/checking/testing my page in firefox, and when i accidently blew it up into internet explorer. Problems problems problems.. Hello My problem is maybe a easy to solve one, but I realy don't know how to get it right. I have a list of links and want them equaly vertical spaced between all the line of links. link1 (space) link2 (space) link3 What I got doesn't look right in IE and Netscape at the same time. Is there a css tactic to get it right in both browsers? Please can someone help me? Hi I've never posted on a forum before but I am having some css layout issues. Here is an example: URL Basically, only some of the links on the side of the page work. Some just can't be clicked on at all. I have noticed that the ones that can't be clicked on all seem to be parallel with text in the middle column that wraps. It's almost as if the text isn't wrapping in the middle column and carrying straight on and covering the links on the right so they cannot be clicked on. I'm assuming this is something to do with the css as it happens all over the site where the same situation occurs. Has anyone come accross this before or knows how to stop this from happening? Any help would be much appreciated. Also, this only happens in IE not in Firefox. If you need to see the code or the css let me know what you need and i'll post it. Thanks in advance, Bruce I have a problem with a site, first mistake i made was i built it to firefox, without testing along the way (please dont hurt me im new to web design) so i found a lot of problems in ie. So i fixed for ie7,8,9 but in 6 i get some two divs from the content area stacked one on the other at the top of the screen but when a link inside the problem div(s) is hovered they go to where they should be. any ideas about that? I used a script from Dynamic Drive that allows the user to change font on demand (They can size up/down the font on the website). But I ran into problems in that this spilled over to increasing the fontsize of the links (only A but not not rollover). I would prefer that the links are not affected by this script. I would rather the links stay with the sizes I specified in the CSS. Please see the website here to understand what my problem is: nudipu.org.ug/nsites. My intension was to make it as perfect as it is on their sister site add.org.uk Can somebody advise me please? The script I used is located on http://www.dynamicdrive.com/dynamicindex9/textsizer.htm Thank you folks. 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; }
I have set up a CSS file for a website I am building, however, when I click on the links which work correctly (at first) it goes to the desired place, if I go "back" the link turns to a larger italic font. Look here for example. http://www.burrellprolabs.com/newsite.htm if you click on one of the body copy links under "latestNEWS" then go back you will see what I mean. here is my css style for that particular part: .bodycopy { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #575757; text-decoration: none; line-height: 13px; } .bodycopy a:link { color: #BF0000; text-decoration: none; } .bodycopy a:active { color: #BF0000; text-decoration: none; } .bodycopy a:visited { color: #BF0000; text-decoration: none; } .bodycopy a:hover { color: #969696; text-decoration: underline; I was messing around with <ul><li> type nav links, and had some issues with the bullet images I made were too large, so I made it as a background image for the <li> but <li> backgrounds didn't seem to work so well on IE. My question is this, why does everyone use <ul><li> to make their nav links when you can use less code just using <a>'s within a <div>? Here's my code example (bullet.jpg not included, it's just a 30px square I made in photoshop) Code: <html>
<head>
<style type="text/css">
#links li {
text-indent:40px;
list-style-type:none;
}
#links a {
display:block;
line-height:30px;
height:30px;
width:150px;
background:#EEE url('bullet.jpg') no-repeat;
}
#links a:hover {
background:#FFF url('bullet.jpg') no-repeat;
}
#links2 a {
text-indent:40px;
display:block;
line-height:30px;
height:30px;
width:150px;
background:#EEE url('bullet.jpg') no-repeat;
}
#links2 a:hover {
background:#FFF url('bullet.jpg') no-repeat;
}
</style>
</head>
<body>
<div id="links">
<ul>
<li><a href="#">links</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
<div id="links2">
<a href="#">links</a>
<a href="#">link 2</a>
<a href="#">three</a>
</div>
</div>
</body>
</html>
I am not sure if these links count as navigation or not, so not sure if I should be using the UL element for semantic correctness? <div id="footer_bottom" class="bold"> <a href="sitemap.php" title="Sitemap">Sitemap</a> | <a href="accessibility.php" title="Accessibility Options">Accessibility Options</a> | <a href="http://validator.w3.org/check?uri=referer;verbose=1" rel="external" title="Validate XHTML">XHTML Valid</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="external" title="Validate CSS formatting">CSS Valid</a> </div> I have what seemed to be a simple idea but is turning out to bother me. In my style sheet i want to put a base url followed by a user id Link looks like this Code: http://mywebsite.com/this_folder/remote/html_server.php?xw_controller=hitlist&xw_action=set&target_id= Now in my html i have this Code: <table><tr><td >My name<td >Job position<td >606959150</tr> The last td that has the number in it i want to add to the end of the url posted above i cannot figure our what to put in the css to use as the main link and i want to add another td behind the last one with the number in it with the entirelink which should look like this Code: <a target="_blank" href="http://mywebsite.com/this_folder/remote/html_server.php?xw_controller=hitlist&xw_action=set&target_id=606959150">Link</a> I have to use this for multiple people each one using a unique ID# is there a simple way to do this, the reasoning behind this is that the main link changes once every few months, instead of changing all links i would like to be able to just change the one in the css file and be done with it. i hope i am explaining it correctly. Thanks ahead of time for any help u can provide question is about CSS and links. I can get underline effect, background change, etc by using .a but i need to have more than one sort of link in my page, e.g. menu links cannot have the same effect as links in the main text. How do i set up more than two link effects? Hi, If I have the following CSS: body { margin: 0px; padding: 0px; } a:link, a:visited { color: #F36706; text-decoration: none; } a:hover, a:active { color: #F36706; text-decoration: underline overline; } #siteDimention { width: 758px; margin-left: auto; margin-right: auto; padding: 0px; } How come the links in my page aren't changing from the normal blue/purple ones? My first post Website:www.freewebs.com/weareamazing I can't figure out how to move the links that are at the top of my page (Home, Graphics, Icons, Linking Back, Credits) to the side of my table. I also want to get rid of that line that is under the links. Thank you for your help! Hi, I have CSS document like so: Code: div.menu A:link {
definitions
}
div.menu A:visited {
definitions
}
div.menu A:active {
definitions
}
div.menu A:hover {
definitions
}
And in my HTML document Code: <div class="menu"> Links are then put in here </div> But only the first Link effect works, how come? I tried Google, got few results I were looking for, I know that the Link effects has to be in certain order, and in these websites I found they were in different order tried both but no luck Thanks alot! I'm currently working on a website for college, but I've run into an issue I can't work out. I can't seem to get rid of the default purple box that appears around my links. The HTML: Code: <div id="homelink"><a href="index.html"></a></div> The CSS: Code: #homelink{
position:absolute;
width:53px;
height:17px;
margin-top:25px;
margin-left:70px;
z-index:10;
}
#homelink a{
display:block;
background-image:url(images/links/home.png);
background-repeat:no-repeat;
width:53px;
height:17px;
}
#homelink a:hover{
display:block;
background-image:url(images/links/homehover.png);
width:53px;
height:17px;
}
As you can see, I use a background image for the div and no text for the link. Clicking the background image works fine and takes me to the homepage, however I get the default visited and active link border around it. Is there any way to solve this so that no border appears? |
|||||||