Re: [css-d] All I want for XMAS is PNG/CSS in perfect harmony - on IE - too much to ask?
Adrian Gould wrote: ... Despite all my reading around, no-where is there a simple demo that illustrates how to integrate IE's filter: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale') into an external stylesheet and apply it to a background class - ... Two aspects of any proposed solution to bear in mind - the images will need to allow links over the top of them to work, but they won't need to allow background-repeat. http://www.satzansatz.de/cssd/tmp/alphatransparency.html may be of some help, link to another source included. Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu problem
Tony,
On Dec 30, 2005, at 1:27 AM, {tonyFelice} wrote:
Patrick Roane wrote:
I'm creating a menu using a single image. ...
using the 'off-set' technique.
But, this time- for some reason the 'hover' does not look good. It is
as if the bottom 1/4 of the 'green hover image' is cut off.
http://www.pdrsolution.com/waters/index.html
Patrick,
I appended the style with line height, and it worked in IE6/win, and
padded
it a bit for FF/win:
ul#menu li a { padding-bottom:6px; }
* html body ul#menu li a { line-height:26px; }
The fix described is demo'd here:
http://www.tfelice.com/testcase/offsetHoverMenu.html
Hope that helps. Anyone still see any mac/opera issues?
It looks good in both ff1.5 and Op9pre on my mac.
On an unrelated note, there's no bg color set on body. I realize you
are doing a demo for Patrick so if the original page doesn't have this
problem, feel free to ignore me.
hth
Roger,
Roger Roelofs
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 3 same height columns layout problem
Hi David Well I have been looking and playing about with your code which is great because it gets away from using the 720px wide background image I was trying to use and instead uses a background image for each column (which is roughly where I was at 2 days ago but I couldn't get it to work!) I understand the anchor div gives me the centred 720px width with the background for the centre column, the outer and wrapper columns give me the background for the left and right columns. So far so good but then I get confused... The content div wraps the left and main divs only with a blue.gif background(?) and sidebar (again with background red.gif) is just inside the wrapper div. I can't understand the arrangement of divs and also what seems like duplicating divs with the background image? I tried putting it together one div at a time to see the effect etc and still got lost! :) Is there a basic technique you are using here that I can study up on? It's very tempting to ask politely if I can just use your code as it is and be done with it!(I have spent 6 days now on one page that would take me 10 mins to code in tables plus I have compromised the original design to make it more css friendly and even so I am wondering what I did in a previous life to have this much grief with my first css page!!! :) ) But I really want to understand it, beat it into submission, master it and rule the world! :) I had already seen an article about fixing the 3 pixel shift on positioniseverything so I think that bit can be sorted easily... Best regards, Chris -Original Message- From: David Laakso [mailto:[EMAIL PROTECTED] Sent: 29 December 2005 23:04 To: CSS List Cc: [EMAIL PROTECTED] Subject: Re: [css-d] 3 same height columns layout problem Samatason Ltd wrote: Hi David Thank you very much for taking the time to put that together! I will study your code to see how you are doing it and report back... ATB Yes. http://www.dlaakso.com/vacation.html. I can't fix anything-- easier to start with a clean sheet. The xml declaration above the doctype puts the 'evil one' in quirksmode. If you can use this, it is your call about quirksmode-- works either way, maybe. Best, ~davidLaakso I just noticed, our little ie 3px friend is rearing its ugly head on that page. You'll see it on left side of the middle (green) column in ie-- beginning from the top of that middle column, to the bottom of the text in the blue column. If it is worthwhile to pursue, perhaps someone else on the list will be kind enough to provide a fix. Or a better solution. Best, ~davidLaakso __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] 3 same height columns layout problem
Samatason Ltd wrote: Is there a basic technique you are using here that I can study up on? See the three column tutorial on this page http://www.alistapart.com/articles/negativemargins/. A containing division was added to provide the fixed width. And Georg Sortun was kind enough to remind me that I neglected to include /*![CDATA[*/ ... /*]]*/ comments for the embedded css(reload my page). Chris aside: best trim your replies and do not top post-- this will keep the list 'Mom' from freaking out. Regards, ~davidLaakso __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] site check request? LIs with background images not displaying right in firefox
I'm far from a css expert and I'll probably have to ask a few questions
before I finish this project.
But the gist of my problem is that I can't figure out how to have firefox
render my css UL/LI styles. Mainly the problem is getting the margin right.
Currently I have a big gap on the left with firefox, plus it displays both
the custom image and the original LI image.
Here's a bit from my stylesheet with the typical problems in firefox:
-
!-- NAV FOR LEFTSIDE WITH FOLDER IMAGES --
#leftnavlist
{
margin-left: 7px;
margin-top: 2px;
margin-bottom: -1px;
padding: 0;
list-style: none;
}
#leftnavlist li
{
padding-top: 0px;
padding-bottom: 0px;
padding-left: 20px;
background-image: url(/images/folder.gif);
background-repeat: no-repeat;
background-position: 0 .0em;
border-bottom-color: #FBB3D7;
border-bottom-style : ridge;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;
}
#leftnavlist ul { list-style: none; }
!-- END LEFT SIDE NAV --
-
And the site is here:
www.poodle-oo.com
I haven't even looked at opera yet but I guess I'd better get on it.
Thanks for any suggestions -- I was halfway wondering if I should serve up
different stylesheets for the two different browsers.
- blake
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Site check for beta site (CSS layout help needed as well)
Steve Clason wrote:
On 12/29/2005 5:16 PM Bryan wrote:
Ideally, I want the two boxes to be static and have the center be fluid
and adjust with the browser resolution. Currently, it does this, but I
just don't want the overhang.
You just need to explicitly position main_container so that your 100%
width declaration on header_container refers to it rather than to the
viewport. So do this:
#main_container{
width:85%;
height:75em;
background:#4592D9;
position: relative /*!!! NEW !!!*/
or I believe you can just delete the position: absolute from
header_container, like so:
div#header_container{
width:100%;
height:8.5em;
background:#005F00;
/*position:absolute; !!! this is now rem'd out !!!*/
}
It ain't exactly thoroughly tested, but ought to work.
I removed the position:absolute from header_container, and it indeed
works. Now, I just need to re-read my O'Reilly CSS book again and
understand where I went wrong in the first place. I think I got confused
about what floating and what positioning are and how they work.
Many thanks Steve...
Bryan
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] alt tags
Ian Young wrote: Having some difficulty in formatting the size of the alt tags in my images. if we are talking about the part in capitals here: img src=/myimages/myXPicture.jpg ALT=TEXT-ALTERNATIVE TO THE IMAGE title=This text will show as tooltip in all browsers / then it is an *attribute*. The alt-text, which is meant as an alternative if the image fails to load, is not consequently shown as tooltip when hovering the mouse above the image (it is only shown most of the times in Explorer), whereas the title-attribute makes a tooltip which comes up in all browsers. If you want a faster tooltip, or one that can be formatted as regular HTML, you can use javascript (there's a lot of them out there for the purpose, keyword: tooltip), or you can do the thing with an inline tag inside the a-tag, as I have done on the http://visesangere.dk/viseopt.html (the s.2 s.26 s.51 s.76 and s.101 links) The technique is somewhat described and discussed in the thread that I begun December 10th 11:11am with the subject CSS only tooltip in IE appears below other elements http://archivist.incutio.com/viewlist/css-discuss/67326 (I _may_ get the time to put a neat demo-only-this page together at some point, but not right now) img border=0 src=./logo/' ?= $row['logo'] ? alt=' ?=$row['ambusiness'] ?at Recruiters-Online //td By the way, when trying to decipher what's wrong in your code, always use the code online (view-source in the browser), then you will also be aware if your PHP (this seems to be) turns out otherwise than intended :-) And finally: it is kind to the rest of us, to begin a new thread instead of answering, and thereby hijacking an existing one. It might not show differently in your mail-program, but it does in mine, and it confuses matters in the archives ;-) Best regards Jesper Brunholm __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] overflow strategy for a fixed width table?
I've got a fixed width table (750px) with 10 columns on a fixed width
page. I've been asked to squeeze an additional 2 or 3 columns of data
into the same space. In some cases, the data simply won't fit
horizontally in the space allotted at readable font sizes. I know the
arguments for allowing the page and the table to expand, but I'm
trying to explore other options due to other constraints.
One option is that I simply use
{overflow: auto;}
on the table (or perhaps, the div that contains the table).
Is there another way?
For example, I could use
{ text-overflow: ellipsis; }
on certain columns, but how do I make that hidden data visible if a
user wants to see it?
Is there any way to use overfow: auto; on a colgroup that works on
most browsers?
(for example, apply overflow: auto; to only the first 3 columns of
the table?)
Thanks in advance for any thoughts you all might have!
r.
I'm currently traveling overseas and using dialup, so I'm on the
digest (ie. my replies may lag)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] alt tags
And finally: it is kind to the rest of us, to begin a new thread instead of answering, and thereby hijacking an existing one. It might not show differently in your mail-program, but it does in mine, and it confuses matters in the archives ;-) Suitably chastised!! Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.371 / Virus Database: 267.14.9/216 - Release Date: 29/12/2005 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] alt tags
RE: [css-d] alt tags And again -- I would gently suggest that you not use alt as a class since it's an attribute of the img tag. I was just using alt as an example. I had use another name altogether for the class. It would appear that I cannot change the size of my alt tag without resorting to the dreaded JavaScript. I'll just have to live with it. I guess under the accessibility stuff, they should be legible anyway. Thanks all for help. Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.371 / Virus Database: 267.14.9/216 - Release Date: 29/12/2005 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site check request? LIs with background images notdisplaying right in firefox
Blake Kritzberg wrote: But the gist of my problem is that I can't figure out how to have firefox render my css UL/LI styles. Mainly the problem is getting the margin right. Currently I have a big gap on the left with firefox, plus it displays both the custom image and the original LI image. Blake, Sorry I do not have answer for you. I would suggest that your validate your css and html files-- there 304 markup errors. It will make it easier to resolve the problem(s) once that is done. Tidy Online http://infohound.net/tidy/ w3c markup http://validator.w3.org/ w3c css http://jigsaw.w3.org/css-validator/ Best, ~davidLaakso __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] site check request? LIs with background images not
Tidied up your CSS to read:
#leftnavlist
{margin: 2px 0px -1px 7px;
padding: 0;}
/* top right bottom left spells trouble : ) */
#leftnavlist ul
{ list-style: none;}
/* this was after your li */
#leftnavlist li
{padding: 0px 0px 0px 20px;
background: url(/images/folder.gif) no-repeat;
border-bottom-color: #FBB3D7;
border-bottom-style:ridge;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-sixe:11px;
}
and the layout appears identical to me in both IE and FF - I'm not an expert
either, but I think you had your declarations in the wrong order. Hope that
helps.
Adrian
--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.371 / Virus Database: 267.14.9/216 - Release Date: 29/12/2005
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] overflow strategy for a fixed width table?
[EMAIL PROTECTED] wrote:
I've got a fixed width table (750px) with 10 columns on a fixed width
page. I've been asked to squeeze an additional 2 or 3 columns of data
into the same space. In some cases, the data simply won't fit
horizontally in the space allotted at readable font sizes. I know the
arguments for allowing the page and the table to expand, but I'm
trying to explore other options due to other constraints.
One option is that I simply use
{overflow: auto;}
on the table (or perhaps, the div that contains the table).
Is there another way?
For example, I could use
{ text-overflow: ellipsis; }
on certain columns, but how do I make that hidden data visible if a
user wants to see it?
In May 2005, we discussed a question how to wrap long URL's [1].
Paul Novitski explained his idea to let long URLs be partially
hidden with an ellipsis, and I suggested a pure CSS solution for his
idea.
The method uses a float that drops into view once an preceding float
gets too wide and is hidden by an overflown container.
Recently, I thought about other problems that this solution could
address, and talked with Georg Sørtun about other possibilities [2][3].
So, I hope, yes, this could be another way:
http://www.satzansatz.de/cssd/dropit.html
(A change to the May attempt is the link that is absolutely
positioned in a 1x1px right float to keep the dropping float itself
small, while the a.p.link physically does not take space)
Technically, it looks promising in Fx1.5, IE6/Win, Opera8, Safari
2.0.2. IE5.23Mac shows the link, but adds some transparency to it.
Critique and suggestions appreciated.
Does it solve the problem? Is it accessible?
Regards,
Ingo
[1] http://archivist.incutio.com/viewlist/css-discuss/57426
[2] http://www.satzansatz.de/cssd/tmp/dropitII.html
[3] http://www.gunlaug.no/tos/alien/test_8770.html
--
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS and PNG - still not KISSING (in IE)
Adrian Gould wrote: Hi Ingo - thanks for that link, proof that it's possible to integrate the idea. The problem persists though, because while your example shows a single background image _under_ the lis, what I'm proposing is that IE cope with a BG image being applied to _each_ li. Actually, my test case has to show a solution for links not working at all when placed above a transparent background under certain conditions so far. There is an explanation of the why and hows of this test a bit down on my page [1]. The reason for the links being patched on top of the transparent image is to show that some parts of the links are clickable, others don't, depending on the current transparency of the pixel in the image /under/ the link, which might indicate that there is something wrong with the mouse event handling in this poor filter concept. I haven't looked at your test case thoroughly yet, but I cannot see the basic difference in applying the filter to an additional inner wrapper of the absolutely positioned element as my test shows it and the problem you are encountering. In [1], I have noted that any element which shall take this filter burden must have layout, and I have linked to [2]. Currently, your list entries do not have layout, therefore, you cannot apply a filter to them at all until you are triggering this. But this would cause more troubles, as lists do show more bugs as usual in IE when the li gets layout, we mentioned that in that article too. Some will say filters, being a MS proprietary, buggy and abandoned concept, are not within the range of CSS as the specification defines it, and therefore, the issue is slightly off topic, I fear. A degradation without grace would be appropriate for IE6, I think. Good luck. Ingo [1] http://www.satzansatz.de/cssd/tmp/alphatransparency.html [2] http://www.satzansatz.de/cssd/onhavinglayout.html -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Firefox applying whitespace in print media
Hi all, I've been working on an external print stylesheet for a site, and I'm getting a strange problem with Firefox 1.5 (WinXP). It also occurs in Firefox 0.8, 1.0, and 1.0.7 (all WinXP). It does not occur in IE6/SP2 or Opera 8.5 (WinXP). Here's the problem(s): Firefox is often, but not always, applying a left margin to acronym elements and also applying left margins and right paddings to a elements. These are elements in the normal content flow, so I've not applied default margins or paddings to them, nor do they have any classes or ids to have a potential conflict. Does anyone have any ideas on how to remove this unwanted whitespace? The relevant files are: http://www.workpump.com/testarooski.html http://www.workpump.com/css/print.css http://www.workpump.com/css/themes.css http://www.workpump.com/css/layout.css Any help is appreciated, -Kevin Kevin Browne E: [EMAIL PROTECTED]IM: [EMAIL PROTECTED] -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.371 / Virus Database: 267.14.9/216 - Release Date: 12/29/2005 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox applying whitespace in print media
Kevin, On Dec 30, 2005, at 5:56 PM, Kevin Browne wrote: Hi all, I've been working on an external print stylesheet for a site, and I'm getting a strange problem with Firefox 1.5 (WinXP). It also occurs in Firefox 0.8, 1.0, and 1.0.7 (all WinXP). It does not occur in IE6/SP2 or Opera 8.5 (WinXP). Here's the problem(s): Firefox is often, but not always, applying a left margin to acronym elements and also applying left margins and right paddings to a elements. These are elements in the normal content flow, so I've not applied default margins or paddings to them, nor do they have any classes or ids to have a potential conflict. Does anyone have any ideas on how to remove this unwanted whitespace? The relevant files are: http://www.workpump.com/testarooski.html http://www.workpump.com/css/print.css http://www.workpump.com/css/themes.css http://www.workpump.com/css/layout.css I'm not seeing this problem in MacOSX. Does it happen just during print-preview, or when actually printing also? Roger, Roger Roelofs Remember, if you’re headed in the wrong direction, God allows U-turns! ~Allison Gappa Bottke __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox applying whitespace in print media
Kevin Browne wrote: problem with Firefox 1.5 (WinXP) Problem: Firefox is [tonyFelice] ... applying a left margin to acronym [tonyFelice] and left margins and right paddings to a elements. [tonyFelice] Kevin, could you look at this example, and tell me if it is an accurate test case for your issue? http://www.tfelice.com/testcase/printStyle.html FF1.5/win shows me a margin on preview. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox applying whitespace in print media
Kevin Browne wrote: problem with Firefox 1.5 (WinXP) Problem: Firefox is [tonyFelice] ... applying a left margin to acronym [tonyFelice] and left margins and right paddings to a elements. [tonyFelice] I have never noticed it before, but _firefox_ is imposing 'mandatory' margins on those items, presumably because they normally don't show as 'hot' once printed. It is not injected by the stylesheet at all. Still looking for the fix. http://www.tfelice.com/testcase/printStyle.html http://www.tfelice.com/testcase/printNoStyle.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox applying whitespace in print media
Kevin Browne wrote: problem with Firefox 1.5 (WinXP) Problem: Firefox is [tonyFelice] ... applying a left margin to acronym [tonyFelice] and left margins and right paddings to a elements. [tonyFelice] After noticing that these margins are not applied to the header element, I realized that creation of a 1em header style solves the issue, but that might not be optimal. Still looking for a very solid fixBUT WAIT... Whoa. Here's something interesting, To create the 1em header, I needed to declare a base font size, and the BASE FONT SIZE solves this - in fact, there is an instance in which there is not enough space separating a link and surrounding text. http://www.tfelice.com/testcase/printStyleFontSize.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Pure CSS Image Map Tooltips
On 12/28/05, francky [EMAIL PROTECTED] wrote: Yes, I've seen one: http://home.tiscali.nl/developerscorner/css-discuss/imgmap-tooltip.htm :-) That is, these are the ordinary tooltips. In case you mean a self-styled tooltip, I'm afraid I don't know a solution with pure css. Thanks francky, I like this solution, but I do need self-styled tooltips. I tried this with what I needed (a long section of text) and it chopped off the majority of the text. It looks like the display of the title attribute has a limit on the number of characters it can display. -- Yazmin Wickham Contractor - Internet Development http://www.yazmin.net __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Color for three-column layout
Hi, I working on a three-column layout but having trouble setting the color for
the left and right columns. I have been looking at several online tutorials and
it appears that I'm doing the CSS right, but the images aren't coming in for
the column backgrounds. When I put the background image for the left column in
the body rule, it looks great, but when I move it to the #left rule, it doesn't
come in. The image for the #right column doesn't come in regardless of where I
put the image for the #left rule.
I am using absolute positioning...is this something that requires using float
instead?
http://www.drk-writing.com/3columnlayout/
body {
margin: 0;
padding: 0;
text-align: center;
}
#banner {
background-image: url(images/daisiesbanner.jpg);
border-bottom: 10px solid #4B5957;
padding: .5em;
}
#left {
position: absolute;
top: 80px;
left: 0px;
width: 160px;
background: #fff url(images/sidebar1.gif) repeat-y top left;
}
#right {
position: absolute;
top: 62px;
right: 0;
width: 190px;
background-image: #fff url(images/sidebar2.gif) repeat-y top right;
padding-top: 20px;
}
#center {
margin: 0 190px 0 190px;
padding: 20px 20px 10px 5px;
border-right: 1px solid #4B5957;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
color: #000;
text-align: justify;
}
p.nav {
border-top: 1px solid #4B5957;
padding-top: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #4B5957;
text-align: justify;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 30px;
color: #fff;
text-align: left;
font-weight: normal;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #374240;
text-align: left;
margin: 0;
padding: 0;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #374240;
text-align: left;
margin: 0;
padding: 0;
padding-top: 15px;
}
#banner h1 {
margin: 0;
padding: 0;
}
h1.opacity {
filter: alpha(opacity=80);
-moz-opacity: .80;
opacity: 0.80;
}
#right img {
padding: 4px;
background-color: #fff;
border: 1px solid #4B5957;
}
#right p {
margin: 15px 35px 15px 35px;
font-size: 10px;
line-height: 12px;
}
ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#nav a {
display: block;
background-image: url(images/grad1.jpg);
text-decoration: none;
padding: 5px;
width: 98%;
border-top: 1px solid #fff;
border-right: 1px solid #828282;
border-bottom: 1px solid #828282;
border-left: 1px solid #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #4B5957;
}
ul#nav a:hover {
background-image: url(images/grad2.jpg);
border-top: 1px solid #828282;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #828282;
color: #fff;
}
ul#nav li.last a {
background-color: #4B5957;
background-image: none;
border: 1px solid #4B5957;
}
#footer {
margin: 0;
padding: .15em 0 .15em 0;
background-color: #4B5957;
border-top: 1px solid #4B5957;
width: 100%;
}
#footer p {
text-align: center;
font-size: 10px;
line-height: 12px;
color: #BCDCD9;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] menu problem
Roger Roelofs wrote: ... But, this time- for some reason the 'hover' does not look good. It is as if the bottom 1/4 of the 'green hover image' is cut off. http://www.pdrsolution.com/waters/index.html Patrick, ... The fix described is demo'd here: http://www.tfelice.com/testcase/offsetHoverMenu.html ... Anyone still see any mac/opera issues? It looks good in both ff1.5 and Op9pre on my mac. Actually better on Opera -- it withstands 200% zoom. Breaks after several font size increases in Firefox, and behaves very badly in IE 6 (all on XP SP2) on font size change. As Roger said, these are unrelated to the initial question, so same qualification applies. - Pat - Patrick Mannix On an unrelated note, there's no bg color set on body. I realize you are doing a demo for Patrick so if the original page doesn't have this problem, feel free to ignore me. Roger, __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Difference between onLoad n Window.onload
Hello, this kinda OOT, i'm currently experimenting with some css drop downs, css javascript toggle tab. I'm curious bout the diference between using onLoad into the Body tag and using Window.onload. Can anyone give me the best situation using onload and window.onload ? thanks b4 - Yahoo! Shopping Find Great Deals on Holiday Gifts at Yahoo! Shopping __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
