|
CSS - Link Problems
Similar TutorialsGood Morning! First off I am not a professional, not even close. I have been teaching myself html & css on and off for the past 6 months. Ok so here is my issue: I have a CSS rule: a:link, a:visited { display:block; font-weight:bold; color:#000; background-color:#FFF; width:200px; text-align:left; padding:10px; text-decoration:none; text-transform:uppercase; } The above rule is used on my side nav bar. My issue is now every <a href"etc.." </a> i place on my main page inherits all the above attributes. How can eliminate all the parent stuff. Ive been trying to get this working for the past 2 hours and my brain is fried.! Thanks for all your help! -Chris I'm setting up my first CSS page and am having a problem I do not understand. I set up my CSS page "test.css" like this:<STYLE TYPE="text/css"> BODY {background-color: #C4C4C4} H1 {font-family: serif; font-style: italic; font-weight: 900; font-size: xx-large; color : #CC3300} H2 {font-family: Fantasy; font-style: normal; font-weight: 700; font-size: large; color : #666699} P {font-family: Arial, Helvetica, sans-serif; font-style: normal; font-size: x-small; color : #993366} B {background-color: #FFFFFF; font-size: medium} </STYLE> If I copy this code directly into my <HEAD> section, it all works as expected, but when I replace this with a <LINK REL="test.css"> statement, the background and bold styles do not work while all the rest work the same. Any ideas??? Joel Code: <style>
.class1, .class1 a { color: blue; }
.class2, .class2 a { color: green; }
</style>
<div class="class1">
<a href="moo.html">This link shows up as blue</a>
<a href="moo2.html" class="class2">This link shows up as blue even though it should be green.</a>
</div>
Anyone know how to get around this without resorting to applying classes to every <a> tag.. ? Like say I want to change the color of a single link while leaving default to all the others.. ok here is a thing, it is also a firefox and ei related issue, when i specify background image for my link and specify lef-padding so that, small image that i attached looks like bulleting point, now if my width of the link is longer then my column then logically it will continue on a next line, and everything is great in firefox, but in ei what happens to background image it centers between two lines. So how can i fix it so it sticks to with in first boundary edges of the first line like in fire fox. to see example check the opticsblog.com Hi. Pleeease help! I've created a CSS for a CMS but I'm having a problem with text color. I wanted the links to change from black to white text when hovered over. I seem to have achived this . . . until they have been clicked, and then that function is disabled and they just stay black all the time. I tried deleting cookies and temp internet folders. I tried using the :visited option in the CSS and putting color white in it and that didn't work. Can anyone help? Hi-- I'm sure I'm missing something incredible easy, but I'm working on no sleep so please help! I've got image buttons and for rollovers I want to have a simple color highlight on the top so I've got the image in the background of a <div> then in a nested <div> I put a 100% transparent .png inside a link tag. Using CSS, I said replace that with the semi-transparent .png. In Firefox it displays the highlight at the bottom of the button image; in IE 6, it doesn't even display the background. My code: 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a img {border: none;}
.button {width: 193px; height: 116px; background-image:url(button.jpg);}
.button2 a:link {background-image:url(transparent.png); border: none; width: 193px; height: 116px; display: block;}
.button2 a:hover {background-image:url(hover.png); border: none; width: 193px; height: 116px;}
-->
</style></head>
<body>
<div class="button"><div class="button2"><a href="#"><img src="transparent.png" width="193" height="116" /></a></div></div>
</body>
</html>
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. I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
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}
I just updated my site and it looked great in Firefox, meaning that it looked how I wanted it to. I am using Firefox and my resolution is at 1280x1024. I opened my site in Internet explorer and it's horrible. Does anyone know what the problem is? Homepage: www.stevemedleyphotography.com In IE the picture on the left is put way down the page, in Firefox it's up towards the top. Store Page: www.stevemedleyphotography.com/store.html In IE the view cart button is thrown off to the left and the text is far off to the right, once again in Firefox it's positioned correctly. Galleries: http://stevemedleyphotography.com/bwg/index.html http://stevemedleyphotography.com/cg/index.html http://stevemedleyphotography.com/japan/index.html http://stevemedleyphotography.com/mg/index.html All four photo galleries will not play the SimpleViewer gallery in IE but they work fine in Firefox. Thank you very much for any help you can offer. -Steve so, i transferred my website from my laptop (running apache, no problems) to my desktop running IIS, and now my style sheet is not getting displayed. I installed PHP5, and thats running fine. I renamed my index.php to index.htm to see if it didnt like the sheet in a .php file, but it doesnt work then either. http://137.36.248.210/uchiha/index.php is there something in the IIS config i need to set to understand .css files? i made the .css extension and pointed it to the .dll file that the .shtml points to (according to another website i found) TIA for help, if you need any more info, please let me know http://tinyurl.com/5wgx4s The first problem is that in IE the header menu does not go straight across, instead it does down the page like stairs. How do I fix this? Secondly, on the products page, why are the bullet points behind the text? Thanks Hello, I have a site, http://wwww.catskaraoke.com And all text is underlined, even with inline styles that say "text-decoration:none" I have gone through the style sheets and added "text-decoration:none" to ever class id and tag. In all other browsers, the text is fine, but in IE7 the text is underlined. Why is this? I am going crazy. thanks I am pretty new to semantic HTML and just started. I used to put a lot of stuff in the html instead of the css. I have now made a semantic html website which works perfectly in IE, but not in the other browsers I've tried (FF, NN, Opera). I figure the problems must be in the css, so could you please take a look at it? In the beginning I have a DIV with a background-image, which is the banner of the page. After 160px, a horizontal menu comes on top of that and a little below there will be breadcrums. For now there 2 things to solve: 1. IE places the background/image at the top of where the DIV starts, All the other browsers place the background/image at the first actual content of the page (which is the horizontal menu). If I add a <br> or a dot at the top of the div, the background-images is moved to the right place. But I would like to do it without a <br> or a dot. Is that possible?? 2. The horizontal menu is a series of SPAN's with text in it, the width is set as 19%, and in IE this works. In the other browsers each SPAN is as wide as the text is, though it should be longer. Could you help me find the solution to these problems? The code is posted below, Sjoukje My CSS: Code:
BODY {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0; height: 100%;}
#bgimage {
background-image: url(images/CFD.jpg);
width: 800px;
height: 280px;
margin-top: 20px}
#midimage {
background-image: url(images/contentbg.jpg);
width: 800px;
height: 110%;
background-repeat: repeat-y;
overflow: hidden;}
#underimage {
background-image: url(images/contentbottom.jpg);
width: 800px;
background-repeat: no-repeat;}
#margin_top {
margin-top: 180px;}
#hoofdmenu {
width: 100%;}
.menu_item1, .menu_item2, .menu_item3, .menu_item4, .menu_item5 {
font-size: 10pt;
font-weight: bold;
width: 19%;
height: 15px;
text-align: center;
vertical-align: middle;
padding: 1px;
color: black;
text-decoration: none;}
.menu_item1 {background-color: #3CBF02; }
.menu_item2 {background-color: #0059D3; }
.menu_item3 {background-color: #FFF10C; }
.menu_item4 {background-color: #ff6c00; }
.menu_item5 {background-color: #CB0000; }
.mouseover1, .mouseover2, .mouseover3, .mouseover4, .mouseover5
{ font-size: 10pt;
font-weight: bold;
width: 19%;
height: 15px;
text-align: center;
vertical-align: middle;
padding: 1px;
color: black;
text-decoration: none;}
.mouseover1 { background-color: #45de01;}
.mouseover2 { background-color: #006cff;}
.mouseover3 { background-color: #fff998;}
.mouseover4 { background-color: #ff8400;}
.mouseover5 { background-color: #eb0101;}
a.menu {
color: black;
text-decoration: none;}
#breadcrums {
float: left;
margin-top: 35px;
margin-right: 10px;
margin-left: 200px;
font-size: 7pt;
font-weight: bold;
text-decoration: underline;
text-align: left;
color: Gray;}
p {font-size: 10pt; }
#boxes { float: left;
width:200px;
text-align:left;
padding: 23;
margin-top: -23px;}
.box110, .sub_cfd, .sub_act, .sub_art, .sub_4, .sub_cont {
background-repeat: no-repeat;
padding: 6px;
text-align: left;
font-size: 8pt;}
.box110 { background-image: url(images/menulinks110.jpg); height: 120px;}
.sub_cfd {background-image: url(images/sub_cfd.jpg);
height: 156px;}
.sub_act {background-image: url(images/sub_act.jpg);
height: 156px;}
.sub_art {background-image: url(images/sub_art.jpg); height:
156px;}
.sub_4 {background-image: url(images/sub_4.jpg); height:
156px;}
.sub_cont {background-image: url(images/sub_cont.jpg);
height: 156px;}
p.box_main_text {
font-size: 8pt;
padding: 4px;
margin-top: -10px;}
.box_top_black, .box_top_white {
font-size: 8pt;
font-weight: bold;
text-align: left;
margin-left: 5px;
margin-top: 8px;}
.box_top_black { color: black;}
.box_top_white {color: white;}
#spacer {height: 140px;}
ul.box_list {margin-left:6px; list-style-type: none;}
#content {float: right;
margin-right: 20px;
margin-top: -4px;
width: 570px;
font-size: 10pt;
text-align: left;
vertical-align: top; }
#footer {
margin-left: 210px;
text-align: center;
font-size: 8pt;
color: Gray;
height: 30px;}
p.agenda_top {
font-size: 14pt;
color: black;
text-align: left;
vertical-align: top;}
p.agenda {
font-size: 7pt;
text-align: left;
color: navy;}
ul.agenda_list {
list-style-type: none;
margin-left: 0px;}
td{
width: 13%;
height: 50px;
vertical-align: top;
background-color: white;
padding: 5px;}
The html Code: <HTML> <HEAD> <LINK rel="stylesheet" href="../simpel.css" type="text/css"> </HEAD> <BODY> <DIV align="center"> <DIV id="bgimage"> <DIV id="margin_top"> <SPAN class="menu_item1" onmouseover="this.className='mouseover1'" onmouseout="this.className='menu_item1'"> <A href="../cfd/cfd.html" class="menu">CFD</A></SPAN> <SPAN class="menu_item2" onmouseover="this.className='mouseover2'" onmouseout="this.className='menu_item2'"> <A href="../activiteiten/agenda.html" class="menu">Activiteiten</A></SPAN> <SPAN class="menu_item3" onmouseover="this.className='mouseover3'" onmouseout="this.className='menu_item3'"> <A href="../artikelen/index.html" class="menu">Artikelen</A></SPAN> <SPAN class="menu_item4" onmouseover="this.className='mouseover4'" onmouseout="this.className='menu_item4'"> <A href="" class="menu">nogiets</A></SPAN> <SPAN class="menu_item5" onmouseover="this.className='mouseover5'" onmouseout="this.className='menu_item5'"> <A href="../contact/contact.html" class="menu">Contact</A></SPAN> <DIV ID="breadcrums">><A href="../index.html">Home</A></DIV> </DIV> </DIV> <DIV id="midimage"> <DIV id="boxes" > <DIV align="center" class="sub_cfd"> <DIV><P class="box_top_white">Activiteiten:</P></DIV> <DIV> <UL class="box_list"> <LI>-CFD?!</LI> <LI>-Visie</LI> <LI>-Geloofsgetuigenis</LI> <LI>-3 Rotsen</LI> </UL> </DIV> </DIV> <DIV id="spacer"></DIV> <DIV align="center" class="box110"> <DIV><P class="box_top_white">Meer CFD</P></DIV> <DIV> <UL class="box_list"> <LI>-Webwinkel</LI> <LI>-HisBride Ministries</LI> <LI>-Forum</LI> <LI>-Creative Expressions</LI> </UL> </DIV> </DIV> </DIV> <DIV id="content"> <H2>Content</H2> <P>Content (removed for now)</p> </DIV> </DIV> <DIV id="underimage"></DIV> <DIV id="footer">© Christian Fellowship Drachten</DIV> </DIV> </BODY> </HTML> I'm working on an application using asp with vbscript/javascript. The CSS for a certain page is written and applied using javascript document.writeln. The variable with the css is just a javascript string variable that includes the style tags and the css. (This is just a bit of the code I'm working with. There is too much to post.) This works fine in IE/Firefox, but I'm having problems in Safari/Chrome. It's not registering the a.weekday:link in specific. It's using the default a:-webkit-any-link in Chrome. Other places are using a css page to apply the a:link styles and it works fine. Any ideas what the problem is? I've done some searching on the internet and could not come up with anything. Any help/suggestions would be appreciated. I have a div within a div, I set each to 790px wide and a border around the "container". My image is about 2px wider than the "container" width in IE. This is not the problem in firefox. If I shorten the width of the image by 2px, then it looks dumb in firfox. Any insight would be appreciated. Thanks. <body onload="load(); load2()" id="body1"> <table class="td1" cborder=0> <tr> <td class="td1"> <div class="container" id="container"> <div class="banner"> <img id="index1" src="images/index1.jpg"/> </div> ... div.container { position: relative; top: -3px; background-color: white; text-align: left; width: 790px; border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; } .banner { position: absolute; width: 100%; left:0px; } I have been working on a new website. All I care is that it works on the latest browsers. I have it looking perfect in Netscape and Safari, but IE has some problems which I can't resolve. See page he Problem Page The problems are the main text area and bottom strip refuse to go 100% across the page. How do you get .PNG files to work? My sub-menus have some weird spacing. If anyone could give me some tips on getting these fixed I would appreciate it. I wish I could just not expect anyone to use IE, ha! |
|||||||