[css-d] CSS background image hover problem
Hi, I'd be very grateful for help. I am quite new to CSS and a little confused.
Thank you very much in advance.
The site I am building is here at www.euro-peanflooring.co.uk. My problem is in
the footer at the bottom of the page, with the “back to top” image/link.
When a user clicks on the back to top image/link they should be returned to
the top of the page. I have the functionality where they click on the link and
are returned to the top working well.
I am trying to create the effect where the “back to top” image/link is
initially coloured in white, as is currently happening. But when a user hover’s
over the “back to top” image/link, I want it to change colour to yellow.
To try and achieve this effect I am using a single background image which
contains both the white (link) and yellow (hover) states, so the background
image should be positioned “left bottom” or “left top” depending on which state
is to be displayed. What am I doing wrong?
My HTML code so far is as follows:
a href=#pageTop class=backToTopdiv id=backToTop/div/a
My CSS code so far is as follows:
#footer #backToTop {
width: 89px;
height: 78px;
margin-left: 16px;
margin-top: 20px;
position: absolute;
background: url(../images/backToTop.png) no-repeat left bottom;
}
#footer #backToTop a.backToTop, #footer #backToTop a.backToTop:link, #footer
#backToTop a.backToTop:visited {
background: url(../images/backToTop.png) no-repeat left bottom;
}
#footer #backToTop a.backToTop:hover {
background: url(../images/backToTop.png) no-repeat left top;
}
#footer #backToTop a.backToTop:active {
background: url(../images/backToTop.png) no-repeat left top;}
_
Use Hotmail to send and receive mail from your different email accounts
http://clk.atdmt.com/UKM/go/186394592/direct/01/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS background image hover problem
Forget about fiddling with image placement - just use two different images. Val 2009/11/16 John Franks johnfra...@hotmail.co.uk: I am trying to create the effect where the “back to top” image/link is initially coloured in white, as is currently happening. But when a user hover’s over the “back to top” image/link, I want it to change colour to yellow. -- --- Somewhere, something incredible is waiting to be known - Carl Sagan www.oakleafcircle.org.uk www.valdobson.co.uk www.astrodiary.co.uk __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS background image hover problem
CC: johnfra...@hotmail.co.uk
From: e...@l-c-n.com
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] CSS background image hover problem
Date: Mon, 16 Nov 2009 21:38:16 +0900
On Nov 16, 2009, at 8:12 PM, John Franks wrote:
Hi, I'd be very grateful for help. I am quite new to CSS and a
little confused. Thank you very much in advance.
First things first: welcome around !
The site I am building is here at www.euro-peanflooring.co.uk
I am trying to create the effect where the “back to top” image/link
is initially coloured in white, as is currently happening. But when
a user hover’s over the “back to top” image/link, I want it to
change colour to yellow.
To try and achieve this effect I am using a single background image
which contains both the white (link) and yellow (hover) states, so
the background image should be positioned “left bottom” or “left
top” depending on which state is to be displayed. What am I doing
wrong?
My HTML code so far is as follows:
a href=#pageTop class=backToTopdiv id=backToTop/div/a
My CSS code so far is as follows:
#footer #backToTop {
...
}
#footer #backToTop a.backToTop, #footer #backToTop a.backToTop:link,
#footer #backToTop a.backToTop:visited {
...
}
Did you intended to have the div nested inside the a href element ?
If so, one, it is an invalid html construct; and two, that might be
the source of your problems because the selectors you use have it in
reverse (and thus don't match what is in your html).
#footer #backToTop a.backToTop translates as:
select a 'a' with class 'backToTop' that is a descendent of an
element with ID 'backToTop' that itself is a descendent of and element
with ID 'footer'
As in this HTML
div id=footerdiv id=backToTopa href=backToTopmy
text link/a/div/div
(with that html structure, your css code should work fine.)
SelectOracle is a handy resource to translate all those selectors in a
human readable way.
http://gallery.theopalgroup.com/selectoracle/
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
Ok, thanks everyone for your help. I am nearly there - Please note that using
seperate images is not an option. I need to learn this background-positioning
technique.
The updated “back to top” image/link in the footer of the site can now be seen
at www.euro-peanflooring.co.uk. You can see that now the “a” letters are used
within the image/link. And as I hover over the “a” letters I get my intended
result (only within the “a” text area). But when I remove the “a” letters then
the whole thing breaks. So I need to remove the “a” letters and then when
hovering over, I still need the image position to change successfully.
Are there any further ideas?
My updated HTML code:
div id=footerdiv id=backToTopa href=#pageTop
class=backToTopa/a/div/div
My updated CSS code:
#footer {
background-image: url(../images/footerBackground.gif);
height: 350px;
position: relative;
}
#footer #backToTop {
width: 89px;
height: 78px;
display: block;
margin-left: 16px;
margin-top: 26px;
position: absolute;
background: url(../images/backToTop.png) no-repeat left bottom;
}
#footer #backToTop a.backToTop, #footer #backToTop a.backToTop:link, #footer
#backToTop a.backToTop:visited {
background: url(../images/backToTop.png) no-repeat left bottom;
}
#footer #backToTop a.backToTop:hover, #footer #backToTop a.backToTop:active {
background: url(../images/backToTop.png) no-repeat left top;
}
_
View your other email accounts from your Hotmail inbox. Add them now.
http://clk.atdmt.com/UKM/go/186394592/direct/01/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS background image hover problem
At 1:37 PM + 11/16/09, John Franks wrote: Ok, thanks everyone for your help. I am nearly there - Please note that using seperate images is not an option. I need to learn this background-positioning technique. Try this: http://webbytedd.com/bb/replace-image1/ There are other tips there. Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS background image hover problem
On Mon, Nov 16, 2009 at 8:00 AM, Jack Timmons jorac...@gmail.com wrote:
}
#footer #backToTop a{
visibility: hidden;
}
That should accomplish what you're seeking.
--
-Jack Timmons
http://www.trotlc.com
Twitter: @codeacula
As a side note:
A quick and dirty fix to making the link clickable would be replacing
the visibility: hidden with:
#footer #backToTop a{
display:block;
height: 78px;
width: 89px;
}
And removing all the text from the anchor tag (a)
--
-Jack Timmons
http://www.trotlc.com
Twitter: @codeacula
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS background image hover problem
On Mon, Nov 16, 2009 at 7:37 AM, John Franks johnfra...@hotmail.co.uk wrote:
Ok, thanks everyone for your help. I am nearly there - Please note that using
seperate images is not an option. I need to learn this background-positioning
technique.
The updated “back to top” image/link in the footer of the site can now be
seen at www.euro-peanflooring.co.uk. You can see that now the “a” letters are
used within the image/link. And as I hover over the “a” letters I get my
intended result (only within the “a” text area). But when I remove the “a”
letters then the whole thing breaks. So I need to remove the “a” letters and
then when hovering over, I still need the image position to change
successfully.
Are there any further ideas?
My updated HTML code:
div id=footerdiv id=backToTopa href=#pageTop
class=backToTopa/a/div/div
My updated CSS code:
#footer {
background-image: url(../images/footerBackground.gif);
height: 350px;
position: relative;
}
#footer #backToTop {
width: 89px;
height: 78px;
display: block;
margin-left: 16px;
margin-top: 26px;
position: absolute;
background: url(../images/backToTop.png) no-repeat left bottom;
}
#footer #backToTop a.backToTop, #footer #backToTop a.backToTop:link, #footer
#backToTop a.backToTop:visited {
background: url(../images/backToTop.png) no-repeat left bottom;
}
#footer #backToTop a.backToTop:hover, #footer #backToTop a.backToTop:active {
background: url(../images/backToTop.png) no-repeat left top;
}
#footer {
background-image: url(../images/footerBackground.gif);
height: 350px;
position: relative;
}
#footer #backToTop {
width: 89px;
height: 78px;
display: block;
margin-left: 16px;
margin-top: 26px;
position: absolute;
background: url(../images/backToTop.png) no-repeat left bottom;
}
#footer #backToTop:hover {
background: url(../images/backToTop.png) no-repeat left top;
}
#footer #backToTop a{
visibility: hidden;
}
That should accomplish what you're seeking.
--
-Jack Timmons
http://www.trotlc.com
Twitter: @codeacula
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] FireFox/CSS Question
Hi gang: The following link is a pure-css menu that works correctly in all browsers I've tested, except for FireFox: http://php1.net/a-menus/simple-drop-down/ When viewing the above link in FireFox, there's a right-gap between the menu items and subsequent fly-out menus. I don't know why FireFox treats this menu differently than other browsers. Can anyone tell me why FireFox does this? Thanks, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS background image hover problem
Success...! :o) Here the back to top image/link is finished and working well www.euro-peanflooring.co.uk. Thank you all so much for your help. As a fast learning newbie to web design may I say that community support from you guys is simply priceless, and indeed so different to all other industries where everyone is out for themselves. I will of course contribute where I can as my skills improve. Thanks again all. _ Add your Gmail and Yahoo! Mail email accounts into Hotmail - it's easy http://clk.atdmt.com/UKM/go/186394592/direct/01/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS background image hover problem
On Mon, Nov 16, 2009 at 9:05 AM, Jack Timmons jorac...@gmail.com wrote:
On Mon, Nov 16, 2009 at 8:00 AM, Jack Timmons jorac...@gmail.com wrote:
}
#footer #backToTop a{
visibility: hidden;
}
That should accomplish what you're seeking.
--
-Jack Timmons
http://www.trotlc.com
Twitter: @codeacula
As a side note:
A quick and dirty fix to making the link clickable would be replacing
the visibility: hidden with:
#footer #backToTop a{
display:block;
height: 78px;
width: 89px;
}
And removing all the text from the anchor tag (a)
--
-Jack Timmons
http://www.trotlc.com
Twitter: @codeacula
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
You have the background image on both the div#backToTop and the link inside
of the div. You can remove the background from the div and then move these
properties over to that link
display:block;
height: 78px;
width: 89px;
visibility:hidden just makes the link disappear so instead you'll want
text-indent: -1px; to move it off screen but still have something there
for search engines.
also, display: block doesn't need to be attached to divs as they are already
block level elements.
Cheers,
Jeff
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] has anyone used this conditional-CSS software?
has anyone used this conditional-CSS software? http://www.conditional-css.com/index . Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 http://www.checkoutacollege.comhttp://www.checkoutacollege.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FireFox/CSS Question
On Mon, Nov 16, 2009 at 9:04 AM, tedd tedd.sperl...@gmail.com wrote:
Hi gang:
The following link is a pure-css menu that works correctly in all
browsers I've tested, except for FireFox:
http://php1.net/a-menus/simple-drop-down/
When viewing the above link in FireFox, there's a right-gap between
the menu items and subsequent fly-out menus.
I don't know why FireFox treats this menu differently than other browsers.
Can anyone tell me why FireFox does this?
Thanks,
tedd
Because of the rule in menu.css:
*
{
margin:0;
padding:0;
-moz-box-sizing: border-box !important; --- This one right here.
}
--
-Jack Timmons
http://www.trotlc.com
Twitter: @codeacula
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] conditional css for Opera?
I have some foreign language text on my page (Cambodian) which I have rendered in html. Opera, IE, and FF all render the text in different sizes. I have tried em, pt, px, %. I can do a conditional style sheet to target IE, but I don't have a way to target Opera. Can anyone tell me what the issue is with Opera and how I might solve this? Thank you. Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 http://www.checkoutacollege.comhttp://www.checkoutacollege.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS background image hover problem
On Nov 16, 2009, at 8:12 PM, John Franks wrote:
Hi, I'd be very grateful for help. I am quite new to CSS and a
little confused. Thank you very much in advance.
First things first: welcome around !
The site I am building is here at www.euro-peanflooring.co.uk
I am trying to create the effect where the “back to top” image/link
is initially coloured in white, as is currently happening. But when
a user hover’s over the “back to top” image/link, I want it to
change colour to yellow.
To try and achieve this effect I am using a single background image
which contains both the white (link) and yellow (hover) states, so
the background image should be positioned “left bottom” or “left
top” depending on which state is to be displayed. What am I doing
wrong?
My HTML code so far is as follows:
a href=#pageTop class=backToTopdiv id=backToTop/div/a
My CSS code so far is as follows:
#footer #backToTop {
...
}
#footer #backToTop a.backToTop, #footer #backToTop a.backToTop:link,
#footer #backToTop a.backToTop:visited {
...
}
Did you intended to have the div nested inside the a href element ?
If so, one, it is an invalid html construct; and two, that might be
the source of your problems because the selectors you use have it in
reverse (and thus don't match what is in your html).
#footer #backToTop a.backToTop translates as:
select a 'a' with class 'backToTop' that is a descendent of an
element with ID 'backToTop' that itself is a descendent of and element
with ID 'footer'
As in this HTML
div id=footerdiv id=backToTopa href=backToTop class=my
text link/a/div/div
(with that html structure, your css code should work fine.)
SelectOracle is a handy resource to translate all those selectors in a
human readable way.
http://gallery.theopalgroup.com/selectoracle/
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FireFox/CSS Question
tedd wrote: Hi gang: The following link is a pure-css menu that works correctly in all browsers I've tested, except for FireFox: http://php1.net/a-menus/simple-drop-down/ When viewing the above link in FireFox, there's a right-gap between the menu items and subsequent fly-out menus. I don't know why FireFox treats this menu differently than other browsers. Can anyone tell me why FireFox does this? Thanks, tedd Because it does not like this? -moz-box-sizing: border-box !important; ~d __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS background image hover problem
John,
First, take the background image off of the #backToTop div. Then you'll see
that the image isn't even there to change color.
The problem is that you haven't set dimensions on your A tag. Once you do
that, everything should work as you intend.
Like this:
a.backtotop {
display: block; /* lets you set dimensions for the tag */
height: 78px; /* height of image */
width: 89px; /* width of image */
}
You don't need to set the link, visited, hover, or active states on this
because these styles will be the same for all four states.
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] conditional css for Opera?
Angela French wrote: I have some foreign language text on my page (Cambodian) which I have rendered in html. Opera, IE, and FF all render the text in different sizes. I have tried em, pt, px, %. I can do a conditional style sheet to target IE, but I don't have a way to target Opera. Can anyone tell me what the issue is with Opera and how I might solve this? Thank you. A live example of your problem would help us figure out what's causing your problem. Without such an example we'll have to guess, and can only provide you with general information. 1: there is no really reliable way to target Opera. The other browsers OTOH, can be hacked/targeted quite reliable - for the time being at least. 2: Opera has 'minimum font size' set by default - the value varies slightly with what OS it's on, and if you run into that setting then there's nothing you can do from your end. regards Georg __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Links not adhering to style sheet in IE 7/8
Two firsts for me today - This is my first email to this group and I put my first website up today. Having never looked at it in IE (only FF and Safari) I discovered weirdness happening. The links on the site don't seem to be adhering properly to the style sheets. What's weird is this is only true for some of the links and seems to continually change as you go through the site. In my style sheet I set a style for all the links in the main content and sidebar areas to be bold, purple and with no decoration. When hovered, I set them to be a lighter purple, bold and with a line decoration. When visited, I set the links to return to their original state. This all works magically and wonderfully in FF/Safari. However, in IE 7/8 it's not. The links show in the state I've set for the normal view sometimes but also show 'unbolded' and with line decorations other times. Also, sometimes the links are displaying the hover style properly and sometimes not. Crazy. Any ideas on what's up would be greatly appreciated. Here's the site: http://www.portlandwomenslaw.com Thanks for your help! Jason __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] conditional css for Opera?
Hi Angela,
I've never replied to any of these posts but am quite interested in
the questions that come up so bear with me.
What you describe reminds me of something I was taught in my CSS class
at UCLA this past August. My teacher instructed us to add this code to
our CSS page:
/* Simplified Meyer Reset
modified from http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, object,
h1, h2, h3, h4, h5, h6, p, a, img, sup,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
This way it clears all of the default settings of each browser to 0.
You can read more about it here:
http://meyerweb.com/eric/tools/css/reset/
Don't know if this will help but it's worth a try.
Regards,
Yolanda
On Nov 16, 2009, at 10:14 AM, Angela French wrote:
I have some foreign language text on my page (Cambodian) which I
have rendered in html. Opera, IE, and FF all render the text in
different sizes. I have tried em, pt, px, %. I can do a
conditional style sheet to target IE, but I don't have a way to
target Opera. Can anyone tell me what the issue is with Opera and
how I might solve this? Thank you.
Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
http://www.checkoutacollege.comhttp://www.checkoutacollege.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] conditional css for Opera?
And to try to make this a full answer; first I find it necessary to repeat the earlier warning, browser detection can be faulty: https://developer.mozilla.org/En/Browser_Detection_and_Cross_Browser_Support I don't think it can be stated enough, well written CSS that comes from well planned and standards compliant development standpoint can save you from needing browser detection. A lot of cross-browser issues can be remedied by finding the fault in the CSS that is causing it. Usually due to inheritance issues, *Gasp* developing from an IE point of view, and the final main bugger is the browser developers themselves. It is their product and as such they have the right to have it interpret HTML and CSS they way they see fit. Here are some good references for JavaScript based browser detection http://www.quirksmode.org/js/detect.html#string http://www.quirksmode.org/blog/archives/2006/07/browser_detect.html One caveat - The new version of Opera 10 for Windows (haven't tested Mac or Mini yet) shows a new addition to the userAgent string - Version. So if you print out the navigator.userAgent you will see both Opera/9.8 and Version/10.01. Not sure why they have done this and this helps drive home the point of NOT using browser detection. You cannot know what developers might change or add and this can break your sites and cause you a lot of work down the road. Additional references here http://www.webreference.com/tools/browser/javascript.html http://www.hallmarcwebsites.com/brow.html (view source) Marc Hall HallMarc Websites 610.446.3346 www.HallMarcWebsites.com __ Information from ESET Smart Security, version of virus signature database 4613 (20091116) __ The message was checked by ESET Smart Security. http://www.eset.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] conditional css for Opera?
On Nov 17, 2009, at 3:14 AM, Angela French wrote: I have some foreign language text on my page (Cambodian) which I have rendered in html. Opera, IE, and FF all render the text in different sizes. I have tried em, pt, px, %. I can do a conditional style sheet to target IE, but I don't have a way to target Opera. Can anyone tell me what the issue is with Opera and how I might solve this? Thank you. Hard to say, without a URL :-). Does your font-stack include a font that contains glyphs for Cambodian (Khmer, I suppose) ? If the answer is no, there may be the first and most important issue. Each browsers may look up for a different font on the OS. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] conditional css for Opera?
Angela French wrote: I have some foreign language text on my page (Cambodian) which I have rendered in html. Opera, IE, and FF all render the text in different sizes. I have tried em, pt, px, %. I can do a conditional style sheet to target IE, but I don't have a way to target Opera. Can anyone tell me what the issue is with Opera and how I might solve this? Thank you. Angela French Internet Specialist State Board for Community and Technical Colleges 360-704-4316 http://www.checkoutacollege.comhttp://www.checkoutacollege.com/ The only way to target Opera 9- or 10 is by using a xml prolog in your source before the doctype. http://css-class.com/test/bugs/opera/opera-tilde-selector-bug.htm This does cause IE6 (IE5 is always in quirks) to go into quirks mode, thus the box model is interpreted differently. http://css-class.com/test/css/box/box-model.htm And the changes needed. http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41 -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] conditional css for Opera?
Yolanda Aguirre wrote: Hi Angela, I've never replied to any of these posts but am quite interested in the questions that come up so bear with me. What you describe reminds me of something I was taught in my CSS class at UCLA this past August. My teacher instructed us to add this code to our CSS page: /* Simplified Meyer Reset modified from http://meyerweb.com/eric/tools/css/reset/ */ You can read more about it here: http://meyerweb.com/eric/tools/css/reset/ Don't know if this will help but it's worth a try. Regards, Yolanda In my opinion, that is uninformed teaching. University teachers may not be up to speed with the fact that all current versions of all rendering engines have the same CSS defaults. This includes IE8. http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm There is no need now to level the playing field. Also the IE7- hasLayout bugs a well documented and solutions are given. http://www.satzansatz.de/cssd/onhavinglayout.html or for hasLayout and collapsing margins. http://css-class.com/test/bugs/ie/haslayout-margins.htm -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
