Re: [css-d] Float Issue In IE
Thanks a million! Your tip worked nicely! One thing
however, is that I didn't need the display: block
because I already had my li set to display: inline.
And it's working nicely across IE6 IE7 FF(both)
Safari.
I am having some other issues though:
http://e7flux.com/new/new.html with a tabbed style nav
list. I sent out another post: Horizontal Nav List
Not Sitting Within Its UL Container but no one's
responded yet. I need the LIs' to sit on top of the
div below it the way the UL container does.
Can you provide any suggestions? Much appreciated.
Thanks,
Elli
--- Christian Kirchhoff [EMAIL PROTECTED]
wrote:
Hello,
regarding the topnav image. In my Windows Firefox it
is showing up. The
hover effect is not working. That is because you've
placed an image
inside the anchor. Now when - on hover - you attach
a background to the
anchor, it is not visible because the image inside
the anchor is painted
on top of that background image (in z-order).
Instead, you could place some text in that anchor:
lia href=# class=sitelogonj.com/a/li
Then hide that text with css and show the normal
state image instead as a background:
#topnav li a.sitelogo {
height: 40px;
width: 66px;
text-indent: -5000px;
background: url('images/nj_logo.gif') no-repeat
center center;
display: block;
}
Your other rule for the hover effect should work
then.
Regards,
Christian
*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
Looking for last minute shopping deals?
Find them fast with Yahoo! Search.
http://tools.search.yahoo.com/newsearch/category.php?category=shopping
__
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] Float Issue In IE
Hello,
regarding the topnav image. In my Windows Firefox it is showing up. The
hover effect is not working. That is because you've placed an image
inside the anchor. Now when - on hover - you attach a background to the
anchor, it is not visible because the image inside the anchor is painted
on top of that background image (in z-order).
Instead, you could place some text in that anchor:
lia href=# class=sitelogonj.com/a/li
Then hide that text with css and show the normal state image instead as a
background:
#topnav li a.sitelogo {
height: 40px;
width: 66px;
text-indent: -5000px;
background: url('images/nj_logo.gif') no-repeat center center;
display: block;
}
Your other rule for the hover effect should work then.
Regards,
Christian
*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
Elli Vizcaino schrieb:
Thanks Guys!
http://e7flux.com/new/new.html
Adding a complete URI helped fixed the broken layout.
I'm encountering a couple of other problems however:
The logo NJ.com in the upper left in the #topnav div
is not showing up in Windows FF. It is a link and I
also need it to swap out on hover with its background
highlighted counterpart (this effect is not working in
any browser). Not sure I set the CSS right but that's
the effect I'm aiming for. Any suggestions?
The BOTTOMRIGHT div is using a 78% white tiling png
in the background, which of course shows opaque in
IE6. I attempted to use the opacity property on the
#container div with the color property set to white
but it didn't work. Any suggestions here?
Another thing I wouldn't mind some insight on, is why
the divs contained in the #container div didn't seem
to be affected at all by the top and bottom padding
set on the container? The floated divs seem to be
laying on top of the container as opposed to within -
I expected the container height to adjust according to
the amount of padding plus the height of the floated
divs but that's not what happened. Just trying to
understand the behavior that's going on here. Any
insights would be more than welcomed :).
Again TIA!!!
Elli
PS to Thierry - In my personal work I set my DTD to
Strict but at work they use Transitional which is
beyond me why they don't just go Strict already!
Hello Elli,
Because you're not using a complete DOCTYPE URI
that includes system
identifier, IE is working in Quirks Mode which
triggers ...
http://www.w3.org/TR/html4/loose.dtd;
Good catch!
I found that it gets the box model wrong and I don't
even think of checking
if it is running in Quirks mode, duh!
As a side note, a DTD *without* an URI can trigger
standard-compliant mode,
for example:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Strict
//EN
What triggers quirks mode is the missing URI or the
presence of
Transitional - depending on how one wants to look
at it ;)
Looking for last minute shopping deals?
Find them fast with Yahoo! Search.
http://tools.search.yahoo.com/newsearch/category.php?category=shopping
__
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] Float Issue In IE
Thanks Guys! http://e7flux.com/new/new.html Adding a complete URI helped fixed the broken layout. I'm encountering a couple of other problems however: The logo NJ.com in the upper left in the #topnav div is not showing up in Windows FF. It is a link and I also need it to swap out on hover with its background highlighted counterpart (this effect is not working in any browser). Not sure I set the CSS right but that's the effect I'm aiming for. Any suggestions? The BOTTOMRIGHT div is using a 78% white tiling png in the background, which of course shows opaque in IE6. I attempted to use the opacity property on the #container div with the color property set to white but it didn't work. Any suggestions here? Another thing I wouldn't mind some insight on, is why the divs contained in the #container div didn't seem to be affected at all by the top and bottom padding set on the container? The floated divs seem to be laying on top of the container as opposed to within - I expected the container height to adjust according to the amount of padding plus the height of the floated divs but that's not what happened. Just trying to understand the behavior that's going on here. Any insights would be more than welcomed :). Again TIA!!! Elli PS to Thierry - In my personal work I set my DTD to Strict but at work they use Transitional which is beyond me why they don't just go Strict already! Hello Elli, Because you're not using a complete DOCTYPE URI that includes system identifier, IE is working in Quirks Mode which triggers ... http://www.w3.org/TR/html4/loose.dtd; Good catch! I found that it gets the box model wrong and I don't even think of checking if it is running in Quirks mode, duh! As a side note, a DTD *without* an URI can trigger standard-compliant mode, for example: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Strict //EN What triggers quirks mode is the missing URI or the presence of Transitional - depending on how one wants to look at it ;) Looking for last minute shopping deals? Find them fast with Yahoo! Search. http://tools.search.yahoo.com/newsearch/category.php?category=shopping __ 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] Float Issue In IE
Hello, I have a #sidebar div floating left with 2 divs (#topright_content and #bottomright_content) floating right, all contained within a #container div. They appear fine in Safari FF but in IE7 (haven't checked IE6 but assume it's the same) the divs that are floated right are floating outside of the container. Can someone please explain why this is happening and or suggest a fix: http://e7flux.com/new/new.html TIA, Elli Never miss a thing. Make Yahoo your home page. http://www.yahoo.com/r/hs __ 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] Float Issue In IE
On Tue, Feb 26, 2008 at 7:33 AM, Elli Vizcaino [EMAIL PROTECTED] wrote: Hello, I have a #sidebar div floating left with 2 divs (#topright_content and #bottomright_content) floating right, all contained within a #container div. They appear fine in Safari FF but in IE7 (haven't checked IE6 but assume it's the same) the divs that are floated right are floating outside of the container. Can someone please explain why this is happening and or suggest a fix: http://e7flux.com/new/new.html TIA, Elli Hello Elli, Because you're not using a complete DOCTYPE URI that includes system identifier, IE is working in Quirks Mode which triggers CSS broken box model. Update your page markup by adding the system identifier of HTML 4.01 Transitional: http://www.w3.org/TR/html4/loose.dtd; Regards, Usamah __ 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] Float Issue In IE
On Behalf Of Elli Vizcaino I have a #sidebar div floating left with 2 divs (#topright_content and #bottomright_content) floating right, all contained within a #container div. They appear fine in Safari FF but in IE7 (haven't checked IE6 but assume it's the same) the divs that are floated right are floating outside of the container. Can someone please explain why this is happening and or suggest a fix: http://e7flux.com/new/new.html The width of #wrapper is 990 px, but #container is nested in #wrapper and has a 1px border. So the available width in there is 990px -2px = 988px but the width of #sidebar (222px) + the width of the right floats (767px) equals 989px You're short by 1 pixel I forgot to say that it doesn't happen in FF because the div that is styled with a border has also a width set to 100% so in FF you have some extra room (990px + 2px). I don't know why IE doesn't make the container bigger though. -- Regards, Thierry | http://www.TJKDesign.com __ 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] Float Issue In IE
On Behalf Of Elli Vizcaino I have a #sidebar div floating left with 2 divs (#topright_content and #bottomright_content) floating right, all contained within a #container div. They appear fine in Safari FF but in IE7 (haven't checked IE6 but assume it's the same) the divs that are floated right are floating outside of the container. Can someone please explain why this is happening and or suggest a fix: http://e7flux.com/new/new.html The width of #wrapper is 990 px, but #container is nested in #wrapper and has a 1px border. So the available width in there is 990px -2px = 988px but the width of #sidebar (222px) + the width of the right floats (767px) equals 989px You're short by 1 pixel -- Regards, Thierry | http://www.TJKDesign.com __ 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] Float Issue In IE
On Tue, Feb 26, 2008 at 7:33 AM, Elli Vizcaino [EMAIL PROTECTED] wrote: Hello, I have a #sidebar div floating left with 2 divs (#topright_content and #bottomright_content) floating right, all contained within a #container div. They appear fine in Safari FF but in IE7 (haven't checked IE6 but assume it's the same) the divs that are floated right are floating outside of the container. Can someone please explain why this is happening and or suggest a fix: http://e7flux.com/new/new.html TIA, Elli Hello Elli, Because you're not using a complete DOCTYPE URI that includes system identifier, IE is working in Quirks Mode which triggers CSS broken box model. Update your page markup by adding the system identifier of HTML 4.01 Transitional: http://www.w3.org/TR/html4/loose.dtd; Good catch! I found that it gets the box model wrong and I don't even think of checking if it is running in Quirks mode, duh! As a side note, a DTD *without* an URI can trigger standard-compliant mode, for example: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Strict //EN What triggers quirks mode is the missing URI or the presence of Transitional - depending on how one wants to look at it ;) -- Regards, Thierry | http://www.TJKDesign.com __ 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/
