|
CSS - Having Trouble With Link Css
Sorry for such a simple problem - I have been doing this for several years and am having a senior day!
My css works fine in firefox, but after you click on a link once in ie, it no longer shows the color-switch when I hover. The text is supposed to be white with a grey hoover, then white again. After the link is accessed, it will not show the grey on hoover. .topnav:link { COLOR: #FFFFFF; TEXT-DECORATION: none; font-weight: 800} .topnav:hover { COLOR: #c0c0c0; TEXT-DECORATION: none; font-weight: 800} .topnav:visited {COLOR: #FFFFFF; TEXT-DECORATION: none; font-weight: 800} If I leave the "visited" out, it leaves the link black after a visit Similar TutorialsHi everybody. I am trying to transition from awkward HTML and haphazard CSS to valid XHTML (transitional) and a central stylesheet. I'm trying to create a small link list where each item "hovers" in a different color, but I'm clearly doing something wrong. The HTML file is http://www.bsuto.com/valid.html ( and the CSS is http://www.bsuto.com/sheet.css ) Thanks in advance for any help! PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } http://tinyurl.com/5llwfl I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down. I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes. I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either. I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally. Hello Is there a way i can restore my <a href> link back to its original color, that is before the a:visited event, when I click on another link? PS. no Javascript code needed, is their an alternative in css? I have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file. Here is a sample file: http://www. shawkey.com/test/imagebordertest.html Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS? Hello is there a way to make it so hyperlinks are not decorated as the default blue? I have the following css which I've attempted to make it so the text '.com' is always white, but it defaults to the standard link color. html: <td class="nodecoration"><a class="nodecoration" href="http://www.somesite.com">.com</a></td> css: Code:
td.nodecoration {
background-color: #003399; color: white; width: 120px; height: 30px; font-family: "Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center;
}
A:link.nodecoration {text-decoration: none}
A:visited.nodecoration{text-decoration:none}
A:active.nodecoration{text-decoration:none}
a:hover.nodecoration{text-decoration:underline}
This is my css file : BODY { font: 11px geneva, verdana, arial, sans-serif; color: #89A1BD; } TH{ font: 11px geneva, verdana, arial, sans-serif; color: #3D3D3D; } A:active { font: 11px geneva, verdana, arial, sans-serif; color: #00000; text-decoration: none; } A:hover { font: 11px geneva, verdana, arial, sans-serif; color: #0000FF; text-decoration: underline overline; } A:link { font: 11px geneva, verdana, arial, sans-serif; color: #000000; text-decoration: none; } A:visited { font: 11px geneva, verdana, arial, sans-serif; color: #000000; text-decoration:none; } #poll{ ;border-style : solid ;border-color : #004f9d ;border-width : 2px} #poll tr td dt{font-family: Small Fonts;font-style : normal ;font-size : 7pt; font-weight :bold } select, input, textarea { font: 10px geneva, verdana, arial, sans-serif; color: #3D3D3D; } .pn-top {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-title {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-title:link { color:#FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .pn-title:active { color:#FFFFFF; FONT-SIZE: 11px;FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .pn-title:hover { color:#0000FF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-title:visited { color:#CC0000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-link {BACKGROUND: none; COLOR: #0000000; FONT-SIZE: 11px; FONT-WEIGHT: normal; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-link:link { color:#000000; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .pn-link:active { color:#FFFFFF; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-link:hover { color:#0000FF; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: underline overline} .pn-link:visited { color:#000000; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .date {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif; TEXT-DECORATION: none} body { SCROLLBAR-FACE-COLOR: #B7C6E5; SCROLLBAR-HIGHLIGHT-COLOR: #D3DCEF; SCROLLBAR-SHADOW-COLOR: #738FCC; SCROLLBAR-3DLIGHT-COLOR: #E9EEF8; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #E5EBF4; SCROLLBAR-DARKSHADOW-COLOR: #4870AA; ; background-color: D8E0E9 } FONT { font: 11px geneva, verdana, arial, sans-serif; color: #0000000; } TD { font: 11px geneva, verdana, arial, sans-serif; color: #3D3D3D; ; top: 20pt; clip: rect( )} And my text is just normal black en when i go over it , it will turn blue it always works perfect if theres no link specified ex. when "href" is empty then it works but if its links.html and that page exitst then it stays black when i go over it , i've tried much changes in my css sheet but it doensn't seems to work OK, I thought I was so smart. Working on a site that is 100% CSS AND Priority 3 WAI compliant, and thought I had it - it looked good on PC IE, Mozilla and Safari...only to be shot down by Mac IE 5.5, which I know is a bit of a black sheep in terms of CSS. Can those of you with knowledge of such things take a look at: http://www.getbrightstar.com/v2/ And let me know why Mac IE 5.5 wouldn't float the columns correctly? The tricky part is that *I* don't have a mac and can't find an IE 5.5 emulator online like safari, but my client DOES have one and she uses IE 5.5, so it would be best if I could get it right the first time...I don't want to use my client for compatibility testing. Thanks, -Daniel Hello, this is my first time here so not really sure how to ask for help so i am just going to poste the html/css code here and say what i want to say and hope no rules will be broken This is the body of the html: <body> <div id="wrap"> <div id="logo"><img src="images/logo.jpg"/></div> <div id="header"> <ul> <li id="home"> <a href="#"><img src="images/home_button.jpg"></a></li> <li id="about"> <a href="#"><img src="images/about_button.jpg"></a></li> <li id="fun"> <a href="#"><img src="images/fun_button.jpg"></a></li> <li id="gallery"> <a href="#"><img src="images/gallery_button.jpg"></a></li> <input type="text" name="s" id="s" value="Start search" /> </li> <li id="search"><img src="images/search.png" alt="search" /> </ul> </div> <div id="main"> <div id="primary"> <div class="post_item"> <h2> My First Post</h2> <p class="meta"> 1/4/2020 Insp </p> <p> This is text This is text This is text This is text This is text </p> </div> </div> <div id="secondary"> <div class="secbox"> <h3>News</h3> <img class="featuredImage" src="images/left.png" alt="Left" /> <p> Left arrow </p> <div class="prevNext"> <a href="#"><img src="images/right.png" alt"More"/></a> <a href="#"><img src="images/left.png" alt"Less"/></a> </div> <div class="secbox"> <h3>Recent Stuff</h3> <ul> <li><a href="#"> Post entry</a><li> <li><a href="#"> Post entry</a><li> <li><a href="#"> Post entry</a><li> </ul> </div> </div> </div> </div> <div id="footer"></div> </div> </body> And this is the css: a:hover {text-decoration:underline;} input{background:#696969; border:1px solid #c3c3c3; color:#cbcbcb; paddind:3px;} input:focus, input:hover{background: #ededed; color: #4e4e4e; } /* MAIN STYLES */ body{background:red url(images/bg_main.jpg) repeat-x;} #wrap{width:1000px; margin:auto; } #header {background: url(images/bar.jpg); width:100%; height:50px; float:right; } /*Navigation*/ #header ul{overflow: hidden; padding-left: 30px;} #header ul li{float:left; padding-right: 15px; } #header ul li a{color:#cbcbcb; position:relative;} /*SEARCHBOX*/ #header ul li#search{float:right; padding-top:10px;} #header input{margin-left:230px; margin-top:15px;} /*MAIN CONTENT*/ #main #primary {float:left;width:600px;} #main #secondary{float:right; width:180px;} #main #primary .post-item{background:#ededed; margin-bottom: 28px; border:1px solid;} Now, basically what i am trying to do is set the width of the "#header" to 100% but it seems to be stuck at 1000px ...won't go over that. can someone please help Hi guys, So, I've been working on my portfolio site over the past week or so and I'm really pleased with how it's looking. You can view it here eyeforillustration.com It is on the Cargo Collective platform. I have just one last problem that I just can't get my head around. Basically, I can't get the header image aligned with the thumbnails and footer properly. I would also like the header to slide like the thumbnails and footer when you resize the page. Also, when viewing it in different resolutions it seems to jump around depending on the width? I'm pretty sure it's something to do with the header container but I've tried everything and can't get it working. If you guys could take a quick look, any help would be much appreciated. Jack (If anyone would like an invitation to try Cargo out, I do have a couple to give away, just let me know) Hi, i have a simple bit of code which is a div that contains lots of rectangular images in one big row. I was these images to flow through the div so that they appear above and below each other if need be. Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="testcss.css" /> </head> <body> <div id="wall2"> <a href="index.php?page=unsold&bid=6"><img class="unsold" alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a><a class="unsold" href="index.php?page=unsold&bid=6"><img alt="brick" src="tiles/opac/2.jpg"/></a> <!-- ........ (and so on for a abitary number of images) --> </div> </body> </html> And the css.... Quote: body{margin:0px;padding:0px;background:white;color:black;font-family:"Trebuchet MS",Trebuchet,Verdana,Sans-Serif; width:1024px; border-right:dotted 1px #DE7008;} a{color:blue; border:0; padding-bottom:0px; padding-top:0px;} a:hover{color:#DE7008;} img { border:0; padding-bottom:0px; padding-top:0px;} div#wall2{top:30px;left:90px; width:900px; height:600px; position:absolute; float:right; padding:0px; } img#unsold {border:0px; padding:0px; margin:0px;} The code above works great with Firefox, but with IE6 it loops the pictures fine until the last line where it inserts a padding between the top of the last images and the bottom of the last but one row. Ive searched and googles but cant figure it out. Anyone got any ideas how i can get this to appear correct for both browsers. The code is XHTML and CSS validated. Gareth. hi I have this.. http://www.thehundreds.com/thewall/index.php as u can see the threads to the right are acting up once the float of the login is done, because the height is not the same.. is there anyway to force the threads div to continue to line up, or better yet, have that div to the right of the login without using a float?? hello...i have the following div Code:
#Menu {
float: left;
width:150px;
padding:10px;
background-color:#667138;
border-right:2px solid #A6AE62;
border-top:0px solid #A6AE62;
line-height:17px;
z-index:1;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}
and im trying to put something behind it that is the same colour but stretches from the top of this one to the bottom of the screen but am not succeding at all can anyone please help... i have tried a few ideas.... this is my current one...not sure if it is my most sensible one r not really but still here is the code.. Code:
#BehindMenu {
width:160;
background-color:#A6AE62;
visibility: visible;
z-index:0;
/* This is a fix for IE% */
voice-family: "\"}\"";
voice-family:inherit;
width:160px;
}
any help would be appreciated.. thanks RF I'm trying to float my navigation to the right side of the screen, but not messing up the order of the links. (left to right as in 1.2.3.4.5). The problem I'm having is the links go right, but so does the order of the links (they show right to left 5.4.3.2.1). Here's the CSS: Code:
ul#nav {
width: 890px;
font-size: 0.70em;
list-style: none;
padding: 0;
margin-top: 3em;
float: left;
clear: both;
}
ul#nav li {
background-color: #0776a0;
text-align: left;
float: right;
text-transform: uppercase;
border-right: 2px solid #279bd5;
display: block;
}
ul#nav li a, ul#nav li a:visited {
display: block;
padding: 0.4em 4em 0.4em 0.4em;
color: #FFF;
text-decoration: none;
}
ul#nav li a:hover {
color: #FFF;
background-color: #279bd5;
text-decoration: none;
}
ul#nav li a.current, ul#nav li a.current:visited, ul#nav li a.current:hover {
color: #FFF;
text-decoration: none;
}
And here's the html Code: <ul id="nav"> <li><a href="Home" title="Home">Home</a></li> <li><a href="Example" title="Example">Example</a></li> </ul> Will also post website with the example if asked. I'm having a problem where my submit button isn't floating over to the right inside of the div. It's supposed to be inside of the "test" div, but it's just below it. I thought that if I floated an element it would expand the parent element when necessary. What am I missing? This is just a test snippet I was working with to get this functionality to work correctly. Is there a different way I should be trying to achieve this? I've got a form that I'm floating the labels to the left so they lineup properly with their related input. I then want to float the submit button over to the right of the form, but that's when it jumps outside of the div just below it. Code: html <div id="mainT"> <div id="test"> <h4>Enter New Values and Submit</h4> <label>ID: </label>#URL.system# <input class="submitT" type="Submit" value="Submit"> </div> </div> Code: css
div#mainT{
border:1px solid #CCC;
margin-bottom:25px;
width:600px;
padding:10px;
font-size:10px;
color:#000;
background-color:#EEE;
}
div#mainT input.submitT{
/*margin:0 0 0 15px;*/
float:right;
}
div#mainT label{
width:120px;
float:left;
/*margin:0 0 0 15px;*/
}
div#test{
border:1px solid red;
}
I'm trying to manipulate a stylesheet to make elements appear and disappear on an HTML form. The code I've adapted from various sources works fine on non-IE browsers and sort of works on IE but there's something I don't understand and can't get to work. My page starts: Code:
<style ID=\"xyzzy\" TYPE=\"text/css\">
</style>
<SCRIPT TYPE=\"text/javascript\">
<!--
function setClassAttr(c, a, v) {
var agt=navigator.userAgent.toLowerCase();
var e;
// Style sheet management depends on browser.
// See URL or URL
if (agt.indexOf('gecko') != -1) {
e=document.getElementById('xyzzy');
e.sheet.insertRule(c + ' { ' + a + ': ' + v + '}',
e.sheet.cssRules.length)
}
else if ( (parseInt(navigator.appVersion)>=4)
&& (agt.indexOf('msie') != -1) ) {
document.styleSheets['xyzzy'].addRule(c, a+':'+v);
}
}
...
And I use this to set "display" to "block" or "none" for subordinate elements when a checkbox is checked or unchecked. As I said, this works for non-IE browsers but in IE, I click the first checkbox and nothing appears to happen. If I then click the background of the document, the elements appear. I've searched the web and MSDN for some way of flushing the stylesheet change or generating a Click from JavaScript and I can't find anything. I tried disabling and reabling the stylesheet and it didn't help. I tried moveBy(0,0) and it didn't help. Is this a bug in IE or in my understanding of what should happen? If the former, how can I work around it? Can I generate a Click from JavaScript somehow? Redraw the window somehow? If the latter, what am I missing? TIA. after just getting my site fixed up, I have encountered a small problem with the divs, where the middle div (the main content) just ignores the right div (where im going to put adds). I was hoping someone could take a quick look at it and tell me how i could fix this small problem. http://funnyguys99.tripod.com/index.htm There are better details of the errors on my page, if you didn't quite get the problem. Hey I have a dashed border to the right of my menu, i was wondering how i can make it reach the bottom of my page, without having to fill up all the content example of what it looks like: Navigation | | link | link | link | Example of what i want it to look like Navigation | | link | link | link | | | | | | bottom of page. This is the Css code: DIV#sidebar { LEFT: 0px; WIDTH: 12em; POSITION: absolute; TOP: 0px; HEIGHT: auto; BORDER-RIGHT: black 1px dashed; } Greetings! I seem to have some problems with the hover pseudo-class in IE6. I have tried many combinations but cannot get the color to change on a hover. The other attributes seem to work ok, such as background color, cursor, etc. When I place the COLOR attribute in, IE6 just seems to ignore it. here are the significant snippets of the CSS: This is at the very top of the CSS external..note that the color that is desired on hover is #0000FF or blue: Code:
A:link {color: #FFFF00; text-decoration: none}
A:visited {color: #FFBF00; text-decoration: none}
A:hover {color: #0000FF; text-decoration: none}
A:active {color: #C0FFC0; text-decoration: none}
I am using relative positioning for my "menu" elements, so I created a CSS block for each item that results in the following: Code:
#home, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
color: #CC0000;
position: relative;
top: -200px;
left: -390px;
text-decoration: none;
}
#aboutus, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
color: #CC0000;
position: relative;
top: -170px;
left: -460px;
text-decoration: none;
}
#services, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
color: #CC0000;
position: relative;
top: -140px;
left: -553px;
text-decoration: none;
}
#faqs, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
color: #CC0000;
position: relative;
top: -110px;
left: -682px;
text-decoration: none;
}
#contact, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
color: #CC0000;
position: relative;
top: -97px;
left: 170px;
text-decoration: none;
}
As can be seen the base color or starting color of the menu item is #CC0000 (red). The actual HTML is very simple: Code: <a id="home" href="index3.html">Home</a> <a id="aboutus" href="aboutus.htm">About Us</a> <a id="services" href="services.htm">Our Services</a> <a id="faqs" href="faqs.htm">Questions</a> <a id="contact" href="contactus.htm">Contact Us</a> What now happens, is that each menu item displays in RED, but when you hover over it, the text does not change color to the BLUE that I want. It just remains RED. Yet, when I add an attribute such as "background-color: green" to that HOVER directive, it works fine, it just wont change the text. Is this one of those Microsoft IE problems, or am I doing something wrong?? Thanks, in advance for your help! Kork |
|||||||