|
CSS - Link Fonts Not Showing Up In Firefox
SO my site is starting to get somewhere and I am starting to test it on all browser and I already found a couple problems while looking at it through firefox and fixed some of the problems but there is still the issue of the link font is not working. I set the size on the font family and yet it is looking all ugly. You guys can view by going to this page. http://www.paragliderworld.com/flyingsites.php and then select places untill you get to the viewing page. Please let me know what is wrong with this. Here is the link to my style sheet http://www.paragliderworld.com/style.css
Nick Similar TutorialsOk now it isnt a fire fox issue anymore it is a problem in all browsers. Here is the css that is messing up. Code: .forgot {COLOR: #dddddd; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #4d1e09; padding: 2px 0px 2px 0px; width: 655px; display: block;}
.forgot:active {COLOR: #eeeeee; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #8A694E; padding: 2px 0px 2px 0px; width: 655px; display: block;}
.forgot:visited {COLOR: #dddddd; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #4d1e09; padding: 2px 0px 2px 0px; width: 655px; display: block;}
.forgot:hover {COLOR: #eeeeee; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #8A694E; padding: 2px 0px 2px 0px; width: 655px; display: block;}
.meminfol {COLOR: #4D1E09; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #EEEEEE; padding: 2px 0px 2px 0px; width: 180px; display: block;}
.meminfol:active {COLOR: #000000; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #bbbbbb; padding: 2px 0px 2px 0px; width: 180px; display: block;}
.meminfol:visited {COLOR: #4D1E09; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #EEEEEE; padding: 2px 0px 2px 0px; width: 180px; display: block;}
.meminfol:hover {COLOR: #000000; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #cccccc; padding: 2px 0px 2px 0px; width: 180px; display: block;}
.meminfol2 {COLOR: #4D1E09; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #dddddd; padding: 2px 0px 2px 0px; width: 390px; display: block;}
.meminfol2:active {COLOR: #eeeeee; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #8A694E; padding: 2px 0px 2px 0px; width: 390px; display: block;}
.meminfol2:visited {COLOR: #4D1E09; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #dddddd; padding: 2px 0px 2px 0px; width: 390px; display: block;}
.meminfol2:hover {COLOR: #eeeeee; FONT-SIZE: 8pt; FONT-FAMILY: Verdnana; TEXT-DECORATION: none; font-variant: smallcaps; font-weight: bold; background-color: #8A694E; padding: 2px 0px 2px 0px; width: 390px; display: block;}
Never mind it was just that the font Verdana was spelled wrong. Nick Hello all, I have bumped into some strange problems. Chrome seems to be viewing my fonts alot thinner/smaller than Safari and Firefox. Is there a method to create consistency and ignoring the webbrowsers standards? Its creating a mess, specially with my text which is using text-shadow. The blur looks like disaster. Thanks in advance. http://tinyurl.com/5llwfl I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down. I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes. I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either. I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally. The container should put a 1px solid border around the website, and it does in IE, however, in FF it just puts a border around the top couple pixels. Here is the website, http://www.sdtars.com/development/index.php I can't figure out how to get the #container's height to take on the height of the website. I am having a problem with some css image links not showing up in some browsers (IE 7, for example). Seems to work on most Mac browsers (of course!) Any help is appreciated! I've tried a few different things with the code, which explains the few items that are commented out. HTML: <a href="contact-form.php" class="more-info"><img src="images/spacer.gif" width="156" height="79" /></a> <a href="charity.php" class="community"><img src="images/spacer.gif" width="154" height="72" /></a> CSS: a.more-info:link { display:block; overflow:hidden; text-indent:-9999px; width:156px; height:79px; background:url(../images/more-info2.png) no-repeat 0 0; margin:6px 0 0 3px; } a.more-info:hover{ background-position: -156px; } a.community:link{ display:block; overflow:hidden; text-indent:-9999px; width:154px; height:72px; background:url(../images/community.png) no-repeat 0 0; margin:6px 0 0 3px; } a.community:hover{ background-position:-154px; } hello. this has us stumped. here is the page: http://www.praxishosting.com/dev/csstest/testindex.htm it looks fine in IE, but in firefox, the div tag containing the background image does not appear to be expanding as the content grows. thus in firefox, you cannot see the background image in the bottom left hand cell (the only place it shows through). any suggestions? the style code for the background container is rather simple: Code:
#container {
width: 750px;
background: url(../media/bkgrd.gif) repeat fixed center top;
margin-right: auto;
margin-left: auto;
height: 100%;
}
Hey all, am working on this: http://www.trshady.com/beyondfootball/ And have a problem with the 'wrapper' div ( which holds all the divs on the page ). In Internet explorer the background and border show up fine, but for some reason the wrapper background only is a large in height as the top banner .. Check it in both browsers so you know what I mean. Have made the wrapper background pink so it stands out. Thanks Well from everything I can read this has something to do with collapsing margins; however, I have maintained a 0 margin, padding, and border throughout the document and just now does this space problem appear. If you pull up the page in IE I have a black bar directly underneath my nav bar. In Firefox that black bar appears about 10 pixels or so below the nav bar. What gives? I have tried everything and nothing works. If anyone can please look at what I have so far I would appreciate it. Thanks again. The CSS is in the HTML doc (no seperate CSS file yet) Link: http://trinitylifebaptistchurch.org/test/index3 Here's the url Template Any comments on the code will be very helpfull. Even if it is out of topic. In IE it looks pretty good. In firefox the border goes under the large image and the image navigation is left there naked on the body background. img { border-width: 1px; border-color: transparent; } this is the code i used in my css sheet to invalidate the borders around the linked images. for some reason every other way i tried it was messing up my drop-down menu. now the only problem i have is that ie still shows the text-decoration. at the moment i haven't applied text-decoration none, but i have tried it and nothing worked. any other solutions? here's the page i'm applying it to:: page Hi, I want to put a background image for a div section of my site. It works fine in i.e. but i can't get it to show up in firefox. Does anyone know why? CSS: Code:
body {
font-family : Arial, Helvetica, sans-serif;
font-size: 16px;
background: #330000;
text-align:center;
margin: 0;
padding: 0
}
#mainarea {
background-image:
url('alexandertea_bg_v03.jpg');
width: 719px;
height: 650px;
}
HTML: Code: <body> <div class="topbar"> <img src="images/lemonreghome.gif" id="home"> <img src="images/lemonregstory.gif" id="story"> <img src="images/lemonregwheretobuy.gif" id="wheretobuy"> </div> <div id="mainarea"> Hellow </div> </body> Here is the site I am working on: http://testlableon.ourcampusbookstore.com/index.php There are 3 navigation bars on the template. The first one (navbar) is the black one right under the header. The second one (userbar) is right under the navbar and it is supposed to be light gray (#eeeeee). The third one is the at the bottom of the page (footerbar) and is supposed to have a black (#000000) background. If you look at the site in ie, all the background colors are displayed correctly. If you look at the site in firefox or netscape though, the userbar and footerbar are not having their background colors displayed. Any ideas? Hi! Having a problem again with firefox! On IE6 the links in the bottom news bar work fine, in firefox, only two of them work! Its a little strange! Output at www.generating-sets.com Validated the markup and the CSS and they validate fine! (apart from the buggy PHPSESSID issue and my use of marquee which is due to be removed shortly). CSS below: PHP Code: html {height:100%;} body { margin:0; padding:0; height:100%; background-image:url(images/newback.jpg); background-position:top right; background-repeat:repeat-y; background-color:#ffffff; font-family: sans-serif; font-size: .7em; } #wrap { background-image:url(images/newback150px.jpg); background-position:top left; background-repeat:repeat-y; min-height:100%; } * html #wrap {height:100%} div#navbar {padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px} div#formbox { color: #000000; padding: 2%; border: #000044 solid 1px; } div.displaybox { color: #000000; padding: 2%; margin: 1%; border: #000044 solid 1px; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left; font-size: 1.1em; } div#userbar {padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px} div#topleveladminbar { padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px } #header { background-color: #000044; background-image:url(images/wel.jpg); width: 100%; background-repeat: repeat; border-bottom: 2px #000000 solid; color: #ffffff; margin:0; padding:0; height:100px; } #left { float:left; width:149px; background-image:url(images/newback.jpg); background-repeat: repeat; color: #ffffff; text-align:center; background-color: #000044; border-right: 1px #000000 solid; } #main { position:relative; margin-left:200px; } #content { text-align:center; padding:4px; margin-right:200px; margin-bottom:160px; text-align:left; } #clearfooter { clear:both; height:80px; overflow:hidden; } #footer { height:40px; background-color: #000044; border-top: 2px #000000 solid; margin:0; padding:0; background-image:url(images/newback.jpg); background-repeat: repeat; margin-top:-0px; color: #ffffff; text-align:center; } div#newsbar {padding: 0%; text-align: left; height:150px; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-left: +150px; margin-right: +10px; margin-top: -180px; border: 2px #000000 solid; width: auto;} code { font-size:0.8em; border:1px solid navy; background-color:white; color:#333333; padding:10px; display:block; width:80%; margin:10px auto; overflow:auto; } h1 {font-size: 1.4em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h2 {font-size: 1.3em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h3 {font-size: 1.2em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h4 {font-size: 1.1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h5 {font-size: 1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} a:link {color: #ffffff; text-decoration: underline;} a:visited { color: #ffffff; text-decoration: underline;} a:hover {color: #ffffff; background-color: #0000FF; text-decoration: underline;} .displaybox a:link {color: #0000FF; text-decoration: underline;} .displaybox a:visited { color: #0000FF; text-decoration: underline;} .displaybox a:hover {color: #000044; background-color: #EEEEEE; text-decoration: underline;} Let's say I have this code: Code: <a href="test.html">underline <span style="text-decoration: none">don't underline</span></a> In IE this will not underline the span. In Opera 9 and Firefox 1.5 it will underline the span. Why? Any way to get around this? Long title I know... My problem is that I want a particular style for a link BUT it seems that Firefox has a glitch with it. The css code is: Code:
a, a:link, a:visited {
color: #000;
text-decoration: none;
border-bottom: 2px solid #000;
}
a:hover {
color: #28f;
border-bottom: 0;
}
Basically Firefox starts "flashing" the cursor simply just by hovering over the link. It only does this if you hover over the "line" part of the link. Here's an image of what it looks like: You can view this yourself on the page http://www.jasonashdown.co.uk/css_glitch.html I did however find a way around it with css code: Code:
a:hover {
color: #28f;
border-bottom: 2px solid transparent;
}
http://www.jasonashdown.co.uk/css_glitch_solution.html This works fine in Firefox and Opera without displaying the glitch. BUT now IE won't accept it (putting a Doctype in the file seems to make the bottom-border disappear). Can anybody explain to me why Firefox has this glitch? I couldn't find anything about this problem on this forum or through google. It has been bothering me for months. Many Thanks in advance The problem: a link appears in the color i have set in IE, but in other (probably the default one) color in FireFox the explanation of the situation: attachment 1 that's how it looks in FireFox attachment 2 that's how it looks in IE, and the way it should look! cause that's the color i have set in the css file here is the code from the css file Code: A {
color: #D9E0EF;
text-decoration: underline;
}
A:HOVER {
color: #D9E0EF;
text-decoration: none;
}
here is the code around the link from the screenshots Code: <p align="center"><b><font size="7"><a href="index.php?p=join/index">JOIN</a></font></b></p> where may be the problem which doesn't allow to FireFox to see that there is set color for the links? Hi there. I have a blank space that appears as a link when my animated T-R MENU button is clicked. Click here to view the problem It didn't do this in the last version of FF... I can't see why it's doing it, there aren't blank spaces in the code to make it behave this way. Opera, Safari and IE view it fine. Just FF3 that's doing it. Can anyone shed some light on why it's doing this or how to fix it? Thanks in advance. hi, i am using a navigation bar at the top of my pages (http://sa-ewb.org.uk ) that has been designed with CSS and java (thanks to http://www.gazingus.org ). I have set it up so that visited links have no decoration and do not change colour in the navigation, as opposed to the main body of text where they do behave as normal links. i.e. a:visited {.......normal behaviour and a.actuator:visited {.......no changes to appearance this works fine in firefox (gotta love it!) but in internet explorer, for some reason, it ignores the 'a class="actuator"' and uses my normal link rules. (gotta... errr... not love it!) any ideas? many thanks, jim. This code works in IE but not in FF. Does Firefox not support these? <style type="text/css"> <!-- A:link { text-decoration: underline; color:"#ffffff"; } A:visited { text-decoration: underline; color:"#ffffff"; } A:active { text-decoration: underline; color:"#ffffff"; } A:hover { text-decoration: none; color:"#fffffff"; } Body { background:url(http://n0madism.tripod.com/mbg.jpg); background-color:#000000; background-repeat: no-repeat; font-family:Georgia; color:#ffffff; font-size:10 pt; text-align:left; scrollbar-face-color : #000000; scrollbar-highlight-color : #000000; scrollbar-3dlight-color : #000000; scrollbar-shadow-color : #000000; scrollbar-darkshadow-color : #000000; scrollbar-track-color : #000000; scrollbar-arrow-color : #FFFFFF; } td { font-family:Georgia; color:#ffffff; font-size:10 pt; } --> </style> Can any of you tell me why with the a:link/visited set with border:none (as in the example at the bottom of the e-mail), I get a box around an image inside a link: <a href="communication.php"><img src="resources/president.jpg"></a> Working on a MAC, I noticed that the border only appears in Firefox but not in Safari, Opera and OmniWeb. Can anyone tell me why this border appears around the image, why only in FF, and of course, how one can make it dissappear using the stylesheet? STYLESHEET: a {text-decoration: none;} a:link { color: #000000; border: none;} a:visited { color: #000000; border: none;} a:hover { color: #bbbb00; border: none;} a:active { color: #000000; border: none;} .image{border-width:0px; border: none;} |
|||||||