Forum Moderators: not2easy
Can anyone offer any suggestions or advice? Thanks :)
[edited by: SuzyUK at 1:27 pm (utc) on Jan. 28, 2007]
[edit reason] removed site specifics per TOS #13 [/edit]
Conditional comments only target IE on windows and are ignored by all other browsers.
Conditional comments are HTML and consequently must go in your HTML file, ideally in your <head> section, to override your global stylesheet.
They take the form:
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="/css/ie6plus.css" />
<![endif]-->
This delivers the stylesheet "ie6plus.css" to IE greater than or equal to version 6 etc... many variations.
Conditional comments are generally prefered over CSS hacks, as they are far more future proof. CSS Hacks may not work in the next version of a particular browser.
Google for "conditional comments", or Quirksmode has a great article on them:
[quirksmode.org...]
But do you have any ideas on how to get it working in FF, would it be the text I need to make smaller or somthing?
Edit: Whenever I edit the style sheet and look at it in firefox it dosn't change it for some reason but it changed in IE, why would that be?
It lets me change the links but I can't change the font, font size or the background.
[edited by: Jeigh at 12:06 am (utc) on Jan. 29, 2007]
...any ideas on how to get it working in FF, would it be the text I need to make smaller or somthing?
The text *should* appear about the same size in both FF and IE7 - so long as you are viewing at the browsers 'default' size. ie. not larger/smaller etc.
Whenever I edit the style sheet and look at it in firefox it dosn't change it for some reason but it changed in IE, why would that be?
It sounds as if you *might* have an error in your stylesheet, that is preventing FF from displaying your style. FF is stricter (more correct) than IE. IE can sometimes let you get away with errors in your stylesheet(?) Paste the relevant CSS here and we can check it out...
[edit]
...And I've just noticed SuzyUK's great post on Conditional Comments:
[webmasterworld.com...]
[/edit]
<style type="text/css" title="graphics2youstyle" media="screen">
<!--
body {
background-color: #0973bd;
color: #a6a6a6;
font-family: Verdana, Geneva, Arial,
sans-serif;
font-size: 5pt;
line-height: 100%
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
h1 {color: #2fc800;
font-family: Verdana, Geneva, Arial,
sans-serif }
h2 {color: #2fc800;
font-family: Verdana, Geneva, Arial,
sans-serif }
h3 {color: #2fc800;
font-family: Verdana, Geneva, Arial,
sans-serif }
h4 {color: #2fc800;
font-family: Verdana, Geneva, Arial,
sans-serif }
h5 {color: #2fc800;
font-family: Verdana, Geneva, Arial,
sans-serif }
h6 {color: #2fc800;
font-family: Verdana, Geneva, Arial,
sans-serif }
a:link { color: #2fc800; text-decoration: none }
a:visited { color: #2fc800; text-decoration: none }
a:hover { color: #109ef0; text-decoration: underline }
a:active { color: #109ef0; text-decoration: none }
/*
#adbanner1 {
width:600px;
height:120px;
background: url("banners/adverttest.gif") no-repeat;
} */
-->
</style>
Thats the CSS code there and thanks for that link :)
[edited by: Jeigh at 1:18 am (utc) on Jan. 29, 2007]
body {
background-color: #0973bd;
color: #a6a6a6;
font-family: Verdana, Geneva, Arial,
sans-serif;
font-size: 5pt;
line-height: 100%
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
(my big)
You need to have a semi-colon after the
line-heightYou also have set your font size really, really small. Firefox by default has a minimum font size, defined in the Preferences > Content > Fonts & Colors > Advanced section - which I believe is usually set to 9pt. This is not changeable by author on user machines, so it's just something an author will have to live with (typically, anything so small is illegible, thus inaccessible.) Generally, users on Firefox like the greater control.
<style type="text/css" title="graphics2youstyle" media="screen">
<!--
body {
background-color: #0973bd;
color: #a6a6a6;
font-family: Verdana, Geneva, Arial,
sans-serif;
font-size: 12pt;
line-height: 100%;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
h1 {color: #2fc800;
font-family: Verdana, Geneva, Arial,
sans-serif }
h2 {color: #2fc800;
font-family: Verdana, Geneva, Arial,
sans-serif }
h3 {color: #2fc800;
font-family: Verdana, Geneva, Arial,
sans-serif }
h4 {color: #2fc800;
font-family: Verdana, Geneva, Arial,
sans-serif }
h5 {color: #2fc800;
font-family: Verdana, Geneva, Arial,
sans-serif }
h6 {color: #2fc800;
font-family: Verdana, Geneva, Arial,
sans-serif }
a:link { color: #2fc800; text-decoration: none }
a:visited { color: #2fc800; text-decoration: none }
a:hover { color: #109ef0; text-decoration: underline }
a:active { color: #109ef0; text-decoration: none }
/*
#adbanner1 {
width:600px;
height:120px;
background: url("banners/adverttest.gif") no-repeat;
} */
-->
</style>
I changed the bits you said, but there must be more problems aswell =P The font size and everything stays the same no matter what I change it to.
font-size: 5pt;
line-height: 100%;
You are missing a ';' after your line-height:100% - although that does not seem to be your immediate problem.
It seems that there is a lower limit for the size of fonts in FF?!?! 5pt is very small - approaching the barely readable in IE6 (on my machine). After a little experimentation, it seems that FF's lower limit is 7pt! Any size lower than this renders as 7pt?! (I have not noticed this before - is it dependant on screen resolution!?)
Just to note... 'pt' (point) sizes are really intended for printed media. 'px' (pixels) for screen. But myabe you should consider using a relative dimension such as 'em' that will resize in IE6 and below?
[w3.org...]
[edit]Refering to first code block - seems I was a bit slow on the post[/edit]
Edit: Here's the top part of the XHTML if it matters :)
<!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">
<head>
<link rel="stylesheet" href="g2ustyleff.css" type="text/css" media="screen">
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body style="margin-top:0px; margin-bottom:0px;">
[edited by: Jeigh at 2:19 am (utc) on Jan. 29, 2007]
What DOCTYPE are you using?
Are you able to post a small HTML example?
It seems that there is a lower limit for the size of fonts in FF?!?! 5pt is very small - approaching the barely readable in IE6 (on my machine). After a little experimentation, it seems that FF's lower limit is 7pt! Any size lower than this renders as 7pt?! (I have not noticed this before - is it dependant on screen resolution!?)
Yeah, I mentioned that :)
You also have set your font size really, really small. Firefox by default has a minimum font size, defined in the Preferences > Content > Fonts & Colors > Advanced section - which I believe is usually set to 9pt. This is not changeable by author on user machines, so it's just something an author will have to live with (typically, anything so small is illegible, thus inaccessible.) Generally, users on Firefox like the greater control.
It's not resolution dependent, but it is changeable by the user. My minimum font size is currently 10pt :)
The font size and everything stays the same no matter what I change it to.
Hmm, that's interesting. What element are you looking at when you say it's not changing? Is it a form control (select, textarea, input)?
You'll have to redefine in that case - form controls do not inherit the font properties of its parents.
By the way, you can streamline your CSS a little more by:
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;margin: 0;font-family: Verdana, Geneva, Arial, sans-serif;a:link { color: #2fc800; text-decoration: none }
a:visited { color: #2fc800; text-decoration: none }
a:hover { color: #109ef0; text-decoration: underline }
a:active { color: #109ef0; text-decoration: none }a:link, a:visited { color: #2fc800; text-decoration: none }
a:hover, a:active { color: #109ef0; text-decoration: none }
Is your "g2ustyleff.css" external stylesheet exactly as you've posted above? In which case you must not have the <style><!-- --></style> HTML tags in your external CSS file.
Firefox by default has a minimum font size, defined in the Preferences > Content > Fonts & Colors > Advanced section ... My minimum font size is currently 10pt :)
Cheers for that Setek, mine is also set at 10. But I think that must be 10px, as I can set a size of 7pt in FF OK (but not 9px).
[edited by: penders at 2:36 am (utc) on Jan. 29, 2007]
Is your "g2ustyleff.css" external stylesheet exactly as you've posted above? In which case you must not have the <style><!-- --></style> HTML tags in your external CSS file.
Ooh, good point! I never thought of that.
Jeigh, a good tip is to get rid of the small parse errors by validating your (X)HTML and CSS. If your external stylesheet does indeed have HTML elements, the validator should pick up on this and let you know to remove them (and it will pick up the line-height part, and others :D)
HTML Validator:
[validator.w3.org...]
CSS Validator:
[jigsaw.w3.org...]
I will try what you said to do with the CSS then validate the XHTML and CSS, I'm sure I will have problems so I will post back here when I do :P
Edit: Haha, It worked! I really wasn't expecting that, everything seems to be working perfectly and suprisingly it works fine in IE aswell without using the if IE thing :P
Thanks again guys.
[edited by: Jeigh at 2:45 am (utc) on Jan. 29, 2007]
