[css-d] problems with absolute positioned DIV in IE 6

[Christian Kirchhoff]

 
Hallo,

I am trying to optimize a web page that looks finde in Firefox and IE 7. 

There are some problems left in IE 6.

Please take a look at:
http://www.digitale-bibliothek.de/Maschinentechniker/METS2/index.htm
http://www.digitale-bibliothek.de/Maschinentechniker/METS2/style.css


There is a left area with a toolbar and a tree, then a "slider" and then the
main content area. The sliders behaviour is implemented in JavaScript, and
an onresize event adjusts the size of the treeview and of the image on the
right (please don't try to click on the image, as it is linked with a bigger
image on our local servers, which you don't have access to).

Part of the CSS styles are defined within the html document because
otherwise my JavaScript wouldn't have access to those values.

Anyway the slider does not appear in IE 6. Position and size are defined in
the html document:
"position: absolute; left: 200px; top: 0; width: 8px; bottom: 0;"

IE 6 doesn't seem to understand this. If I declare the height of this DIV
instead of the bottom, as I did it here:
http://www.digitale-bibliothek.de/Maschinentechniker/METS2a/index.htm
the slider appears. But I want the bottom of the DIV to stick at the bottom
of the page.

I could let the slider be resized by the JavaScript (that doesn't work
either in IE 6 right now), but why not let the CSS da the work?

With a bottom value given, the browser seems to calculate the minimum size
of the DIV to zero. The content of the DIV is "". If I change it to
"a", the DIV is rendered, and it's size is just big enough to contain the
character "a".

Could anybody tell me what I am doing wrong there?

Best regards,

Christian Kirchhoff
Directmedia Publishing GmbH · Möckernstraße 68 · 10965 Berlin
www.digitale-bibliothek.de
AG Berlin-Charlottenburg · HR B 58002 · USt.Id. DE173211737
Geschäftsführer: Ralf Szymanski · Erwin Jurschitza

__
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] My background disappeared!

[Amy Drayer]

Dear CSS-D:

http://new.jocolibrary.org/

I was trying to fix the position of the #content div in the #maincontent div
so the light blue had equal pixels on the left and right (#content is the
white area).  It looks okay in IE6 (*sigh*), but in all other browsers the
left is larger than the right side.  I thought I'd use overflow:hidden, but
I lost a lot of stuff and my #content background never fully came back in
Firefox!  I must have deleted something else, but I have no clue what I did.
:-(  I'm sorry my CSS is a bit of a mess (and I can't completely validate my
XHTML because of the content management system, but it hasn't caused this
problem yet), but I know it's a global problem, so is probably in:

http://new.jocolibrary.org/upload/library/s/gl.css
or
http://new.jocolibrary.org/upload/library/s/gs.css

Please help!  Thank you!

-- 
In peace,

Amy M. Drayer
Web Interface Designer
[EMAIL PROTECTED]
http://www.puzumaki.com
__
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/

Re: [css-d] My background disappeared!

[Amy Drayer]

Dear Georg:

Thank you!  I did the :after (even though I didn't need it before,
weird), I'll try the width thing right now.  Thank you!!

-- 
In peace,

Amy M. Drayer
Web Interface Designer
[EMAIL PROTECTED]
http://www.puzumaki.com
__
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] Help! Can't make my dropdown work in IE

[Chris Rahe]

I've been to this board before with some dropdown issues, but I have  
a new one.

I have one page where they want to provide a dropdown list of medical  
specialties that will take visitors to an anchor on another page.  
Rather than doing JavaScript and a form, I thought I'd just go with  
the old CSS dropdown. And it works beautifully in Firefox, but not at  
all in IE 6 or 7.

Can anyone take a look at http://www.bremenhospital.org/testsite/ 
pages/specialists.html and see if they can figure out what I'm doing  
wrong? The "specialists" button is what I'm trying to get to drop  
down and the CSS (for this part) is in the page HTML.

Is it possible a conflict with the external file with the rest of the  
CSS is at fault? Like I said it works fine in Firefox, but IE won't  
drop down at all.

Thanks!



