|
CSS - Removing Link Border-bottom From Images
I use the following CSS for my links, and use a border-bottom to give them a dashed underline...
Code: a {
color: #AC4870;
border-bottom: 1px dashed #DDDDDD;
text-decoration: none;
}
a:hover {
color: #DDDDDD;
border-bottom: 1px dashed #AC4870;
text-decoration: none;
}
This underline also shows up under my images that are used as links. How would you write CSS that would remove this dashed border-bottom from my image links? Thanks Similar TutorialsSitewide, I have a bottom border affect, rather than an underline for links. But it applies itself to linked images as well. I have borders shut off on images, but that doesn't stop it from applying the border. I've tried img border:none; and a few other tricks, but it only does the trick in Chrome. CODE: a { text-decoration: none; } a:hover { text-decoration: none; border-bottom-width: 1px; border-bottom-style: solid; padding-bottom: 2px; } img { border-width: 0px; } img a { border-width: 0px; } img a:hover { border-width: 0px; } Hi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
a.menu_top:link {color: #000000; text-decoration: none;}
a.menu_top:visited {color: #000000; text-decoration: none;}
a.menu_top:hover {color: #000000; text-decoration: none;}
a.menu_top:active {color: #000000; text-decoration: none;}
td.menu_top_passive {
background-color: #777;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
td.menu_top_active {
background-color: #bbb;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #bbb solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
</style>
<script language="JavaScript">
function change(id, url) {
for (i=1; i<6; i++){
eval("document.getElementById("+i+").className='menu_top_passive'");
}
eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>
</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?
</center>
<br><br><br>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
<tr>
<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td>
<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>
<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td>
<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td>
<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td>
</tr>
</table>
</body>
</html>
Hi, I have a site with a large Flash header. I'm trying to remove the scroll bar for the width of the site, but I can't figure out how. you can see the site he my site Any ideas of how to go about this? Can a Flash file be made into a background image? thanks Hi All, I'm trying to create some expanding headers using images and background color/images. Everything seems to be working fine except that at the bottom of the heading there is a 1 or 2 pixel showing of the background color! I assume it is something I'm missing in the CSS rule as the problem occurs in both Mozilla and IE! Click here to see example It's not the images as there on a white background and are cropped fine as can be seen from the enlarged left side image. [html] <div style="width: 162px; color: white; background: green; margin: 0; padding: 0;"><img src="/RhL.gif" width="25" height="50" border="0"><span>HEADING TEXT</span><img src="/RhR.gif" width="25" height="25"></div> [/html] Any help kindly appreciated PHP Addict Hey everyone, I am wondering if there is a way to get rid of the border that a:active has by default. Because I find that border annoying. I thought adding border: 0 would do the job, but doesn't appear to, anyone have any thoughts? Well the title pretty much says it. How can I remove the little border from the top of the flash movie player (see example here : http://www.aplistia.com/flashin.htm ) if you see carefully, you will see a natural separation of around 4 - 6 pixels tall. I want to completely put my flash file on top, no spaces. Ive tried a couple of things but I couldnt fix it. Thanks in advanced . ok so I have a menu done via CSS and initially I set up a left border on it so it shows up like this: | menu 1 | menu 2 | menu 3 Now with the help of JQuery I am trying to get rid of the | on the menu 1.. Jquery is applying the class to the correct a selector but the border is not being removed? if I change the css to "border: 1px solid black" it applies the border to the whole of menu 1 but the left border still stays WHITE? the css class is: .removeBorder { border:0; } the menu CSS is: Code:
ul.navigation-1 li a,
ul.navigation-1 li a:link,
ul.navigation-1 li a:visited
{ padding:4px 10px; display:block;text-decoration:none; border-left:1px solid #ffffff;color:#ffffff; width:100%; height:13px; }
If i remove the border-left attribute from here, the border goes away.. and via Jquery I am targetting the A.. so what is the problem? Just a FYI: html code: Code: <div id="left-menu"> <ul class="navigation-1"> <li><a class="removeBorder" href="">Products</a><ul class="navigation-2"><li><a href="">A-Z List</a></li><li><a href=""> hi there, i have a local web page that im trying to build. Its a three column fixed layout. The 3 columns have been floated and are contained by a container div element. I have implemented the bug fix (see http://www.positioniseverything.net/easyclearing.html) to ensure that the containing div wraps around the three floated columns and this works for both FF and IE. However, i have one remaining problem. I'd like to display a right and left sided border to the "middle" floated div and this needs to stretch down to the bottom of the containing div element. However, i cannot get this to work. Does anyone have any suggestions? Please see the attachments for the files Thanks This is killing me! The border of a DIV top is working perfectly on FF but not applying on top in IE 6+7. Here are the class attributes: {padding:1px 7px 3px; font-size:16px; border-color:#555555; border-style:solid; border-width:1px 1px 0px; text-decoration:none; color:#425366; background-color: #abd3ff; font-weight:bold;} Not sure if the problem is on this class or in anything that affecting it. Any suggestions will be great. Ehud Hi Could someone take a look at this please http://dmumford.bizhat.com/test.htm You will see that in IE5 the border-bottom is about 2 pixels bigger than in other browsers, I have speciifed border-bottom:1px solid #fff;, but IE5 is making this bigger..........why???? Thanks for any help I currently have a problem with chrome not displaying a page properly under windows that a user emailed me about. I have tested on my windows xp install with chrome and i do not see the error: What he sees: http://i43.photobucket.com/albums/e397/clericvash/chrome-xp-sp3.gif What i see: http://i43.photobucket.com/albums/e397/clericvash/Clipboard01-2.jpg Just below the logo you have the main links "home, rules" etc but on his install the line below the links is way too far down, same version of chrome and all. Code: Code:
.menu_fancy
{
width: 100%;
}
.menu_fancy ul
{
margin: 0;
padding: 0;
float: left;
list-style-type: none;
}
.menu_fancy ul li
{
text-align: center;
float: left;
padding: 0px 10px 3px 10px;
margin-left: 5px;
border-bottom: 1px solid #0099CC;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
display: block;
}
.menu_fancy ul li a
{
text-decoration: none;
padding: 5px;
display: block;
}
http://www.brendanclements.com/ups/ http://www.brendanclements.com/ups/styles.css It's the slideshow swf on the right. The bottom has a sliver but the heights are both at 300 px. I know I used tables too much but it's been way too long since I've done CSS positioning so I'm doing this for now. I believe the sliver is caused because the slideshow box has a rowspan of 2 since the slideshow does not require a title but I can not figure out how to get rid of it. Thank you. Hi, I have a list that shows the photo and some personal data of people. Here it is: http://www.tiregarfio.byethost17.co...ev.php/miembros username: fer password: m I you load it with FF, you can see clearly I have added a green line that separate each member (border-bottom: solid 1px #A9F16C). This line in IE6 is not between each member but below the personal data. Here it is the styles: Code: div.miembro {
overflow: hidden;
clear: both;
border-bottom: solid 1px #A9F16C;
}
div.fotografia {
float:left;
}
Any idea? Javi Yes........it's me again with more problems. In trying to solve some other problems I went to using contrasting bg colors so I could see what was going on per Kravvitz suggestion. So here is what I have body bg color set at gold #whiteBorder - set at white #page bg set at green; border hot pink and then #topbar and #sideColumn set at powder blue. The problems is that the 10px whiteBorder shows on the top and left - but not on the right and bottom and I have no clue why. Here is the css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #FFCC33;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #FF00FF;
background-color: #339900;
overflow: hidden;
margin: auto;
text-align: left;
}
#whiteBorder {
border: 10px solid #FFFFFF;
width: 100%;
height: 100%;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
h1 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size:20px;
font-weight: bold;
margin-bottom: 10px;
}
h2 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 16px;
font-weight: bold;
}
h3 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
h4 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 14px;
font-weight: bold;
}
p a:link, a:visited {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
p a:hover, p a:active {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094F9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 100%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: transparent;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
margin-left: 185px;
}
Here is the xhtml: Code: <body>
<!--begin page -->
<div id="page">
<!--begin white border -->
<div id="whiteBorder">
<!--begin header -->
<div id="header"><img src="../images/vitalograph_spirometers_logo.gif" width="230" height="36" alt="vitalograph spirometers logo" />
<span class="tagline">world leaders in spirometry</span>
</div>
<!--end of header -->
<!--begin topbar -->
<div id="topbar">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../about_us/about_us.html">About Us</a></li>
<li><a href="../other_regions.html">Other Regions</a></li>
</ul>
</div>
<!--end topbar -->
<!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="../products/spirometers.html">Spirometers</a></li>
<li><a href="../products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="../products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="../products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="../products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="../resources/customer_support.html">Customer Support</a></li>
<li><a href="../resources/training_services.html">Training & Services</a></li>
<li><a href="../resources/exhibitions.html">Exhibitions</a></li>
<li><a href="../resources/newsletters.html">Newsletters</a></li>
<li><a href="../resources/downloads.html">Downloads</a></li>
<li><a href="../resources/useful_links.html">Useful Links</a></li>
<li><a href="../resources/industry_information.html">Industry Information</a></li>
<li><a href="../resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- TemplateBeginEditable name="Main_Section" -->Main_Section<!-- TemplateEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
</div>
<!--end of white border -->
</div>
<!--end of page -->
</body>
Thanks 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? hi. I need some formatting help. I am using niftycorners and the linked list tabs I am building seem to rest at the bottom, pushing the bottom of the rounded corners to the right of them. I have tried clear:left, clear:right, clear:both at the div and ul levels but that doesnt work. any ideas? I have attached a picture of the problem. Here is the CSS/HTML: Code:
<style>
body {
margin:20px;
}
#toptabs {
clear:left;
}
#toptabs ul {
clear:left;
position:relative;
width:100%;
margin-bottom:0;
list-style:none;
line-height:1em;
padding:100px 0px 0px 0px;
}
#toptabs ul li {
float:left;
margin-right:5px;
padding:0;
}
#toptabs ul li.clear {
clear:right;
}
#toptabs a {
display:block;
color:#444;
text-decoration:none;
font-weight:bold;
background:#ddd;
margin:0;
padding:0.25em 1em;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-right:1px solid #aaa;
}
#toptabs A:hover,
#toptabs A:active,
#toptabs A.he link,
#toptabs A.he visited {
background:#bbb;
}
#toptabs A.he link,
#toptabs A.he visited {
position:relative;
z-index:102;
}
</style>
</HEAD>
<BODY>
<div id="header">
<div id="toptabs">
<ul id="venture">
<li id="current"><a href="#"><span>Profile</span></a></li>
<li><a href="#"><span>Q&A</span></a></li>
<li><a href="#"><span>Recommendations</span></a></li>
<li><a href="#"><span>Connections</span></a></li>
</ul>
</div>
</div>
</BODY>
I am modifying an X-Cart implementation that the template originally put the product image in a seperate td. I have modified it to put the image in the same td as the description and used a float style on a div tag. The text is wrapping correctly. The problem is that I have a border-bottom style on the product name and it is ending up under the product image. The image is also covering the bullet on li tags. An example is http://www.adaappliances.com/produc...48&cat=0&page=1. Please do not attempt to order anything! This is not a live site yet. This is a snippet of the code. I am using inline styles for testing. Code: <div style="float:left; padding:5px"> <IMG id="product_thumbnail" src="/image.php?productid=16148" width="168" height="230" alt="Eurotech EDW254E Dishwasher" border="0"></div> <p style="border-bottom: 1px solid black"><font size="3"><strong>Eurotech EDW254E Dishwasher </strong></font></p> I have not found a way to fix this. Any suggestions? I'm trying to put a 1px line on the bottom of my header that spans the width all the way. I've used border-bottom: 1px and border-style: solid; but I still have a looks like 3px border all the way around my header. Also I have my unordered list inside of my header div and it's placed directly below my header. Any help much appreciated, just learning how to layout. http://imgbin.org/index.php?page=image&id=6637 CSS code Code: body {
font-family: "Lucida Sans Unicode", sans-serif, Verdana;
background-color: #999999;
}
#header {
height: 75px;
width: 100%;
border: 0px 0px 1px 0px;
border-style: solid;
border-color: white;
background-color: #336699;
}
#container {
margin: 0 auto;
width: 900px;
height: 100%;
background-color: #666666;
}
#content {
width: 75%;
}
#sidebar {
width: 25%;
background-color: #666666;
}
ul {
list-style-type: none;
}
li {
display: inline;
}
and HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Jeremy</title> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <h1 class="header">Jeremy</h1> <ul> <li><a href="index.html">Home</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="forums.html">Forums</a></li> <li><a href="contactme.html">Contact Me</a></li> </ul> </div> <div id="container"> <div id="sidebar"> </div> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor dui sit amet diam molestie cursus. Vivamus a sapien sed nunc fermentum feugiat. Donec iaculis neque sit amet tortor consectetur eu lacinia est commodo. Ut lobortis fermentum felis, eu tristique elit fermentum sed. Etiam pulvinar commodo est non vestibulum. Aenean sed ante in velit vulputate tristique. Duis lacinia eleifend massa, sed volutpat dolor malesuada at. Nam convallis consequat mauris imperdiet rutrum. Aenean vitae vestibulum libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum lorem nulla, pellentesque vitae porttitor condimentum, dignissim a libero. In quis turpis orci, vitae faucibus risus. Duis tincidunt, libero tincidunt hendrerit viverra, felis lectus rutrum diam, et dictum mauris ipsum nec purus.</p> <p>Vivamus ut nunc vitae eros fermentum pretium. Nunc molestie odio vitae magna consectetur quis ultricies purus adipiscing. Curabitur ante nisl, scelerisque a consequat sed, rhoncus at turpis. Morbi blandit ante eu tellus facilisis eu semper enim auctor. Nunc sollicitudin orci nunc, vitae accumsan risus. Etiam nec est in ipsum iaculis varius. Nam enim velit, imperdiet viverra condimentum vitae, egestas eget dolor. Nullam facilisis condimentum diam, in euismod lorem mattis a. Mauris vel nulla et ipsum venenatis aliquam vitae a nibh. Nunc commodo ullamcorper odio vitae fermentum. Praesent faucibus blandit condimentum. Integer sed justo nulla. Praesent id gravida dui. Proin malesuada interdum scelerisque. Sed condimentum justo nec metus venenatis accumsan.</p> </div> </div> </body> </html> ok i have links on the side, i have applied border-bottom:0.1em solid black properties so they look like they are underlined. Now it all works but sometimes when i scroll the page down and then up, SOME of the link's border have disappeared, i can fix this by moving my mouse of the links and the border appear but i was wondering is it to do with CSS/html? the only other thing could be my Screen/monitor's refresh rate I like dashed underline links. The trouble is a couple of sections of my site use line-height and vertical-align to center their content. This means that applying a border-bottom: 1px dashed black; to an href has the effect that the underline appears at the bottom of the line height and not directly underneath the link. Is there a way to overcome this? |
|||||||