|
CSS - Unexpected Results With Css And Links
This should be easy, but I think I'm getting screwed by how the browsers are loading and layering the css. Here's my code:
Code: <a href="/somepage" class="WhiteTextClass">somepage</a> The anchor tag sets the link color to blue. My WhiteTextClass then sets it to white. This works. However, the visited link color is assigned as the same blue. When the link is visited it no longer takes the white color the class is assigning, it's going back to blue. Am I right that it's the browser and the order it applies the css attributes, or am I doing something wrong? Similar TutorialsSimple 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 am getting some whitespace while viewing the css navigation on IE but the same thing works fine with firefox. can anyone help me to solve this issue? furthermore I need to have some gap (margin) between each menu but I am little bit confused. I tried to use both padding and margin but it's not working link is Code: http://www.zipmonster.com/test thanks in advance I've got a div (picright) within a div that has an image with a border. The border works, but for some reason there's a teeny tiny gap between the bottom of the image and the border. (At least on a Mac using FF.) .picright { float: right; border: solid 1px #9F7A47; margin: .3em .3em .5em .5em; padding: 0; } Then I thought maybe I needed a rule for the img, so I added .picright img { margin: 0; padding: 0; } but that didn't fix it. Any guesses? In advance, I'd like to say that I appreciate the assistance from people on this site. I'm laying out a site with a three-column layout. The right <div> floats to the right, and the left <div> floats to the left with the middle content "flowing" to the top in between the two. I'm using strict xhtml. Both the xhtml and the css validate properly with no warnings. In Firefox, Opera and Safari, the layout behaves as I would expect. However, with IE7, the left div behaves very unexpectedly, as though IE7 is causing it to use fixed positioning. If you open the site in IE and manually resize your browser window by dragging the right-hand side back and forth horizontally, you'll see how the left div stays in place. I can't figure out the cause of this strangeness. I've put the index page temporarily online for anyone to take a look at, and I'll append the code right after this post. The site is www [dot] MeInShape [dot] com Again, thanks in advance. Edited because I accidentally said "absolute positioning" when I meant "fixed positioning". I have make css from page property and type a sample text and covert it into <a> tag as css <a> tag should come in green color bt it shows in purple color and i dont why please suggest asap as required for my institute. thanks in advance link is attached please check the css also Code: http://practice.zymichost.com/ Hi everybody. I'm attempting to format video thumbnails horizontally across a page, and I'm experiencing some very weird behaviors. A bit of basic background on the site - this is a Drupal 5 site sporting a customized version of the "Lite Jazz" theme. XHTML & CSS are both valid. Basically, I just want to have the thumbnails scroll horizontally from left to right, then break and continue directly underneath. However, I am getting this odd "stair" effect in Firefox (for lack of a better way to put it). The alignment looks fine in IE, however in IE the thumbnail furthest to the right is squashed up against the side of the border. I have attached two screenshots to give you an idea. Below is a sample of the video thumbnail HTML that is output by Drupal and all (what I think is) all of the pertinent CSS styling. Additionally, I am aware that I can combine several of these CSS classes, so there is no literal need for multiple div tags, but these divs are generated by a short series of tpl files, and I don't think they are hurting anything. I could of course be wrong, but it would be hard to really consolidate them they way that the template is structures. Here's the HTML involved: Code: <div class="node">
<div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/48"><img src="http://kathleenmackie.com/files/48_AtlantaFinal.jpg" alt="Watch this video!" /></a><br />
vid: 48<br />
type: video<br />
status: 1<br />
created: 1207090735<br />
</div></div>
</div>
<div class="node">
<div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/47"><img src="http://kathleenmackie.com/files/47_FirefoxScreenSnapz003.jpg" alt="Watch this video!" /></a><br />
vid: 47<br />
type: video<br />
status: 1<br />
created: 1206652960<br />
</div></div>
</div>
<div class="node">
<div class="content"><div class="video">
<a href="http://kathleenmackie.com/node/45"><img src="/sites/all/modules/flashvideo/thumbnail_MIA.png" alt="thumbnail unavailable" /></a><br />
vid: 45<br />
type: video<br />
status: 1<br />
created: 1204256880<br />
</div></div>
</div>
And the CSS as well.... Code: .node {
display: inline;
padding: 5px 10px 10px;
}
.node .content, .comment .content {
margin: 0;
}
.node .taxonomy {
font-size: 0.8em;
padding-left: 1.5em;
}
.node .picture {
border: 1px solid #ddd;
float: right;
}
.video {
border: 1px solid #1e6730;
background-color: #beff93;
padding: 5px 10px 10px;
clear: right;
float: left;
display: inline;
margin: 15px;
}
#header, #content {
width: 100%;
}
.node .content, .comment .content {
margin: 0;
I would include a bbcode link to the site, but apparently new users cannot do that (I suppose that makes sense from a spamming standpoint). Site is located at kathleenmackie.com. I also have screenshots from IE and Firefox detailing the problems, but again I apparently can't attach files or images (??). Thanks folks... hoping somebody has an idea or two. Again, I do have screenshots as well..... I've got different CSS layout problems concerning the redesign of a website which will be dedicated to an online shop selling items for online roleplaying games. The redesigned website is planned to be set up in valid XHTML 1.0 Transitional. Though it at first validated unter Strict, too, I've chosen this doctype because the content (main text, items etc.) is generated automatically by a content management system (CMS: OScommerce) and pasted into the XHTML template I did. This PHP generated code seems to contain presentational markup such as layout tables. For I am not allowed to change the PHP-Scripts I thought Transitional would fit the best. You can reach my original template he URL (URI of the CSS file: URL) The problem now is, while beeing viewed in IE6/Win and Mozilla Firefox, the template of mine shows no mistakes concerning these browser's rendering output. After inserting the HTML code of the CMS generated content IE6 inserts about 300 pixel space between a sample table and the rest of the content. Firefox doesn't show this behaviour. An demonstration of the final HTML containing the CMS output is available he URL (URI of the CSS file: same as above) As for a second, someone also sent me a screenshot he made while displaying the first of both sites in a newer Opera Browser. The layout wasn't displayed as I wanted it to do, too (spaces between or at the top of the graphics on the left caused the layout to break). I suppose the second website shows the same behaviour, I wasn't allowed to check it, yet. I checked out different css relating websites and tried a lot, but didn't found any resolution to these problems. Would anyone help me, please? I'd be glad about responses and/or helpful css snippets! With regards, Andreas Kwiatkowski I have the following in my html: PHP Code: <p><a href="mempage.php?do=layout"><span style="margin-right:125px;">Profile Colors</span><span style="background:#<? echo $memsettings['primarycolor']; ?>; height:10px; padding:0 5px; margin-right:2px;"></span><span style="background:#<? echo $memsettings['secondarycolor']; ?>; height:10px; padding:0 5px;"></span></a></p> In FF it shows two small squares with the colors next to "Profile Colors" but in IE it shows nothing. No squares, no colors, just the "Profile Colors" text. Any suggestions? PLEASE HELP Okay this is kind of blowing my mind. Here is my CSS: Code:
body
{
margin: 0px;
text-align: center;
}
table
{
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
}
td
{
padding: 0px;
vertical-align: top;
}
td.banner
{
background-image: url("images/design/BANNER_TOP_LEFT.jpg");
background-repeat: no-repeat;
width: 597px;
height: 70px;
}
td.map
{
background-image: url("images/design/MAP_BACKGROUND.jpg");
background-repeat: no-repeat;
width: 203px;
height: 199px;
}
td.content
{
height: 100%;
background: red;
}
here is my XHTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<table width="800">
<tr>
<td class="banner">
<div id="login">
<p>
Hello
</p>
</div>
</td>
<td rowspan="2" class="map">
<p>Hello</p>
</td>
</tr>
<tr>
<td class="content">
<div id="contest">
<p>Hello</p>
</div>
</td>
</tr>
</table>
</body>
</html>
Here is what it looks like in each brower (attached). I want every browser to look like it does in Chrome.... I don't understand why the others are different? Thanks... (haven't been at developing for a while). Does CSS have any effect on the way search engines crawl your page? Like if I had some description text I wanted to have on my page, but didn't want it to be part of my design. Could I just put it in a div and move it off the screen with CSS? Would that text still be beneficial to search engines? I'm trying to learn this CSS thing (driving me crazy!!) and I'm having problems. I validated my HTML (using HTML 4.01 Transitional) and it came back 100% perfect. I validated the CSS, and I did as many of the corrections as I could figure, and I got back this when I re-validated the .css file: Quote: To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML. Warnings URI : file://localhost/U:\iQuire2\stylesheets\indexstyles1.css Line : 15 (Level : 1) You have no background-color with your color : a:link Line : 16 (Level : 1) You have no background-color with your color : a:hover Line : 18 (Level : 1) You have no background-color with your color : a:visited Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 Line : 25 (Level : 1) You have no background-color with your color : h6 This is my .css file as it stands now: css Code: Original - css Code body {background:#ffffff; color:#000000; padding:0 0 0 0; margin:0 0 0 0; width:100%;} /* Page DIV Tag Stylesheet Codes */ div { position:absolute; top:1px; right:90%; bottom:auto; left:0px; } /* Hyperlink 'a href' Tags Handling */ a:link {color:#0000ff; background:transparent; font-weight:bold; text-decoration:none;} a:hover {color:#0000ff; background:transparent; font-weight:bold; text-decoration:underline;} a:active {color:#0000ff; background:#ffff00; font-weight:bold; text-decoration:none;} a:visited {color:#800000; background:transparent; font-weight:bold; text-decoration:none;} /* Text Formatting Primary Tags */ h1,h2,h3,h4,h5,h6 { font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#000080; } h1,h2,h3 {text-align:center;} h4,h5,h6 {text-align:left;} h1 {font-size:2em;} h2,h4 {font-size:1.5em;} h3,h5 {font-size:1em;} h6 {font-size:.75em;} p { font-family:TimesNR, Times, serif; font-size:.875em; text-align:left; } p.ctr { font-family:TimesNR, Times, serif; font-size:.875em; text-align:center; } p.arial { font-family:Arial, Helvetica, sans-serif; font-size:.75em; text-align:left; } p.arialc { font-family:Arial, Helvetica, sans-serif; font-size:.75em; text-align:center; } p.footertxt { font-family:Arial, Helvetica, sans-serif; font-size:.75em; text-align:center; font-weight:bold; } p.fineprint { font-family:Arial, Helvetica, sans-serif; font-size:.5em; text-align:center; font-weight:bold; } p.breadcrumbs { font-family:Arial, Helvetica, sans-serif; font-size:.5em; font-weight:bold; text-align:left; } /* SPAN Tag Text Formatting */ span.bold {font-weight:bold;} span.ital {font-style:italic;} span.und {text-decoration:underline;} span.boldital {font-weight:bold; font-style:italic;} span.boldund {font-weight:bold; text-decoration:underline;} span.bolditalund {font-weight:bold; font-style:italic; text-decoration:underline;} span.italund {font-style:italic; text-decoration:underline;} /* List Formatting */ ul {text-align:left;} li {font:normal bold normal .75em Arial, Helvetica, sans-serif;} /* Table Formatting */ table { border-width:0px; width:auto; } td { border-width:0px; width:auto; text-align:left; vertical-align:top; } table.topbanner { border-width:0px; width:100%; } td.headrlogo { border-width:0px; width:156px; text-align:center; vertical-align:middle; padding:2px; } td.headrtxt { border-width:0px; width:90%; text-align:center; vertical-align:middle; padding:2px; } td.headrbuttons { border-width:0px; width:auto; text-align:center; vertical-align:top; padding:0; background-image:url(blugradient_50x25.jpg); } table.buttontb { border-width:0px; width:auto; margin:0 0 0 0; } td.butntoplvl0 { border-width:0px; padding:1px; width:115px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:9pt; text-align:center; vertical-align:middle; } td.butntoplvl1 { border-width:0px; padding:1px; width:115px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:9pt; color:#ffffff; text-align:center; vertical-align:middle; background-color:#5984c8; } table.tborder { border-width:1.5px; border-style:solid; border-color:#000080; width:auto; margin-right:auto; margin-left:auto; } td.dborder { border-width:1px; border-style:solid; border-color:#000080; text-align:left; vertical-align:top; } td.dborderctr { border-width:1px; border-style:solid; border-color:#000080; text-align:center; vertical-align:middle; } table.footer { border-width:2px; border-style:solid; border-color:#000080; width:100%; } td.footertd { border-width:0px; width:auto; text-align:center; vertical-align:middle; padding:8px; }
With how it's written currently, it looks great in Microsoft Internet Explorer 6x. But when I try to bring up the same page that looks so well in IE in Netscape or Mozilla Firefox, everything becomes "squished" to the left-side of the browser window. So, for someone who's more comfortable with .css than I am (I'm working from books), can you tell me where I went wrong in this thing? I can understand if the hyperlink formatting might not be "up to code" so to speak (warning from W3C CSS Validator above), but would it affect the formatting of the entire document?? I want to avoid forcing the layout into a specific width, so I tried using percentages and "auto" for styles so that it will be a fluid layout. As I said, IE shows it just the way I want it to look. Firefox & Netscape squash everything down as if there were no formatting whatsoever. Do I need to have separate .css code for each browser?? I don't have a Mac, but my boss does and I'm sure he'll want the site to look good working through Safari too (can't test it) HELP!!! Hi, I have given each column an id. I place the cloumn divs in a wrapper div named #row Code: .row{
position:absolute;
display:inline;
width:893px;
height:20px;
margin:5px,5px,0px,5px;
}
each div has code that looks like this: Code: #RISK_SCORE{
position:relative;
display:inline;
left margin:5px;
float:left;
width:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:9pt;
font-weight:normal;
}
But each column stacks up on the next, instead of lining up in a row. Can anyone tell me what I'm doing wrong? thanks -S Hey all.. I'm still new to CSS in general, but know how it works. Anyway, I'm trying to get an element in a DIV to display properly, but for some reason, it isn't Code:
.contenthead {
background-image: url(player/images/player_03.gif);
background-repeat: repeat;
height: 50px;
color: #000000;
font-weight: bold;
font-size: 40px;
}
The result is at http://www.fairfieldmediacoop.com/fpactest/play.php?recordID=hO2GmjtlvSJKBgcqp4LZ The only thing I can think of is that the text I am trying to enlarge, which is the "Chamber Talk" in black above the video (center of the strip under the header) is encased in a Table. Would that cause it not to listen? I am using float to create a two column layout. When I included a <p> tagged with some emphasized <em> text in the center column, it causes some of the content on the left column to disappear. If the emphasized text isn't in its own <p>, the problem doesn't happen. Furthermore, it only happens with IE7 and not FF. Does anyone know why this strange behavior? Thank you http://tapmeister.com/layout_test/e...s_question.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Funny Behaviour</title>
<style type="text/css">
* {margin: 0; padding: 0;}
body {background-color: white}
#wrapper
{
width: 100%;
background-color:lime;
margin: auto;
}
#content {background-color: blue;}
#main
{
margin-left:180px;
background-color: yellow;
}
#side1
{
width:180px;
float:left;
background-color:purple;
}
</style>
</head>
<body id="page_bg">
<div id="wrapper">
<div id="content">
<div id="side1">
<p>Left column. Left column. Left column. Left column. Left column. Left column. Left column. Left column. Left column. Left column. Left column. Left column.</p>
</div>
<div id="main">
<p>First do not have a dedicated p tag for the emphasised stuff.<em>Some emphasised stuff</em>Some stuff.</p>
<p>Now do have a dedicated p tag for the emphasised stuff.</p>
<p><em>Some emphasised stuff</em></p>
<p>Some stuff.</p>
</div>
</div>
</div>
</body>
</html>
Hi everyone, I am new to this website as well as CSS for the most part. I have been working on a wordpress themed website recently trying to learn as much as possible. My website is self-hosted currently so can't really give you a link to view my code. I just discovered the CSS validator and I validated my CSS file. It contains 13 errors (yikes!) and 16 warnings. However, I don't really know how to interpret it. I use notepad++ as an editor. The profile I used is CSS level 2.1: EDIT: Here is the new code for CSS 3. I only copied the errors part. Code: 23 .socialmedia img Property -webkit-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 24 .socialmedia img Property -moz-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 25 .socialmedia img Property transition doesn't exist : all 0.2s ease all 0.2s ease 38 .socialmedia img.fade:hover Property -moz-opacity doesn't exist : 1 1 39 .socialmedia img.fade:hover Property -webkit-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 40 .socialmedia img.fade:hover Property -moz-transition doesn't exist : all 0.2s ease-in all 0.2s ease-in 41 .socialmedia img.fade:hover Property transition doesn't exist : all 0.2s ease all 0.2s ease 60 #main-nav-search Value Error : padding-top -1.0 negative values are not allowed : -1px -1px 79 .menu2-top-right Value Error : border Too many values or values are not recognized : solid 0 1px 1px 1px #000 solid 0 1px 1px 1px #000 80 .menu2-top-right Property -moz-border-radius-bottomright doesn't exist : 10px 10px 10px 10px 82 .menu2-top-right Property -moz-border-radius-bottomleft doesn't exist : 10px 10px 10px 10px 87 .menu2-top-right Property -moz-box-shadow doesn't exist : 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 88 .menu2-top-right Property -webkit-box-shadow doesn't exist : 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f 3px 3px 6px #7f7f7f,8px -10px 10px #7f7f7f What does it mean when it says "doesn't exist"? I keep reading how GREAT CSS is but I think it SUCKS!!! I have been going bonkers trying to figure out how to do what I want in CSS rather than do it the easy way with tables. If I can't get some help that actually let my page do what I want I think I will be forced to go back to tabular format. My page is here. My CSS is here. I've got the banner and the menu working fine. The look great. But now I'm working on the main content of the page. I want to have three different sections. The three divs are news, calendar, and main I want news and calendar to be on top with the main underneath both. What I wont always know is how much content is in either the news or the calendar. Sometimes the news section will be longer sometimes the calendar section will be longer. But in either case I want the Main section be be BELOW BOTH sections on the page. At first I could get it to work when the news div had more content. But not if it had only a small amount of content. So I posted on this site here. . Well it worked well enough after that. Not perfect but at this point I'll just be happy if things aren't overlapping eachother. So now I went back and added more content to the news section and it doesn't work. Now the Main section rides up and under the calendar section. WHY WHY WHY???? Someone PLEASE prove to me that CSS is worth all of this agrivation. I don't care how "good" CSS is supposed to be if I can do it with tables and NOT with CSS then what is the point??? This is based directly off of Eric Mayer's pure css popups. I know he states in his img tutorial "...considering that even if we used the display: none/display: block trick in the SPAN-popup demo, Explorer has trouble.", but the fact I have it working flawlessly for the first piece of code gives me hope. Of note -- for better or worse, I intentionally put IE6 in quirks mode with <?xml version="1.0"?> right before my doctype. I know it's not the best idea in the world, but it means my code works completely as intended for IE5/5.5/6, and all other browsers I've been able to test (firefix/opera -- windows). Code: HTML: <li><a href="#">F. A. Q.<span>We understand there's going to be some questions -- check here and you might find some answers or how-to's.</span></a></li> <li><a href="#">Help Desk<span>Couldn't find an answer to your question? Find a non-serious glitch or bug? Feel free to head to our support desk and create a ticket. We'll be in touch with you promptly about your question or concern.</span></a></li> <!-- Repeat, roughly 10 links, some of which are in submenus - all work as expected --> Code: CSS:
#mainMenu li a span { display: none; }
#mainMenu li a:hover span {
display: block;
position: absolute;
top: 152px;
right: 32%;
} /* For posting I removed the formatting tags like border, padding etc */
That works as expected. Upon rolling over the link, the span is displayed, positioned absolutely elsewhere on the page. On rollout, it hides again. However, when I cut and paste that CSS and change only the anchor i'm referencing: Code: HTML: <td> <a href="#" class="date"> 08/06/06<span>August 6th, 2006 -- 8:09am</span> </a> </td> <!-- I have roughly 20 cells identical to that, but with different dates. Yes, there's good reason for using tables :p --> Code: CSS:
a.date span { display: none; }
a.date:hover span {
display: block;
position: absolute;
top: 0px;
left: 0px;
}
a.date:hover { color: red; }
/* Again, I removed formatting */
It works as expected in everything except IE. I thought this is because IE doesn't like the fact i'm adding a class to the anchor... a.date:hover span ... but even when I remove the .date a:hover works and a:hover span doesn't. What's going on? Thanks in advance, Brett Hi All: When i use <ul><li> and <li> is set to "list-style-type: none;" IE and Firefox renders it differently. Does anybody know a work-around for this? The good example of this and the CSS code is at following holzgreen.com/list-test/ HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>List Test 1</title> <meta name="Description" content="x.x.x. CHANGE .x.x.x"> <meta name="KeyWords" content="x.x.x. CHANGE .x.x.x"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META name="Publisher" content="Firework Studio"> <META name="revisit-after" content="15 days"> <META name="robots" content="index, follow"> <META name="Robots" content="All"> <link href="000-style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .style1 { font-family: "Courier New", Courier, monospace } --> </style> </head> <body> <div #none> <ol> <li>List item - 1</li> <li>List item - 2 <ol> <li>LI - 2.1</li> <li>LI - 2.2</li> </ol> </li> <li>List item - 3</li> <li>List item - 4</li> </ol> </div> </body> </html> CSS: body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; border: 1px solid #000000; margin: 0em; padding: 0em; } #none ol { background: #BB0000; list-style-position: inside; margin: 0em; padding-left: 1em; /* Moves the Whole List */ } #none ol ol{ background: #BB00BB; list-style-position: inside; margin-left: 0em; padding-left: 3em; /* Moves the Nested List */ } #none ol li { background: #BBBB00; font-size: .8em; margin-left: 0em; list-style-type: none; } #none ol ol li { background: #00BBBB; font-size: 1em; list-style-type: lower-alpha; margin-left: 0em; list-style-type: none; } Thanks for your interest 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? 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> |
|||||||