Chris Rahe
Executive Director of Marketing and Development
Community Hospital of Bremen
(574) 546-8011
[EMAIL PROTECTED]



__
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] at import loading

[Gate Wizard]

question
How does a browser handle @import?

Example:
in HEAD we have:



-
main.css
  /*  */

Does the browser load the imported CSS before it starts rendering the page,
or after?

I've looked here, but it doesn't seem to answer my question:
http://www.w3.org/TR/css3-cascade/#at-import

Thanks to all replies in advance.
__
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/

Re: [css-d] My background disappeared!

[Gunlaug Sørtun]

Amy Drayer wrote:

> http://new.jocolibrary.org/
> 
> I was trying to fix the position of the #content div in the
> #maincontent div so the light blue had equal pixels on the left and
> right (#content is the white area).  It looks okay in IE6 (*sigh*),
> but in all other browsers the left is larger than the right side.

IE6 has its auto-expansion bug, not shared by other browsers.
Change width to reach consensus...

#maincontent {
width: 826px;
}


Also: 'overflow: hidden' won't work well as an 'expand to contain 
content' trigger for the main content area in your case.

This will (sort of) work though...

#maincontent:after, #content:after{
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}

...Ref: 


regards
Georg
-- 
http://www.gunlaug.no
__
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/

Re: [css-d] at import loading

