[css-d] Creating inner border on hover
Hello, http://201.51.69.207:8081/fotos Take a look at the thumbs. Hover the mouse over them. You can see a "inner" border is created. However, it isn't yet the way I wanted. Becouse of the margin rule, the img element "jumps" a pixel towards the top. I want something like the effect in this page: http://www.globo.com/ (hover on any of the thumbs there and see) and have failed to duplicate the effect. If someone could helpe me or at least put me in the right direction I would be grateful! Thanks. __ css-discuss [EMAIL PROTECTED] 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] Inherited color property not working
Well, have only tested in FF. Actually I added a :hover pseudo-class to the
span selector, however, I would like the span to become color:#FFF when the
user hovered the parent element. Anyways, not a big issue really.
Thanks for your attention!
Marcelo.
On Feb 18, 2008 11:18 AM, Jukka K. Korpela <[EMAIL PROTECTED]> wrote:
> Marcelo de Moraes Serpa wrote:
>
> > Sorry, here's the url:
> > http://datatransp.dyndns.org:8070/datatransp/suporte-downloads - the
> > left "portlet", hover the mouse and see.
>
> No, I cannot see any particular problematic effect (on IE 7). I suppose
> "portlet" means the two links "Fórum" and "Downloads". They are in small
> font with insufficient contrast, but you seem to say that there is a
> problem when they are hovered. What I see on hover is somewhat _more_
> readable.
>
> Previously you wrote:
>
> >>> However, when I hover the div, the span inside doesn't seem to
> >>> inherit the color property (#FFF) and stays with its original
> >>> color, almost hiding itself with the background color (since its
> >>> default color is greyish).
>
> So I cannot see the problem. You might be experiencing some difficulties
> with browsers that behave differently from IE 7. But the page as a
> whole, with all that JavaScript code (which has the potential of
> modifying style properties) and several CSS files looks fairly
> complicated, so I think you should first try to isolate the problem in
> as simple a test case as possible. Alternatively, you could try and
> simplify the markup and the relevant part(s) of the style sheet(s) so
> that there are no redundant elements that could cause surprises.
>
> Jukka K. Korpela ("Yucca")
> http://www.cs.tut.fi/~jkorpela/ <http://www.cs.tut.fi/%7Ejkorpela/>
>
> __
> css-discuss [EMAIL PROTECTED]
> 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 [EMAIL PROTECTED]
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] Inherited color property not working
Sorry, here's the url:
http://datatransp.dyndns.org:8070/datatransp/suporte-downloads - the left
"portlet", hover the mouse and see.
Cheers,
Marcelo.
On Feb 17, 2008 2:22 PM, Jukka K. Korpela <[EMAIL PROTECTED]> wrote:
> Marcelo de Moraes Serpa wrote:
>
> > I have the following piece of HTML.
>
> It's generally best to post the URL when asking for help with a specific
> question.
>
> >
> >
>
> This may or may not relate to the styling problems: why do you use this
> apparently redundant markup?
>
> > Downloads
>
> And this apparently redundant ? Or are there some CSS rules that
> use it?
>
> > .navTreeItem a:hover,
> > dd.portletItem .navTreeItem a:hover {
>
> This looks odd - referring to markup that is not present in the
> markup snippet you gave.
>
> > border: &dtml-borderWidth; &dtml-borderStyle;
> > &dtml-globalBorderColor;;
>
> That's rather mysterious. Is this in an embedded style sheet, or in a
> file to be preprocessed, or what? What will happen to the &dtml things?
>
> > What I want it to do is to change the background color of li to #000
> > AND the color of the fonts to #FFF.
>
> But the rule relates to elements only. You might need to set the
> dimensions of that element (and its display value) so that it occupies
> there entire element's content, if that's what you want.
>
> > However, when I hover the div, the span inside doesn't seem to inherit
> > the color property (#FFF) and stays with its original color, almost
> > hiding itself with the background color (since its default color is
> > greyish).
>
> A inside an should inherit the color of its parent, _unless_
> some style sheet sets the element's color. However, if you have
> an explicit rule for the color property of the element, no such
> inheritance takes place.
>
> But do you need that in the first place?
>
> Jukka K. Korpela ("Yucca")
> http://www.cs.tut.fi/~jkorpela/ <http://www.cs.tut.fi/%7Ejkorpela/>
>
> __
> css-discuss [EMAIL PROTECTED]
> 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 [EMAIL PROTECTED]
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] Inherited color property not working
Hello list,
I have the following piece of HTML. The has the following class
applied: navTreeItem:
http://datatransp.dyndns.org:8070/datatransp/suporte-downloads/downloads";
class="state-published navTreeFolderish" title="">
http://datatransp.dyndns.org:8070/datatransp/folder_icon.gif";
alt="Reflector" />
Downloads
Here are the css rules:
.navTreeItem a:hover,
dd.portletItem .navTreeItem a:hover {
background-color: #000;
color:#FFF;
border: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor;;
}
What I want it to do is to change the background color of li to #000
AND the color of the fonts to #FFF.
However, when I hover the div, the span inside doesn't seem to inherit
the color property (#FFF) and stays with its original color, almost
hiding itself with the background color (since its default color is
greyish).
Am I doing something wrong?
Thanks,
Marcelo.
__
css-discuss [EMAIL PROTECTED]
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] What tag to use for the company's "slogan"?
I have a website that has a header with a Title and a "slogan" something like "Company" - "Your road to success". I've put "Company" inside a and used CSS to text-indent:- should I put the "slogan" inside the as well? I want to keep semantics good enough. Thanks, Marcelo. __ css-discuss [EMAIL PROTECTED] 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] Are table-based layouts still needed
Or, do table-based layouts still have a place on the web? There will definitly be a lot of table-based layouts for many times to come. Not everyone has the knowledge nor is obligated to use CSS-based layouts. But from a web professional standpoint, do you think table-based layouts still need to be used for some particular layouts? In other words, can pure CSS layouts do everything a table-based layout can do? I ask this becouse I still see many famous and really relevant websites with a dirty table-based soup layout. I wonder wether was lazy, or if he didn't know that he could do it with divs and CSS or if he knew that this kind of layout was viable to do with CSS. Well, just a thought :) Marcelo. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Underlining back a text inside an
Hello list, I'm creating a horizontal icon-based menu. Each item has an icon and a legend. Here's the XHTML: Edit Profile Check payment history Edit Profile Check payment history Being a container, elements will stack over one another. So, I floated them left. There's a wrapping the . There's another for the legend. I let the default block behaviour: They stack ontop of one another, and this is what I want since I want the legend to be below the icon. I then make the text centered by applying a text-align:center; to the second div. However, wrapping both the image and the text inside an , I've lost the default browser behaviour of underlining the text link. The question is: How can I get this legend link to be underlined like any other default link text? You can see the rendered menu in the attached JPG. Thanks in advance, Marcelo. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] One CSS file for each browser (IE/Firefox)
Hi list, I'm just starting tableless layout design. I'm on my first pure-css layout project. While the concept is easy and the workflow in general is kind of easier than table layouts, I'm getting really frustraded by the differences I'm getting on my lay when I test it on both FF and IE. What I'm thinking is to server a different css depending on the client's browser. This way I could first layout the website on a more standard compliant browser (FireFox) and then copy the css and start fixing the layout on IE and server this new css if the user uses IE. I would use http header information to detect the browser and then the backend would serve the correct css file. What do you think? Thanks in advance, Marcelo. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] input.text selector not working
Hi,
For some unknown reason, when I try to select all the text input fields
using this selector:
input.text { ... }
It doesn't work... I had to do use attribute selectors:
input[type="text"] {... }
I'm testing on FF2.
What could be wrong ?
Thanks,
Marcelo.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Should I use cascaded ids for nested divs?
Hello!
I'm just starting with CSS (currently reading CSS Mastery, quite good book
btw :)) and got stuck on the following:
Let's say I've got a header div and a branding div. The branding div is a
"child" of header (it will hold a logo of the website). Currently, I'm doing
this the following way:
CSS:
#header { ... }
#branding {...}
However, I've saw many css scripts using cascading with id. Would it make
any difference to do this way: #header #branding { ... } ?
(I can't test it right now)
Thanks in advance!
Marcelo.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Change the :hover, :link, :visited and :active of a specific element based ot its ID
Hello list!
I need to change these css attributes of only one element on the page, a
exceptionla link that must behave differently. It is. However, I can't find
a way to only select it using the pseudo-classes metioned, I tried:
A:hover,#myelement { color: #FFF }
But every other element on the page got selected.
Any ideas?
Thanks in advance,
Marcelo.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
