Re: [css-d] Fixed LI dimension with XHTML
Philippe,
Why didn't I think of that :) Thank you. However is there anyway I could get
the hyperlink to fill the entire
LI element once it's been floated? I would like for my mouseover effect to be
applied when you are over the
entire menu item and not only the text itself.About the fixed height, you are
right it would be better to apply a min-height then I guess.
.Andreas
CC: [EMAIL PROTECTED] From: [EMAIL PROTECTED] To:
css-d@lists.css-discuss.org Subject: Re: [css-d] Fixed LI dimension with
XHTML Date: Wed, 11 Jun 2008 08:49:04 +0900 On Jun 11, 2008, at 5:39
AM, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Is it possible to
display a unordered list inline, have a hyperlink fill the full size of
the LI element and force the LI element to have a fixed dimension
using XHTML? It works if I just let it fall back to QUIRKSMODE but
obviously I don't want that =) I'm trying to make six LI elements
horizontally line up and have a dimension of 150x80 pixels and have the
entire LI be covered by a hyperlink element. I've tried these two
doctypes with the same outcome. Its only been tested on IE7 so far...
IE7, FF, Safari would be nice to have it work in #menu ul li { display:
inline; background-color: #000; list-style: none; width: 150px;
height: 80px;; } width and height do not apply to inline elements
http://www.w3.org/TR/CSS21/visudet.html#propdef-width You could float
your li's: #menu ul li {float:left; width:150px; ..} locking the
height is not a good idea, it could give strange results if the user has a
different font-size than the one you have choosen. Philippe --- Philippe
Wittenbergh http://l-c-n.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] CSS popup not popping in IE
On Tue, 10 Jun 2008 19:36:45 +0100, Nancy E. Sosna Bohm
[EMAIL PROTECTED] wrote:
This pure-css popup works in FireFox, but not IE.
http://tinyurl.com/6xkooa
The css is:
div#popup a span {display:none;}
div#popup a:hover span {display: block;
position: absolute; top: 150px; left:330px; width: 300px;
padding: 5px; margin: 10px; z-index: 100;
color:#00; background-color:cc;
font: 10px arial; text-align:left;border:1px solid #00;
}
The html is:
div id=popup
some text here
a name=#
uroughly half/u
span
footnote-ish text here
/span
/a
remainder of some text here
/div
When you mouse over the word roughly, the footnote-ish text pops up.
Why doesn't it work in IE?
TIA,
Nancy
IE6 doesn't play well with the pseudo classes :hover etc. on anything but
the 'a' anchor tag.
You can easily bring it into line with the help of a little piece of
javascript compliments of Suckerfish.
http://www.htmldog.com/articles/suckerfish/hover/
This code works for your example, you will see there is a change to your
rule for the hover.
The script works well as an external file and I usually call it with a
conditional comment aimed at 'lt IE 7'
style type=text/css
/*![CDATA[*/
div#popup a span {
display: none;
}
div#popup a:hover span, div#popup a.sfhover span {
display: block;
position: absolute;
top: 150px;
left: 330px;
width: 300px;
padding: 5px;
margin: 10px;
z-index: 100;
color: #00;
background-color: cc;
font: 10px arial;
text-align: left;
border: 1px solid #00;
}
/*]]*/
/style
script type=text/javascript
/*![CDATA[*/
sfHover = function() {
var sfEls = document.getElementById(popup).getElementsByTagName(a);
for (var i=0; isfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+= sfhover;
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(
sfhover\\b), );
}
}
}
if (window.attachEvent) window.attachEvent(onload, sfHover);
/*]]*/
/script
Duncan
__
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] Fixed LI dimension with XHTML
[EMAIL PROTECTED] wrote:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml;head
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
/titleTest/title
style type=text/css
* {border: 0;margin: 0;padding: 0; } body {font-family:
Verdana, Helvetica, Sans-Serif;font-size: .75em; }#menu {
background-color: #0f0;width: 900px; } #menu ul { padding: 2px;
position: relative; text-align: left; }
#menu ul li { display: inline; background-color: #000;
list-style: none; width: 150px;
height: 80px;; }
#menu ul li a { color: #aaa; font-weight: bold; line-height:
2.8em; padding: 10px 20px; text-decoration: none; width: 100%;
height: 100%; }
#menu ul li a:hover { color: #fff; text-decoration: none; }
#menu ul li a:active { background-color: #a6e2a6; text-decoration:
none; }
#menu ul li.selected a { background-color: #FFF; color: #000; }
/style
/headbody
div id=menu ul lia href=#Home Page/a/li lia
href=#New Product/a/li lia href=#Specials/a/li lia
href=#My Account/a/li lia href=#Contact Us/a/li /ul
/div
/body/html
To get it working on FF2, IE7, IE6, Safari add the following to
#menu ul li a {
background-color: #000;
...
...
}
To optimize the code you can remove:
#menu ul li a {
width: 100%; //remove
height: 100%; //remove
...
...
}
Also remove ALL the spaces between the li elements so that the spaces
between the li elements in the browser display of IE7, FF2, FF3, Safari
will disappear!
Like David said i would not put fixed width and height on the li
elements, since you can sort that out via the padding of the a element.
regards, Jens
__
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] Fixed LI dimension with XHTML
On Jun 11, 2008, at 3:36 PM, [EMAIL PROTECTED] [EMAIL PROTECTED]
wrote:
Why didn't I think of that :) Thank you. However is there anyway I
could get the hyperlink to fill the entire
LI element once it's been floated? I would like for my mouseover
effect to be applied when you are over the
entire menu item and not only the text itself.About the fixed
height, you are right it would be better to apply a min-height then
I guess.
#menu ul li a {display:block;}
/* trigger 'hasLayout' for IE6, else it won't show the link as a full
width block*/
As for the height, I'd only use the font-size+padding-top/bottom.
Philippe
---
Philippe Wittenbergh
http://l-c-n.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] How would you approach an organization chart in CSS?
At 4:51 PM -0700 6/10/08, Conjurer wrote: I need to redo a organization chart that is a graphic and therefore not editable. I could rework it in another graphic, but I was trying to think how you could do it with just markup and CSS. It is a tree with a President at the root, 4 positions under him, and two of those have a level of four under them (8 total). Then there is a fourth layer that reports to the third level with 6 different people. You can see the current org chart here: http://www.lechess.com/management.htm Anyone have any thought on this? I did something similar, you can review my solution here: http://webbytedd.com/ccc/family-tree/ Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.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 doesn't shrink fit content under Safari - any workarounds?
Is there no one that can help me on this issue?
On Tue, Jun 10, 2008 at 10:02 AM, Timothy Armes [EMAIL PROTECTED] wrote:
Hi,
I'm struggling with a Safari float shrinking problem and I'm
desperately seeking a solution. I've spent days on the issue now.
I have a floated container containing floated fixed sized divs. On FF
the container shrinks to fit the contents, as is correct for a
widthless float. In Safari however the container isn't shrinking, it's
taking up 100% of the available width.
Here's some minimal code that displays the problem:
html
head
style
#a { float: left; background-color: red; }
.b { float: left;
display: block;
width: 300px;
height: 300px;
background-color: green;
border: white solid 2px;
}
/style
/head
body
div id=a
div class=b/div
div class=b/div
div class=b/div
/div
/body
/html
When the window is wide enough to display the 3 blocks the behaviour
is as expected and the container shrink wraps the floats. However,
when the window is made narrower we see that the container takes up
the full width of the window when it should still be shrinking to fit
the contents, as it does on FF.
You can also see the bug in action here:
http://www.timothyarmes.com/gallery.php?lang=en-gbsec=personal
It's slightly more complicated than the minimal version above, but the
problem is the same. In this case the floated outer container is
centered on the page and there should be a white border around the
images. In the case of Safari, as in my test code, my outer container
takes up the available width. This has two side effects:
1) The images aren't centered (because the container is too wide)
2) My border is far too wide on the right hand side.
Any help with this issue would be greatly appreciated,
Tim
__
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] CSS popup not popping in IE
The css is:
div#popup a span {display:none;}
div#popup a:hover span {display: block;
position: absolute; top: 150px; left:330px; width: 300px;
padding: 5px; margin: 10px; z-index: 100;
color:#00; background-color:cc;
font: 10px arial; text-align:left;border:1px solid #00;
}
...
Why doesn't it work in IE?
Nancy
IE6 doesn't play well with the pseudo classes :hover etc. on anything but
the 'a' anchor tag.
You can easily bring it into line with the help of a little piece of
javascript compliments of Suckerfish.
http://www.htmldog.com/articles/suckerfish/hover/
This code works for your example, you will see there is a change to your
rule for the hover
Duncan
Duncan, The script works perfectly, but I still don't understand why it
won't work in IE without the script since the hover is for the a tag.
Nancy
__
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 doesn't shrink fit content under Safari - any workarounds?
Timothy Armes wrote: Is there no one that can help me on this issue? http://www.timothyarmes.com/gallery.php?lang=en-gbsec=personal Tim Not from this end at least... http://www.chelseacreekstudio.com/ca/cssd/tl.html -- http://chelseacreekstudio.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] overflow bg image
Yes, it should. In FF though, if the content doesn't go all the way to the
bottom of the window, it interprets bottom right as being the bottom right
of the content INSTEAD of the bottom right of the browser window...
Not sure if I understand what you want. The background-image should
always be at the bottom right corner of the window ? No matter how
much content or how tall the window is?
body {background: #ccc url(../path/to/image.png) no-repeat 100% 100%
fixed;}
out to do just that.
Philippe
__
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] overflow bg image
Matt Tibbits wrote:
Yes, it should. In FF though, if the content doesn't go all the way to the
bottom of the window, it interprets bottom right as being the bottom right
of the content INSTEAD of the bottom right of the browser window...
Not sure if I understand what you want. The background-image should
always be at the bottom right corner of the window ? No matter how
much content or how tall the window is?
body {background: #ccc url(../path/to/image.png) no-repeat 100% 100%
fixed;}
out to do just that.
Actually, it wouldn't. You're running XHTML Strict. In Strict mode, the
body sizes differently, hence the need for the 100% on the html element.
I'm not sure what you mean when you say it doesn't stop when it reaches
the TOP of the view port. You have the image set not to repeat. If you
want it to stay in place, adding fixed to the rules for the background
image would do that, right?
It's hard to see exactly what the problem is. I'm 78% colorblind, so I
can only barely see the image in the background to begin with.
--Bill
__
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] overflow bg image
Matt Tibbits wrote: In FF though, if the content doesn't go all the way to the bottom of the window, it interprets bottom right as being the bottom right of the content INSTEAD of the bottom right of the browser window... If this is more like what you want... http://www.gunlaug.no/tos/alien/mt/test_08_0611.html ...try introducing the style changes / additions I've used... http://www.gunlaug.no/tos/alien/mt/test_08_0611_files/default0.css regards Georg -- http://www.gunlaug.no __ 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] overflow bg image
Yes, that is exactly it... little tricky but that does the job. Thank you, for your help. Matt If this is more like what you want... http://www.gunlaug.no/tos/alien/mt/test_08_0611.html ...try introducing the style changes / additions I've used... http://www.gunlaug.no/tos/alien/mt/test_08_0611_files/default0.css __ 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] overflow bg image
If you compare how it looks in IE and FF you should see what I mean. Adding
the styles you recommended:
html{height:100%;margin:0;padding:0;}
...fixed the problem at the bottom of the screen, but introduced a new
behaviour at the top. It's hard to explain but basically if I resize the
browser window height (using IE7) the bg image stops moving when that image
reaches the top of the view port.
If I use FF and resize vertically it will continue moving the bg image up
even AFTER the top of the bg image reaches the top of the view port.
I'm not sure if I made any sense or not, but by comparing in the two
browsers you should see what I mean. If this is just how FF behaves then
I'll accept that as an answer and move on...
Thanks,
Matt
I'm not sure what you mean when you say it doesn't stop when it
reaches
the TOP of the view port. You have the image set not to repeat. If you
want it to stay in place, adding fixed to the rules for the background
image would do that, right?
It's hard to see exactly what the problem is. I'm 78% colorblind, so I
can only barely see the image in the background to begin with.
--Bill
__
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] overflow bg image
On Jun 12, 2008, at 1:21 AM, Matt Tibbits wrote:
Yes, it should. In FF though, if the content doesn't go all the way
to the
bottom of the window, it interprets bottom right as being the bottom
right
of the content INSTEAD of the bottom right of the browser window...
body {background: #ccc url(../path/to/image.png) no-repeat 100% 100%
fixed;}
out to do just that.
A fixed positioned image is always placed in reference to the
*viewport* (that is: the window). The code given works perfectly fine
in Gecko 1.8 and Gecko 1.9 (Fx 2 and Fx3 rc), Opera, WebKit (Safari) -
and IE 6, IE 7 [1].
The code above would fail, however, if you also put a background on
the root element (html).
If what you actually want is:put the image at the bottom of the window
if there is not much content, but at the bottom of the content if it
overflows the window (long page), then Georg's solution of using min-
height is the way to go.
[1] little demos
http://dev.l-c-n.com/_temp/bg-fixed1.html
http://dev.l-c-n.com/_temp/bg-fixed2.html
Philippe
---
Philippe Wittenbergh
http://l-c-n.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/