[Robert O'Rourke]

Gate Wizard wrote:
> question
> How does a browser handle @import?
>
> Example:
> in HEAD we have:
>
> 
>
> -
> main.css
>   /*  */
>
> Does the browser load the imported CSS before it starts rendering the page,
> or after?
>
> I've looked here, but it doesn't seem to answer my question:
> http://www.w3.org/TR/css3-cascade/#at-import
>
> Thanks to all replies in advance.
>
>   
http://archivist.incutio.com/viewlist/css-discuss/76444

That thread may help but also says at the bottom it's off-topic for css-d.

Rob

>
>
>   

__
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/

Re: [css-d] Help! Can't make my dropdown work in IE

[Chris Rahe]

Thanks! That seemed to fix it in IE7, but the dropdown is permanently  
there in IE6.

As to the select, I'm going to change that to a button similar to the  
"Specialties" button as soon as I get it working.

Thanks again for the help. Any ideas on making it work for IE6? Just  
because my visitors are likely to not have the latest browsers.



On Aug 13, 2007, at 1:18 PM, Ingo Chao wrote:

> Chris Rahe wrote:
>> ...
>> Can anyone take a look at http://www.bremenhospital.org/testsite/  
>> pages/specialists.html and see if they can figure out what I'm  
>> doing  wrong? ...
>
> "Specialities" button:
>
> IE is not able to determine the static position of an absolutely  
> positioned block. So, if you swap left: -999px to 'auto' on hover,  
> it misplaces it.
>
> An a.p. block is positioned with respect to its containing block,  
> performed by its nearest positioned anchestor. You'll have to apply  
> position:relative to the .specMenu and left:0 for the hover state  
> of the child .specMenu li:hover ul within.
>
> Once the menu drops down, you'll notice that it drops behind the  
> SELECT following later on. This is because a select is a windowed  
> object in IE<7. A windowed object resides nearer to the visitor  
> than all other elements, regardless of the z-index you might try.
>
> There are ugly workarounds for it, but wouldn't it be better to  
> drop the dropdown and use another SELECT ? Alternatively, you could  
> try to arrange both the select and the dropdown in an non- 
> intersecting way.
>
> Ingo
>
> p.s. lived in Bremen for a few years, but it was Bremen/Germany
>
> -- 
> http://www.satzansatz.de/css.html




Chris Rahe
Executive Director of Marketing and Development
Community Hospital of Bremen
(574) 546-8011
[EMAIL PROTECTED]



__
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/

Re: [css-d] Help! Can't make my dropdown work in IE

[Ingo Chao]

> On Aug 13, 2007, at 1:18 PM, Ingo Chao wrote:
> 
> Chris Rahe wrote:
> http://www.bremenhospital.org/testsite/pages/specialists.html

>> "Specialities" button:
>>
>> IE is not able to determine the static position of an absolutely 
>> positioned block. So, if you swap left: -999px to 'auto' on hover, it 
>> misplaces it.
>>
>> An a.p. block is positioned with respect to its containing block, 
>> performed by its nearest positioned anchestor. You'll have to apply 
>> position:relative to the .specMenu and left:0 for the hover state of 
>> the child .specMenu li:hover ul within.  ...

Chris Rahe wrote:
 > Thanks! That seemed to fix it in IE7, but the dropdown is permanently
 > there in IE6.
 >
 > As to the select, I'm going to change that to a button similar to the
 > "Specialties" button as soon as I get it working.
 >
 > Thanks again for the help. Any ideas on making it work for IE6? Just
 > because my visitors are likely to not have the latest browsers.


No, you did not follow the steps I suggested.

Now, the inner ul is positioned relative.

I meant to position:relative the outer ul.specMenu.

Keep the inner ul absolutely positioned.

replace left:auto with left:0 on the hover state.


Can we please use bottom posting in this thread? The list policies

Ingo

-- 
http://www.satzansatz.de/css.html
__
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/

Re: [css-d] problems with absolute positioned DIV in IE 6

[Gunlaug Sørtun]

Christian Kirchhoff wrote:

> http://www.digitale-bibliothek.de/Maschinentechniker/METS2/index.htm

> Anyway the slider does not appear in IE 6.

IE6 doesn't understand / support absolute positioning for opposite edges 
of an element, so 'bottom: 0' is simply ignored.

Give IE6 a height and overflow instead, by adding something like...

* html body {height: 100%;}
* html body #slider {height: 100%;}
* html body #left {height: 100%!important; overflow: auto!important;}

...which will make IE6 render as intended.

regards
Georg
-- 
http://www.gunlaug.no
__
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/

Re: [css-d] Help! Can't make my dropdown work in IE

[Ingo Chao]

Chris Rahe wrote:
> ...
> Can anyone take a look at http://www.bremenhospital.org/testsite/ 
> pages/specialists.html and see if they can figure out what I'm doing  
> wrong? ...

"Specialities" button:

IE is not able to determine the static position of an absolutely 
positioned block. So, if you swap left: -999px to 'auto' on hover, it 
misplaces it.

An a.p. block is positioned with respect to its containing block, 
performed by its nearest positioned anchestor. You'll have to apply 
position:relative to the .specMenu and left:0 for the hover state of the 
child .specMenu li:hover ul within.

Once the menu drops down, you'll notice that it drops behind the SELECT 
following later on. This is because a select is a windowed object in 
IE<7. A windowed object resides nearer to the visitor than all other 
elements, regardless of the z-index you might try.

There are ugly workarounds for it, but wouldn't it be better to drop the 
dropdown and use another SELECT ? Alternatively, you could try to 
arrange both the select and the dropdown in an non-intersecting way.

Ingo

p.s. lived in Bremen for a few years, but it was Bremen/Germany

-- 
http://www.satzansatz.de/css.html
__
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/

Re: [css-d] Help! Can't make my dropdown work in IE

[Chris Rahe]

On Aug 13, 2007, at 2:39 PM, Ingo Chao wrote:

>
>
>
>> On Aug 13, 2007, at 1:18 PM, Ingo Chao wrote:
>>
>> Chris Rahe wrote:
>> http://www.bremenhospital.org/testsite/pages/specialists.html
>
>>> "Specialities" button:
>>>
>>> IE is not able to determine the static position of an absolutely
>>> positioned block. So, if you swap left: -999px to 'auto' on  
>>> hover, it
>>> misplaces it.
>>>
>>> An a.p. block is positioned with respect to its containing block,
>>> performed by its nearest positioned anchestor. You'll have to apply
>>> position:relative to the .specMenu and left:0 for the hover state of
>>> the child .specMenu li:hover ul within.  ...
>
> Chris Rahe wrote:
>> Thanks! That seemed to fix it in IE7, but the dropdown is permanently
>> there in IE6.
>>
>> As to the select, I'm going to change that to a button similar to the
>> "Specialties" button as soon as I get it working.
>>
>> Thanks again for the help. Any ideas on making it work for IE6? Just
>> because my visitors are likely to not have the latest browsers.
>
>
> No, you did not follow the steps I suggested.
>
> Now, the inner ul is positioned relative.
>
> I meant to position:relative the outer ul.specMenu.
>
> Keep the inner ul absolutely positioned.
>
> replace left:auto with left:0 on the hover state.
>
>
> Can we please use bottom posting in this thread? The list policies
>
> Ingo
>
> -- 
> http://www.satzansatz.de/css.html
> __
> 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/


Well I think I've followed your instructions and it works fine in  
IE7, but still not in IE6. Do I still have something wrong?




Chris Rahe
Executive Director of Marketing and Development
Community Hospital of Bremen
(574) 546-8011
[EMAIL PROTECTED]



__
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/

Re: [css-d] problems with absolute positioned DIV in IE 6

[Ingo Chao]

Christian Kirchhoff wrote:
>  
> ...
> http://www.digitale-bibliothek.de/Maschinentechniker/METS2/index.htm

here, the slider is visible, its the other 2a link below that misses the 
slider.

> ...
> Anyway the slider does not appear in IE 6. Position and size are defined in
> the html document:
> "position: absolute; left: 200px; top: 0; width: 8px; bottom: 0;"
> 
> IE 6 doesn't seem to understand this. If I declare the height of this DIV
> instead of the bottom, as I did it here:
> http://www.digitale-bibliothek.de/Maschinentechniker/METS2a/index.htm
> the slider appears. But I want the bottom of the DIV to stick at the bottom
> of the page.
> 
> I could let the slider be resized by the JavaScript (that doesn't work
> either in IE 6 right now), but why not let the CSS da the work?
> 
> With a bottom value given, the browser seems to calculate the minimum size
> of the DIV to zero. ...

IE6 cannot "open up" an a.p. block with opposite offsets (top/bottom, 
left/right) only.

Ingo

-- 
http://www.satzansatz.de/css.html
__
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/

Re: [css-d] My background disappeared

[btwien]

@ Amy

Is it about the background code below? If yes, remove the image after background
and I guess (but am not sure) that the quotes are not necessary...

Your image link is also relative, so you might have to add ../ before your
upload etc name ...

background-image:url('/upload/library/i/intronavselect.jpg');

Hope this helps!

__
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] Hover

