|
CSS - New Firefox Font Display Issues?
My special font displays correctly in all browsers except the new firefox. It even worked in the older firefox before the new update. I am not sure why this is happening or how to fix it.
Here is the code in the html page: Code: <head>
<style type="text/css">
@font-face {
font-family: English;
font-weight: normal;
src: url(fonts/English_.ttf);
}
</style>
</head>
<div class="content">
<h1> Beckin Designs</h1>
Here is the CSS rules in my external CSS sheet: Code: .content h1 {
font-family: "English", sans-serif;
font-size: 52px;
font-style: normal;
/* [disabled]text-transform: uppercase; */
color: #F7F7F7;
text-decoration: none;
width: 930px;
text-align: center;
margin: -10px 0 5px 0;
padding: 0;
}
Thanks! Similar TutorialsSorry for the "general" title but I don't know what is causing my problems, so it is hard to be specific... I am working on a web application for my summer research project, but I am not very knowledgeable in CSS. For the most part I am able to solve my problems except for the following: Issue 1: Profile Display Issue 1 CSS file The copyright at the bottom. Firefox displays correctly. Explorer displays too much white space above the copyright text. Issue 2 *IMPORTANT*: Profile Display (with missing fields) Issue 2 CSS file The text in the SME Profile does not display correctly when some of the fields are left blank (Issue 1 link shows a full profile). I'm trying to avoid using tables as it would cause some major setbacks in my work. FYI, the pages are dynamically generated so links will not work. Any suggestions? So I know that IE7 automatically turns on cleartype and that can be an issue for people with CRT screens...fair enough. Here's what I don't know and haven't been able to find. I had a javascript page coded (outsource)that opens onclick.....in this javascript page, and nowhere else on the site, the font looks absolutely terrible. Pixelated and just awful.....but elsewhere on the site, when viewed in IE7, everything else is fine. I know nothing about javascript, but is there a CSS command that turns off clear-type or something? Note: Everything is, of course, perfect in firefox and IE8 beta.... The page was styled with CSS and there are a few filter: commands: filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='./pu..... can these commands overwrite the cleartype in IE7 if they are intended for the content in the javascript 'popup'? If this isn't a css issue, my apologies. thanks! tim. I'm having a bit of trouble getting my font to align itself in the middle of a DIV (as it has a background). In FireFox it looks fine, in the middle of the div. But in Netscape and IE it is at the very top of the div (in Netscape) and really high (in IE). Usually I would just add padding-top to the div to position the text in the center, although this then knocks out FireFox. Not sure the best way to solve this? Would I have to import a different CSS file for the browers? I guess this would be best so I can target the little issues with each. How would I do this and make the browers know which is which? Thanks How come IE obeys fixed and em font sizes and firefox doesn't? I want all my site text to be scaleable apart from the navigation text which I gave a fixed size of 10px. In IE the scaling is observed and all fonts are em apart from the navigation. In firefox however it scales ALL fonts which is very annoying. Is this a known problem? Ok so this is probably really basic but I'm tearing my hair out. the page is http://fireshui.com/about.php the css is http://fireshui.com/global/styles2.css I used to use the bigtitle class for headers (you can see an example of this at http://fireshui.com/mtglinks.php). One day I looked in IE and it wasn't showing up right. So I decided to change it to the proper way of using h1, h2, etc. In Firefox, the size for h1 is right - it's 110% of the normal text. In IE, it's really huge, which I don't want. On a side note, if you checked out http://fireshui.com/mtglinks.php, why exactly is the bigtitle class not working? I used to use fixed sizes before I found out they were bad, the old css is at http://fireshui.com/global/styles.css, and that doesn't work either. This is all hugely confusing. Thanks for any help you can offer!! :-) Having a strange problem with textarea font sizes in Firefox (1.06) See here - http://www.4L.ie/contact.php Text entered in the text fields is appearing correctly, but when entering text into the "Your Query" textarea, the font-size is noticeably smaller and less legible. It appears fine in IE6. My CSS relating to fonts is as follows: Code:
body {
font: 76% verdana, arial, helvetica, sans-serif;
}
input, select, textarea {
font-size: 1em;
}
If I use pixels (ie font-size: 12px) there is no problem. Ems and % seems to mess things up. Anybody able to shed some light on this? A possible bug in Firefox 1.06? Thanks in advance. Hi, If you set a font-size: 7pt and font-family:Verdana in your stylesheet, does the text in your webpage look slightly bigger in Firefox than in IE 6? I'm using Windows by the way ... this is just a general question as some of my menu links are lined up well on IE (which displays text a bit smaller) but overlapping to multiple lines on Firefox (because the text size is slightly bigger) Many thanks! This is yet again another mysterious issue I am having with CSS and the notorious Internet Explorer. I have two divs fashioned into boxes. One is floated to the left the other is floated to the right. The height looks fine in FF but when you look at the bottom border of said 'boxes' the one on the right draws up sooner than the one on the left (when viewed in IE). The CSS definitions for both divs have the same height specified. Any help at all is very appreciated. http://www.ioforge.com/contact Does anyone know why IE7 is displaying this page incorrectly (when compared to Safari, Chrome, FF, IE8)? http://www.harrisdesigns.ca/dev/bestratefinders I noticed the font size at the top increases missing up my "Savings Calculated" - I'm assuming an if IE7 statement on the fonts will fix that. However, more troubling is the way to shoves the left column down. Any tips advice or ideas are greatly appreciated. Thanks in advance, CH... SOLVED Essentially it was a couple of over looked css errors. Left column shoving down was a float error as I forgot set a width, the font size errors were fixed by setting the margins and paddings to on the H elements and using ".px" for font sizes over "em" Hi Hoping someone can give me a pointer to a small problem I'm having: Trying to achieve rounded corner buttons for a tags on a website using CSS and a nested <span tag. Relevant example page is at: http://www.mytophost.co.uk/test/test.html Styles are in the test.html page and the images used are at: http://www.mytophost.co.uk/test/button.gif http://www.mytophost.co.uk/test/buttonh.gif http://www.mytophost.co.uk/test/end.gif http://www.mytophost.co.uk/test/endh.gif All looks fine for me in IE, but bg images align differently in FF. I realise it's probably something in my CSS that's not compliant and so that's why IE works and FF not ... Any help greatly appreciated. intrigue.net -- please copy and paste (link not allowed here since I'm a new member) HTML & CSS both validate with no errors. The page displays correctly in Opera and Firefox, but in IE... 7+ does not color the menu (white), making it invisible <7 displays only half of the page I would love any assistance at all in getting this resolved (aside from bombing MS) Thanks in advance. -=-TS Hello, I am trying to make a website www.jazzsurlaplage.ch/2007/home.php (sorry for the french script over there) Here is the issue : One Firefox or IE 7, the partners box appears to the right side of the page, whereas on IE 6, it appears way at the bottom. you can check out the html source on the page itself (I've written it, not generated, so it must be pretty easy to get) and the css is over here : www.jazzsurlaplage.ch/2007/style.css Here is the part in the file where I define the side box : Code: /*===========SIDE NAVIGATION==================*/
#sideinfo{
left:600px;
width:200px;
position: relative;
margin-top:3px;
margin-bottom:0px;
}
.sidebox{
margin:0px 0px 0px 0px;
padding:15px 0px 0px 0px;
width:200px;
height:30px;
position:relative;
background:transparent url(images/sidehead.jpg) left top no-repeat;
}
.sidebox .sidebody{
position:relative;
padding:0px 10px 0px 10px;
background:url(images/sidebody.jpg) left top repeat-y;
margin-bottom:0px;
text-align:center;
}
.sidebox .sidefooter{
position:relative;
height:30px;
width:200px;
margin-top:0px;
background:url(images/sidefoot.jpg) left top no-repeat;
}
/*============================END SIDE BLOCK===========================*/
/
Here is the part in the html file where I insert the box : Code: <? //sidebar echo '<div id="sideinfo">'; echo '<div class="sidebox">'; echo '<div class="sidebody">'; echo '<img src="images/partenaires.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/arg.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/chatnoir.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/coheran.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/heineken.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/semeuse.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/jardinnerie.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/raiffeisen.jpg" width="130"/>'; echo '<br />'; echo '<img src="images/partenaires/aurelys.jpg" width="130"/>'; echo '<br />'; echo '<img src="images/partenaires/mb.jpg" width="130"/>'; echo '</div>'; echo '<div class="sidefooter"></div>'; echo '</div>'; echo '</div>'; ?> What do I do, and where can I get more info on these kind of issues ? Thanks, Manojo here is the site http://142.177.157.241:8080/bikers/ Well, I have some work to do about opera and IE since they are slow in the browsers making or the standards compliance. Even Opera8 doesn't suport my site and I think that was just released not too long ago. I think I'm going to be changing my browser of choice from Firefox to Netscape 8. I have the beta right now and it looks awesome and has all the functionality of Firefox I want plus it makes it easy to change between IE and netscape without actualy going to IE to see how my site looks. Two birds with one stone. Ok I've been working on this for hours. WordPress is generating some HTML that isn't displaying correctly. At this point I'm just working with the following CSS and HTML: CSS: Code: div#navcontainer {
border: 1px solid blue;
padding-left: 20px;
margin: 0;
width: 177px;
position: relative;
left: 0px;
}
div#navcontainer div#pagenav li.pagenav { /* the outermost list item; seems to apply to the title of the section */
font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
padding-left: 0em;
padding-right: 16px;
margin-left: 0;
width: 175px;
font-weight: normal;
list-style: none;
list-style-type: none;
color: #4f2b0d;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item current_page_item a: link {
display: inline;
padding-bottom: 12px;
color: #4f2b0d;
position: relative;
left: -20px;
}
/* these are the links */
div#navcontainer div#pagenav li.pagenav ul li.page_item a:link { /* any Page item */
display: inline;
width: 175px;
font-weight: normal;
color: #4f2b0d;
line-height: 18px;
margin: 0;
padding-bottom: 0.25em;
text-decoration: none;
list-style: none;
list-style-type: none;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item a:hover { /* any Page item */
display: inline;
width: 175px;
font-weight: normal;
color: #4f2b0d;
line-height: 18px;
margin: 0;
padding-bottom: 0.25em;
text-decoration: underline;
list-style: none;
list-style-type: none;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item current_page_item a:link {
font-family: Georgia;
font-size: 36px;
color: #4f2b0d;
}
HTML: Code: <div id="inside_left_column">
<div id="sidebar">
<ul id="navcontainer">
<ul class="pagenav">
<li class="pagenav">About JCDS
<ul>
<li class="page_item page-item-58"><a href="...?page_id=58" title="Our Mission">Our Mission</a></li>
<li class="page_item page-item-56 current_page_item"><a href="...?page_id=56" title="Welcome from the Head of School">Welcome from the Head of School</a></li>
<li class="page_item page-item-60"><a href="...?page_id=60" title="School Leadership">School Leadership</a></li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
I'm attaching screenshots of what it looks like now (purple underlined links, section title not bold, too much indentation, bullets displaying for all pages), and what I want it to look like (brown text, bold text for section name, no underlines (only on hover), left-aligned, bullet only on current page). I would love to get some help with this! -- TIA Laura S. Hello, I am having trouble with the display: inline tag. ******************************************** Here is the style: H1.nolinebreak { font-size : 12pt; display: inline; } Here is an HTML snippet: <p> Here is my content text. Blah blah <H1 class="nolinebreak"> inline header 1 </H1> blah blah blah <H1 class="nolinebreak"> inline header 2 </H1> </p> ******************************** The second and additional instances of the <h1 class="nolinebreak"> works great. But the first one always puts in a line break. I need them all to display inline. What am I doing wrong? Thanks in advance. Hi CSS gurus, I am a bit stuck with the presentation issues I currently have with my website, http://www.tophatweddings.co.uk. Compare the site layout in IE (6 not 7) and look at it in Firefox. In Firefox you'll notice the borders and backgrounds are not displaying correctly. This is what I want to fix. Has anyone got any suggestions for how I can adjust my CSS to make it display properly in Firefox? Please help Hey everyone, I seem to be having problems on IE7 for a clients website (http://beitelligent.com/clients/sportsdome/ ).. If you view it on IE8 or Firefox 2.X+ it seems to display correctly, all on the same line.. on IE7 it still displays it as a list.. Does anyone know why this is? Thanks, Peter Barbosa I can forsee having display issues on smaller screens and idk how to prepare for this. For example if i use the margin or padding property to say..center an image or align text. Keeping in mind that for example my wrapper div is coded in percent(other things too). So smaller screens=shrinkage, but the code thats not percent values will stay the same. The code is kind of a mess the most used components are at the top. Code:
body {background:#white;
}
#wrap {margin-left:20%;
margin-right:20%;
}
#header {border: 2px solid grey;
background:white;
}
#titlearea {
height:100px;
padding:4px;
font-family:Verdana;
}
#belowimg {background:#6a7c63;
margin:0px;
height:40px;
border-top:2px solid grey;
}
.link {float:left;
margin-top:8px;
margin-left:5px;
background:#6a7c63;
border-right:1px solid #681300;
height:20px;
width:100px;
text-align:center;
text-decoration:none;
font-family:Lucida Grande;
padding-right:3px;
margin-bottom:8px
}
.linklast {float:left;
margin-top:8px;
margin-left:0px;
background:#6a7c63;
height:20px;
width:100px;
text-align:center;
text-decoration:none;
font-family:Lucida Grande;
padding-right:3px;
margin-bottom:8px
}
#main {border:1px solid grey;
background:tan;
padding:10px;
padding-right:0px;
margin-top:0px;
font-size:.80em;
font-family:Verdana;
color:#000000;
height:100%;
}
#rightcontent {float:right;
border-left:1px dashed grey;
padding-left:0px;
padding-right:0px;
height:90%;
width:230px;
font-size:small;
margin-left:8px;
background:white;
}
.button {
font-size:small;
font-family:Verdana;
border-top:1px solid grey;
padding:8px;
margin:0px;
padding-bottom:0px;
background:white;
}
.button.center {
padding-left:23px;
text-align:center;
}
.button.right {float:right;
border:1px solid red;
padding:2px;
background:blue;
}
#imagescroller{width:530px;
float:left;
margin-right:10px;
margin-left:10px;
height:300px;
padding:4px;
border-top:2px solid #f1e1b8;
border-left:2px solid #f1e1b8;
border-right:2px solid #f1e1b8;
border-bottom:2px solid #f1e1b8;
background:blue;
}
#bottom {background:blue;
border-bottom:2px solid red;
border-right:2px solid #f1e1b8;
border-left:2px solid #f1e1b8;
height:30px;
padding:0px;
color:grey;
margin-top:0px;
width:600px;
height:30px;
}
.box {
padding-top:0px;
margin:1px;
font-size:.80em;
font-style:strong;
float:left;
color:grey;
background:white;
font-family:Lucida Grande;
line-height:1px;
margin-top:196px;
}
.left {float:left;
padding-right:20px;
padding-bottom:0px;
margin-bottom:0px;
}
.right {float:right;
border-left:1px solid grey;
border-bottom:1px solid grey;
background:white;
}
.inside {border-top:1px solid white;
padding-left:3px;
padding-right:3px;
background:#ffa812;
font-family:Verdana;
font-size:.70em;
height:20px;
background:#EEC900;
color: #000000;
}
.bottom {height:10px;
background:#DEECFF;
border-top:1px solid grey;
}
.imagebottom {background:white;
border-bottom:2px double #f1e1b8;
padding:3px;
color:grey;
}
#blockquote {margin-left:18%;
font-size:.60em;
padding-left:40px;
color:brown;
font-family:Verdana;
font-style:italic;
background:white;
border-left:4px dotted orange;
}
#topping {border-bottom:1px solid grey;
margin-left:1px;
margin-top:4px;
}
#bottomborder {border-bottom:1px solid grey;
margin-left:1px;
}
#footer {border:1px solid grey;
height:30px;
margin-top:5px;
}
#test {height:20px;}
.test1 {margin-top:3px;
border-top:1px solid #fcfcfc;
height:0px;
}
.test2 {height:0px;
border-top:1px solid #f5f5f5;
}
.test3 {height:0px;
border-top:1px solid #ededed;
}
.test4 {height:0px;
border-top:1px solid #e5e5e5;
}
.test5 {height:0px;
border-top:1px solid #dedede;
}
.test6 {height:0px;
border-top:1px solid #d9d9d9;
}
.test7{height:0px;
border-top:1px solid #d3d3d3;
}
.test8 {height:0px;
border-top:1px solid #cfcfcf;
}
.test9 {height:0px;
border-top:1px solid #c9c9c9;
}
.test10{height:0px;
border-top:1px solid #c2c2c2;
}
#testy{height:20px;
color:000000;
}
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em;} /* 16px */
h6 {font-size: 1em; font-family:Verdana;color:brown;} /* 14px */
h2, h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;
}
/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
color: #c7a01e;
padding: 0 1px;
text-decoration: none;
}
a:hover, a:active {
/*background-color: #C74350;*/
color: #f09419;
text-decoration: underline;
text-shadow: 1px 1px 1px #333;
}
strong, b {font-weight: bold;}
060 em, i {font-style:
Thanks Screw it. I have a div in my header that contains an image. The height of the image is 82px. For some reason in firefox (and chrome too) if I don't set the div height to 125px it gets cut off. It looks OK in IE6 without the height set, but with it set as needed for firefox it then creates a space in IE. My header file has: Code:
<div id= "logo" ><img src = "images/logo_LWV.gif"></div>
<div id = "topNav">
<div id = "topNavMenu">
<a class = "top" href="index.php">Home</a>
<a class = "top" href="about.php">About Us</a>
<a class = "top" href="join.php">Join</a>
<a class = "top" href="funds.php">Special Funds</a>
<a class = "top" href="contact.php">Contact</a>
</div> <!-- end topNavMenu -->
</div> <!-- end topNav -->
</div> <!-- end topBar -->
<div id = "imagebar"><img src = "images/lwvCorvallis.jpg"></div>
<div id = "greenbar">
<div id = "pagetitle">
<p>Title</p>
</div><!-- end pagetitle -->
</div> <!-- end greebar -->
and the css is: Code: #topbar
{
dispaly:block; width: 800px;
}
#logo
{
float:left;
}
#topNav
{
float:right;
width: 612px;
height: 65px;
background-color:#cc0033;
}
#topNavMenu
{
position:relative; top:40px;
text-align:left;
color: white;
}
#imagebar
{
display:block;
width: 800px; height:125px;
}
#greenbar
{
display:block;
width: 800px; height: 90px;
background: url(images/greenbar.jpg); background-repeat: no-repeat;
z-index: 0;
}
#pagetitle
{
position:relative; left: 200px;top:25px;
width: 600px;
color: white;
z-index: 1;
}
The site is he http://www.lwv.corvallis.or.us/ What's going on? |
|||||||