Re: [css-d] hover nav bg?
-Original Message- From: Climis, Tim [mailto:tcli...@indiana.edu] Sent: Monday, June 01, 2009 12:48 PM To: 'Jenni Beard'; 'David Hucklesby' Cc: 'css-d@lists.css-discuss.org' Subject: RE: [css-d] hover nav bg? You're using this code for your hovers: background-position: -40px center; That means that the image is hanging 40px off the left of the link. Since it's not in the link box anymore, it's not visible. If you reset that -40px to 0 or left then the whole image will be in the link box, and show up. If you want the arrow to hang off the end of the parchment (which is the only reason I can think of for what you did) then give the a tags negative left margin, and then left padding to compensate. ---Tim Hi Tim, (and all who replied on this) Thanks again for all of your help with this. I still cannot get the rest of the arrowhead to show up in IE7 (or IE6), though it looks great in Opera, Chrome, and Firefox. I followed your advice exactly, which worked great in the modern browsers. Any suggestions on how to get this to work properly in IE7/6? http://fossilbyte.com/1/template.html Thanks again for your help, Jenni __ 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] hover nav bg?
On Jun 4, 2009, at 3:41 PM, Jenni Beard wrote: Thanks again for all of your help with this. I still cannot get the rest of the arrowhead to show up in IE7 (or IE6), though it looks great in Opera, Chrome, and Firefox. I followed your advice exactly, which worked great in the modern browsers. Any suggestions on how to get this to work properly in IE7/6? http://fossilbyte.com/1/template.html The parent UL has a 'width' specified. That means it 'hasLayout' [1]. The result is that the outdenting of the a fails, it is clipped. Try giving the a position relative and trigger 'hasLayout' on the a; See the example linked from the article. [1] http://www.satzansatz.de/cssd/onhavinglayout.html#clip 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] css interference
On Tue, 2 Jun 2009 22:12:43 -0400, Delos Woodruff wrote: | | On Jun 2, 2009, at 8:52 PM, David Hucklesby wrote: | | No need to recode the site! The incomplete HTML 4 DOCTYPE puts | browsers into quirks mode. Nothing to do with XHTML code - which is | treated as HTML by browsers anyway. | | Give your pages a complete DOCTYPE, including the DTD declaration, | and you are good to go: | | http://www.w3schools.com/tags/tag_DOCTYPE.asp | | FWIW - browser quirks mode differs from standards mode in very few | ways, with the exception of Internet Explorer. In that browser | (alone) all versions behave like version 5.5. | | | Well, that's a relief. I had been wondering if I could find a plain | english doctype standards declaration somewhere. The whole site is | full of tables - nested and nested through and through - and I | imagined that the errors would be excessive. See also http://hsivonen.iki.fi/doctype/ -- David Postill Dance your Life - Biodanza in Holland - http://www.danceyourlife.eu __ 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] Vertical Menu problem
Hi All, I can't see how to get rid of the padding at the top of the menu in Firefox: http://www.donann.co.uk/new_site/vertical_menu.html Safari displays it as I would like it without the padding showing. Also for the link labeled 'Home' to be in line with the other links in IE I've found I need to add an extra li/li. The menu to the right has the li/li removed to illustrate the problem in IE and that the padding is still there in Firefox. Sorry if it's something simple, it's driving me to distraction! John -- http://www.donann.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] Vertical Menu problem
John,
Try these definitions for your CSS:
.verticalMenu {
background-color : #FFD096;
float : left;
margin-left : 6px;
width : 150px;
padding: 0;
}
.left_menu_txt {
padding: 0;
}
ul.left_menu_txt {
list-style: none;
margin: 0;
}
It should also allow you to drop the extra li you defined for IE.
On Thu, Jun 4, 2009 at 6:17 AM, John j...@greenbirch.co.uk wrote:
Hi All,
I can't see how to get rid of the padding at the top of the menu in
Firefox:
http://www.donann.co.uk/new_site/vertical_menu.html
Safari displays it as I would like it without the padding showing.
Also for the link labeled 'Home' to be in line with the other links in IE
I've
found I need to add an extra li/li.
The menu to the right has the li/li removed to illustrate the problem
in
IE and that the padding is still there in Firefox.
Sorry if it's something simple, it's driving me to distraction!
John
--
http://www.donann.co.uk
--
Yazmin Wickham
http://www.yazminmedia.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-d] Is this CSS pop up possible?
I am a novice designer using Dreamweaver. I am looking for help but equally as important, I want to learn how to repeat these tasks in Dreamweaver. I know, I know, hand coding is the best, but I am a Wuss(ywig) and need to get through this project. I am more comfortable with CSS than anything soI I probably try to solve too many problems with it. (to a man with a hammer, every problem looks like a nail.) I am trying to design two balloons that appear when an object is rolled over or clicked. The first displays a general list of page links on the site. The second displays a list of links to a more specific group of pages. Content of both lists should be external or includes as they will be the same on every page where the button appears. My skill level does not include being able to create the action or specify the position to appear immediately below the object. I am partial to CSS as I am more familiar with it, but realize I might need to go with java or php. Also looking for some tips on how to acheive the drop shadow. Also note that the box is 2 columns. My guess is a fixed width and height depends on content. Please feel free to contact me for further clarification. Again, I am just as much interested in learning how to execute and repeat this as I am in having it done. Thanks! Here is a visual aid. http://www.fitzio.com/alliedUrology/generalHealth.php -- Rats and roaches live by competition under the laws of supply and demand; it is the privilege of human beings to live under the laws of justice and mercy. - Wendell Berry John Fitzgerald Fitzio, Inc. 2315 Longest Avenue Louisville, KY 40204 502.454.7204 j...@fitzio.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-d] transparent png corners
Hey all, I need some help... I have a gradient background on a page, and I have a div on the page where it has a drop shadow. I want to the drop shadow to be smooth over the gradient background. So I decided to using pngs (and later on will target IE with the ie6? transparency hack maybe)... but I'm just trying to get this working in FireFox now... Here are the images. http://electrotonik.com/temp/test/drop-shadow-gradient-test.html and the psd file if you think different slices are needed (and to see what its kinda supposed to look like... I made the height a bit longer for the div to expand as needed, width right now also is based on % so needs to expand as well). http://electrotonik.com/temp/test/drop-shadow-gradient-test.html Thanks for any suggestions? __ 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] Vertical Menu problem
On Behalf Of Yazmin Media
Sent: 5 June 2009 04:38
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Vertical Menu problem
John,
Try these definitions for your CSS:
.verticalMenu {
background-color : #FFD096;
float : left;
margin-left : 6px;
width : 150px;
padding: 0;
}
.left_menu_txt {
padding: 0;
}
ul.left_menu_txt {
list-style: none;
margin: 0;
}
Just to add to this: John, something you will need to understand is that
many styling inconsistencies occur between browsers because these
browsers apply their own styles to HTML elements (hence the now common
use of a reset style sheet[1]). The most notable difference occurs with
lists - Safari and Gecko based browsers (e.g. Firefox) use padding-left
while Internet Exploder uses margin-left to indent, but as you are
discovering Exploder also has a default top padding. As an FYI, for the
sake of efficiency, the last 2 above rules can be merged:
ul.left_menu_txt {
list-style: none;
margin: 0;
padding: 0;
}
HTH
Mark
Further reading:
[1] http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
__
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] Vertical Menu problem
Thanks for the additional input Mark. I thought I had tried merging those
two rules, but it didn't work. I suppose something else was interfering at
the time.
And thanks for the reset link...hadn't come across that yet. :)
On Thu, Jun 4, 2009 at 5:58 PM, Mark Henderson m...@cwc.co.nz wrote:
As an FYI, for the
sake of efficiency, the last 2 above rules can be merged:
ul.left_menu_txt {
list-style: none;
margin: 0;
padding: 0;
}
HTH
Mark
--
Yazmin Wickham
http://www.yazminmedia.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] transparent png corners
On 5/06/2009, at 8:23 AM, Drake Malone wrote: http://electrotonik.com/temp/test/drop-shadow-gradient-test.html Hi Drake - Those links are both the same! Anyway, I've found the following method works pretty well. http://www.schillmania.com/content/projects/even-more-rounded-corners/ Cheers, 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] Vertical Menu problem
Mark Henderson wrote:
[...]
Just to add to this: John, something you will need to understand is that
many styling inconsistencies occur between browsers because these
browsers apply their own styles to HTML elements (hence the now common
use of a reset style sheet[1]).
When IE8 (post beta) was released, the differences between each browsers
default stylesheet became smaller [2].
The most notable difference occurs with
lists - Safari and Gecko based browsers (e.g. Firefox) use padding-left
while Internet Exploder uses margin-left to indent,
All modern browser have padding-start for list, not padding-left since
this default (padding-start) is applied regardless of if the text flows
from left to right or right to left.
but as you are
discovering Exploder also has a default top padding.
Is this a IE6 whitespace bug you referring to for li?
As an FYI, for the
sake of efficiency, the last 2 above rules can be merged:
ul.left_menu_txt {
list-style: none;
margin: 0;
padding: 0;
}
HTH
Mark
Further reading:
[1] http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
Using the Meyer reset or any other reset is the same a knocking down a
bridge and then building it back up and can add many extra styles to
ones CSS.
To be fair, IE8 can not be referred to as 'exploder' since it now is the
best in implementing CSS2.1 correctly.
2. http://css-class.com/test/css/defaults/UA-style-sheet-defaults.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/
Re: [css-d] transparent png corners
Thanks Tim, I'll check it out :)! On Thu, Jun 4, 2009 at 6:38 PM, Tim Snadden li...@snadden.com wrote: method __ 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] Is this CSS pop up possible?
John Fitzgerald wrote: Here is a visual aid. http://www.fitzio.com/alliedUrology/generalHealth.php Anything is possible. Even with the editor of your choice. But as of this writing, CSS copes primarily with the way stuff looks,and the way stuff feels. Until such time as things may change, perhaps the way to cope with the way stuff behaves is best left to a scripting language. __ 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] Drop Down Menus
Hi everyone! This is my first post and I'm still trying to figure things out. So apologise if I make a mistake! I've made a site with dropdown menus and it has worked fine on IE up until IE8 has come out. The dropdown menus, instead of coming out horizontally across, come vertically down on the side? This is the website :- www.faithlandchurch.org.au Thanks! Asha -- // I heart Mac __ 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] Vertical Menu problem
John wrote:
Hi All,
I can't see how to get rid of the padding at the top of the menu in Firefox:
http://www.donann.co.uk/new_site/vertical_menu.html
Safari displays it as I would like it without the padding showing.
Also for the link labeled 'Home' to be in line with the other links in IE
I've
found I need to add an extra li/li.
The menu to the right has the li/li removed to illustrate the problem in
IE and that the padding is still there in Firefox.
Sorry if it's something simple, it's driving me to distraction!
John
Maybe a pure CSS solution with valid and clean HTML.
http://css-class.com/x/list-images.htm
Much more friendly for IE6 also.
BTW, not sure why that margin top was missing from Safari. Something in
your code? The default margin-top for list has been removed here.
ul.left_menu_txt {
list-style: none;
padding-left:18px;
color : #070d7d;
margin-top: 0;
}
--
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] Is this CSS pop up possible?
On Thursday, June 4, 2009 8:39:40 pm David Laakso wrote: John Fitzgerald wrote: Here is a visual aid. http://www.fitzio.com/alliedUrology/generalHealth.php Anything is possible. Even with the editor of your choice. But as of this writing, CSS copes primarily with the way stuff looks,and the way stuff feels. Until such time as things may change, perhaps the way to cope with the way stuff behaves is best left to a scripting language. I wouldn't quite say anything is possible. CSS can handle roll-over events (although in this case, it would be pretty clumsy), but it doesn't have any mechanism for click events. More toward answering the question though, essentially you want to make a div appear with a click or a roll over. David is right: Javascript (which is not Java, btw) is probably your best bet. (cue off-topic conversation) Also, PHP would be really bad for this, since it can't change anything without reloading the page. What you're looking to do isn't all that hard, and you can probably find it in a basic tutorial (might try w3schools). It's pretty good project for cutting your teeth on. To get you pointed in the right direction, essentially you want to use the onclick and onmouseover event handlers, make sure your divs (the balloons will each be a div) have an id, and access the CSS for each div (div.style.display in this case, most likely). Google should be able to help with the rest. ---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] Vertical Menu problem
Alan Gresley wrote: John wrote: Hi All, I can't see how to get rid of the padding at the top of the menu in Firefox: http://www.donann.co.uk/new_site/vertical_menu.html John Maybe a pure CSS solution with valid and clean HTML. http://css-class.com/x/list-images.htm Thanks, Alan. FWIW, some comparisons of browser rendering of total height of the orange-like box on this end... Box height in Mac OS X 10.4.11 Opera/10.00 Beta 194px Camino/1.6.7 194px Safari/3.2.1 217px FF/3.0.10 228px XP IE/8.0 (on Parallels in Mac OS X 10.4.11) 228px ~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] Drop Down Menus
Asha Nair wrote: Hi everyone! This is my first post and I'm still trying to figure things out. So apologise if I make a mistake! I've made a site with dropdown menus and it has worked fine on IE up until IE8 has come out. The dropdown menus, instead of coming out horizontally across, come vertically down on the side? This is the website :- www.faithlandchurch.org.au Thanks! Asha IE may require a doctype. http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.faithlandchurch.org.au%2F __ 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] Drop Down Menus
Asha Nair wrote:
www.faithlandchurch.org.au
Add...
#menu {clear: left;}
...to make IE8 render as intended.
regards
Georg
--
http://www.gunlaug.no
__
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] Vertical Menu problem
David Laakso wrote:
http://css-class.com/x/list-images.htm
Thanks, Alan.
FWIW, some comparisons of browser rendering of total height of the
orange-like box on this end...
Box height in Mac OS X 10.4.11
Opera/10.00 Beta
194px
Camino/1.6.7
194px
Safari/3.2.1
217px
FF/3.0.10
228px
XP IE/8.0 (on Parallels in Mac OS X 10.4.11)
228px
That is kinda expected. The page doesn't specify font-family nor line-
height.
add
html {font: 1em/1.4 'Helvetica Neue', Arial, sans-serif;}
and see the various browsers fall in line (modulo a couple of
pixels,depending on how they round off decimal values).
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/