[faramineux]

I do not want the images which are linked to be styled the way the  
text links are.
The code below is not working, what is wrong? TIA

a:hover {
color: #2B4058;
font-size: 13px;
font-weight: normal;
background-color: #fffbdf;
border-bottom-style: dashed;
border-bottom-width: 1px;


a:hover img {

background-color: none;
text-decoration: none;
border-style: none;

}
__
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/

Re: [css-d] Hover

[cj]

On 8/13/07, faramineux <[EMAIL PROTECTED]> wrote:
> I do not want the images which are linked to be styled the way the
> text links are.
> The code below is not working, what is wrong? TIA

> a:hover img {
> background-color: none;
> text-decoration: none;
> border-style: none;
> }


the second snippet you have there is saying [1]:

"Selects any img element  that is a descendant of an a element which
is in a hover state."

try taking out the ":hover" part if you're looking to have that
styling appear no matter if the image is being hovered or not, which
is what i think you're trying to ask.


[1] http://gallery.theopalgroup.com/selectoracle
__
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] IE 6 shell game

[tedd]

Hi gang:

Please review:

http://www.webbytedd.com/clients/torch/philosophy.php

While using IE 6 (for both Win-XT and Win-2K) the text in the main 
section of this page (below the menu and above the footer) is 
displayed sometimes and other times it's hidden.

Any ideas as to why this is happening?

Thanks,

tedd


-- 
---
http://sperling.com  http://ancientstones.com  http://earthstones.com
__
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] filter:gray()

[Maziak, Peter]

I like the IE proprietary property filter:gray().  Does anyone know of a
similar property for other browsers (specifically FF & Safari)?

 

