CSS - Bottom Link Doesnt Work When Styled In Ie ??
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; } Similar TutorialsLink to site If you view the page in FF, the main page (General Information) doesnt extend all the way to the bottom of the browser. I think it's lacking text, because if you visit the other pages, it works fine. This works regardless under IE. I'm stumped! 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> <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; } 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? 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=""> 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 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 Hi, Can someone give me an example of a table styled with css that looks better than the standard html thing. I am trying to get a table with alternate colored rows and a thin line between the cells, and good looking cell headings. 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 This is a small thing, but it's kind of annoying. I'm using CSS to make some buttons on my site purty. And they are purty. The problem comes in when I set a buttons state to "disabled". IE o' so nicely makes the button "grayed out". Mozilla browsers do squat. Observe he http://www.drcwbt.com/codetests/disabledbutton.htm I was hoping I might be able to skirt around this problem with the pseudo class ":disabled" but it appears that this is too new still and nobody supports it. Any ideas on how to "gray out" in Mozilla? I want to place a styled box with rounded corners around text in a heading. The problem is that the the heading may have one, two or three lines and I can't seem to get my box to adjust. Here is my code: I appreciate any help you can provide! 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> <title>Title</title> <style type="text/css" media="all"> .specialHeader { background: #F4F1F1 url(http://d9qjx79zqpo3.googlepages.com/specialHeadingA.gif) no-repeat scroll 0 0; padding: 1px 0 0 0; } .specialHeader h2 { display: block; margin: 10px 0 0 0; padding: 0 0 0 10px; background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingA.gif) no-repeat scroll 0 100%; } .specialHeader span { display: block; margin: 0; width: 100%; padding: 1px; background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingB.gif) no-repeat scroll 100% 0; } .specialHeader em { text-transform: uppercase; display: block; text-style: normal; margin: 10px 0 0 10px; padding: 0; font-size: 18px; font-family: 'Trebuchet MS', Tahoma, sans-serif; color: #98002E; font-weight: 300; background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingB.gif) no-repeat scroll 100% 100%; } </style> </head> <body> <div class="specialHeader"><h2><span><em>Hello World</em></span></h2></div> <div style="margin: 50px; width: 600px;"> <div class="specialHeader"><h2><span><em>Two<br />Lines</em></span></h2></div> </div> <div style="margin: 50px; width: 300px;"> <div class="specialHeader"><h2><span><em>This Has<br />Three<br />Lines</em></span></h2></div> </div> </body> </html> I have a simple page layout using div's and CSS, but the alignment becomes screwed up when printing the page. My CSS for the layout is: #OneColumn { width:575px; background:#fff; } #LeftColumn { float:left; width:458px; background:#fff; padding-top: 15px; } #RightColumn { float: right; width:113px; background:#fff; text-align:center; padding-top: 38px; font-family: Arial; font-size: 10px; color: #000; } My code is formatted in the same order so, on the actual page OneColumn is on top of the left and right columns. If the page is short (less than on page) it prints and looks fine in print preview. Problem 1: In IE 6 If the page is longer than one page when printed the information that is in OneColumn is on the first page of the printout and the rest of the information (from the left and right column) is on the next pages. Problem 2: In IE 6 and Mozilla Firefox 0.8 Also, the right column is used to display thumbnail-pics that correlate to the text in the left column. At times I used styles to space the pictures. Here is one of them: .spacePic { margin-top: 95px } This works fine except for when printing the images, they generally are printed lower than they apprear on the screen. Any suggestions or tips would be appreciated. Thanks for your help! Casey Hello everone, i just joined today in this community and looking forward to enjoying here for a quite long time as i want to develop myself with css. I have a horizontal menu which is based on an image that has three layers: unvisited link, hover link, active link. but somehow i cant get my active links to work and cant understand where im making a mistake. you can find php and css codes below. and i appreciate any single comments suggestions. PHP code: Code: <?php $block = ( is_front_page() ? 'h1' : 'div' ); // arguments for wp_list_pages $list_args = k2_get_page_list_args(); // this function is pluggable ?> <?php echo "<$block class='blog-title'>"; ?> <a href="<?php echo get_option('home'); ?>/" accesskey="1"><?php bloginfo('name'); ?></a> <?php echo "</$block>"; ?> <p class="description"><?php bloginfo('description'); ?> <ul id="menu"> <li id="home"><a href=""<?php if(is_home() || is_single() || is_category() || is_tag() || is_author() || is_year() || is_month()) { echo ' class="active"'; }?>>home</a></li> <li id="archives"><a href="?page_id=2"<?php if(is_page('archives')) echo ' class="active"'; ?>>archives</a></li> <li id="news"><a href="?page_id=35"<?php if(is_page('news')) echo ' class="active"'; ?>>news</a></li> <li id="contact" class="last<?php if(is_page('contact')) echo ' active"'; ?>"><a href="?page_id=31">contact</a></li> CSS code: Code: #menu { list-style: none; padding: 0; margin: -105px 25px; width: 332px; height: 30px; background: url('images/menu.gif'); position: relative; } ul#menu li { width: 80px; height: 30px; padding: 0 4px 0 0; text-indent: -900px; float: left; } ul#menu li.last { padding: 0; } ul#menu li a, ul#menu li a:visited, ul#menu li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; } ul#menu li#home a, ul#menu li#home a:visited { background-position: 0 0; } ul#menu li#archives a, ul#menu li#archives a:visited { background-position: -84px 0; } ul#menu li#news a, ul#menu li#news a:visited { background-position: -168px 0; } ul#menu li#contact a, ul#menu li#contact a:visited { background-position: -252px 0; } ul#menu li#home a:hover { background-position: 0 -30px; } ul#menu li#archives a:hover { background-position: -84px -30px; } ul#menu li#news a:hover { background-position: -168px -30px; } ul#menu li#contact a:hover { background-position: -252px -30px; } .home ul#menu li#home a, .home ul#menu li#home a:visited, .home ul#menu li#home a:hover { background-position: 0 -60px; cursor: default; } .archives ul#menu li#archives a, .archives ul#menu li#archives a:visited, .archives ul#menu li#archives a:hover { background-position: -84px -60px; cursor: default; } .news ul#menu li#news a, .news ul#menu li#news a:visited, .news ul#menu li#news a:hover { background-position: -168px -60px; cursor: default; } .contact ul#menu li#contact a, .contact ul#menu li#contact a:visited, .contact ul#menu li#contact a:hover { background-position: -252px -60px; cursor: default; } i think the problem may be with the last 4 lines of CSS code because they are related to the active links but dont know how i can find out the problem. thank you for any single suggestions and comments. Hi, I need some links to have a specific color. a.ClassName:link works in FF but not in IE. Is there are work-around? PHP Code: .chatlistmale, .chatlistfemale, .chatlistcouple { display: block; border: solid; border-width: 1px; width: 200px; } a.chatlistmale:link { background: #006699; } a.chatlistmale:active { background: #006699; } a.chatlistmale:visited { background: #006699; } a.chatlistmale:hover { font-weight: bold; } a.chatlistfemale:link { background: #FF0033; } a.chatlistfemale:active { background: #FF0033; } a.chatlistfemale:visited { background: #FF0033; } a.chatlistfemale:hover { font-weight: bold; } a.chatlistcouple:link { background: #00FF00; } a.chatlistcouple:active { background: #00FF00; } a.chatlistcouple:visited { background: #00FF00; } a.chatlistcouple:hover { font-weight: bold; } When I add a gradient image to my submit button it works fine in IE but won't depress in Firefox or Netscape. The form action works OK, but it's just the button doesn't do anything on screen with the mouse click...What am I doing wrong? input.btn{ border-style: outset; border-width: thin; border-color:#CCFFFF; color:black; font-size: 60%; font-weight:bold; background: url(images/gradient.jpg) repeat-x; } Hi guys I'm in the process of getting my site together, and it's coming along fairly well. I've been using Firefox for testing, and haven't noticed anything wrong. However, when I checked it in IE8, text that I have explicitly left-aligned is now sitting centred on my page. I have validated the code, and there are no problems. I'm just confused... Here is my code: Code: <span style="text-align:left;">Jarryd Pearson</span><br /><br /> <table align="left"> <tr class="rule"> <td colspan="2"> <hr /> </td> </tr> <tr> <td class="contact"> Phone: </td> <td class="contact"> #### </td> </tr> <tr class="rule"> <td colspan="2"> <hr /> </td> </tr> <tr> <td class="contact"> Mobile: </td> <td class="contact"> #### </td> </tr> <tr class="rule"> <td colspan="2"> <hr /> </td> </tr> <tr> <td class="contact"> Email: </td> <td class="contact"> #### </td> </tr> <tr class="rule"> <td colspan="2"> <hr /> </td> </tr> <tr> <td class="contact"> Postal Address: </td> <td class="contact"> #### </td> </tr> <tr class="rule"> <td colspan="2"> <hr /> </td> </tr> </table> And here's my CSS: Code: @charset "utf-8"; /* CSS Document */ body { background: #0d1866; color: #CCCCCC; font-family: Arial, Helvetica, sans-serif; font-size: 16px; } a { color: #FFFFFF; text-decoration: underline; } a:hover { color: #FFFFFF; text-decoration: none; } paypal { border: none; } img.footer { border: none; width: 88px; height: 31px } td.contact { vertical-align:top; } tr.rule { padding: 0px; } /* DIVS */ div#main { padding: 2px; margin: 2px; } div#text { width: 650px; height: 370px; vertical-align: top; overflow: auto; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 10px; } I apologise if this has been posted before. I did a search, and couldn't seem to find this particular issue. If someone has already posted this, please point me in their direction! Thanks Jarryd Hey 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 Hi guys, sorry if its newbie question, don't work with CSS so long. I've just read a nice article about styling CSS forms (Fancy Form Design) and it looked really nice, so I tried to apply it immediately. However, some problems occured, things are never so easy I guess . First problems occurs with styling of group of form elements: they are dropped one line down (below its label, resp. legend) in IE 5.5/6.0 and also moved to the right (in IE 5.5-7.0) for some reason. Also, styling of fieldsets' legends works odd: first legend is styled differently than the others (one would guess that all of them will be styled in same way). Could you give me pls a little hint on these problems? Here's the test page with applied form styling: http://147.32.122.251/hsh2t/index.php. General CSS: http://147.32.122.251/hsh2t/forms.css IE (5.5-6.0) only CSS: http://147.32.122.251/hsh2t/forms-ie.css |