|
CSS - Removing Border Via Class Doesnt Work?
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=""> Similar TutorialsHello, I got a website with a table on it. This is how it looks in firefox 2.0: http://img139.imageshack.us/img139/9822/helpffkr6.jpg And here's how it looks in IE6: http://img111.imageshack.us/img111/9675/helpiehi7.jpg As you can see, where FF do display the table border, IE does not. Here's the simplified table code and the related css code: Table -> Code: <table class="listings" style="width: 100%;"> <tr> <td colspan="2" class="darkRow">Category 1</td> </tr> <tr> <td style="width: 30%" class="lightRow">Thread 1</td> <td style="width: 70%" class="lightRow">This is thread number 1.</td> </tr> <tr> <td style="width: 30%" class="lightRow">Thread 2</td> <td style="width: 70%" class="lightRow">This is thread number 2.</td> </tr> </table> CSS code -> Code: <style type="text/css">
table.listings{
border-collapse: collapse;
border-style: none;
}
table.listings tr{
border-style: solid;
border-color: #4D3D4D;
border-width: 1px;
vertical-align: top;
}
.darkRow{
background-color: #4D3D4D;
border-color: #4D3D4D;
color: white;
padding-left: 4px
}
.lightRow{
background-color: #BFACBF;
border-color: #4D3D4D;
color: #4D3D4D;
padding-left: 4px;
}
</style>
It seems as if IE doesnt support borders around a whole row, because when i add this: Code: table.listings td{
border-style: solid;
border-color: #4D3D4D;
border-width: 1px;
vertical-align: top;
}
With that also IE displays a border but not only around the whole row, but around all the cells individually, which is not my intention. Does anybody have an idea what i can do about this? thanks in advance. 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? Hello, I can't seem to figure out how to make my CSS drop down menu work the way I want it to. I am using an id in the body tag and a class in the navigatin links so the style sheet will mark what section of the site you are in by making the background change color. This works. The problem is, now that I have the sections being marked, the highlight no longer works. How can I get the highlight to work in the section you are in? I have been experimenting for hours but I can't make it work. http://www.tpxdesign.com/test/Valliant/alpha/index7.php My nav menu code and nav style sheet: Code: <!--[if !IE]><!-- start nav --><![endif]-->
<div id="side_nav_bar" class="floater">
<div id="nav_menu">
<ul id="nav">
<li><a href="demoreel.php" class="port">Portfolio</a>
<ul>
<li><a href="demoreel.php" class="port">Demo Reel/s</a></li>
<li><a href="shorts.php" class="port">Shorts</a></li>
<li><a href="musicvid.php" class="port">Music Video</a></li>
<li><a href="comvid.php" class="port">Commercial</a></li>
<li><a href="miscvid.php" class="port">Misc. Video/Film</a></li>
<li><a href="gallery.php" class="port">Photo. Gallery</a></li>
</ul>
</li>
<li><a href="services.php" class="serv">Services</a>
</li>
<li><a href="newupdate.php" class="newe">News & Events</a>
<ul>
<li><a href="newupdate.php" class="newe">News/Updates</a></li>
<li><a href="eventblog.php" class="newe">Event Calendar</a></li>
</ul>
</li>
<li><a href="bio.php" class="about">About Valliant</a>
<ul>
<li><a href="resume.php" class="about">Resume</a></li>
<li><a href="bio.php" class="about">Biography</a></li>
<li><a href="contact.php" class="about">Contact</a></li>
</ul>
</li>
<li><a href="links.php" class="link">Links</a></li>
<li><a href="index7.php" class="home">Home</a></li>
</ul>
</div>
</div>
<!--[if !IE]><!-- end nav --><![endif]-->
Code: ul {
margin: 0;
padding: 0;
list-style: none;
width: 199px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 198px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
#home .home, #about .about, #link .link, #newe .newe, #serv .serv, #port .port
{
color: #000;
background-color: #eee;
}
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 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 . <ul> doesnt work in IE properly? I have problem with IE7 and < code: html: <ul> <li><a href="A.html">A</a></li> <li><a href="B.html">B</a></li> <li><a href="C.html">C</a></li> </ul> If I open site with IE7 pages B.html and C.html works fine, whereas A.html loose its css for navigation (ul a:link etc..) any ideas? code for css: #containerNavigation { margin: 0; float: left; width: 100%; background: #990000; } #navigationHorizontal { zoom: 1; width: 750px; margin: auto; padding-right: 0; height: 35px; } #navigationHorizontal ul { float: right; padding: 0; margin: 0; list-style: none; width: 749px; } #navigationHorizontal li { padding-right: 0; margin: 0; display: inline; } #navigationHorizontal li a { float: left; color: white; text-decoration: none; text-align: center; background-color: #990000; line-height: 35px; margin: 0 0 0 0; padding: 0 25px 0 28px; font-size: 1.2em; } #navigationHorizontal li a:hover { color: #FFF; text-decoration: underline; } Hey, I have created a site but here is the 1 problem. My CSS doesnt work in firefox. But the site looks perfect in ie; does anyone know why this could happen. Thanks. I use font-family: etc...... color and bgcolor. Thanks. Hey gang, My suckerfish menu wonk work properly in ie5.5 and ie6 but works fine in all the others... the problem is that if i hover over main link that drop down menu will appear but then wont stay there when i hover the mouse over the submenu. i removed all the content from below the menu and suddenly it works, but my site needs content! Has anyone had this problem before??? #navi { width: auto; background: url(images/navi01.jpg) repeat-x top left; } #navi, #navi ul { /* all lists */ padding: 0px 0px 0px 26px; margin: 0; list-style: none; height: 29px; } #navi a { font-weight: bold; margin: 8px 0px 0px 0px; color: #ffffff; display: block; width: auto; padding: 0px; text-decoration: none; } #navi li { float: left; width: auto; padding: 0px 26px 0px 26px; } #navi li ul { position: absolute; width: 160px; left: -999em; padding: 7px 0px 0px 0px; margin: 0px 0px 0px -17px; } #navi li ul li { width: 160px; height: auto; padding: 0px 0px 0px 0px; border-top: 1px solid #ffffff; border-bottom: 1px solid #cfcfcf; border-left: 1px solid #ffffff; border-right: 1px solid #cfcfcf; overflow: visible; } #navi li ul a { background-color: #f2f2f2; color: #1989d1; padding: 3px 16px 4px 16px; margin: 0px; } #navi li.heading { border-top: 1px solid #7fa7bf; border-bottom: 1px solid #67889b; border-left: 1px solid #7fa7bf; border-right: 1px solid #67889b; } #navi a.heading { background-color: #799eb5; color: #ffffff; padding: 3px 16px 4px 16px; } #navi li:hover ul, #navi li.sfhover ul { /* lists nested under hovered list items */ left: auto; } <script type="text/javascript"> <!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("navi").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]> </script> </head> <body> <div id="border"> <div id="container"> <div id="content_left"> <div id="header"><div id="header01"></div></div> <ul id="navi"> <li> <div><a href="">About Us</a></div> <ul> <li><a href="">History</a></li> <li><a href="">Staff</a></li> <li><a href="">Employment</a></li> </ul> </li> <li> <div><a href="">Products and Services</a></div> <ul> <li class="heading"><a href="" class="heading">Support Services</a></li> <li><a href="">Customer Support</a></li> <li><a href="">Advanced Support</a></li> <li class="heading"><a href="" class="heading">Professional Services</a></li> <li><a href="">Engineering Services</a></li> <li><a href="">Project Managemant</a></li> <li><a href="">Software Development</a></li> <li><a href="">Consulting</a></li> <li class="heading"><a href="" class="heading">Solutions</a></li> <li><a href="">Voice over IP (VOIP)</a></li> <li><a href="">Information Lifecycle Management (ILM)</a></li> <li class="heading"><a href="" class="heading">Procurement Services</a></li> </ul> </li> <li><div><a href="">Contact Us</a></div></li> <li><div><a href="">Links</a></div></li> <li><div><a href="">News</a></div></li> </ul> is text align restricted to div tags only? and/or block level elements? and if so, how could i get the program names (ICQ, MSN, Yahoo!) to text-align:left..... and the contact info to align right.... do i HAVE to use a float for this? http://defunctgames.com/contactinfo.htm i want to make a word Stretch across a givin width... when ever i set it to expanded, wider, or any of the others... nothing happens to the text.. does anyonw know how this works? Hey guys, When i apply a stylesheet to this page. http://jessup.oraclestudio.com.au/i...p?page=coporate the link on the left hand side 'Forensic Accounting' doesnt appear to work in IE but work fine with no style sheet. By not work i mean it gets styled but doesnt function as a link. any ideas ??? Code:
a:link {
color: #333333;
font-size: 11px;
}
a:hover {
color: #333333;
font-size: 11px;
}
a:visited {
color: #333333;
font-size: 11px;
}
I have added a percentage padding to some cells of my website (I'm really obliged to use tables and cells for that part of my website, so please do not suggest replacing the cells to DIVs as a solution). For some odd reason, the percentage padding shows just fine with Opera or Internet Explorer, but does not work at all in Firefox. Here is my CSS (and in dark red bold, the percentage padding concerned): Quote: html, body { margin: 0px; padding: 0px; background-color: #ffffff; font-family: verdana, tahoma, serif; font-size: 11px; color: #000000; } a:link, a:visited { text-decoration: none; color: #ff0000; } a:active, a:hover { text-decoration: underline; color: #ff0000; } form { margin: 0px; } img { border: 0px; } table { border-collapse: collapse; } #top { background: url(../images/top.jpg); height: 100px; } #bar { background: url(../images/bar.jpg); font-weight: bold; color: #ffffff; height: 26px; width: 100%; } #bar1 { position: absolute; top: 100px; left: 0px; background: url(../images/bar1.jpg); height: 26px; width: 4px; } #bar2 { position: absolute; top: 100px; right: 0px; background: url(../images/bar2.jpg); height: 26px; width: 4px; } .bar4 { font-family: verdana, tahoma, serif; font-weight: normal; font-size: 10px; width: 200px; } .bar5 { font-family: verdana, tahoma, serif; font-weight: normal; font-size: 10px; height: 18px; } a.nav:link, a.nav:visited { text-decoration: none; color: #ffffff; } a.nav:active, a.nav:hover { text-decoration: underline; color: #ffffff; } img.top { height: 100px; width: 395px; } td.bar1 { padding-left: 6%; } td.bar2 { padding-right: 6%; } td.bar3 { padding-left: 1.4%; } And here is the HTML (in bold again the place concerned): Quote: <?$page='';?><?include'body/head.txt';?> <div id="top"> <img src="images/top1.jpg" class="top" alt=""/></div><div id="bar1"></div><div id="bar2"></div> <table id="bar"> <tr> <td class="bar1"> <a href="index.php" class="nav">Index</a> | <a href="forums.php" class="nav">Forums</a> </td><td align="right" class="bar2"><form method="get" action="http://www.google.com/custom"> <table> <tr> <td><input type="hidden" name="domains" value="xander6669.com"/></td> <td><input type="radio" name="sitesearch" value="" checked="checked"/></td><td>Le Web</td> <td class="bar3"><input type="radio" name="sitesearch" value="xander6669.com"/></td><td>A Labrie.com</td> <td class="bar3"><input type="text" class="bar4" name="q" maxlength="200"/></td> <td class="bar3"><input type="submit" class="bar5" value="Rechercher"/></td> </tr> </table> </form></td> </tr> </table> </body></html> So, anyone knows what the problem is? If you want to view how this thing looks like in Opera/IE/Firefox, just go the http://xander6669.com/. Thanks for any help. I am creating a standalone (included with <script src>) script to display a slideshow of images, and need the images' container DIV to resize to the height and width of the largest image, PLUS the border width. I can get the height easily enough, but the border is giving me problems. The code I'm using now is: Code:
function getcss(myclass,element) {
var CSSRules;
if (document.all) { CSSRules = 'rules'; }
else if (document.getElementById) { CSSRules = 'cssRules'; }
for (var i = 0; i < document.styleSheets[0][CSSRules].length; i++) {
alert ('.' + document.styleSheets[0][CSSRules][i].style['border'] + '.');
if (document.styleSheets[0][CSSRules][i].selectorText == myclass) {
return document.styleSheets[0][CSSRules][i].style[element]
}
}
}
function InitializeImageRoller() {
for (var q = 0; q < Files.length-1; q++) {
var hidden = eval('hiddenpicture' + q);
if (MaxW < hidden.width) { MaxW = hidden.width }
if (MaxH < hidden.height) { MaxH = hidden.height }
Container.style.height = MaxH;
Container.style.width = MaxW + getcss('Container','borderWidth');
hidden.style.display = "none";
}
}
right now I'm testing, and in the first function, I have a line " alert ('.' + document.styleSheets[0][CSSRules][i].style['border'] + '.');". This works fine, but returns ALL the properties of the border. I need it to only give me the width. What should the ['border'] be changed to to accomplish this? Hi all, I am using <tr class="caption"> in order to control the properites of a line in a table. The problem is: this will not work. Nothing that is written in this CSS tag will work my CSS tag: Code: tr.caption {
font-weight: bold;
font-size: 14px;
text-decoration: none;
background-color: #000000;
color: #FFFFFF;
}
any idea why?? I am greateful for any answer! Dekers Hi all Another stupid annoyance relating Internet Explorer: it seems IE6 does not recognize the following CSS selector rule: tag#id.class e.g. div#content.active One has to split it into div#content .active Is that right? Do we just have to live with this? Greetings, Josh I can only get margin to work with the body element. border & padding don't. Can someone explain why pls. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0px;
border: 10px;
}
</style>
</head>
<body>
<div>This is some text</div>
</body>
</html>
Also, i get the same result if I define a simple class and use div. e.g. .myclass { margin: 0px; border: 10px; } <div class="myclass"> some text </div> Only the 'margin' works within the class. Here's the code (it's all in the one file). (I had a link but I'm too new here) 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=ISO-8859-1"></meta>
<title> image border bug test</title>
</head>
<body onload="highlightimg()">
<div id="container">
<a class="aclass" ><img src="a.jpg" id="i1" alt="alttext"/></a>
<a class="aclass" ><img src="b.jpg" id="i2" alt="alttext"/></a>
<a class="aclass" ><img src="c.jpg" id="i3" alt="alttext"/></a>
</div>
<script type="text/javascript">
function highlightimg(){
document.getElementById('i2').setAttribute('style','border-width: 3px 3px 3px 3px; border-color:red;border-style: solid;');
}
</script>
</body>
</html>
Internet explorer refuses to apply the border style to the center (or either of the other) images. Any thoughts? (This is a small test case, the style must be applied with js in the actual application I'm building). Hi, Is there a good way to use css to make every element with a specified class name to have some hover attribute, for instance .class:hover would do something? For some reason it doesn't work for me unless I say div.class:hover or a.class:hover, etc. I have to specify an element. Hey Guys... I have a piece of code that displays ok in Firefox (and I suppose IE) but not Safari. Here's the URL - http://www.pizza.bowlerhatmedia.com/spc/theusual.html In safari everything squishes left. In firefox they spread out like they are supposed to across the bottom. Here's the line of code in the html doc: Code: <div class="contentbox2_2"> <span style="padding-right:10px"></span>Petite: <span class="red">$11</span> <span style="padding-right: 160px;"></span> Medium: <span class="red">$14</span> <span style="padding-right: 170px;"></span> Large: <span class="red">$16</span> </div> and here's the supporting CSS Code:
}
.contentbox2_2, .contentbox3_2 {
font-size: 15px;
font-weight: normal;
}
.red {
color: #ac3a24;
}
What can I do to position these across the bottom in safari and make everything else ok in the other browsers? thanks! This should be easy but I can't get it. I have this in my CSS: a:link { color: #000000; font-weight: 400; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: underline; } a:visited { color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 200; text-decoration: underline; } a:hover { color: #333333; font-weight: 400; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; } a:active { color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 400; text-decoration: underline; } .pageTitle { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #FFFF24; font-weight: bold; display: table-cell; padding: 5px 10px; } td.pageTitle a.pageTitleRef, td.pageTitle a.pageTitleRef:link, td.pageTitle a.pageTitleRef:visited, { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #FFFF24; font-weight: bold; } td.pageTitle a.pageTitleRef:hover, td.pageTitle a.pageTitleRef:active, { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #FFFF24; font-weight: bold; } and this in the HTML: <tr><td class="pageTitle"><a href="about.html" class="pageTitleRef">About Us</a> :: Experience & Past Projects</td></tr> It looks fine in IE, but in Firefox it looks like the "a" declaration is over-riding the "a.pageTitleRef" declaration. So the "About Us" looks like an "a" tag while the "Experience & Past Projects" looks as it should (like a page title in yellow). Any help would be greatly appreciated! Laura S. |
|||||||