Note on application: I like using it to indicate the disabled state of
an icon, especially in combination as such: 

.disabledIcon{

filter: BlendTrans(Percent=40) gray();

-moz-opacity:.40; 

opacity:.40;

}

 

...but would be nice to get other-than-IE to turn gray.

__
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] 'rounded corner' type design but with ruffled sides/corners, so not as easily 'repeat-x'ed

[Jake Malone]

Hello all,
I wanted to make a 'rounded' box design but uses a '18th century burned
paper' or even better the more ruffled 'Wild West Wanted Poster' design. but
this kinda design uses ripped sides, which isn't hard if sides are
straight). So the hard part is: rough 'cutup' sides through the left/right
and top/bottom sides of the image.
Was looking for any ideas or tutorials other than fixed dimension sizes for
the images which will be  tags inside of them.
Any good tutorials too, but 100% of ones i seen are ones with rounded
corners, or slightly different used like this example...
http://home.tiscali.nl/developerscorner/liquidcorners/liquid-corners-playgarden-06.htm

Im looking for a way to get more ruffled sides but design constraints makes
this impossible probably.
Id like any steps in photoshop to optimize a pic.

all else fails, ill just make the images in photoshop

Thanks!
__
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/

Re: [css-d] IE 6 shell game

[David Laakso]

tedd wrote:
> Hi gang:
>
> Please review:
>
> http://www.webbytedd.com/clients/torch/philosophy.php
>
> While using IE 6 (for both Win-XT and Win-2K) the text in the main 
> section of this page (below the menu and above the footer) is 
> displayed sometimes and other times it's hidden.
>
> Any ideas as to why this is happening?
>
> Thanks,
>
> tedd
>
>
>   

Try?:

#content
{
width: 900px;   <---::  add width to this selector to give it 
"layout" [1] ::
}
[1] 

Best,

~dL

__
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/

Re: [css-d] Help! Can't make my dropdown work in IE

[Alan Gresley]

Chris Rahe wrote in reply to Ingo Chao:

http://www.bremenhospital.org/testsite/pages/specialists.html

> Well I think I've followed your instructions and it works fine in
> IE7, but still not in IE6. Do I still have something wrong?

Hi Chris

What is actually not working now in IE6, which menu. The specMenu has no 
styling for the anchors, thus no haslayout.

Currently you have one major guillotine bug issue [1]. When you hover the 
"Home" anchor in your breadcrumb menu at the top of the page, the footer jumps 
up. You may have to insert a clearing div in the mainContent div to auto 
contain the two floats.

[1] 

Kind Regards, Alan

__
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/

Re: [css-d] Hover

[Jukka K. Korpela]

On Mon, 13 Aug 2007, faramineux wrote:

> I do not want the images which are linked to be styled the way the
> text links are.

They aren't. As a rule, none of the default styling of text links is 
applicable to images that are links, though such images have default 
styling of their own. Thus, it is unclear what you want

> The code below is not working, what is wrong? TIA
>
> a:hover {
> color: #2B4058;
> font-size: 13px;
> font-weight: normal;
> background-color: #fffbdf;
> border-bottom-style: dashed;
> border-bottom-width: 1px;
>
>

Something is missing, at least a closing "}", which could cause quite a 
lot. It's generally best to post the URL of a demo page rather than copy 
its code, since quite possibly something goes wrong in the copying 
process, or the problem is affected by other parts of the code.

> a:hover img {
>
> background-color: none;
> text-decoration: none;
> border-style: none;
>
> }

Here you affect the properties of an  element in some situations. 
But in the previous rule, you set the properties of an  element.

In CSS as currently defined and implemented, you cannot use a selector 
that selects an element depending on what elements it contains (e.g., 
those  elements that contain an  element).

Thus, you would need something like class="image" for those  elements 
that are image links (contain an  links) and

a.image:hover { border: none; }

Depending on the structure of the page, it might be possible to use 
something more convenient. For example, if all the image links are inside
   ...
and that element contains no other links, you could use just

.imagelinks a:hover { border: none; }

without needing to write class attributes for the  elements.

-- 
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/

__
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/