[css-d] rounded corners no color fill
Hi All, many examples have been on color filled boxes with rounded corners, few if any on simply transparent boxes with rounded corners. In http://www.availcompany.com/webdev/webcode/css_test11.htm 1. left float rounded box without color fill, how do you get the top border not to gap up? 2. how do you get right float to line up with the top of left box and to show rounded corners ? thx, dino __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Smarty templates and CSS
Good point here. Might be useful if you find out such a need when you've already coded most of a project: let's say you started with a single stylesheet and the things baloons enough to make you wish you spliced it up according to the website section. Another example: you use CCs to serve a separate sheet to IE and, after testing with IE7, want that style only to target IE6 and below... Changing a template is way faster than rewriting scores of pages (less chances of errors, too). That said, there is nothing you can do in Smarty (or any other templating system) that you couldn't do in PHP or other scripting language. You either love or hate that way of doing things. sam foster wrote: Now, what about templating your CSS? Does anyone have a system for delivering smaller targetted versions of a potentially huge stylesheet that leverages a templating system like Smarty? (trying desperately to steer this on topic .. there is a interesting intersection here) Sam -- Dejan Kozina Dolina 346 (TS) - I-34018 Italy tel./fax: +39 040 228 436 - cell.: +39 348 7355 225 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] another weird thing
Hello again, the hover problem, i'll do later. (I think I'd do it with the great idea from francky) Now I'm create the rest of these site. I've make a mouseover menu, but if i go above the content div, the mouseover effect in the menu was activated.. and the content layer seems as an link but there wasn't I dont know why. I'd all a's and div's closed... The test url: http://test.2m-design.net/cbj/ the css: http://test.2m-design.net/cbj/cbj.css hope anyone could help me thx a lot micha 2m-design Michael Müller Schlachthofstraße 13 D-98693 Ilmenau www.2m-design.net [EMAIL PROTECTED] +49 (0) 36 77 78 93 59 +49 (0) 176 21 20 66 66 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Clearing floats problem: Comment after clear element messes up clearing in IE?
Arian Hojat wrote: I updated the files, the element is cleared properly now, BUT in IE has this new problem (errr why cant IE leave me alone hehe)... When you highlight text in #content or #sidebar, the background color of the div 'behind' the #body3 div leaks though... http://arihoj.freehostia.com/rsfc/rsfc_fixed3.html Any idea why they leak through francky :)? [...] Hi Arian, I've some other thing to report: * just succeeded to get a first working version of the Zoom construction for 2 columns http://home.tiscali.nl/developerscorner/css-discuss/zooming-corners_preview.htm. :-) :-) It is working in FF1.07, IE6, Opera8.01, Moz1.71 at my Win98SE machine. Cheers, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Site check in Mac/Linux browsers please (was Help! CSS menu problem)
Hello again, OK, I now seem to have solved my earlier CSS menu rollover problem in IE6 see: http://www.sfep.org.uk/newHP.asp. I decided to try and apply the background images to the a elements rather than the li elements, and after a bit of re-classing of the a's that seems to have done the trick -- see: http://www.sfep.org.uk/newHPa.asp... OK, so this now seems to work in Firefox, IE6 and Opera 8 under Win XPH -- I'd appreciate it if anyone out there could give the page a looking at with any Mac or Linux browsers, and let me know if the thing still works Many thanks, in advance J. John Marsden SfEP webspinner Aibidil Bolton Lancs W: www.sfep.org.uk E: [EMAIL PROTECTED] T: 07092 010469 F: 07092 010473 M: 07092 234734 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 windows site checks please :: njlada.com
Please check this page in IE 6 7 on PC http://njlada.com Should look like this: http://www.njlada.com/sandbox/ but I think perhaps it doesn't If there is a discrepancy and you have some guidance to offer me on fixing it, I'll be much appreciative. Kimi I did not see a reply to your post, Kimi. I regret that I was not able to fix it-- maybe one of the list IE bug squashing specialists will see this and come to our aid. If you want to mess around in the meantime, this stripped version (using a different base layout) works fairly well in all versions of IE. uri: http://www.chelseacreekstudio.com/ca/cssd/dem.html IE screen captures: http://www.browsercam.com/public.aspx?proj_id=286687 Best, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] navbar woes
i'm trying to get the following to validate as valid CSS http://www.stevekarsch.com http://www.stevekarsch.com/wp-content/themes/vintagesurf/style.css problem is, i'm using the following technique for my navbar: http://www.tyssendesign.com.au/examples/IR-navbar.html which uses a behavior property to make hovering work in IE6. of course, behavior is not a valid CSS property. so now the question is, what can i do to make this validate? what are CSS best-practices for nav ul text/image replacement? also allowing for hovering? thanks in advance! steve __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] updated link - still seeking help
Jeremy Snider wrote: www.hueylong.com I'm having a frustrating problem in IE with content (an image of 3 photos) jumping from the right column into the left. My site's set up as a two-column layout (both floated within another float). The page in question is at www.hueylong.com/new_site/index.html . I've tried everything I can think of - ensuring the column 'has layout', putting the image in a div, putting div separators in, relative positioning - nothing seems to work. The image is the first element in normal flow in the right column, if that's any clue to the problem. On a local copy, the image is located on the right, but is positioned too low. Between the columns, there are consecutive comments: ... /div !-- end ltCol -- !-- = RIGHT COLUMN = -- div id=rtCol ... Removing this bug trigger [1] (deleting the comments) fixed the IE6 problem at my side. Ingo [1] http://positioniseverything.net/explorer/dup-characters.html -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Clearing floats problem: Comment after clear element messes up clearing in IE?
francky wrote earlier today: * just succeeded to get a first working version of the Zoom construction for 2 columns: http://home.tiscali.nl/developerscorner/css-discuss/zooming-corners_preview.htm. Hi Arian all, It seems the list server is a bit slow at the moment (last 14 hrs no list-mails came in), but here is already version 2 of the Zoomin' Corners experiment: * http://home.tiscali.nl/developerscorner/css-discuss/zooming-corners_preview2.htm I made some refinements in the positioning of the #content and the #sidebar, and applied a max-width for not-IE browsers. Results of the new version (now valid css/html too ;-) ): Home tests: * Firefox 1.07 on Windows 98SE: ok. * MSIE 6 on Windows 98SE: ok. * Opera 8.01 on Windows 98SE: ok. * Opera 7.54 on Windows 98SE: ok. * Mozilla 1.7.1 on Windows 98SE: ok. According to browsershots.org: * Safari 2.0 on Mac OS X: ok * MSIE 7.0 on Windows XP: ok * Mozilla 1.7.12 on Ubuntu Dapper (Linux): ok. * Konqueror 3.5.2 on Ubuntu Dapper (Linux): ok. * Firefox 1.5.0.5 on Ubuntu Dapper (Linux): ok. * Opera 9.01 on Ubuntu Dapper (Linux): not ok, bottom corners + some more cut off (why?? / what to do??) See: http://browsershots.org/screenshots/1b7ac1e86d9c68f9f50719a37ea1cb1a/ I think it is a reasonable result. :-) Hope you can use some of it. Cheers, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] background not showing in mozilla
Gunlaug Sørtun wrote:
Donna Jones wrote:
http://mainehumanities.org/thirty-years-draft.html
The addition of...
.timeblock {padding-bottom: 1px;}
...seems to do the trick in my Moz 1.7.12.
There's also the often used...
.timeblock {overflow: hidden;}
...that Mozilla also reacts well on, but there are some negative
side-effects with that one in Gecko-browsers.
regards
Georg
... and my FF1.07 is also happy with an other alternative from the toolbox:
.clearer {clear: both; height: 1px;} [1]
Is seems FF is denying an empty div with no dimensions; the 1px height
is enough.
- But IE is used to blow up all elements with small dimensions. Here IE
is supposing also non-text elements (as: empty div's) have the default
font-size and the default line-height...
To keep IE at the lesson, this has to be corrected:
.clearer {clear: both; height: 1px; font-size: 1px; line-height: 1px; }
But this doesn't work, if an IE visitor has overruled the
font-sizes clientside (IE accessibility mode: ignore in webpages given
font-sizes). Then the line is blown up again. The antidote here is
adding an empty comment in the html:
div class=clearer!-- --/div
For IE now it is not an empty div, and not empty elements haven't the
default font-size and line height...you see the logic? ;-)
Greetings,
francky
(Every solution has it's problems- Johan Cruyff)
[1]
In cases where the 1px height cannot be missed, it can be compensated
with a neg. margin-bottom of 1px. In this way the 1px exists ... and
doesn't exist. :-)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Drop down (p7) menu hidden behind other CSS elements?
I've just implemented a different method for using a drop down DHTML menu because I was not satisfied with the behavior of the other one. It is working great on its own: http://www.language-works.com/swimdesign/dropdown.htm CSS located at http://www.language-works.com/swimdesign/p7_cssexpress/p7exp/p7exp.css but it gets hidden behind other elements of the page when integrated. What am I doing wrong? Examples of implementation: http://www.language-works.com/swimdesign/template-public-6.htm CSS at http://www.language-works.com/swimdesign/template-public-6.css and http://www.language-works.com/swimdesign/template-10.htm CSS at http://www.language-works.com/swimdesign/template-10.css TIA, Anne __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] URGENT... Client's requirement changed... Rip and tearat an entire CSS now??
The discussion seems to have evolved around the benefits or otherwise of using CSS alone for layouts. Here's what Sam said of my noting that I found table layouts hard: On Sat, 23 Sep 2006 21:30:10 -0500, sam foster wrote: Well, I for one have several more years experience making layouts that way than with CSS. They also tend to be more forgiving - of overwidth content for example. Yes and no. But now I see where you are coming from. You later explained: I dont think I'm alone in thinking that CSS layout is harder than table layout - where the result is just measured in a visual comparison to the design comp. [...] See, I do not do layout professionally, and do not have to work from design comps. Now design comps certainly have their place, but I think that the web is _essentially_ a flexible medium. One of my first discoveries with CSS was the float drop. I found this very exciting, because instead of two small boxes getting crushed on enlarging text or opening the sidebar, one would drop below the other. The layout still worked even on narrow displays. Looking identical did not seem worth striving for. Since that discovery, I have found so much more practical uses of CSS that could not possibly done with tables that I have never even attempted another table layout. So I do understand why you used a table layout. It is a feasible solution to your problem - namely, replicating a rigid layout. I do encourage you to learn more about CSS, though. Browser support is improving greatly, while the variety of devices used to surf the 'Net is exploding. I think study of CSS will be well rewarded. Apologies if I'm just feeding the trolls. Not at all. Good design is all about informed compromise. There is no one perfect method. Constructing a web site or a barn, one uses the techniques and materials on hand, as you implied by this: At the end of the day, CSS styles markup and your options are limited by the markup you've got available. Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Layout is broken in IE6 7
Hi Kimi,
Maybe adding { height: 1%; } to the #container? [1]
See testpage
http://home.tiscali.nl/developerscorner/css-discuss/test-njlada.htm.
Greetings,
francky
PS:
If you replace the transparent blueblue.png by a blueblue.gif
http://home.tiscali.nl/developerscorner/css-discuss/images/bluebluebg.gif,
then IE can handle it (without otherwise needed png-hacks).
[1]
It is one of the not HavingLayout manifestations of IE. See Ingo's
OnHavingLayout article http://www.satzansatz.de/cssd/onhavinglayout.html.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] breaking horizontal menu -a solution?
Have a look at this page. http://blue-fly.co.uk/tri/test.php The css http://blue-fly.co.uk/tri/css/triscotland.css When I increase the font the page breaks and the menu items disapear. Can someone suggest an elegant way to fix this problem? This is fine when you have a vertical menu but horizontal poses a new probelm as the page has to Ross __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 Problem with Position Relative?
If you look at the top menu (red bar - #topmenu) which is styled with some javascript using (Ruzee Borders). You will see that in IE6 the menu loads correctly and then jumps down when you hover over it. I can stop it jumping if I apply 'position absolute' to the .menu_horiz class, but it causes other problems. Is there a better way to do this for IE so it behaves more like Firefox? html: http://www.dp.shoesforindustry.net/home/ css: http://www.dp.shoesforindustry.net/css/screen.css Thanks in advance, Russ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] IE6 a:hover dimension change...
Thanks so much for your help on this.
I've never used static before--I thought it was like fixed. I have
SO much to learn...
On 9/19/06, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Lorin Rivers wrote:
Do you have suggestions in that regard?
http://mosasaur.dyndns.org:8080/austin_apartment.html
Sure :-)
Generally: don't lay out main parts of pages with 'position: absolute'.
Everything that involves text will need space to grow, and that means
other element must move to provide that space. Absolute positioned
elements are independent of each other - unless they are nested, so they
will simply overlap each other when they run out of space.
Normal flow and floats will adjust to their non-positioned surroundings,
so that's a much safer choice for most layouts.
Quick test: copy and paste the following in the page head - *below* all
stylesheet links...
style type=text/css
/*![CDATA[*/
#content,#thumbs,#footer{position: static; float: left; width: 560px;}
#content {margin: 100px 0 10px 150px;}
#thumbs,#footer {clear: left; margin: 0 0 0 150px;}
/* kill the 'margin-doubling on floats' bug in IE6 */
#content,#thumbs,#footer{display: inline;}
/*]]*/
/style
...and it will take over main parts in that page. The 'position: static'
nullifies all your positioning from #content down, and then I turn those
elements into floats and adjust them into place by using margins.
I haven't perfected any of this - it's just an example, so there's
plenty of room for more adjustment.
This should give you some ideas on how to create a self-adjusting
layout, and as you will see: I have not taken over all absolute
positioned elements. You can of course turn everything into floats
and/or normal flow, but that isn't really necessary.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] css and semantics
Hi all! I'm a new italian entry in this list. at http://gabrieleromanato.altervista.org/css/layout-tabellare-senza-tabelle/esempio.html you can find a table layout built using some values of 'display' prop. it's only a clever use of some css features, supported also by Firebird and Opera 7. it's well-known that IE doesn't support this layout. my hope lies in a far forward-compatibility. semantics vacant? according to specs, we have to respect the own nature of every html element. is that true also in case of new experiments? thank you in advance for your answer. everything started out from a hint by Eric Meyer who pointed out at the particular nature of tables. bye Gabriele Romanato -- http://www.css-zibaldone.com/the-css-switch-project/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Left and right columns not showing in a 3 column site
Hi everybody, I have a 3 column website and all is well in most computers/browsers. In fact, the site looks good in all those machines where I tested it on. However, the client is saying the left and right column of the website are not showing in his computer. The content on either side disappeared. Only the middle column is showing. The client has got Win XP with 1024 * 768 resolution. Can you please check it in your machine and tell me if you have the same promlem and if you have why? site: http://www.softmargin.co.uk/project/37767021/index.htm the CSS is attached __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] rounded corners no color fill
On 9/24/06, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Hi All, many examples have been on color filled boxes with rounded corners, few if any on simply transparent boxes with rounded corners. In http://www.availcompany.com/webdev/webcode/css_test11.htm Dino, I've had success with Douglas Livingstone's easyCorners technique. Unfortunately his site is not online anymore. Kind of found it here, but without the images :s http://web.archive.org/web/20030611042446/http://www.redmelon.net/tstme/4corners/ You can see it at work here: http://www.raoulwallenberg.net/ (Look for the .roundBox class) The technique is *extensively* cross browser tested. It's a bit bloated on the HTML side, and can take some time to cut the images, but it's relatively straightforward. Even more, this might be of help in generating the images: http://www.neuroticweb.com/recursos/css-rounded-box/index.php?idioma=en HTH, -- Manuel Razzari YO - http://ultimorender.com.ar/funkascript CVAM - http://conVistaAlMar.com.ar __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] breaking horizontal menu -a solution?
Have a look at this page. http://blue-fly.co.uk/tri/test.php The css http://blue-fly.co.uk/tri/css/triscotland.css When I increase the font the page breaks and the menu items disapear. Can someone suggest an elegant way to fix this problem? This is fine when you have a vertical menu but horizontal poses a new probelm as the page has to Ross __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] navbar woes
On 24/09/2006 18:30, Stephen Karsch wrote:
problem is, i'm using the following technique for my navbar:
http://www.tyssendesign.com.au/examples/IR-navbar.html
Could you use this instead of using hover on the LI:
.archivelink a:hover {
/* hover stuff */
}
? IE understands a:hover, so it should grok that CSS fine.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Drop down (p7) menu hidden behind other CSS elements?
On 25 Sep 2006, at 24:18, Anne E. Shroeder wrote: http://www.language-works.com/swimdesign/dropdown.htm This doesn't work for me at all on Mac/Firefox? Just the top bit of the toolbar, but no top words of menu? If I hover I get the menu, but it seems a bit disjointed? The other two seem to be OK with the menu coming over the other page elements? Is this just an IE problem? In which case I can't be of much help. Perhaps z order or something? I'm not much up on drop down menu. Russ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Drop down (p7) menu hidden behind other CSS elements?
Anne E. Shroeder wrote: I've just implemented a different method for using a drop down DHTML menu because I was not satisfied with the behavior of the other one. It is working great on its own. but it gets hidden behind other elements of the page when integrated. What am I doing wrong? http://www.language-works.com/swimdesign/template-public-6.htm CSS at http://www.language-works.com/swimdesign/template-public-6.css and http://www.language-works.com/swimdesign/template-10.htm CSS at http://www.language-works.com/swimdesign/template-10.css Anne Either you have fixed this, or I do not understand the problem. The drop down seemed OK in both pages-- xp (ie, ff, opera). Trivial Pursuits: neither page handles the pixel-sized fonts/pixel line-height well. Try ie text-size largest (with ignore font-sizes checked). And template-10.htm overlaps early on zoom in ff. Regards, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Vertical Align for Header Elements?
I am curious to now if there is such a thing as a vertical alignment for headers? I have an h5 element within which I am placing an image AFTER the text. The image is 30 pixels high and the font is sitting at the bottom of the h5 element whereas I would like it to sit at the top. Thanks. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] text on one line, left and right justify
On 9/22/06, ~davidLaakso [EMAIL PROTECTED] wrote:
Tracey Zellmann wrote:
Probably a beginner question.
I have one line of text containing two elements. I want one to be
left-justified and one to be right-justified.
Something like this:
JAMES W. JACOBS,
Proprietor
I am not sure how to accomplish this.
CSS
span {float: right;}
HTML (the right-float comes first in the source-- the opposite of what
one might think)
pspanProprietor/span JAMES W. JACOBS,p
While that will work, I think this is an awesome opportunity to use a
definition list, especially if you're going to be mentioning other
people and their titles.
Example:
HTML:
dl
dtJAMES W. JACOBS/dt
ddProprietor/dd
/dl
CSS:
dt { width: 60%; float:left; clear:left; }
dd { width:35%; float:left; text-align:right; }
Adjust widths to taste. The clear:left is on the dt in the event you
want to add more names/titles.
Cheers!
j
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Drop down (p7) menu hidden behind other CSS elements?
I've just implemented a different method for using a drop down DHTML
menu
because I was not satisfied with the behavior of the other one. It
is
working great on its own:
http://www.language-works.com/swimdesign/dropdown.htm
CSS located at
http://www.language-works.com/swimdesign/p7_cssexpress/p7exp/p7exp.css
but it gets hidden behind other elements of the page when
integrated. What
am I doing wrong?
Examples of implementation:
http://www.language-works.com/swimdesign/template-public-6.htm
CSS at
http://www.language-works.com/swimdesign/template-public-6.css
and http://www.language-works.com/swimdesign/template-10.htm
CSS at http://www.language-works.com/swimdesign/template-10.css
See this page, Anne:
http://www.projectseven.com/testing/customers/exp/
I set this to position relative and gave it a z-index to counteract
your page layout issues.
*/
#menuwrapper {
border-top: 1px solid #163A66;
background-color: #163A66;
position: relative;
z-index: 2;
}
I also fixed the padding problem on your sub-menu a elements.
--
Al Sparber
PVII
http://www.projectseven.com
Designing with CSS is sometimes like barreling down a crumbling
mountain road at 90 miles per hour secure in the knowledge that
repairs are scheduled for next Tuesday.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] breaking horizontal menu -a solution?
On 25/09/2006 16:42, [EMAIL PROTECTED] wrote: Can someone suggest an elegant way to fix this problem? This is fine when you have a vertical menu but horizontal poses a new probelm as the page has to Sure--set the container width in EMs rather than pixels. Then it'll scale with the user's font-size choice. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Site check in Mac/Linux browsers please (was Help! CSS menu problem)
Looks good in Firefox, Safari, Opera, Camino on Mac OS X. Footer floats to the top so that it's between Home and About in your nav bar in Netscape 6.2 and 7.2, although I doubt there are many Mac users running NS... Cascading menus don't work in NS 6.2 - no surprises there. Nice looking site so far. Lori Lay CSS wrote: Hello again, OK, I now seem to have solved my earlier CSS menu rollover problem in IE6 see: http://www.sfep.org.uk/newHP.asp. I decided to try and apply the background images to the a elements rather than the li elements, and after a bit of re-classing of the a's that seems to have done the trick -- see: http://www.sfep.org.uk/newHPa.asp... OK, so this now seems to work in Firefox, IE6 and Opera 8 under Win XPH -- I'd appreciate it if anyone out there could give the page a looking at with any Mac or Linux browsers, and let me know if the thing still works Many thanks, in advance J. John Marsden SfEP webspinner Aibidil Bolton Lancs W: www.sfep.org.uk E: [EMAIL PROTECTED] T: 07092 010469 F: 07092 010473 M: 07092 234734 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Drop down (p7) menu hidden behind other CSS elements?
Anne E. Shroeder wrote: http://www.language-works.com/swimdesign/template-public-6.htm CSS at http://www.language-works.com/swimdesign/template-public-6.css and http://www.language-works.com/swimdesign/template-10.htm CSS at http://www.language-works.com/swimdesign/template-10.css TIA, Anne Hi Anne, Menu works well for me in IE6, and FF 1.5.x. Tell me if you'd like screenshots, can test in IE7 too if you'd like. I have used this menu before, on another site, and have had no problems whatsoever. YMMV. Note that the private page has some problems by the time the text was large enough for my comfort. Regards, - Rahul. -- Rahul Gonsalves (Personal) w: www.rahulgonsalves.com e: [EMAIL PROTECTED] - __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Drop down (p7) menu hidden behind other CSS elements?
Sorry - you do seem to have fixed the issues we looked at yesterday - though David raises a good point about using pixels for your font-sizes. I see you have a new page that has select lists below the menu. IE5.x -6.x has issues with absolutely positioned elements and select menus. The buggers, as you now know, want to rise above. The good news is that this issue is fixed in IE7. The bad news is that there are no easy fixes for older versions. Most people compromise and move one thing or another out of the way. You could use script to hide the select menu when the CSS sub-menu is showing, but it's really not a good solution. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] table row highlighting?
I have this in my css and it works in Firefox:
tr.vc_row_even:hover td {
background-color: #fff6bf;
}
tr.vc_row_odd:hover td {
background-color: #fff6bf;
}
How do I get this to work in IE? I mean I want to highlight the table
rows when a users hovers over the row... it works great in firefox...
anyway to do this in CSS for IE? In IE the table row is not
highlighted...
thanks.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Site check in Mac/Linux browsers please (was Help! CSS menu problem)
CSS wrote:
http://www.sfep.org.uk/newHPa.asp...
OK, so this now seems to work in Firefox, IE6 and Opera 8 under Win XPH --
I'd appreciate it if anyone out there could give the page a looking at with
any Mac or Linux browsers, and let me know if the thing still works
John Marsden
xp/debian
Page shift on hover.
try:
html { min-height: 100%; margin-bottom: 1px; }
You need a page background-color (not everyone defaults to #fff :-) ).
Regards,
~dL
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] table row highlighting?
How do I get this to work in IE? I mean I want to highlight the table rows when a users hovers over the row... IE doesn't support :hover on tablerows. Try including csshover.htc (http://www.xs4all.nl/~peterned/csshover.html) in your stylesheet. -- Christoph Schüßler www.krkr.org www.anestetic.net __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] table row highlighting?
On 9/25/06, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
I have this in my css and it works in Firefox:
tr.vc_row_even:hover td {
background-color: #fff6bf;
}
tr.vc_row_odd:hover td {
background-color: #fff6bf;
}
How do I get this to work in IE? I mean I want to highlight the table
rows when a users hovers over the row... it works great in firefox...
anyway to do this in CSS for IE? In IE the table row is not
highlighted...
the css answer to this is that you can't.
the javascript answer to this is pretty simple if you don't mind using
it. make a class (in this case iefix) along with your good-browser
css and you should be good.
example html:
trtd onmouseover=this.className='iefix'
onmouseout=this.className=''stuff/td/tr
example css:
tr.vc_row_even td.iefix,
tr.vc_row_even:hover td {
background-color: #fff6bf;
}
tr.vc_row_odd td.iefix,
tr.vc_row_odd:hover td {
background-color: #fff6bf;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] table row highlighting?
[EMAIL PROTECTED] wrote: anyway to do this in CSS for IE? In IE the table row is not highlighted... IE doesn't support any pseudo classes, except :hover on the a element. There are work around's, such as csshover.htc, which is a JS library. http://www.xs4all.nl/~peterned/csshover.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] IE6 a:hover dimension change...
Lorin Rivers wrote: I've never used static before--I thought it was like fixed. I have SO much to learn... Always something more... :-) The 'static' is _default_ in positioning-terms. That is: it is the 'normal flow' state browsers use if *no* 'position' is declared... http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme I used 'static' to override your 'position: absolute', since none of my demo styles would work properly otherwise and I didn't bother to make changes in the existing stylesheet. So, you normally won't have to declare 'static', as long as you don't declare any 'position'. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] stretching middle div for header
Hello,
In the example below, I want:
1) the header div to stretch and use up all available space between
logo1 on the left and logo2 on the right.
2) to specify a minimum width for the header so that when the window
shrinks, logo2 doesn't drop below the title/nav, and title/nav
don't drop below the sidebar.
Does anyone have any hints on how this can be accomplished? I've tried some
absolute position to get the stretch affect, but then I can't specify a
minimum width.
Thanks,
Justin
!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; lang=en xml:lang=en
head
titleTitle/title
style type=text/css
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
}
a:link {
color: #0F238C;
}
a:visited {
color: #74675F;
}
div#wrapper {
}
img#logo1 {
width: 224px;
height: 86px;
float: top;
}
div#sidebar {
background-color: white;
width: 224px;
padding: 3px 3px 0 3px;
float: left;
}
div#sidebar1 {
background-color: red;
float: top;
min-height: 86px;
/* TODO: If IE, use height instead of min-height */
font-size: .75em;
margin: 0 0 0 0;
}
div#sidebar2 {
background-color: green;
float: top;
min-height: 86px;
/* TODO: If IE, use height instead of min-height */
font-size: .75em;
margin: 3px 0 0 0;
}
div#sidebar3 {
background-color: blue;
float: top;
margin: 3px 0 0 0;
min-height: 86px;
/* TODO: If IE, use height instead of min-height */
font-size: .75em;
}
img.sidebar_spacer {
width: 1px;
height: 86px;
float: left;
}
div.sidebar_content {
float: left;
padding: 10px;
}
div#top {
float: clear;
}
div#header {
float: left;
height: 89px;
width: 300px;
margin: 3px 0 3px 0;
}
div#title {
float: top;
background-color: orange;
color: #74675F;
height: 41.5px;
width: 100%;
margin-bottom: 3px;
}
div#nav {
float: bottom;
background-color: yellow;
color: #FF;
height: 41.5px; /* TODO: If IE, change to 42px */
width: 100%;
}
img#logo2 {
float: right;
width: 110px;
height: 86px;
margin: 3px 3px 3px 3px;
}
/* clearfix */
.clearfix:after {
content: .;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
/style
/head
body
div id=sidebar
img id=logo1 src=logo1.gif alt=Logo 1
div id=sidebar1 class=clearfix
div class=sidebar_content
SIDEBAR1
/div
/div
div id=sidebar2 class=clearfix
div class=sidebar_content
SIDEBAR2
/div
/div
div id=sidebar3 class=clearfix
div class=sidebar_content
SIDEBAR3
/div
/div
/div
div id=top
div id=header
div id=title
Title
/div
div id=nav
Navigation Links
/div
/div
img id=logo2 src=logo2.gif alt=Logo 2
/div
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] IE7 on Windows 2000... possible?
I believe the official word from the IE team is that ie7 will be released for server2003, XP, Vista and the win64 platforms. If you have a version of XP, you could install in virtual pc (which is free nowadays) Sam On 9/22/06, Ian Young [EMAIL PROTECTED] wrote: Subject: [css-d] IE7 on Windows 2000... possible? Id like to test my css sites on IE7. but seems like I can't get IE7b2 installed on Win2000 based on stuff I am reading. Anyway to do this?... Bonus points if its standalone and doesn't replace IE6 like the standalone copies of IE5/IE5.5/etc I've seen on the web. Thanks, Why bother with IE7b2. Latest version now available for XP and 2003 server Course it will write over IE6. however, go download a separate version of IE6 (IE6Eolas) and Robert is you mother's brother. http://www.microsoft.com/windows/ie/default.mspx will get you to site. Cheers Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.405 / Virus Database: 268.12.6/453 - Release Date: 20/09/2006 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Fwd: Re: table row highlighting?
You could probably simulate a table by setting your text as a
list and display: block;
ul
lia href=# class=first colortext goes here/a/li
lia href=# class=second colormore text here/a/li
/ul
Set your a:hover classes with a different background: #xxx; and
voila, your table with alternating row colors onMouseOver.
AG
--- cj [EMAIL PROTECTED] wrote:
On 9/25/06, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
I have this in my css and it works in Firefox:
tr.vc_row_even:hover td {
background-color: #fff6bf;
}
tr.vc_row_odd:hover td {
background-color: #fff6bf;
}
How do I get this to work in IE? I mean I want to highlight the
table
rows when a users hovers over the row... it works great in
firefox...
anyway to do this in CSS for IE? In IE the table row is not
highlighted...
the css answer to this is that you can't.
the javascript answer to this is pretty simple if you don't mind
using
it. make a class (in this case iefix) along with your
good-browser
css and you should be good.
example html:
trtd onmouseover=this.className='iefix'
onmouseout=this.className=''stuff/td/tr
example css:
tr.vc_row_even td.iefix,
tr.vc_row_even:hover td {
background-color: #fff6bf;
}
tr.vc_row_odd td.iefix,
tr.vc_row_odd:hover td {
background-color: #fff6bf;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/
__
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com
__
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] why does my suckerfish dd not work in ie?
I had this working before. Probably needs a fresh pair of eyes. The dropdown does not work in IE. http://blue-fly.co.uk/tri/test.php The css http://blue-fly.co.uk/tri/css/triscotland.css Ross __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 collapsing a margin even when parent has padding
IE 6 seems to be collapsing the margin on H1 at http://www.zekes.co.nz/ while other browsers get it correct. Putting a padding on body hasn't helped. I'm guessing that div id=skiplinks is running interference. Is there a way to fix this? -- Richard Grevers, New Plymouth, New Zealand Hat 1: Development Engineer, Webfarm Ltd. Hat 2: Dramatic Design www.dramatic.co.nz __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Problems with button width
Hi, If you care to visit this page: http://www.gamito.org/inscricao.php and look at the form, you'll see that the Inscrever button is to big. To be precise, it is 300 px wide. It became too big when i set the input width to that size. How can i solve this ? Any help would be appreciated. Th stylesheet is in http://www.gamito.org/forms.css Warm regards, Mário Gamito __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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 collapsing a margin even when parent has padding
Richard Grevers wrote:
IE 6 seems to be collapsing the margin on H1 at
http://www.zekes.co.nz/
while other browsers get it correct. Putting a padding on body hasn't
helped. I'm guessing that div id=skiplinks is running
interference. Is there a way to fix this?
Restyle skiplinks...
#skiplinks {
left: -1000px;
width: 800px;
position: relative;
height: 30px;
margin-bottom: -30px;
}
...and IE 6 will use it to set H1's margin against and line up H1
correctly. Skiplinks will be just as invisible as before, but it stays
in the flow.
Comment: skip links should ideally be available to all, but that's
another matter.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Newbie-ish question
This is a really dumb question, but so far the solutions I've come up with have felt more hackish than the original. I have this form which I'm trying to clean up. Here's a minimal version of the basic idea: http://www.thereeds.org/css/test.html The look is fine, if minimalist, but I dislike using nested tables to get it. So I'm looking for a CSS solution. The set of server checkboxes is created dynamically by JavaScript from the results of an AJAX query to get the current active set; I can do whatever I want with them, but it feels cleaner to have each checkbox and label grouped into its own container item, whether it's a td or an li or what have you. The two sets (active and inactive) need to have separate parent containers for the code to fill up, but I still want them to appear side-by-side on the page. Suggestions welcome. Thanks! -- Mark J. Reed [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Drop down (p7) menu hidden behind other CSS elements?
Thank you so much :) Last night a kind man from P7 emailed me and apparently I had put in some extra definitions in my main ul tag that broke the code. So largely it works. HOWEVER there is the problem in IE where the form (Choose a sector) falls in front of the drop down, whereas it shoudl fall in front. http://www.language-works.com/swimdesign/template-10.htm I read somewhere that one needs to set the form value to invisible but I'm not really sure where and how to do that. DOes anyone have ideas or references of fixes they can send me to? Anne - Original Message - From: Rahul Gonsalves [EMAIL PROTECTED] To: Anne E. Shroeder [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Sent: Monday, September 25, 2006 1:07 PM Subject: Re: [css-d] Drop down (p7) menu hidden behind other CSS elements? Anne E. Shroeder wrote: http://www.language-works.com/swimdesign/template-public-6.htm CSS at http://www.language-works.com/swimdesign/template-public-6.css and http://www.language-works.com/swimdesign/template-10.htm CSS at http://www.language-works.com/swimdesign/template-10.css TIA, Anne Hi Anne, Menu works well for me in IE6, and FF 1.5.x. Tell me if you'd like screenshots, can test in IE7 too if you'd like. I have used this menu before, on another site, and have had no problems whatsoever. YMMV. Note that the private page has some problems by the time the text was large enough for my comfort. Regards, - Rahul. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] stretching middle div for header
Justin Johnson wrote: In the example below, I want: [example trimmed] 1) the header div to stretch and use up all available space between logo1 on the left and logo2 on the right. 2) to specify a minimum width for the header so that when the window shrinks, logo2 doesn't drop below the title/nav, and title/nav don't drop below the sidebar Justin Well, I can't really say that I understood your example css and html. Is this even remotely close to what you are looking for? http://www.chelseacreekstudio.com/ca/cssd/layout30.html Regards, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] max width
I have a menu holder.
#menu_holder {
width:800px;
min-width:800px;
max-width: 1200px;
position:absolute;
height:20px;
top: 85px;
font-size:small;
font-weight:bold;
}
When I increase the text I would like the div to expand to fit the suckerfish
dopdown in it. The problem is if I ser max-width and min-width the box does not
expand.
http://blue-fly.co.uk/tri/test.php
Ross
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Newbie-ish question
This is a really dumb question, but so far the solutions I've come up with have felt more hackish than the original. I have this form which I'm trying to clean up. Here's a minimal version of the basic idea: http://www.thereeds.org/css/test.html The look is fine, if minimalist, but I dislike using nested tables to get it. So I'm looking for a CSS solution. Hi Mark, I haven't come across many 'dumb question' on this list. (There have been some less-than-helpful answers at times :-); I hope this isn't one of 'em. I've modified and used the form found on Stu Nichols site with good results. It can be found here: http://www.cssplay.co.uk/menu/form.html HTH, Bill Scheider __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] stretching middle div for header
Well, I can't really say that I understood your example css and html. Is this even remotely close to what you are looking for? http://www.chelseacreekstudio.com/ca/cssd/layout30.html Regards, ~dL That is almost exactly what I'm looking for. The only difference is when some makes the browser window skinnier, I want to be able to specify a minimum width of the title area, so that the title area stops shrinking and the right logo stays on the right. Does that make sense? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Can I center a UL menu?
Although gaining experience with CSS, I consider myself a newbie. I would like to center a vertical menu with a column. -- | | | | | | Menu || | | | | || | | | |___|| | | || | | -- This is a rough mock-up of the goal. It should be possible to center the menu within the column. Centering the text-align attribute only causes all the menu items to center themselves in the list. Does a method exist to center the actual menu? My thought is to place the menu in its own div with the column, and then to center the menu div within the column. Can anyone more expert than myself comment on this proposed solution? Thanks, Bob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] max width
http://blue-fly.co.uk/tri/test.php When I increase the text I would like the div to expand to fit the suckerfish dopdown in it. The problem is if I ser max-width and min-width the box does not expand. The element won't expand if you set 'width' in pixels. The 'max-width' and 'min-width' do nothing in your example. If you want the element to expand with font-size, then you must set 'width' in ems. You can then set a suitable 'max-width', and maybe also a 'min-width', in pixels if you like, or omit those properties. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Can I center a UL menu?
Have you tried setting each li to a fixed width and then trying text-align: center;? Are they links or just li's? Riva Robert Tilley wrote: Although gaining experience with CSS, I consider myself a newbie. I would like to center a vertical menu with a column. -- | | | | | | Menu || | | | | || | | | |___|| | | || | | -- This is a rough mock-up of the goal. It should be possible to center the menu within the column. Centering the text-align attribute only causes all the menu items to center themselves in the list. Does a method exist to center the actual menu? My thought is to place the menu in its own div with the column, and then to center the menu div within the column. Can anyone more expert than myself comment on this proposed solution? Thanks, Bob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Drop down (p7) menu hidden behind other CSS elements?
Unfortunately my client is pretty set on the design -- literally to the pixel. Do you have a reference for the hiding script? I will suggest to them that this is a real problem, but I am not hopeful to have flexibility in moving this form. http://www.language-works.com/swimdesign/template-10.htm Thanks for all your GREAT help. anne - Original Message - From: Al Sparber [EMAIL PROTECTED] Sorry - you do seem to have fixed the issues we looked at yesterday - though David raises a good point about using pixels for your font-sizes. I see you have a new page that has select lists below the menu. IE5.x -6.x has issues with absolutely positioned elements and select menus. The buggers, as you now know, want to rise above. The good news is that this issue is fixed in IE7. The bad news is that there are no easy fixes for older versions. Most people compromise and move one thing or another out of the way. You could use script to hide the select menu when the CSS sub-menu is showing, but it's really not a good solution. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] a tabless bulletin board?
Oh gosh! I thougth I have replyed it... sorry! I just want to thank you all! cheers __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] stretching middle div for header
Justin Johnson wrote:
Well, I can't really say that I understood your example css and
html. Is
this even remotely close to what you are looking for?
http://www.chelseacreekstudio.com/ca/cssd/layout30.html
Regards,
~dL
That is almost exactly what I'm looking for. The only difference is
when some makes the browser window skinnier, I want to be able to
specify a minimum width of the title area, so that the title area
stops shrinking and the right logo stays on the right. Does that
make sense?
Nothing makes sense to me -- I take direction from my twisted sister --
and she is usually wrong.
You could try min/max width?
1/ Add an xml declaration *above* the doctype:: ?xml version=1.0
encoding=utf-8?
This puts IE in quirksmode. And will mean you'll need a minor correction
of the three boxes in the sidebar (this is the least of my sister's
problems).
2/ Change this:
div#container { border: 1px solid #ddd; margin: 0 auto; width:
90%;text-align: left;}
To this:
div#container { border: 1px solid #ddd; margin: 0 auto; min-width:
770px; max-width: 1200px; text-align: left; width: 99%;}
3/ IE 6.0 and down don't honor min/max width, so feed
IE-'expressions[1]' (this is corrected in IE 7) within a conditional
comment [2] Put it immediately below /style and directly above /head.
!--[if lt IE 7]
style type=text/css
div#container { width: 99%;} /* fallback width */
div#container { width:expression(((document.compatMode
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth : document.body.clientWidth)
1218 ? 1200px : (((document.compatMode
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth) 800 ? 782px : 99%));}
/style
![endif]--
[1] http://www.gunlaug.no/contents/wd_additions_14.html
[2]
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
HTH
~dL
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Drop down (p7) menu hidden behind other CSS elements?
Try
#p7menubar, #p7menubar ul {
padding: 0;
margin: 0;
list-style: none;
color: #FF;
font-size: 13px;
font-family: arial, Helvetica, sans-serif;
font-weight: 400;
text-align: left;
text-transform: capitalize;
--- display: table;
margin-bottom: 5px;
width: 99%;
padding-bottom: 6px;
padding-top: 6px;
padding-left: 12px;
background-color: #163A66;
}
See how that works for you.
- JC
Anne E. Shroeder wrote:
I've just implemented a different method for using a drop down DHTML menu
because I was not satisfied with the behavior of the other one. It is
working great on its own:
http://www.language-works.com/swimdesign/dropdown.htm
CSS located at
http://www.language-works.com/swimdesign/p7_cssexpress/p7exp/p7exp.css
but it gets hidden behind other elements of the page when integrated. What
am I doing wrong?
Examples of implementation:
http://www.language-works.com/swimdesign/template-public-6.htm
CSS at http://www.language-works.com/swimdesign/template-public-6.css
and http://www.language-works.com/swimdesign/template-10.htm
CSS at http://www.language-works.com/swimdesign/template-10.css
TIA,
Anne
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Drop down (p7) menu hidden behind other CSS elements?
Unfortunately my client is pretty set on the design -- literally to the pixel. Do you have a reference for the hiding script? I will suggest to them that this is a real problem, but I am not hopeful to have flexibility in moving this form. http://www.language-works.com/swimdesign/template-10.htm Thanks for all your GREAT help. See if this quick example makes sense to you: http://www.projectseven.com/tutorials/navigation/auto_hide/combo.htm __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Newbie-ish question
On 9/25/06, bill scheider [EMAIL PROTECTED] wrote: I've modified and used the form found on Stu Nichols site with good results. It can be found here: http://www.cssplay.co.uk/menu/form.html Thanks for the link! My question isn't really about styling forms, though. I don't mind using a table for that. It's the tables-within-a-table used to get the two boxes of checkboxes I was trying to do away with. More a case of horizontal lists, really, but they're not links and I don't need rollovers or any of the other stuff that you normally see with horizontal list examples. What I do need is two rectangles with different colors in the same vertical space. Which I don't know how to get outside of tables (or table-* display: values, anyway), or explicit positioning which will be easily thwarted by font size changes and the like. -- Mark J. Reed [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Can I center a UL menu?
Robert Tilley wrote: I would like to center a vertical menu with a column. [...] Thanks, Bob I just tried vertically centering a simple list using the method discussed here http://www.jakpsatweb.cz/css/css-vertical-center-solution.html and it worked for me (on a local file). Regards, ~dL -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Question re: rule syntax
Hello Everyone: I have a general question that's been bugging me for some time. I'm experiencing a problem where one selector works but the other doesn't. Can someone explain the difference between the following two selectors? ul#navmenu #navmenu ul They're obviously not functionally identical, but I'm having a hard time conceptualizing the difference and why I would use one over the other. Thanks, Dean __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Question re: rule syntax
Dean Champeau wrote:
ul#navmenu
this will effect this:
ul id=navmenu
/ul
Note that a general #navmenu {} style set will work the exact same.
This just specifies it further to be that of a list containing this ID.
#navmenu ul
This will effect this:
div id=navmenu
ul
/ul
/div
(or another parent element, besides div)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Question re: rule syntax
From: Dean Champeau Can someone explain the difference between the following two selectors? ul#navmenu #navmenu ul ul#navmenu selects the UL element with id=navmenu. #navmenu selects the element with id=navmenu, regardless of its tagname. The only time #navmenu and ul#navmenu would be different is when you have an element with id=navmenu that is not a UL. In this case, #navmenu would select that element, but ul#navmenu would select nothing. #navmenu ul selects every UL element nested inside the element with id=navmenu. -Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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] Question re: rule syntax
From: Dean Champeau [EMAIL PROTECTED] Can someone explain the difference between the following two selectors? ul#navmenu #navmenu ul The first selects the specific unordered list that has the id navmenu (e.g. ul id=navmenu). The second selects any/all unordered lists that are descendants of #navmenu (e.g. div id=navmenu...ul.../ul.../div). -Ann __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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/
