|
CSS - Ff Won't Link To My Css File
FF won't link to my css file
my html code: (just head content) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Plastitrade</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="plastitrade.css" type="text/css" /> </head> IE picks it up? the css works if i put it in the html file? anyone encountered a prob like this? its irritating as i can't really test my pages locally now btw this is the first time i've encountered this prob cheers Shem Similar TutorialsHey all, So i have two files my html file: Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<a href="#">this is a test</a>
</body>
</html>
And my css file: Code:
a:link {color:#000000;text-decoration:none;}
a:visited {color:#000000;text-decoration:none;}
a:hover {color:#CC0000;text-decoration:underline;}
a:active {color:#000000;text-decoration:none;}
except that the styles don't work on the links. If i put the styles in <style> tags in the html head it works, but in a seperate file they don't, can someone help me? thanks! - legit Edit, whoops sorry, I had the wrong name for my css file 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}
Many of my web pages (CGI) have css styles which have a user defined color present throughout the site. How can i get that varible data back to my site if I refer to it in my css style? for example, i get a hex color from the user and store it in a global variable C1$=#000000 in my web app. then in my css definition i assign border color based on the user defined variable like Code: .table { border: solid 1pt $C1 }
when i copy that into my css file, the color thing in my tables is no worky. putting it back into my cgi file, it works fine of course. What to do? thanks, JOhn If I include url(images/blah.gif) in a CSS file in my webroot, and i then load that into a file in a html dir off my roor and run the html from the html folder, is the image supposed to be relative to my css file or my html file? It seems like its relative to the HTM which doesnt seem correct. I know It would just make sense to move things around but it has to do with robohelp and I think I'm stuck doing it this way for now. I want to change a link within a set of links. It is a vertical menu and it appears as a sub-category which i want it to look different. How do i reference the sublinks? I did this which has no effect. <a href='".$mypath."' id='catsub2'>"; //these settings override it still. #blanksideboxContent.sideBoxContent a{ color: #000000; font-size:1em; font-family:verdana; font-weight:bold; text-decoration: none; border:2px outset #000000; background-color:#5ec82a; width:125px; display :block; margin-left:2%; } #catsub2 a{ width:80px; } Hi I have this which IE needs to call "menu-ie.css" and all other browsers need to call the "menu.css". Code: <!--[if IE]> <LINK rel="stylesheet" href="inc/menu-ie.css" title="contemporary" type="text/css"> <![endif]--> <LINK rel="stylesheet" href="inc/menu.css" title="contemporary" type="text/css"> Just tested and it doesn't work... it only calls "menu.css" Tried it with "if IE7" and "if IE6" with no avail. -------------- IE Style: Code: #menu * {margin:0;}
#leftcolumn {width:150px; float:left; font:9pt "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;}
.dropdown {display:block; position:relative}
.dropdown dt {width:150px; border:2px solid #C7DDCE; padding:2px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover{background:url(images/header_over.gif); color:#000;
}
.dropdown .upperdd {border-bottom:none}
.dropdown dt.uppdtdd:hover {background:url(images/header_over.gif); color:#000;}
.dropdown dd {position:absolute; top:0; overflow:hidden; width:207px; display:none; background:#fff; opacity:0}
.dropdown ul {width:203px; border:2px solid #C7DDCE; list-style:none}
.dropdown li {display:inline}
#top a.loook, #top a.loook:active , #top a.loook:visited{display:inline;padding:2px; text-decoration:none; color:#000; background:none; width:180px}
.dropdown a:hover {background:#E8E8E8; color:#000}
.dropdown .underline {border-bottom:0px solid #C7DDCE}
.dropdown a, .dropdown a:active {display:block; padding:2px; color:#333; text-decoration:none; background:#F7F7F7; width:199px}
All Others Style: Code: #menu * {padding: 0;margin:0}
#leftcolumn {float:left; width:150px; font:9pt "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif}
.dropdown {display:block; position:relative}
.dropdown dt {width:150px; border:2px solid #C7DDCE; padding:2px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover{background:url(images/header_over.gif); color:#000;
}
.dropdown .upperdd {border-bottom:none}
.dropdown dt.uppdtdd:hover {background:url(images/header_over.gif); color:#000;}
.dropdown dd {position:absolute; top:0; overflow:hidden; width:184px; display:none; background:#fff; opacity:0}
.dropdown ul {width:180px; border:2px solid #C7DDCE; list-style:none}
.dropdown li {display:inline}
#top a.loook, #top a.loook:active, #top a.loook:visited {display:inline;padding:2px; text-decoration:none; color:#000; background:none; width:180px}
.dropdown a:hover {background:#E8E8E8; color:#000}
.dropdown .underline {border-bottom:0px solid #C7DDCE}
.dropdown a, .dropdown a:active {display:block; padding:2px; color:#333; text-decoration:none; background:#F7F7F7; width:180px}
Anyone know how this is done? hi everyone, im wondering why my a:link etc is not working on the following page www.think2go.ch/index_template.htm, namely on the top menu where it says "seite drucken" "weiter empfehlen" "home" and "kontakt". it works fine with IE, but does not in other browsers. what its suppossed to look like is: a:link.2{ color: white; text-decoration: none; font-weight: bold; } a:visited.2{ color:white; text-decoration: none; font-weight: bold; } a:hover.2{ color: #85ADC0; text-decoration: none font-weight: bold; } a:active.2{ color:white; text-decoration: none; font-weight: bold; } sample code: <a class="2" onClick="window.print()" href="#">Seite drucken</a> any help is greatly appreciated! thanks... I'm trying to style all images that have link around them - to have no border nor background. I'm using the following but no luck: PHP Code: a:link img, a:visited img { background:none; background-color:transparent; margin:0px; padding:0px; border:none; } a:hover img, a:active img { background:none; background-color:transparent; margin:0px; padding:0px; border:none; } I have not done much web designing lately and have forgoten a number of things. Right now i cannot remember if it is possible to specify link styles for a specific class for a cell in a table. I have this code for the entire page: a:link,a:active,a:visited,a:hover { color : #FFFFFF; text-decoration: underline; } However, I want to have it different in only a specific cell of a table. Is there a way to put it in the following code? td.newshead { background-color: #013501; border-style: solid; border-color: #FFFFFF; border-bottom-width: 1px; border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; font-family: verdana; font size: 125%; font-variant: small-caps; font-weight: bold; color: #FFFFFF; text-align: center; } I can't do something like making another link class like this either a.class:link,a.class:active,a.class:visited,a.class:hover { color : #013501; text-decoration: underline; } I have the information comming from another page and I am not able to the <a class="class" href="url">. I need to put it in the style for the cell. Anyone able to help me out here? Hi all, I am trying to re-create my web site, replacing Frames with CSS. I have a tree menu on one of my pages. Does any know how can I bring the functionality of master frame i.e, opening the link in the content pane? You're probably not going to fully understand what I'm asking, because I can't describe things well, but just try. Okay? I've seen websites that have the navigation on the left side in a panel. And when you click a link on there, the page loads in the bigger panel on the right. But, the whole page doesn't reload (in other words only the big right panel reloads). I'm pretty sure they use CSS for that, not frames. Because when I look at the code on those certain pages, I can see that they use style sheets. Are you still following? My question to you is, how do you target the link to shoot into that panel??? I can't figure it out. Maybe you can. Feel free to ask any questions. Later, a fellow geek (and proud of it!) ~Sam~ Marvelgirl@ameritech.net http://www.x-mencharacters.com Hi, I'm new to CSS. I'm currently reading McFarland's "The Missing Manual," and I'm about 1/4 through. But it seems that no matter how hard I try to understand this problem, I can't get it. I'm trying to figure out how to set my heading links to look one way and all other links on the page to keep from inheriting the layout for those heading links. Here are the styles I'm using: a:link, a:visited { color:#5f4731; border:none; } .contentpagetitle a:link, a:visited, a:hover, a:active { color: #00477d; font-size: 150%; border-bottom: 1px solid #f4f4f4; font-weight: bold; text-transform: none; font-family: "Palatino Linotype", Georgia, "Times New Roman", Times; padding-bottom: 3px; text-decoration: none; } Here is a little piece of test html I'm using until I can figure this out: Code: <body> <!-- This is the heading link --> <a class="contentpagetitle" href="http://www.midsouthcc.org" target="_blank">Test Article</a> <!-- This is a paragraph that follows the heading link --> <p>Lorem ipsum cum ut viris gubergren conceptam.<a href="http://adinasnotes.blogspot.com" target="_blank">Adina's Notes</a>. Ferri electram at ius.</p> </body> Can someone tell me why the second link inherits the settings for the first link which is set to class=contentpagetitle? I'm missing something and I'm sure it's a simple answer, but your help would be greatly appreciated. Thanks, gsw I have a style for links that I use in my main navigation menu, like so: Code:
a.main_nav
{
color:#FFFFFF;
font-size:12px;
}
a.main_nav:link{ text-decoration: none }
a.main_nav:visited{ text-decoration: none }
a.main_nav:active{ text-decoration: none }
a.main_nav:hover{ text-decoration: underline; }
How can I wrap all the links in a <div> and not have to specify the class on each <a> ? Hello, The hover link looks good on IE7 and FF but not on IE6 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#header_navigation {
background-color:#0000FF;
position:absolute;
float:left;
font-size:11px;
color:#FFFFFF;
font-weight:bold;
left:190px;
top:130px;
width:145px
}
#header_navigation ul {
border:1px solid #FF0000;
float:left;
list-style-type:none;
margin:0 30px 0 0;
}
#header_navigation li {
width:145px
}
#header_navigation li:hover {
background-color:#FFFFFF;
}
#header_navigation a {
text-decoration:none;
color:#ffffff;
background-color:none;
}
#header_navigation a:hover {
color:#000000;
background-color:#FFFFFF;
width:145px
}
</style>
</head>
<body>
<div id="header_navigation"><!--begin of header_navigation-->
<ul>
<li><a href="index.asp">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Forum</a></li>
<li><a href="blog.asp">Blogs</a></li>
<li><a href="shoutbox.asp">Shoutbox</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</body>
</html>
Can someone help me with this? The link as well as the box it is in shifts when I hover over the link. I have searched in this forum and Googled it, but still cannot figure it out. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>shift</title>
<style type="text/css">
#shift {
width:60%;
margin-left:2%;
padding:1%;
background-color:gray;
}
a:hover{
color: black;
background-color:#899B80;
}
</style>
</head>
<body>
<div id="shift">
<div>
<a href="#" rel="bookmark" title="title">When you hover over this link it shifts and the box it is in shifts as well.</a>
</div>
</div>
</body>
</html>
|
|||||||