Re: [css-d] Mac site check please
On Jun 23, 2006, at 5:18 AM, Christine Ce wrote: I need www.wuongean.com/beta/index.htm checked on a Mac. More specifically I would like to know if the popup that should appear when the kanji at the top right is hovered over works with Internet Explorer on a Mac. Thanks in advance for your help. Yes, it works more or less. You have a horizontal scroll bar on that page, caused by the absolute positioning of the pop up (esp the 'right:0'). It is a well known bug [1]. There are some font-sizing issues as well. But see below. PLEASE, validate your markup before submitting for a check. div id=kanji a href=#nogo... span p... Is definitively *not* valid html. [1] http://www.l-c-n.com/IE5tests/right_pos/ Philippe --- Philippe Wittenbergh http://emps.l-c-n.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] dilemma
Hi again,
Ian intelligently intoned...
Oh, yeah, and if anyone can tell me what the deuce those creepy
little
As are about, it'd be very greatly appreciated!
{Clip, Slash)
Cem Meric quietly queried:
Have you considered upgrading the site to CSS only code without
those creepy
little As ones in for all?
Cem, their budget called for only one page addition, nothing more. I'm
considering asking if they want an entire redo, but they've already
said they really can't afford it. Trust me my friend, I've thought of
that a few times! ;-)
Then Nicholas Morgan mentioned...
What are you trying to accomplish with these edittagsrc things? Are
you defining a region for people to insert content? If you are using
a form in the backend to update the data then you should just spit out
the string into a div. Does your code in the site look for that
special tag? If so you could change the way the script works and make
it store the content in a variable and then just print that variable
where you want it in the page. As for more help with CSS that's not
really going to help you get your content from point A to point B. It
is for making that content look awesome once it gets to point B. For
CSS first start with getting ready of the font tags. And assigning a
font-family and font-size to the body ( and using % or keyword like
small)
Nicholas, this is all new to me, as I didn't design the original site,
and am a very new newbie. That edittag stuff is something that's used
to allow for certain of the company's employees to make additions and
subtractions to certain site pages, from their various locations. The
site page that they do the work on is not seen on the site, but the
page URL is part of the site. Only the certain few have the URL to see
it. And the page just looks like a small form with a drop-down list and
a text area for them to fill out. For instance, on the jobs page, they
would be able to go to this special page, choose jobs from their
drop-down list, and then insert the text into the text window
describing the job and location.
This system is what I'm trying to figure out how to replace with CSS
and eliminate what is obviously some very clumsy old coding.
And thanks for the hint on the As...I'll check it out, but those
things are hanging out in the middle of blank white space...nowhere
near any of the actual text.
Dave
__
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] dilemma
Dave Pierce wrote: Nicholas, this is all new to me, as I didn't design the original site, and am a very new newbie. That edittag stuff is something that's used to allow for certain of the company's employees to make additions and subtractions to certain site pages, from their various locations. The site page that they do the work on is not seen on the site, but the page URL is part of the site. Only the certain few have the URL to see it. And the page just looks like a small form with a drop-down list and a text area for them to fill out. For instance, on the jobs page, they would be able to go to this special page, choose jobs from their drop-down list, and then insert the text into the text window describing the job and location. This system is what I'm trying to figure out how to replace with CSS and eliminate what is obviously some very clumsy old coding. They've got some kind of content management system running. Maybe old and junky. -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] Layout not displaying correctly in web based email clients
On Thu, 22 Jun 2006 09:38:05 +0930, Bojana Lalic wrote: I have created a newsletter page and uploaded it to the server. I am previewing it in IE and using the Send - Page by Email option to send it out. It displays fine in Outlook but not in Hotmail. Hi Bojana, I imagine you are talking about HTML email with some styles applied. 18 months ago I surveyed various web mail services to see if they handled styling, and how well. At that time, Hotmail did some serious damage to styles, embedded or inline. For one thing, it simply erased any mention of margin. I suggest you view source to investigate. Also, use the Firefox developer extension or something similar to let you view the CSS that the mail service applies. Warning - keep some headache pills handy. Cordially, David -- www.hucklesby.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] *Weird* bug in IE
Hi all, I have this very strange bug that only shows up in IE, and for which I can't find a rational explanation.. I've got a footer div in which are enclosed 3 text links, nothing special, just text links, everything works fine in FF but in IE, the last 3 characters of the last link are kind of duplicated below this div... I already tried modifying the line height, deleting the numerous -nbsp;- I use to separate the links, but nothing has changed. I'm a bit lost here, I think I need someone to look into it and maybe cast a new light on the problem.. the page is here: http://www.sumhit.com/sites/nst/indextest.htm the common stylesheet is here: http://www.sumhit.com/sites/nst/style.css and the specific IE stylesheet is here: http://www.sumhit.com/sites/nst/styleie.css Thanks in advance. PS the page may not display properly on other browsers than IE or FF.. -- Tom __ 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] *Weird* bug in IE
Hi Tom, Try using a br/div style=clear:all; after your last link. I've had this error before and I believe this is how I fixed it! ~ Lacuna ___ Hi all, I have this very strange bug that only shows up in IE, and for which I can't find a rational explanation.. I've got a footer div in which are enclosed 3 text links, nothing special, just text links, everything works fine in FF but in IE, the last 3 characters of the last link are kind of duplicated below this div... I already tried modifying the line height, deleting the numerous -nbsp;- I use to separate the links, but nothing has changed. I'm a bit lost here, I think I need someone to look into it and maybe cast a new light on the problem.. the page is here: http://www.sumhit.com/sites/nst/indextest.htm the common stylesheet is here: http://www.sumhit.com/sites/nst/style.css and the specific IE stylesheet is here: http://www.sumhit.com/sites/nst/styleie.css Thanks in advance. PS the page may not display properly on other browsers than IE or FF.. -- Tom _evolt/ This message and any attachments should only be read by those persons to whom it is addressed and be used by them for its intended purpose. It must not otherwise be reproduced, modified, distributed, published or actioned. If you have received this e-mail in error, please notify us immediately by telephone on 01202 237000 and delete it from your computer immediately. This e-mail address must not be passed to any third party or be used for any other purpose. Every reasonable precaution has been taken to ensure that this e-mail, including attachments, does not contain any viruses. However, no liability can be accepted for any damage sustained as a result of such viruses, and recipients are advised to carry out their own checks. Moov2 Ltd cannot accept liability for statements made which are clearly the senders own and not made on behalf of the Moov2 Ltd. An e-mail reply to this address may be subject to interception or monitoring for operational reasons or for lawful business purposes. __ 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] *Weird* bug in IE
Apologies! I meant to say clear:both !! I'm sure you guessed that tho! ~ Lacuna ___ Hi Tom, Try using a br/div style=clear:all; after your last link. I've had this error before and I believe this is how I fixed it! ~ Lacuna ___ Hi all, I have this very strange bug that only shows up in IE, and for which I can't find a rational explanation.. I've got a footer div in which are enclosed 3 text links, nothing special, just text links, everything works fine in FF but in IE, the last 3 characters of the last link are kind of duplicated below this div... I already tried modifying the line height, deleting the numerous -nbsp;- I use to separate the links, but nothing has changed. I'm a bit lost here, I think I need someone to look into it and maybe cast a new light on the problem.. the page is here: http://www.sumhit.com/sites/nst/indextest.htm the common stylesheet is here: http://www.sumhit.com/sites/nst/style.css and the specific IE stylesheet is here: http://www.sumhit.com/sites/nst/styleie.css Thanks in advance. PS the page may not display properly on other browsers than IE or FF.. -- Tom _evolt/ This message and any attachments should only be read by those persons to whom it is addressed and be used by them for its intended purpose. It must not otherwise be reproduced, modified, distributed, published or actioned. If you have received this e-mail in error, please notify us immediately by telephone on 01202 237000 and delete it from your computer immediately. This e-mail address must not be passed to any third party or be used for any other purpose. Every reasonable precaution has been taken to ensure that this e-mail, including attachments, does not contain any viruses. However, no liability can be accepted for any damage sustained as a result of such viruses, and recipients are advised to carry out their own checks. Moov2 Ltd cannot accept liability for statements made which are clearly the senders own and not made on behalf of the Moov2 Ltd. An e-mail reply to this address may be subject to interception or monitoring for operational reasons or for lawful business purposes. __ 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] *Weird* bug in IE
Andrea, you rock! Thank you so much for this great and simple solution.. :) 2006/6/23, Andrea Black [EMAIL PROTECTED]: Apologies! I meant to say clear:both !! I'm sure you guessed that tho! ~ Lacuna ___ Hi Tom, Try using a br/div style=clear:all; after your last link. I've had this error before and I believe this is how I fixed it! ~ Lacuna ___ Hi all, I have this very strange bug that only shows up in IE, and for which I can't find a rational explanation.. I've got a footer div in which are enclosed 3 text links, nothing special, just text links, everything works fine in FF but in IE, the last 3 characters of the last link are kind of duplicated below this div... I already tried modifying the line height, deleting the numerous -nbsp;- I use to separate the links, but nothing has changed. I'm a bit lost here, I think I need someone to look into it and maybe cast a new light on the problem.. the page is here: http://www.sumhit.com/sites/nst/indextest.htm the common stylesheet is here: http://www.sumhit.com/sites/nst/style.css and the specific IE stylesheet is here: http://www.sumhit.com/sites/nst/styleie.css Thanks in advance. PS the page may not display properly on other browsers than IE or FF.. -- Tom _evolt/ This message and any attachments should only be read by those persons to whom it is addressed and be used by them for its intended purpose. It must not otherwise be reproduced, modified, distributed, published or actioned. If you have received this e-mail in error, please notify us immediately by telephone on 01202 237000 and delete it from your computer immediately. This e-mail address must not be passed to any third party or be used for any other purpose. Every reasonable precaution has been taken to ensure that this e-mail, including attachments, does not contain any viruses. However, no liability can be accepted for any damage sustained as a result of such viruses, and recipients are advised to carry out their own checks. Moov2 Ltd cannot accept liability for statements made which are clearly the senders own and not made on behalf of the Moov2 Ltd. An e-mail reply to this address may be subject to interception or monitoring for operational reasons or for lawful business purposes. -- Thomas Smith __ 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] Layout not displaying correctly in web based email clients
On Thu, 22 Jun 2006 09:38:05 +0930, Bojana Lalic wrote: I have created a newsletter page and uploaded it to the server. I am previewing it in IE and using the Send -Page by Email option to send it out. It displays fine in Outlook but not in Hotmail. I would suggest taking a look at a few articles about creating HTML/CSS emails. Here are a few links that might help: http://www.sitepoint.com/article/code-html-email-newsletters http://www.thinkvitamin.com/features/design/html-emails http://www.alistapart.com/articles/cssemail http://www.campaignmonitor.com/blog/archives/2006/03/a_guide_to_css_1.html The gist of these articles is that you really can't use much css in emails. When I create them, I don't use any CSS at all. Just tables and font tags (shudder) - Bethany __ 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] Sprites and Image Replacement
rollandburn wrote:
Hi all, I wonder if a guru could help me out with my (attempted)
implementation of sprites and image replacement. Below is the css
and html which works fine in firefox and internet explorer (as far as
I can tell) and an example can be seen at http://www.rollandburn.com
I get the feeling I'm missing something important with the sprites
because there should be no need to keep repeating...
background: url(linkGrid_sectionTabs.gif) -240px -15px no-repeat;
...in the css for each of the tabs. I thought I could simply put
that under the #tabNav li {} and for each of the tabs all I would
have to set is the positioning but unfortunately the way I have it
below is the only way I could get it to work.
Arg!
I know my IR technique probably leaves a lot to be desired. =[
Thanks for any suggestions or advice to improve. =]
[...]
Hi Rollandburn,
If you use an image with the tabs horizontally, everything is more
simple to see. First put the image as a general background (all grey),
then lift the one you need when hovering. Same way (lifting 1 step more)
for the current status of a tab. The positioning of the tabs can be done
with floating left for each tab.
Compare: test page here
http://home.tiscali.nl/developerscorner/css-discuss/test-rolland.htm.
:-)
Greetings,
francky
btw: Consider a larger font size for the tab images (pretty small at
large resolutions...), or (better) use text with a tab-bg of only the
sprite; then the visitor can scale the font size, if wanted/needed.
Accessible for everybody!
__
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] Static headers and footers using CSS in IE
I am new to CSS and have been working with various layouts to get a feel for and to learn using stylesheets. One of the examples I started to experiment with are the Fixed Header and Fixed Footer examples by Anne van Kesteren and Arthur Steiner http://limpid.nl/lab/css/fixed/footer. I would like to know if there is a way of achieving the same layout in IE without using Quirks mode. I use external stylesheets and would rather use the IE conditional directive in the head tag to conditionally load an IE stylesheet. Is there a good source of information on what the differences in IE markup vs. the rest of the browsers that would address this issue? __ 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] dilemma
Nicholas, this is all new to me, as I didn't design the original site, and am a very new newbie. That edittag stuff is something that's used to allow for certain of the company's employees to make additions and subtractions to certain site pages, from their various locations. The site page that they do the work on is not seen on the site, but the page URL is part of the site. Only the certain few have the URL to see it. And the page just looks like a small form with a drop-down list and a text area for them to fill out. For instance, on the jobs page, they would be able to go to this special page, choose jobs from their drop-down list, and then insert the text into the text window describing the job and location. This system is what I'm trying to figure out how to replace with CSS and eliminate what is obviously some very clumsy old coding. And thanks for the hint on the As...I'll check it out, but those things are hanging out in the middle of blank white space...nowhere near any of the actual text. Dave As David suggests, this appears to be a Perl based CGI Content Magagement script called EditTag: http://www.closebotheyes.com/skiedit/scripts/edittag.html If you need to add a page to the site, CSS can help you with the presentation and layout of your HTML. I'm afraid though, that it is not going to get you very far in interacting with EditTag, or otherwise allowing a user to change/update the site content. In that you are a 'very new newbie' and the client is unwilling to pay for a site re-design (or, presumably a Web Programmer with Perl skills), the best that you can do is to try to tack your static HTML page onto the existing site, using CSS to make it blend with the other pages, and make the client aware that they will not be able to change the page content at will. Hope this helps, Howard __ 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] Assistance required
Hi all. I am building a site for a local photographer at: http://www.web-buddha.co.uk/sanbox/karen/ ...I know it doesn't resize well but I am going to redo it with ems. The issue I am having trouble with is an unruly float. In IE, the right floated nav is ok, but in IE if flies up and to the right, as if it is escaping the container and doing what floats do, ie as far to the right and up as possible. I have recalculated the overall widths inc margins and padding and it seems to tally. Any ideas while I continue to battle away? Thanks all. -- http://www.web-buddha.co.uk http://www.projectkarma.co.uk __ 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] Static headers and footers using CSS in IE
Bernard wrote: One of the examples I started to experiment with are the Fixed Header and Fixed Footer examples by Anne van Kesteren and Arthur Steiner http://limpid.nl/lab/css/fixed/footer. I would like to know if there is a way of achieving the same layout in IE without using Quirks mode. Georg has a brand new article regarding position:fixed in quirks and standards mode. http://www.gunlaug.no/contents/wd_additions_15.html Ingo -- 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] Assistance required
[snip] http://www.web-buddha.co.uk/sanbox/karen/ [/snip] Link is 404 __ 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] Static headers and footers using CSS in IE
Bernard wrote: I am new to CSS and have been working with various layouts to get a feel for and to learn using stylesheets. Good plan. One of the examples I started to experiment with are the Fixed Header and Fixed Footer examples by Anne van Kesteren and Arthur Steiner http://limpid.nl/lab/css/fixed/footer. I would like to know if there is a way of achieving the same layout in IE without using Quirks mode. No, I do not think so. I use external stylesheets and would rather use the IE conditional directive in the head tag to conditionally load an IE stylesheet. You link an external style sheet from within conditional comments for ie specific hacks /regardless/ of whether the file is /or/ is not in quirksmode. Make and link *two* external style sheets. The style sheet that contains styles for all browsers, including those style that even ie can handle goes in the head of the document. Name and save it: styles.css. And link it like so: link rel=stylesheet href=styles.css type=text/css media=screen / Directly beneath that insert and link the second external style sheet for those styles that are specific to ie. It /must/ be saved and named differently than the one above, perhaps name it: ie-styles.css. It is enclosed and linked from within the conditional comment, like so(notice it is named differently):| !--[if lt IE 7] |link rel=stylesheet href=ie-styles.css type=text/css media=screen / |![endif]-- |Assuming I did not make some horrendous error, this should work for you with Anne van Kesteren layout. Is there a good source of information on what the differences in IE markup vs. the rest of the browsers that would address this issue? See(particularly the conditional comment part): http://www.satzansatz.de/cssd/onhavinglayout.html#hacks hth. Regards, ~davidLaakso-- http://chelseacreekstudio.com/ca/ccs/pow/pow.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] Assistance required
Dave Goodchild wrote: http://www.web-buddha.co.uk/sanbox/karen/ correct link: http://www.web-buddha.co.uk/sandbox/karen/ In IE, the right floated nav is ok, but in IE if flies up and to the right, as if it is escaping the container and doing what floats do, ie as far to the right and up as possible. I have recalculated the overall widths inc margins and padding and it seems to tally. Any ideas while I continue to battle away? Is there any reason why the nav is before the header in the source? I would move it below it if you can, as well as give the #photos div a right margin that exceeds the width of the nav, and see if that fixes it. By the way, you'll stand a better chance of getting help if you give your threads descriptive subject lines. This also helps people who are searching the archives later. Best, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] min-width and IE
On 6/22/06, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
Tom Livingston wrote:
Your expression is still triggered by a fixed pixel-width, and doesn't
pick up and recalculate the trigger-point based on the browser's default
font-size.
Try this...
#wrapper { width:expression(((document.compatMode
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth
: document.body.clientWidth) (1850/12)
* parseInt(document.body.currentStyle.fontSize)? 50em
: (((document.compatMode document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth) (750/12)
* parseInt(document.body.currentStyle.fontSize)? 46em : 100%)); }
It's a tested and working expression, but I haven't tested and
fine-tuned it for your layout - just plugged in suitable values.
I'll write a separate 'min-width' only version later.
Georg
--
http://www.gunlaug.no
No idea what the difference is, but it works great! Thanks so much!
The difference is:
your first attempt...
document.documentElement.clientWidth :document.body.clientWidth) 750 ?
46em : 100%)); }
...vs. the corrected one...
document.documentElement.clientWidth :document.body.clientWidth) (750/12)
* parseInt(document.body.currentStyle.fontSize)? 46em : 100%)); }
See that...
(750/12)
* parseInt(document.body.currentStyle.fontSize)?
...? That's the calculation:
'window-width in pixels', divided by '/medium/ font-size in points',
multiplied by '/actual/ font-size in points' .
A clever bit of logic, don't you think? :-)
Can I increase the 1850 to something crazy so it will never be hit?
It is already so crazy that it won't trigger on windows less than around
1850px recalculated the same as above. However, no problem replacing
that 1850 with a larger value - any value.
Or you may set 100% instead of the 50em I used, since that'll mean
that no action will be taken when the 'max-width' trigger-point is reached.
Thanks again. Your very kind to help out!
No problem :-)
Georg
--
http://www.gunlaug.no
For the sake of the archives, here's the soluion I am using (including
the change of 50em to 100%) from CSS Master Georg
;-)
--
Tom Livingston | Senior Multimedia Artist | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] what does body:not() mean
I know it is a Firefox only rule, but wtf is it? I have searched it in google but found no answer, so any body can give me a hand? Many thanks! -- realazy.org __ 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] Assistance required
On 23/06/06, Zoe M. Gillenwater [EMAIL PROTECTED] wrote: Dave Goodchild wrote: http://www.web-buddha.co.uk/sanbox/karen/ correct link: http://www.web-buddha.co.uk/sandbox/karen/ In IE, the right floated nav is ok, but in IE if flies up and to the right, as if it is escaping the container and doing what floats do, ie as far to the right and up as possible. I have recalculated the overall widths inc margins and padding and it seems to tally. Any ideas while I continue to battle away? Is there any reason why the nav is before the header in the source? I would move it below it if you can, as well as give the #photos div a right margin that exceeds the width of the nav, and see if that fixes it. By the way, you'll stand a better chance of getting help if you give your threads descriptive subject lines. This also helps people who are searching the archives later. Thanks for that Zoe, missed the element sequence (tired) . All layout containers are now in the correct order and I amended margin-right on #photos as per your suggestion but no go. I will continue to test. Many thanks for spotting that! -- http://www.web-buddha.co.uk http://www.projectkarma.co.uk __ 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] Mac/IE annoyances - right float problems
I know many of you consider Mac/IE dead but our site still has an unfortunate number of folks using this beast. I've searched google and the list archives and found some ideas that could be potentially causing my right float problems but I haven't yet been able to tame the beast: http://beta.MotorsportReg.com/ http://beta.MotorsportReg.com/calendar/event.cfm?uidEvent=1A73CE55-0865-1A10-A71A7A5FD6D606EE In most browsers like Firefox, IE6, Safari, etc, the index page has one wide and one narrow column, navigation tabs positioned to the right. On the event page, it is two more equally sized columns. In Mac/IE, none of my right floats seem to work. This is the case for the text nav at the very top right, the navigation tabs, and the right column which is currently sitting on the right, but not next to the left column. I fixed the text nav with a text-align: right but doing the same on the tab nav makes them blow up, stack vertically and grow wider. The calendar table in the primary column is set to 100% width which I tried changing to 99% with no avail. I also tried various combinations of position:relative and many other iterations. My floats do have explicit widths on them and they do size correctly as far as I can tell. Bringing the size down to 15% on the smaller column didn't fix any total width issues. I get the feeling that display: inline-block might be part of the solution but I'm not sure how to go about it. Any help from a Mac-savvy lister would be greatly appreciated in getting this to work. I'm not trying to achieve perfection with IE5/Mac, just get columns to be side-by-side like in other browsers. Thank you! Brian __ 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] what does body:not() mean
On Saturday 2006-06-24 01:55 +0800, Realazy XA Chen wrote: I know it is a Firefox only rule, but wtf is it? I have searched it in google but found no answer, so any body can give me a hand? Many thanks! I'm guessing (hoping, at least) that what you saw had something between the parentheses in the :not(). It's not supposed to be Firefox-only. :not() is a part of css3-selectors, and I think there is at least one other implementation. See http://www.w3.org/TR/css3-selectors/#negation for some simple examples. -David -- L. David BaronURL: http://dbaron.org/ Technical Lead, Layout CSS, Mozilla Corporation pgpLdl8zIZdHt.pgp Description: PGP signature __ 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] Sprites and Image Replacement
Franckyit works perfectly. You went through enough trouble to
help me out that I have to say (Thank-you * 1000)! After reading
your reworking of the css i now completely understand how to do this
the proper way. And you are correct, the offsetting is much easier
with the graphics in a horizontal manner. Again, thanks so much!
On 23-Jun-06, at 8:27 AM, francky wrote:
rollandburn wrote:
Hi all, I wonder if a guru could help me out with my (attempted)
implementation of sprites and image replacement. Below is the
css and html which works fine in firefox and internet explorer
(as far as I can tell) and an example can be seen at http://
www.rollandburn.com
I get the feeling I'm missing something important with the
sprites because there should be no need to keep repeating...
background: url(linkGrid_sectionTabs.gif) -240px -15px no-repeat;
...in the css for each of the tabs. I thought I could simply
put that under the #tabNav li {} and for each of the tabs all I
would have to set is the positioning but unfortunately the way I
have it below is the only way I could get it to work.
Arg!
I know my IR technique probably leaves a lot to be desired. =[
Thanks for any suggestions or advice to improve. =]
[...]
Hi Rollandburn,
If you use an image with the tabs horizontally, everything is more
simple to see. First put the image as a general background (all
grey), then lift the one you need when hovering. Same way (lifting
1 step more) for the current status of a tab. The positioning of
the tabs can be done with floating left for each tab.
Compare: test page here http://home.tiscali.nl/developerscorner/
css-discuss/test-rolland.htm.
:-)
Greetings,
francky
btw: Consider a larger font size for the tab images (pretty small
at large resolutions...), or (better) use text with a tab-bg of
only the sprite; then the visitor can scale the font size, if
wanted/needed. Accessible for everybody!
__
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] Assistance required
Dave Goodchild wrapidly wrote: http://www.web-buddha.co.uk/sanbox/karen/ correct link: http://www.web-buddha.co.uk/sandbox/karen/ Dave, I tried to check it in IE/Mac 5.2.2, and it locked IE up tight. Dunno why, but you may want to check on it. Dave __ 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] Image falling out of container with float left
I'm a beginner at CSS layout and just discovered this list. I hope someone can help. I'm doing a layout for an artist's website. I don't have much choice over the layout. The blue image represents the paintings. They will be different heights and widths. Also there will be text underneath the paintings that might vary in length. The problem is having the image stay in the container when I do it in CSS without using a fixed height for the container. Example 1 http://lizdesign.com/demosite/example1.html This shows how it should look. Here the image and side menu are in tables but the rest of the page is in CSS. There will also be text underneath of varying height. The image is nicely staying withing the container. Example 2 http://lizdesign.com/demosite/example2.html Here is my lame attempt to do the image and side menu with CSS. I have floated the image to the left in order to have the side nav be on the side but this has made the image fall out of the container. I cannot do a fixed height for the container because the size will change and there will be a varying amount of text under the image and nav. Why does the image fall out when I float it left and what would be the best way to do this layout? Thanks in advance. Liz __ 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] Assistance required
Dave Goodchild wrote: On 23/06/06, Zoe M. Gillenwater [EMAIL PROTECTED] wrote: correct link: http://www.web-buddha.co.uk/sandbox/karen/ [...] Is there any reason why the nav is before the header in the source? I would move it below it if you can, as well as give the #photos div a right margin that exceeds the width of the nav, and see if that fixes it. By the way, you'll stand a better chance of getting help if you give your threads descriptive subject lines. This also helps people who are searching the archives later. Thanks for that Zoe, missed the element sequence (tired) . All layout containers are now in the correct order and I amended margin-right on #photos as per your suggestion but no go. I will continue to test. Many thanks for spotting that! Hi Dave, If you put some borders around the div's, the analyse is this one http://home.tiscali.nl/developerscorner/css-discuss/test-buddha.htm. Some px arranging, and that gives this one http://home.tiscali.nl/developerscorner/css-discuss/test-buddha-nw.htm. :-) Greetings, francky btw-1: for the gallery a pure css-hover is possible too; see for instance here http://home.tiscali.nl/developerscorner/css-discuss/showathover2.htm. btw-2: if you put a nbsp; between web and buddha (instead of a space), it doesn't break when then font size is scaled up in the browser. __ 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] Image falling out of container with float left
Liz lizCSSlist wrote:
Example 2 http://lizdesign.com/demosite/example2.html
I have floated the image to the left in order to have the side nav be on
the side
but this has made the image fall out of the container. I cannot do a fixed
height for the container because the size will change and there will be a
varying amount of text under the image and nav. Why does the image fall out
when I float it left and what would be the best way to do this layout?
Floats are supposed to be treated that way - unless we style their
containing-elements to expand to contain them.
Simulate the table-example you have - without a table.
Add...
#text {display: table; height: 1%;}
'display: table' will make all standard-compliant browsers expand the
container as if it were a table, and 'height: 1%' will trigger the
'Layout'[1] bug in IE/win, and make it simulate the wanted effect.
You may also set that 'height' to a suitable value in px or em, as it
will be interpreted as 'min-height' by all standard-compliant browsers
because of the 'display: table' property.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
--
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] Image falling out of container with float left
Liz lizCSSlist wrote: I'm a beginner at CSS layout and just discovered this list. Example 1 http://lizdesign.com/demosite/example1.html Example 2 http://lizdesign.com/demosite/example2.html I cannot do a fixed height for the container because the size will change and there will be a varying amount of text under the image and nav. Why does the image fall out when I float it left and what would be the best way to do this layout? Liz Welcome! This is a good reference for floats: http://css.maxdesign.com.au/floatutorial/index.htm Rather than trying to re-invent the wheel with a layout from scratch, you might start with a solid structural foundation, a layout that is /known/ to work-- maybe consider this one: http://blog.html.it/layoutgala/LayoutGala35.html It will work well cross-browser. Call the painting from inside #content-- that column floats left, and the navigation column floats right. Remember that the width and height of the paintings can vary; however, the the width can not /exceed/ the width of the container it is in. The top set of links is really a /list/ that is set horizontally. Here is how those links might be set with css: http://css.maxdesign.com.au/listamatic/horizontal01.htm The side navigation is really just a list, too-- only it is set vertically. Here's an example of how to set a vertical list with css. http://css.maxdesign.com.au/listamatic/vertical01.htm Develop in Opera, and Firefox-- but!, check frequently in IE. View your page at 800, 1024, and 1280. Keep the css and markup valid as you work. The list wiki is a valuable resource for most any problem you may encounter (the URL for the wiki will be at the bottom of this reply). HTH ~dL. -- http://chelseacreekstudio.com/ca/ccs/pow/pow.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] *Weird* bug in IE
Thomas Smith wrote: Andrea, you rock! Thank you so much for this great and simple solution.. :) 2006/6/23, Andrea Black [EMAIL PROTECTED]: Apologies! I meant to say clear:both !! I'm sure you guessed that tho! ~ Lacuna ___ Hi Tom, Try using a br/div style=clear:all; after your last link. I've had this error before and I believe this is how I fixed it! ~ Lacuna ___ Hi all, I have this very strange bug that only shows up in IE, and for which I can't find a rational explanation.. [...] Hi Tom, While you have the solution now, some theory about the Explorer 6 Duplicate Characters Bug you can find in PIE (Update! April 25, 2006) http://www.positioniseverything.net/explorer/dup-characters.html. Conclusion: there is no rational explanation, for it's IE ;-) . Greetings, 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] Mac/IE annoyances - right float problems
On Jun 24, 2006, at 3:31 AM, Brian Ghidinelli wrote: http://beta.MotorsportReg.com/ http://beta.MotorsportReg.com/calendar/event.cfm? uidEvent=1A73CE55-0865-1A10-A71A7A5FD6D606EE In most browsers like Firefox, IE6, Safari, etc, the index page has one wide and one narrow column, navigation tabs positioned to the right. On the event page, it is two more equally sized columns. In Mac/IE, none of my right floats seem to work. This is the case for the text nav at the very top right, the navigation tabs, and the right column which is currently sitting on the right, but not next to the left column. I fixed the text nav with a text-align: right but doing the same on the tab nav makes them blow up, stack vertically and grow wider. For the header of your page: the answer is width-less floats. IE 5 mac follows the CSS 2.0 specifications closely, which require a width to be declared on floats. [1] The calendar table in the primary column is set to 100% width which I tried changing to 99% with no avail. I also tried various combinations of position:relative and many other iterations. My floats do have explicit widths on them and they do size correctly as far as I can tell. Bringing the size down to 15% on the smaller column didn't fix any total width issues. This is actually a bug in IE 5 Mac [2]. #content-ma has a 'clear:both' rule. This prevents the child blocks to float correctly. Solved by inserting a clearing element before the offending block. [1]http://www.l-c-n.com/IE5tests/float2misc/#flwidth [2]http://www.l-c-n.com/IE5tests/float2misc/#fm002 And enough more bug analysis on those pages to fix your problems. Philippe --- Philippe Wittenbergh http://emps.l-c-n.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] Need 1px border with 5px radius curves
Al Sparber wrote: From: Geoff Krajeski [EMAIL PROTECTED] I am trying to get a border that is compliant on all 4 main systems/browsers that has a 1px border with a 5px radius curved corner. I was thinking of going the image route but is this really the best way? Yes. There are CSS hacks and Mozilla proprietary properties (based on CSS 3 proposals) but those are only useful if you want primitive curves. For a professionally-designed look, images (deployed as CSS backgrounds) are probably going to be your best (and simplest) solution. Yes, I think so too. For the image-route you can use the cross browser transparent liquid corners method http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm, or one of the other solutions in the WIKI http://css-discuss.incutio.com/?page=RoundedCorners(attention: not all solutions are cross browser or liquid or transparent at the outside of the corner; to be tested). Greetings, 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] Mac/IE annoyances - right float problems
Philippe Wittenbergh wrote: For the header of your page: the answer is width-less floats. IE 5 mac follows the CSS 2.0 specifications closely, which require a width to be declared on floats. [1] Phillippe, Thanks for your help - your advice on the float/clear bug was spot on and has helped me fix the side-by-side columns issue, which is excellent! I'm tempted to leave well enough alone... but since you went to the trouble of diagnosing the header... :) http://beta.motorsportreg.com/ I'm using the base code from the ALA sliding doors article[1] which specifically fixes the IE5/Mac issue. But I am still unable to get the tabs to not stretch across the screen. Is this still a width issue? The ALA code doesn't use any widths on the ul, li or a either: http://www.alistapart.com/d/slidingdoors/v1/ex6.html Thanks again! Brian [1] http://www.alistapart.com/articles/slidingdoors/ __ 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] Mac/IE annoyances - right float problems
On Jun 24, 2006, at 11:37 AM, Brian Ghidinelli wrote:
http://beta.motorsportreg.com/
I'm using the base code from the ALA sliding doors article[1] which
specifically fixes the IE5/Mac issue. But I am still unable to get
the
tabs to not stretch across the screen.
Is this still a width issue?
There are additional problems with IE, that is, you use float:right.
For this kind of navigation, I use display:inline-block for IE Mac
only, and leave it at the left side of the window.
/* for IE Mac only */
#tabnav li, #tabnav a { float:none; display:inline-block;}
#tabnav li {width:1px; white-space:nowrap;} /* -- mega-hit super
hack, prevents the expand to full-width */
Some (older) notes here:
http://emps.l-c-n.com/articles/70/stuff-and-things
and a demo (equally old code, when I look at it now :-))
http://dev.l-c-n.com/Rfloatnav/slidingdoors.php
other demos
http:///dev.l-c-n.com/inline-block/inline-block_list5.php
http:///dev.l-c-n.com/inline-block/inline-list.php
These don't use the sliding-doors thing (background-image), but it
should work just as well.
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.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/
