[css-d] CSS must be called in the head?
And nowhere else, correct? I'm referring to external CSS Thank you. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Developing on an iPad? [OT]
Can anyone here who develops on an iPad kindly share how this is done? Thank you, J __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] animated gif has scrollbars
No, but I still had iframe code in there.. On Nov 11, 2016 2:27 PM, "Karl DeSaulniers" <k...@designdrumm.com> wrote: > overflow:hidden; didn't work? > > Best, > Karl > > Sent from losPhone > > > On Nov 11, 2016, at 1:03 PM, John J <cr8...@gmail.com> wrote: > > > > I placed an animated gif on a web page; the dimensions of the gif do not > > exceed the capacity of the containing div, yet I have scrollbars. Link > > below. > > > > Is there a best practice for defeating scrollbars? Do we automatically > get > > scrollbars with placed media unless we spec otherwise? > > > > Thank you! > > > > http://john-a-johnson.com/rokr.php > > __ > > css-discuss [css-d@lists.css-discuss.org] > > http://www.css-discuss.org/mailman/listinfo/css-d > > List wiki/FAQ -- http://css-discuss.incutio.com/ > > List policies -- http://css-discuss.org/policies.html > > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] animated gif has scrollbars
D'oh! I used iframe for an earlier experiment..didn't think to get rid of that. Thank you, Tom! J On Fri, Nov 11, 2016 at 11:18 AM, Tom Livingston <tom...@gmail.com> wrote: > On Fri, Nov 11, 2016 at 2:03 PM, John J <cr8...@gmail.com> wrote: > > I placed an animated gif on a web page; the dimensions of the gif do not > > exceed the capacity of the containing div, yet I have scrollbars. Link > > below. > > > > Is there a best practice for defeating scrollbars? Do we automatically > get > > scrollbars with placed media unless we spec otherwise? > > > > Thank you! > > > > http://john-a-johnson.com/rokr.php > > > I'm seeing that as an iframe which could be the source of your > scrollbars. In latest Mac Chrome, I don't see any scrollbars. > > > -- > > Tom Livingston | Senior Front End Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > > > #663399 > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] animated gif has scrollbars
I placed an animated gif on a web page; the dimensions of the gif do not exceed the capacity of the containing div, yet I have scrollbars. Link below. Is there a best practice for defeating scrollbars? Do we automatically get scrollbars with placed media unless we spec otherwise? Thank you! http://john-a-johnson.com/rokr.php __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What causes the space at bottom of squares?
Thank you! On Sep 22, 2016 4:27 PM, "Karl DeSaulniers" <k...@designdrumm.com> wrote: > Because inline does not honor height. you need inline-block or block to do > that > > Best, > > Karl DeSaulniers > Design Drumm > http://designdrumm.com <http://designdrumm.com/> > > > > > > On Sep 22, 2016, at 6:25 PM, John J <cr8...@gmail.com> wrote: > > > > Yeah..that sounds good. Easy enough to make that change. Why does the > space happen in the first place? Why does images being inline cause it? > > > > > > On Sep 22, 2016 12:30 PM, "Karl DeSaulniers" <k...@designdrumm.com > <mailto:k...@designdrumm.com>> wrote: > > I would add a class to images that you need a special style for > > instead of declaring the same style for all images > > if not all images should display the same. > > > > Just my 2¢ > > > > :) > > > > Best, > > > > Karl DeSaulniers > > Design Drumm > > http://designdrumm.com <http://designdrumm.com/> > > > > > > > > > > > On Sep 22, 2016, at 11:22 AM, Tom Livingston <tom...@gmail.com > <mailto:tom...@gmail.com>> wrote: > > > > > > I would handle this on a case-by-case basis. But it's up to you. > > > > > > If you make a global style, you may need to "undo" it when you don't > > > want them to be block. On the other hand, if you handle it > > > case-by-case, you may find yourself making images block frequently. > > > > > > Glad I could help. > > > > > > On Thu, Sep 22, 2016 at 12:20 PM, John J <cr8...@gmail.com cr8...@gmail.com>> wrote: > > >> ^^ OK..doing that does work; so that when I need images to be > inline, I'll > > >> have to handle it with stylesheets? Is this a best practice, to > declare > > >> images as block up in the area where we have our other resets? > > >> > > >> Thank you, Tom > > >> > > >> On Thu, Sep 22, 2016 at 9:18 AM, John J <cr8...@gmail.com cr8...@gmail.com>> wrote: > > >>> > > >>> Are you saying to do this to my initial img tag so that this is > universal? > > >>> > > >>> On Thu, Sep 22, 2016 at 9:16 AM, Tom Livingston <tom...@gmail.com > <mailto:tom...@gmail.com>> wrote: > > >>>> > > >>>> On Thu, Sep 22, 2016 at 12:13 PM, John J <cr8...@gmail.com cr8...@gmail.com>> wrote: > > >>>>> I have 6 image tiles; 2 rows of 3 at desktop size. Each square has > a > > >>>>> background color, and an image placed inside. > > >>>>> > > >>>>> Each of these "tiles" shows through the background color of about > 3-4 > > >>>>> pixels. I can not see what's allowing this. I have my styles for > the > > >>>>> tiles > > >>>>> set at max-width:30%; height:auto; > > >>>>> > > >>>>> Can anyone see what the source of this unwanted space is? > > >>>>> > > >>>>> Thank you! > > >>>>> > > >>>> > > >>>> > > >>>> Images are inline elements. If you add a display:block; rule to your > > >>>> images, you can remove this gap. > > >>>> > > >>>> > > >>>> -- > > >>>> > > >>>> Tom Livingston | Senior Front End Developer | Media Logic | > > >>>> ph: 518.456.3015x231 | fx: 518.456.4279 > | medialogic.com <http://medialogic.com/> > > >>>> > > >>>> > > >>>> #663399 > > >>>> > __ > > >>>> css-discuss [css-d@lists.css-discuss.org <mailto:cs...@lists.css- > discuss.org>] > > >>>> http://www.css-discuss.org/mailman/listinfo/css-d < > http://www.css-discuss.org/mailman/listinfo/css-d> > > >>>> List wiki/FAQ -- http://css-discuss.incutio.com/ < > http://css-discuss.incutio.com/> > > >>>> List policies -- http://css-discuss.org/policies.html < > http://css-discuss.org/policies.html> > > >>>> Supported by evolt.org <http://evolt.org/> -- > http://www.evolt.org/help_support_evolt/ <http://www.evolt.org/help_ > support_evolt/> > > >>> > > >>> > > >> >
Re: [css-d] What causes the space at bottom of squares?
Yeah..that sounds good. Easy enough to make that change. Why does the space happen in the first place? Why does images being inline cause it? On Sep 22, 2016 12:30 PM, "Karl DeSaulniers" <k...@designdrumm.com> wrote: > I would add a class to images that you need a special style for > instead of declaring the same style for all images > if not all images should display the same. > > Just my 2¢ > > :) > > Best, > > Karl DeSaulniers > Design Drumm > http://designdrumm.com > > > > > > On Sep 22, 2016, at 11:22 AM, Tom Livingston <tom...@gmail.com> wrote: > > > > I would handle this on a case-by-case basis. But it's up to you. > > > > If you make a global style, you may need to "undo" it when you don't > > want them to be block. On the other hand, if you handle it > > case-by-case, you may find yourself making images block frequently. > > > > Glad I could help. > > > > On Thu, Sep 22, 2016 at 12:20 PM, John J <cr8...@gmail.com> wrote: > >> ^^ OK..doing that does work; so that when I need images to be inline, > I'll > >> have to handle it with stylesheets? Is this a best practice, to declare > >> images as block up in the area where we have our other resets? > >> > >> Thank you, Tom > >> > >> On Thu, Sep 22, 2016 at 9:18 AM, John J <cr8...@gmail.com> wrote: > >>> > >>> Are you saying to do this to my initial img tag so that this is > universal? > >>> > >>> On Thu, Sep 22, 2016 at 9:16 AM, Tom Livingston <tom...@gmail.com> > wrote: > >>>> > >>>> On Thu, Sep 22, 2016 at 12:13 PM, John J <cr8...@gmail.com> wrote: > >>>>> I have 6 image tiles; 2 rows of 3 at desktop size. Each square has a > >>>>> background color, and an image placed inside. > >>>>> > >>>>> Each of these "tiles" shows through the background color of about 3-4 > >>>>> pixels. I can not see what's allowing this. I have my styles for the > >>>>> tiles > >>>>> set at max-width:30%; height:auto; > >>>>> > >>>>> Can anyone see what the source of this unwanted space is? > >>>>> > >>>>> Thank you! > >>>>> > >>>> > >>>> > >>>> Images are inline elements. If you add a display:block; rule to your > >>>> images, you can remove this gap. > >>>> > >>>> > >>>> -- > >>>> > >>>> Tom Livingston | Senior Front End Developer | Media Logic | > >>>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > >>>> > >>>> > >>>> #663399 > >>>> > __ > >>>> css-discuss [css-d@lists.css-discuss.org] > >>>> http://www.css-discuss.org/mailman/listinfo/css-d > >>>> List wiki/FAQ -- http://css-discuss.incutio.com/ > >>>> List policies -- http://css-discuss.org/policies.html > >>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > >>> > >>> > >> > > > > > > > > -- > > > > Tom Livingston | Senior Front End Developer | Media Logic | > > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > > > > > > #663399 > > __ > > css-discuss [css-d@lists.css-discuss.org] > > http://www.css-discuss.org/mailman/listinfo/css-d > > List wiki/FAQ -- http://css-discuss.incutio.com/ > > List policies -- http://css-discuss.org/policies.html > > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What causes the space at bottom of squares?
^^ OK..doing that does work; so that when I need images to be inline, I'll have to handle it with stylesheets? Is this a best practice, to declare images as block up in the area where we have our other resets? Thank you, Tom On Thu, Sep 22, 2016 at 9:18 AM, John J <cr8...@gmail.com> wrote: > Are you saying to do this to my initial img tag so that this is universal? > > On Thu, Sep 22, 2016 at 9:16 AM, Tom Livingston <tom...@gmail.com> wrote: > >> On Thu, Sep 22, 2016 at 12:13 PM, John J <cr8...@gmail.com> wrote: >> > I have 6 image tiles; 2 rows of 3 at desktop size. Each square has a >> > background color, and an image placed inside. >> > >> > Each of these "tiles" shows through the background color of about 3-4 >> > pixels. I can not see what's allowing this. I have my styles for the >> tiles >> > set at max-width:30%; height:auto; >> > >> > Can anyone see what the source of this unwanted space is? >> > >> > Thank you! >> > >> >> >> Images are inline elements. If you add a display:block; rule to your >> images, you can remove this gap. >> >> >> -- >> >> Tom Livingston | Senior Front End Developer | Media Logic | >> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com >> >> >> #663399 >> __ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> > > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What causes the space at bottom of squares?
OK..thank you..good to keep in mind! On Thu, Sep 22, 2016 at 9:22 AM, Tom Livingston <tom...@gmail.com> wrote: > I would handle this on a case-by-case basis. But it's up to you. > > If you make a global style, you may need to "undo" it when you don't > want them to be block. On the other hand, if you handle it > case-by-case, you may find yourself making images block frequently. > > Glad I could help. > > On Thu, Sep 22, 2016 at 12:20 PM, John J <cr8...@gmail.com> wrote: > > ^^ OK..doing that does work; so that when I need images to be inline, > I'll > > have to handle it with stylesheets? Is this a best practice, to declare > > images as block up in the area where we have our other resets? > > > > Thank you, Tom > > > > On Thu, Sep 22, 2016 at 9:18 AM, John J <cr8...@gmail.com> wrote: > >> > >> Are you saying to do this to my initial img tag so that this is > universal? > >> > >> On Thu, Sep 22, 2016 at 9:16 AM, Tom Livingston <tom...@gmail.com> > wrote: > >>> > >>> On Thu, Sep 22, 2016 at 12:13 PM, John J <cr8...@gmail.com> wrote: > >>> > I have 6 image tiles; 2 rows of 3 at desktop size. Each square has a > >>> > background color, and an image placed inside. > >>> > > >>> > Each of these "tiles" shows through the background color of about 3-4 > >>> > pixels. I can not see what's allowing this. I have my styles for the > >>> > tiles > >>> > set at max-width:30%; height:auto; > >>> > > >>> > Can anyone see what the source of this unwanted space is? > >>> > > >>> > Thank you! > >>> > > >>> > >>> > >>> Images are inline elements. If you add a display:block; rule to your > >>> images, you can remove this gap. > >>> > >>> > >>> -- > >>> > >>> Tom Livingston | Senior Front End Developer | Media Logic | > >>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > >>> > >>> > >>> #663399 > >>> __ > >>> css-discuss [css-d@lists.css-discuss.org] > >>> http://www.css-discuss.org/mailman/listinfo/css-d > >>> List wiki/FAQ -- http://css-discuss.incutio.com/ > >>> List policies -- http://css-discuss.org/policies.html > >>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > >> > >> > > > > > > -- > > Tom Livingston | Senior Front End Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > > > #663399 > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] What causes the space at bottom of squares?
Are you saying to do this to my initial img tag so that this is universal? On Thu, Sep 22, 2016 at 9:16 AM, Tom Livingston <tom...@gmail.com> wrote: > On Thu, Sep 22, 2016 at 12:13 PM, John J <cr8...@gmail.com> wrote: > > I have 6 image tiles; 2 rows of 3 at desktop size. Each square has a > > background color, and an image placed inside. > > > > Each of these "tiles" shows through the background color of about 3-4 > > pixels. I can not see what's allowing this. I have my styles for the > tiles > > set at max-width:30%; height:auto; > > > > Can anyone see what the source of this unwanted space is? > > > > Thank you! > > > > > Images are inline elements. If you add a display:block; rule to your > images, you can remove this gap. > > > -- > > Tom Livingston | Senior Front End Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > > > #663399 > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] What causes the space at bottom of squares?
I have 6 image tiles; 2 rows of 3 at desktop size. Each square has a background color, and an image placed inside. Each of these "tiles" shows through the background color of about 3-4 pixels. I can not see what's allowing this. I have my styles for the tiles set at max-width:30%; height:auto; Can anyone see what the source of this unwanted space is? Thank you! Tiles can be seen at: http://john-a-johnson.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Bullets: Block + inline?
I have a possible need for bullets at the mobile media break to be arranged in columns of maybe 3 or 4 bullets each; at Desktop, each set of bullets will be vertical (Block) Is there a way to have the chunks of bullets be block within their "chunks" but have the chunks be arranged horizontally? (inline?) Is this more snarly than it's worth? Thank you! __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] a:hover state in different browsers
At the link below, I'm having trouble getting the hover state to look the same across browsers. On hover, there should be a red line under the hovered-over item as wide as the thin gray line below it, as thick as that line is. The thickness seems to match, but the positioning is off, browser to browser. Safari and Firefox show the hover-state line a bit too low; Chrome Canary shows it exactly where it needs to be. Am I working against myself, trying to do something that's too tricky by trying to get a hover element to line up with, basically the bottom of the header which is 3 parents up from the nav? Thank you for any clues! John http://john-a-johnson.com/contact.php __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] default border property?
Can anyone shed light on the concept of the setting of default border properties? I may be suffering the effects of this on some elements which ought to be following the same css, but which seem not to be; differing border code might be the reason. Thank you! J __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Forms: textarea vs input
I hope this is CSS enough for this list..I have a form in which my CSS must be different for textarea than for the name, email, phone #, etc fields, to be the same width, and to have the same type attributes. I have no clue why; seems very trial-and-errorish to get a uniform look, ie, all fields same width. Perhaps this is a matter of html more than CSS...I am sorry if this is the case. Thank you, John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] is use of rem bad?
Holy Cow! I went to the validator link below, threw in the same URL, expanded the triangle (already was at CSS3) and got no ( 0 ) errors! what makes this really amazing is that my chair time for coding has fallen WAY off...get maybe couple hours/week...been a year or two since I did it every day, diligently.. I wish I could remember what I did which produced 154 rem-based errors, but they appear to be non-existent. Thank you > The default configuration of the CSS validator should handle the `rem` > unit without any problems (other wise, make sure “CSS Level 3” is selected > under the “more options” disclosure triangle thingie). > http://jigsaw.w3.org/css-validator/ > On Wed, Jul 20, 2016 at 7:01 PM, Philippe Wittenbergh <e...@l-c-n.com> > wrote: > > On Jul 21, 2016, at 2:05 AM, John J <cr8...@gmail.com> wrote: > > > > Working on my code, I decided to see what they CSS validator had to say > > about it, and it threw out 154 errors, most of which were about rem as my > > value of measure for things like padding, type, borders, margin. > > > > I am using rem on advice of a developer who said that a certain pinhead, > > un-named browser needs it; other browsers can use/deal with it too. > > > > Yet the validator threw a hissy..Should I abandon all efforts to support > > arcane versions of this browser, and stick only with em? > The default configuration of the CSS validator should handle the `rem` > unit without any problems (other wise, make sure “CSS Level 3” is selected > under the “more options” disclosure triangle thingie). > http://jigsaw.w3.org/css-validator/ > I use rem units all the time for everything and more without trouble. All > modern browsers handle this unit correctly. If you need support for IE 8 – > which doesn’t support the `rem` unit, then what Tom says… > (and note to Karl: no, just blindly replacing `rem` with `em` is _not_ the > way to go. The computed value of something specified with the rem unit is > based on the computed value of the font-size as set on the root element. > For the `em unit` it is based on the font-size of the element itself.) > > Philippe > -- > Philippe Wittenbergh > http://l-c-n.com/ > > > > > > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] is use of rem bad?
Working on my code, I decided to see what they CSS validator had to say about it, and it threw out 154 errors, most of which were about rem as my value of measure for things like padding, type, borders, margin. I am using rem on advice of a developer who said that a certain pinhead, un-named browser needs it; other browsers can use/deal with it too. Yet the validator threw a hissy..Should I abandon all efforts to support arcane versions of this browser, and stick only with em? Thank you! John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] media queries following prior rules
At the link below, the name, email, subject fields don't appear to be obeying rules governing width as in the previous media breaks.. at 360 and 320, those fields exceed the width of their parent, rather than respecting padding set prior..maybe I'm missing something..if I have my rules set up correctly, the css should behave a certain way until told differently in the next media query, right? Thank you for any insight about this! John http://john-a-johnson.com/contact.php __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] contact form tutorial
HTML, CSS, and a wee bit of php and javascript. I canJ understand the parts..I've built one before as part of a class, but it was awhile ago. Thank you! On Tue, Apr 12, 2016 at 7:12 AM, Greg Gamble <ggam...@sbctc.edu> wrote: > What language are you using or have available? > > > Greg > > -Original Message- > From: org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of John J > Sent: Monday, April 11, 2016 4:29 PM > To: css-d@lists.css-discuss.org > Subject: [css-d] contact form tutorial > > I have my actual form built in html/css. Can anyone point me to a good > tutorial for beginners for the functional stuff? The validating/sending of > the mail? > > Sorry, I realize this is OT.. > > Thank you! > > John > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- > http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] contact form tutorial
Thank you, Karl! On Apr 11, 2016 5:37 PM, "Karl DeSaulniers" <k...@designdrumm.com> wrote: > Google.. > > sendmail php > > GL, > > Best, > > Karl DeSaulniers > Design Drumm > http://designdrumm.com > > > > > On Apr 11, 2016, at 6:28 PM, John J <cr8...@gmail.com> wrote: > > > I have my actual form built in html/css. Can anyone point me to a good > > tutorial for beginners for the functional stuff? The validating/sending > of > > the mail? > > > > Sorry, I realize this is OT.. > > > > Thank you! > > > > John > > __ > > css-discuss [css-d@lists.css-discuss.org] > > http://www.css-discuss.org/mailman/listinfo/css-d > > List wiki/FAQ -- http://css-discuss.incutio.com/ > > List policies -- http://css-discuss.org/policies.html > > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] contact form tutorial
I have my actual form built in html/css. Can anyone point me to a good tutorial for beginners for the functional stuff? The validating/sending of the mail? Sorry, I realize this is OT.. Thank you! John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] coding "violators"
I will try your code, Karl..thank you!
John
On Mon, Mar 28, 2016 at 4:20 PM, Karl DeSaulniers <k...@designdrumm.com>
wrote:
> Hey John,
> Here is a code I use for oval picture frames.
> Might work for your situation.
>
> .oval_picture_frame {
> background-color: rgb(255,255,255);
> margin: 0 auto 5%;
> padding: 0;
> text-align: center;
> float: inherit;
> -webkit-border-radius: 49%;
> -moz-border-radius: 49%;
> -khtml-border-radius: 49%;
> -o-border-radius: 49%;
> border-radius: 49%;
> vertical-align: middle;
> overflow: hidden;
> display: inline-block;
> zoom: 1;
> }
>
> Works on most browsers I have tested on.
> Old IE choked on the apex but you can make a IE fall back if you really
> want.
> Let me know if you run across a browser that chews it up and spits it out.
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
> On Mar 28, 2016, at 5:55 PM, John J <cr8...@gmail.com> wrote:
>
> > Yes, that's right..I can see having various classes, and that these would
> > change in media queries as needed. I think background-image would work
> for
> > rectangular treatments of images...will have to play with this..thank you
> > for the idea!
> >
> > J
> >
> > On Mon, Mar 28, 2016 at 3:28 PM, Chris Rockwell <ch...@chrisrockwell.com
> >
> > wrote:
> >
> >> What are the different scenarios in which this would be used? Is the
> >> assumption that you need to move the text so that it fits right on
> >> different images correct? Can you use background-image for this, and
> then
> >> position the text within the container?
> >>
> >> On Mon, Mar 28, 2016 at 5:00 PM John J <cr8...@gmail.com> wrote:
> >>
> >>> I'm using "violator" in the sense of one element that "violates" the
> space
> >>> of another..
> >>>
> >>> hoping to code an item that looks like the graphic in the link
> below..so
> >>> far, I have the image floating here or there, but not succeeding
> getting a
> >>> text hunk to be part of it.
> >>>
> >>> Thank you for any clues!
> >>>
> >>> John
> >>>
> >>> http://coffeeonmars.com/screenshots/violator.jpg
> >>> __
> >>> css-discuss [css-d@lists.css-discuss.org]
> >>> http://www.css-discuss.org/mailman/listinfo/css-d
> >>> List wiki/FAQ -- http://css-discuss.incutio.com/
> >>> List policies -- http://css-discuss.org/policies.html
> >>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> >>>
> >>
> > __
> > css-discuss [css-d@lists.css-discuss.org]
> > http://www.css-discuss.org/mailman/listinfo/css-d
> > List wiki/FAQ -- http://css-discuss.incutio.com/
> > List policies -- http://css-discuss.org/policies.html
> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] coding "violators"
Yes, that's right..I can see having various classes, and that these would change in media queries as needed. I think background-image would work for rectangular treatments of images...will have to play with this..thank you for the idea! J On Mon, Mar 28, 2016 at 3:28 PM, Chris Rockwell <ch...@chrisrockwell.com> wrote: > What are the different scenarios in which this would be used? Is the > assumption that you need to move the text so that it fits right on > different images correct? Can you use background-image for this, and then > position the text within the container? > > On Mon, Mar 28, 2016 at 5:00 PM John J <cr8...@gmail.com> wrote: > >> I'm using "violator" in the sense of one element that "violates" the space >> of another.. >> >> hoping to code an item that looks like the graphic in the link below..so >> far, I have the image floating here or there, but not succeeding getting a >> text hunk to be part of it. >> >> Thank you for any clues! >> >> John >> >> http://coffeeonmars.com/screenshots/violator.jpg >> __ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] coding "violators"
I'm using "violator" in the sense of one element that "violates" the space of another.. hoping to code an item that looks like the graphic in the link below..so far, I have the image floating here or there, but not succeeding getting a text hunk to be part of it. Thank you for any clues! John http://coffeeonmars.com/screenshots/violator.jpg __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] why image won't scale?
well that remedied the scaling problem, and adjusting max-width on the img
enabled the image to be to the right of the text, but what's the correct
way to get the image to occupy the same position as float:right; did,
without messing up the flexible image property?
Thank you!
John
On Mon, Mar 7, 2016 at 1:33 PM, Karl DeSaulniers <k...@designdrumm.com>
wrote:
> check your float.
> float will make images be wrapped by text.
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
> On Mar 7, 2016, at 3:12 PM, John J <cr8...@gmail.com> wrote:
>
> > to my eye, I am applying the same reasoning to the image as to the text
> > hunk to the left of it, yet the text behaves correctly; the image wants
> to
> > break to the next line, and when viewport 400px wide or so, THEN the
> image
> > scales..I simply don't get it..
> >
> > On Mon, Mar 7, 2016 at 12:20 PM, Chris Williams <ch...@clwill.com>
> wrote:
> >
> >> The issue is not with the style of the img, it's with the styling on the
> >> div that includes it. It needs a width spec too.
> >>
> >> On 3/7/16, 11:52 AM, "css-d-boun...@lists.css-discuss.org on behalf of
> >> John J" <css-d-boun...@lists.css-discuss.org on behalf of
> >> cr8...@gmail.com> wrote:
> >>
> >>> that's what I'm noticing, too...I can't tell if it's my media queries
> >>> moving to next break before my img has a chance to scale. I notice the
> >>> text
> >>> chunk does scale; I don't see why the image doesn't scale to the
> extent it
> >>> can ‹ before the media query kicks in for the next size..
> >>>
> >>> On Mon, Mar 7, 2016 at 11:35 AM, Rod Castello <rodcastel...@gmail.com>
> >>> wrote:
> >>>
> >>>> It scales for me when the viewport falls below 400px in width. It
> falls
> >>>> below the left copy block and starts to scale.
> >>>>
> >>>>
> >>>> On Mon, Mar 7, 2016 at 10:34 AM, John J <cr8...@gmail.com> wrote:
> >>>>
> >>>>> Sorry...that first email I sent accidentally..I meant to include a
> >>>>> link..it
> >>>>> is:
> >>>>>
> >>>>> john-a-johnson.com
> >>>>>
> >>>>>
> >>>>> I have it now on the container, but I've experimented with it on the
> >>>>> img
> >>>>> and doesn't seem to work..I know it's a dumb mistake on my part..I'm
> >>>>> just
> >>>>> not seeing it..
> >>>>>
> >>>>> thank you
> >>>>>
> >>>>> On Mon, Mar 7, 2016 at 10:31 AM, Tom Livingston <tom...@gmail.com>
> >>>>> wrote:
> >>>>>
> >>>>>> A link is best. However, is the css applied to the image itself, or
> a
> >>>>>> container?
> >>>>>>
> >>>>>> On Mon, Mar 7, 2016 at 1:18 PM, John J <cr8...@gmail.com> wrote:
> >>>>>>
> >>>>>>> I have an image which I want to scale when the viewport changes in
> >>>>> size.
> >>>>>>>
> >>>>>>> The css I have applied to image is:
> >>>>>>>
> >>>>>>> .image-right{
> >>>>>>> float:right;
> >>>>>>>max-width: 100%;
> >>>>>>>height: auto;
> >>>>>>> }
> >>>>>>>
> >>>>>
> __
> >>>>>>> css-discuss [css-d@lists.css-discuss.org]
> >>>>>>> http://www.css-discuss.org/mailman/listinfo/css-d
> >>>>>>> List wiki/FAQ -- http://css-discuss.incutio.com/
> >>>>>>> List policies -- http://css-discuss.org/policies.html
> >>>>>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> >>>>>>>
> >>>>>>
> >>>>>>
> >>>>>>
> >>>>>> --
> >>>>>>
> >>>>>> Tom Livingston | Senior Front End Developer | Media Logic |
> >>>>>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> >>>>>>
> >>>>>>
> >>>>>> #663399
> >>>>>>
&
Re: [css-d] why image won't scale?
to my eye, I am applying the same reasoning to the image as to the text
hunk to the left of it, yet the text behaves correctly; the image wants to
break to the next line, and when viewport 400px wide or so, THEN the image
scales..I simply don't get it..
On Mon, Mar 7, 2016 at 12:20 PM, Chris Williams <ch...@clwill.com> wrote:
> The issue is not with the style of the img, it's with the styling on the
> div that includes it. It needs a width spec too.
>
> On 3/7/16, 11:52 AM, "css-d-boun...@lists.css-discuss.org on behalf of
> John J" <css-d-boun...@lists.css-discuss.org on behalf of
> cr8...@gmail.com> wrote:
>
> >that's what I'm noticing, too...I can't tell if it's my media queries
> >moving to next break before my img has a chance to scale. I notice the
> >text
> >chunk does scale; I don't see why the image doesn't scale to the extent it
> >can ‹ before the media query kicks in for the next size..
> >
> >On Mon, Mar 7, 2016 at 11:35 AM, Rod Castello <rodcastel...@gmail.com>
> >wrote:
> >
> >> It scales for me when the viewport falls below 400px in width. It falls
> >> below the left copy block and starts to scale.
> >>
> >>
> >> On Mon, Mar 7, 2016 at 10:34 AM, John J <cr8...@gmail.com> wrote:
> >>
> >>> Sorry...that first email I sent accidentally..I meant to include a
> >>> link..it
> >>> is:
> >>>
> >>> john-a-johnson.com
> >>>
> >>>
> >>> I have it now on the container, but I've experimented with it on the
> >>>img
> >>> and doesn't seem to work..I know it's a dumb mistake on my part..I'm
> >>>just
> >>> not seeing it..
> >>>
> >>> thank you
> >>>
> >>> On Mon, Mar 7, 2016 at 10:31 AM, Tom Livingston <tom...@gmail.com>
> >>>wrote:
> >>>
> >>> > A link is best. However, is the css applied to the image itself, or a
> >>> > container?
> >>> >
> >>> > On Mon, Mar 7, 2016 at 1:18 PM, John J <cr8...@gmail.com> wrote:
> >>> >
> >>> >> I have an image which I want to scale when the viewport changes in
> >>> size.
> >>> >>
> >>> >> The css I have applied to image is:
> >>> >>
> >>> >> .image-right{
> >>> >> float:right;
> >>> >> max-width: 100%;
> >>> >> height: auto;
> >>> >> }
> >>> >>
> >>>__
> >>> >> css-discuss [css-d@lists.css-discuss.org]
> >>> >> http://www.css-discuss.org/mailman/listinfo/css-d
> >>> >> List wiki/FAQ -- http://css-discuss.incutio.com/
> >>> >> List policies -- http://css-discuss.org/policies.html
> >>> >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> >>> >>
> >>> >
> >>> >
> >>> >
> >>> > --
> >>> >
> >>> > Tom Livingston | Senior Front End Developer | Media Logic |
> >>> > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> >>> >
> >>> >
> >>> > #663399
> >>> >
> >>> __
> >>> css-discuss [css-d@lists.css-discuss.org]
> >>> http://www.css-discuss.org/mailman/listinfo/css-d
> >>> List wiki/FAQ -- http://css-discuss.incutio.com/
> >>> List policies -- http://css-discuss.org/policies.html
> >>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> >>>
> >>
> >>
> >__
> >css-discuss [css-d@lists.css-discuss.org]
> >http://www.css-discuss.org/mailman/listinfo/css-d
> >List wiki/FAQ -- http://css-discuss.incutio.com/
> >List policies -- http://css-discuss.org/policies.html
> >Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] why image won't scale?
that's what I'm noticing, too...I can't tell if it's my media queries
moving to next break before my img has a chance to scale. I notice the text
chunk does scale; I don't see why the image doesn't scale to the extent it
can — before the media query kicks in for the next size..
On Mon, Mar 7, 2016 at 11:35 AM, Rod Castello <rodcastel...@gmail.com>
wrote:
> It scales for me when the viewport falls below 400px in width. It falls
> below the left copy block and starts to scale.
>
>
> On Mon, Mar 7, 2016 at 10:34 AM, John J <cr8...@gmail.com> wrote:
>
>> Sorry...that first email I sent accidentally..I meant to include a
>> link..it
>> is:
>>
>> john-a-johnson.com
>>
>>
>> I have it now on the container, but I've experimented with it on the img
>> and doesn't seem to work..I know it's a dumb mistake on my part..I'm just
>> not seeing it..
>>
>> thank you
>>
>> On Mon, Mar 7, 2016 at 10:31 AM, Tom Livingston <tom...@gmail.com> wrote:
>>
>> > A link is best. However, is the css applied to the image itself, or a
>> > container?
>> >
>> > On Mon, Mar 7, 2016 at 1:18 PM, John J <cr8...@gmail.com> wrote:
>> >
>> >> I have an image which I want to scale when the viewport changes in
>> size.
>> >>
>> >> The css I have applied to image is:
>> >>
>> >> .image-right{
>> >> float:right;
>> >> max-width: 100%;
>> >> height: auto;
>> >> }
>> >> __
>> >> css-discuss [css-d@lists.css-discuss.org]
>> >> http://www.css-discuss.org/mailman/listinfo/css-d
>> >> List wiki/FAQ -- http://css-discuss.incutio.com/
>> >> List policies -- http://css-discuss.org/policies.html
>> >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>> >>
>> >
>> >
>> >
>> > --
>> >
>> > Tom Livingston | Senior Front End Developer | Media Logic |
>> > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>> >
>> >
>> > #663399
>> >
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] why image won't scale?
Sorry...that first email I sent accidentally..I meant to include a link..it
is:
john-a-johnson.com
I have it now on the container, but I've experimented with it on the img
and doesn't seem to work..I know it's a dumb mistake on my part..I'm just
not seeing it..
thank you
On Mon, Mar 7, 2016 at 10:31 AM, Tom Livingston <tom...@gmail.com> wrote:
> A link is best. However, is the css applied to the image itself, or a
> container?
>
> On Mon, Mar 7, 2016 at 1:18 PM, John J <cr8...@gmail.com> wrote:
>
>> I have an image which I want to scale when the viewport changes in size.
>>
>> The css I have applied to image is:
>>
>> .image-right{
>> float:right;
>> max-width: 100%;
>> height: auto;
>> }
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Image won't scale
I have the css below applied to an image at: john-a-johnson.com yet the
image won't scale when view port resizes..can anyone point out what I'm
doing wrong?
Thank you!
John
.image-right{
float:right;
max-width: 100%;
height: auto;
}
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] why image won't scale?
I have an image which I want to scale when the viewport changes in size.
The css I have applied to image is:
.image-right{
float:right;
max-width: 100%;
height: auto;
}
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Hiding desktop header menu on phones?
I have my "waffle" menu div hiding until viewport reaches max-width: 42.5rem, using display:none; in the desktop CSS, then using display:inline; at 42.5rem Is it adequate correct to apply same thing in reverse to just the header nav ul? Or must I apply it also to all the children? Something tells me that if the parent is hidden, the children are also hidden (cascade) but I would like to make sure. thank you, John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Why doesn't header menu move as viewport resizes?
At the link below, I have a simple header nav inside my header and my intention is to have the page be flexible as well as responsive..haven't done the media breaks yet. Why doesn't the header menu move to the left right away as the viewport gets narrower? Eventually it moves, but "portfolio" is cut off..I don't ssee what's at work here..thank you for any clues! John http://www.coffeeonmars.com/newJJ/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 workaround?
Did you get this fixed? Your link throws a 404. Dave Am 06.07.12 04:04, schrieb John: At this link: http://www.coffeeonmars.com/testing/index.html IE 6 has 2 major problems, that I can see. 1 is that it won't draw those entire widgets, and 2 is that the Content area crashes into the side menu. The widgets employ rounded corners, which I believe is HTML5 and therefore unsupported by IE 6..not sure if that's it, or what causes the content to crash into the side menu. Can anyone offer thoughts on that? Thank you! John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] display:block in Outlook 2007 2010
I am aware if IE conditional statements and vector mark up language(VML), and I use them to place in background images, as well as make a background color for the whole email. I should have stated I was aware of that Campaign monitor listed display: block as an attribute ignored in Outlook, but I wanted to see if someone knew a fix for it. But if any one knows a fix I would appreciate it. Thanks for all your help. Date: Mon, 21 May 2012 22:55:00 +0200 From: derer...@gmx.ch To: rom...@gmail.com CC: tom...@gmail.com; css-d@lists.css-discuss.org; junk...@live.com Subject: Re: [css-d] display:block in Outlook 2007 2010 Am 21.05.2012 22:22 schrieb Jeff Reid: On Mon, May 21, 2012 at 12:34 PM, J Mijunk...@live.com wrote: Hey All, Does anyone know how to make the display:block attribute work in Outlook 2007 2010 for images? I used inline-style sheets and it doesn't work. This may help you some: http://www.campaignmonitor.com/css/ That's a real cool resource! If you have a look at the Outlook 2007/2010 column, you will notice that the display property is not supported. For whatever reason, Microsoft decided to use the rendering engine of MS Word in Outlook 2007 and 2010 (before, Outlook and Outlook Express used the rendering engine of Internet Explorer). Nobody outside MS can understand this decision, which makes HTML E-Mail quite unuseable in these programs. (Now that they catched up with standards rendering in IE, they might fear to lose their first place in giving us headaches...) If you want to write separate styles for Outlook rendering, you can enclose them in a conditionnal comment (found @ Wikipedia): !--[if gte mso 12] style type=text/css [Outlook 2007/2010 styles go here] /style ![endif]-- __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] display:block in Outlook 2007 2010
Hey All,
Does anyone know how to make the display:block attribute work in Outlook 2007
2010 for images? I used inline-style sheets and it doesn't work.
I also tried declaring it in the CSS stylesheet but it didn't work:
style type=text/css
/** outlook adjustment **/
v\:* {
behavior: url(#default#VML);
display:inline-block;
}
body {
background-color:#EAF1F4;
margin:0;
padding:0;
font-family: Helvetica, Arial, sans-serif;/*Outlook 2010 adjustment*/
}
img{display:block;border:solid 1px #00fecc;}/*Outlook 2010 test*/
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
.yshortcuts,
.yshortcuts a,
.yshortcuts a:link,
.yshortcuts a:visited,
.yshortcuts a:hover
{color: rgb(13, 142, 226);text-decoration:none;}
/style
Thanks!
W
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] display:block in Outlook 2007 2010
I have used true inline sheets and Outlook 2010 completely ignores it,
resulting in images stacking on each other unless I use br or br / tags.
Date: Mon, 21 May 2012 12:50:20 -0400
From: tom...@gmail.com
To: junk...@live.com
CC: css-d@lists.css-discuss.org
Subject: Re: [css-d] display:block in Outlook 2007 2010
On Mon, May 21, 2012 at 12:34 PM, J Mi junk...@live.com wrote:
Hey All,
Does anyone know how to make the display:block attribute work in Outlook
2007 2010 for images? I used inline-style sheets and it doesn't work.
I also tried declaring it in the CSS stylesheet but it didn't work:
style type=text/css
/** outlook adjustment **/
v\:* {
behavior: url(#default#VML);
display:inline-block;
}
body {
background-color:#EAF1F4;
margin:0;
padding:0;
font-family: Helvetica, Arial, sans-serif;/*Outlook 2010 adjustment*/
}
img{display:block;border:solid 1px #00fecc;}/*Outlook 2010 test*/
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
.yshortcuts,
.yshortcuts a,
.yshortcuts a:link,
.yshortcuts a:visited,
.yshortcuts a:hover
{color: rgb(13, 142, 226);text-decoration:none;}
/style
Thanks!
W
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
A true inline style should work, like:
img src=my.jpg width=100 height=100 style=display: block; /
HTH
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Improving your CSS performance
On 2/12/2011 5:02 AM, Gabriele Romanato wrote:
Some reflections collected during my experience on production web sites:
http://onwebdev.blogspot.com/2011/02/improving-your-css-performance.html
HTH :-)
http://www.css-zibaldone.com
http://www.css-zibaldone.com/test/ (English)
http://www.css-zibaldone.com/articles/ (English)
http://onwebdev.blogspot.com/ (English)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Gabriele, thank you for a very interesting and useful post.
I do, however, have a question regarding one of your examples:
Use shorthand properties
Shorthand properties should be used whenever it's possible instead of
single properties. So avoid this:
1. #box {
2. padding-top: 1em;
3. padding-bottom: 1em;
4. }
#box {
padding-top: 1em;
padding-bottom: 1em;
}
Use this instead:
1. #box {padding: 1em0;}
Are they both treated the same by browsers in that the first example
doesn't deal with padding-left and padding-right; letting any default
values flow through. The second example sets them both to 0.
Does this make a difference?
Thank you,
David
--
David J. Hark
HARK/INTERNET HELP,Inc.
N8GMQ 304-876-2607
P. O. Box 201
Shepherdstown, WV
25443-0201
http://www.dhark.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] the correct way to declare textarea width
A nice way to get a textarea to be the exact size that you want it to be is to forget about setting its width and instead use a container div with the same background color. Use the cols attribute of the textarea to set it to some value that will put it just inside the container div's boundary, and that will make it appear to be the exact width that you need it to be. This technique is useful for making a textarea appear to be the exact same width as other text inputs that may be on the same form for a more uniform appearance. Michael On Fri, Jan 9, 2009 at 2:28 PM, Eric Cash etc...@gmail.com wrote: I hate form elements... I've run into this problem before, I don't think I've ever actually understood it. On this page http://scotaganda.com/work/MineKey/opinionsBoard.html the Express your opinion textarea is fine in firefox, but both safari and ie place control on the right hand side of the textarea, which makes it grow about 8px, and break the layout. I'm not sure of the correct way to get this thing to behave, and I'd rather not keep poking around in the dark here I have a div wrapped around it, with the correct width, and I'm not sure why just setting the textarea's width to 100% won't correctly display, any help here? __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] [Even afwezig] Re: css-d Digest, Vol 69 , Issue 11
Hallo! Dank je voor je mailtje; ik kan er echter op dit moment niet naar kijken omdat ik tot en met 22 augustus geniet van mijn vakantie. Na terugkomst werk ik mijn e-mail weer bij en zal ik reageren. Bij hoge nood kun je me ook even een sms sturen op 06.50.230.928. Hartelijke groet, Jeroen -- vizi | vorm geven aan inhoud Wateringsevest 38 2611 AW Delft T 015.212.89.43 F 015.212.89.44 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] [Even afwezig] Re: css-d Digest, Vol 69 , Issue 12
Hallo! Dank je voor je mailtje; ik kan er echter op dit moment niet naar kijken omdat ik tot en met 22 augustus geniet van mijn vakantie. Na terugkomst werk ik mijn e-mail weer bij en zal ik reageren. Bij hoge nood kun je me ook even een sms sturen op 06.50.230.928. Hartelijke groet, Jeroen -- vizi | vorm geven aan inhoud Wateringsevest 38 2611 AW Delft T 015.212.89.43 F 015.212.89.44 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] [Even afwezig] Re: css-d Digest, Vol 69 , Issue 10
Hallo! Dank je voor je mailtje; ik kan er echter op dit moment niet naar kijken omdat ik tot en met 22 augustus geniet van mijn vakantie. Na terugkomst werk ik mijn e-mail weer bij en zal ik reageren. Bij hoge nood kun je me ook even een sms sturen op 06.50.230.928. Hartelijke groet, Jeroen -- vizi | vorm geven aan inhoud Wateringsevest 38 2611 AW Delft T 015.212.89.43 F 015.212.89.44 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] [Even afwezig] Re: css-d Digest, Vol 69 , Issue 9
Hallo! Dank je voor je mailtje; ik kan er echter op dit moment niet naar kijken omdat ik tot en met 22 augustus geniet van mijn vakantie. Na terugkomst werk ik mijn e-mail weer bij en zal ik reageren. Bij hoge nood kun je me ook even een sms sturen op 06.50.230.928. Hartelijke groet, Jeroen -- vizi | vorm geven aan inhoud Wateringsevest 38 2611 AW Delft T 015.212.89.43 F 015.212.89.44 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Font question
How would I use CSS to bold-face the results of reading an Access database? In a somewhat related vein, I would like to have the third word of my H2 tags be a different color from the other words. From what I have read, the basic purpose of CSS is to separate style from content, and I want to do things in the correct manner. . . . do until OnGuestbook.EOF % Name: % Response.Write (OnGuestbook(Name))% BR E-mail % Response.Write (OnGuestbook (Email))% BR Website % Response.Write (OnGuestbook(Website)) % BR Gender: % Response.Write (OnGuestbook (Gender)) % BR Comments: % Response.Write (OnGuestbook (Comments)) % BR BR % OnGuestbook.MoveNext loop % . . . Allen J. Bennett Health books (and a health information program) here: http://www.AffiliateDreams.com__ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] VBScript in a CSS sheet
I want to read the user's screen resolution, and adjust the width of images
depending on the result. Is this possible? I started this way, but it seems not
to be working (even when I did define [as a static number, to start]
IconWidth); I have NO idea how, or where, to define it. When I get it working
with a static number, then I have to figure out how to read the screen
resolution. I haven't used either VBScript or CSS (and was never very good at
either) in quite a while, so everything might seem quite strange. In case you
need to see what this attaches to, the site name is
http://AffiliateDreams.com/Welcome.html. Thank you very much.
Allen J. Bennett
Body {background: #F1EB98; font-weight: bold;};
H1 {Color:Red; text-align: center;};
H2 {Color:Blue; text-align: center};
H3 {Color:Red; text-align:center;};
a {background-color: #F1EB98;};
img {width = IconWidth; height = 86;}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] [OT] IE8 Beta released to developers.
Hi, I installed IE8, then uninstalled it and IE7 was still there. You can uninstall from Control Panel - Add / Remove Programs - Microsoft Internet Explorer 8 .. cant remember full line. Cheers Kevin -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of James Leslie Sent: Friday, March 07, 2008 00:05 AM To: [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] [OT] IE8 Beta released to developers. Hi, It is not a standalone, it will write over IE7 but has a button on it to emulate IE7. I don't know if it is possible to uninstall it Hope that helps James -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: 06 March 2008 15:58 To: Tamara Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] [OT] IE8 Beta released to developers. Can someone please confirm if this is stand alone installation or not? Thanks, __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] checkbox + IE7 + zoom = overlapped text
THANK YOU, PHILIPPE! Using the suggestions offered at the link you provided, I added position:relative; to the container dl, and then letter-spacing:0.1px; overflow:hidden; to the dt containing the checkbox and the text, and it works now. Thank you so much! ~ Jen On Jan 25, 2008, at 7:42 AM, j s wrote: If using IE7, and then Zoom In, the checkbox on the page linked below overlaps the text next to it. I've tried putting margins around the checkbox, padding, using display properties, but nothing seems to help. Anyone have any suggestions? http://inkpixelspaper.com/clients/rbmstaticsite/ http://www.brunildo.org/test/ie7_badzoom.html for more. Let us know how you ended up 'fixing' it. Philippe --- Philippe Wittenbergh http://l-c-n.com/ jenstrickland.com 617.492.2966 [EMAIL PROTECTED] ** __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background inheritance in response to David Hucklesby
Sorry about that. I didn't have it uploaded to a server at the time. The
URL is
http://www.stainlessband.com/index2.html
The browsers I used for testing are both Firefox (ver. 2.0.0.11) and IE7.
Note that you have no background color specified for BODY. While
most browsers default to white, you cannot depend on it.
I have it specified here:
#body {
background-color: #33;
margin-top: 0;
padding: 0;
text-align: center;
}
I think I should take out the margin and padding specifications. Shouldn't it
be the rest of the content that has those specs?
Anyway, that's what I have. Is that right? If it is, it's not showing up when I
go to the page.
~Jason
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background inheritance
David Laakso wrote: J wrote: Well, the problem I had was that I forgot to put the # sign in the body selector. So, I think the problem I was having is fixed, but now I'm having another problem. I've got two graphics I made that I wanted to stick on either side of the wrapper div to give it an effect (/you'll see when you look at the page/). I am able to get the graphic to show up on the left side of the wrapper div, but it won't show up on the other side of the div. I don't know if it's where I've placed the div that holds the graphic or what. I've tried floating it, but that didn't work and that was about all of the ideas I had, so I'm stuck. Also, I'm trying to figure out how to get rid of the white space around the edges of the page. The URL for the page is http://www.stainlessband.com/index2.html The page that I'm working on is a temporary site under construction page. I was asked by the people in the band, friends of mine, to re-design their website. FYI, the design for the original site is /not/ mine. Anyway, I appreciate you taking time to point me in the right direction. ~Jason You are doing fine. Stick with it. Think of your current page as a big box. Inside that box, on the far left there is a tall skinny box-- same on the far right. In between them is another box. In it are four horizontal boxes. Borders around the boxes, or different background-colors for each box may make this [1] more obvious (you, and your friends, may be able to use it as a start point). [1] http://www.chelseacreekstudio.com/ca/cssd/u2.html PS Hit reply all when you reply so it goes to the list, too. There are folks on this list far better at this stuff than me. They may have good advice to share with us. Thanks, David. Your boxes in boxes analogy got my mind working and I think I figured out what was wrong with the graphic not showing up, although what I came up with is making the test page inside of Dreamweaver look all twisted. But that's probably another thread of discussion altogether. What I think was wrong was that I had the div, including the closing tag, the right-side graphic was supposed to reside in placed after everything but the closing body tag. Where I put it, and where it seems to be working now, is after the start of the left-side graphic but with the closing /div after everything except the closing /div of the left-side graphic div. If that makes sense... I think I figured that problem out. Now I'm off to get rid of the white space. Thanks for the help. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background Inheritance in response to Jukka K. Korpela
Message: 8 Date: Thu, 10 Jan 2008 00:02:22 +0200 From: Jukka K. Korpela [EMAIL PROTECTED] Subject: Re: [css-d] Background inheritance To: css-d@lists.css-discuss.org Message-ID: [EMAIL PROTECTED] Content-Type: text/plain; charset=iso-8859-1 [EMAIL PROTECTED] wrote: Hello, all. I'm having an issue with the wrapper div inheriting the background color of the body, but that isn't what I want, as you can see below. Jukka wrote: Normally, it is best to post the URL of a demo page to illustrate the problem (and to mention the browser(s) used for testing), when you have a specific problem. Sorry about that. I didn't have it uploaded to a server at the time. The URL is http://www.stainlessband.com/index2.html The browsers I used for testing are both Firefox (ver. 2.0.0.11) and IE7. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fix One Issue, Develop Two More! (WAS: Help, Please - Issue Positioning a UL Source-Ordered Between Two Content Areas)
Thank you, David. What you are seeing is because it is currently linked to the original layout stylesheet, NOT the alternative one for font-scaling friendliness. The alternative one was completed (again, thank you for your example in that - it was definitely the pointer in the correct direction), and works pretty nicely. The problem existing at this point is *not* with the font-scaling stylesheet, but with the stylesheet for the original, non-scaling layout. Thus, the non-scaling stylesheet is the one that I currently have linked in. Thank you, and I hope the day is treating you well. ~~J. Hodge J Hodge wrote: David, Thank you for the response. My apologies for not replying sooner. An IE7 bug??? The links worked fine prior to changing the XHTML and CSS, and are working as functional links XHTML testbed: http://www.lostinxlation.net/sandbox3/portfolio/cybernomics3.php Thank you in advance. ~~J. Hodge I am afraid the page is still extremely brittle. Click through all the links at +2 in a compliant browser, and at text-size largest with font-sizes ignored in IE7 and IE7, and almost every page is broken or unusable. IMO, this needs to be resolved, first. And it was resolved cross-browser. I regret I do not have time to do it again. Best, ~dL __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Help, Please - Issue Positioning a UL Source-Ordered Between Two Content Areas
Good afternoon, everyone.
This problem concerns a alternate stylesheet for a
project where the
primary stylesheet is complete, but is entirely
unfriendly to font
scaling. This alternate stylesheet is meant to be
much friendlier for
font enlargement.
The example page is:
http://www.lostinxlation.net/sandbox3/portfolio/cybernomics3.php
The CSS is:
http://www.lostinxlation.net/sandbox3/css/alternate.css
The problematic element(s):
#portNav, possibly #mainContent / #portDetails
The problem:
The 1 2 3 links (which are in ul#portNav) are not
displaying roughly
20px under the images in the main content area. This
is somehow caused
by the ul existing as it's own entity separate of the
#mainContent and
#portDetails in the XHTML (necessary for proper
display in the original
/ primary layout). Completely removing sizing and
positioning ends up
with it displaying at the top of the right column,
above the
#portDetails #subNav. Attempting to write it as a
float: left seems to
locate it below the main content area, but positions
it MUCH too far
down the screen, and also positions #portDetails under
it, instead of in
the right sidebar area. Part of the positioning issue
may have to do
with the #mainContent {margin-bottom: 60px;}, however
that is in place
to maintain whitespace between the content text and
the green #mainNav
area (assigning margin-top: 60px to #mainNav did NOT
work for achieving
this, nor did assigning margin-bottom: 60px to #wrap,
or padding-bottom:
60px to #mainContent or #wrap).
In FF/NN/Op/Saf, the links are currently displaying
ABOVE the
#mainContent area, and the #portDetails are displaying
where they should
in the right sidebar area. IE7, of course, is borking
it completely and
putting both #portNav and #portDetails underneath the
#mainContent (this
may or may not be a result of my current dimensions,
since I haven't
been actively testing for IE up until this point).
How it should display:
The 1 2 3 links should display right-aligned (lined
up with the
right-side of the images), roughly 20px below the
#mainContent, and
should maintain a 60px margin at the bottom, between
them and the green
#mainNav area. The #portDetails should entirely
display in the right
column, with the top roughly aligned with the top of
the images. Both
#mainContent and #portDetails should be positioned
starting 60px below
the green #banner. Scaling the font size up should
not impact the 60px
of whitespace below the 1 2 3 links, or the 20px of
whitespace above
it, or the 60px of white space between #mainContent /
#portDetails and
#banner.
Does anybody have any ideas as to how to make this
work? So far, the
rest of it seems to be working fairly well through a
handful of font
enlargements, and this is the one sticking point that
is throwing a
monkey wrench into everything.
(Also, please note, unlike with the original
stylesheet, there is no
longer a corner-rounding javascript for which to
compensate. I removed
it as I found that no matter how nice it looked, the
myriad downsides of
using it were ultimately not worth it.)
Thank you in advance for your time and attention.
~~J. Hodge
treswife at gmail dot com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Previous Layout Issues / WAS: Cross-browser Display Issue / Problem With NOSCRIPT Validation
David, I looked at the example you sent, and I see where you are going with it. The problem in this case is that a height, or at least min-height, *has* to be specified on #container for the CurvyCorners script to work properly. As well, CurvyCorners does not respond nicely to relative dimensions, an approach that I tried in my first iteration. (This isn't a JS-list, but for the record I'm using CC for the corners because my usual stand-bys apparently conflict with the mootools library + lightbox script I'm using on a handful of pages, and CC doesn't.) I started out with only the one wrapper (effort to reduce unnecessary markup), attempting to position almost everything inside it relatively. However, I found this produced some pretty foul problems, especially on the pages with the third-tier navigation (if things were set to display correctly for the other pages, they were inevitably wonked for these pages unless I set the third-tier navigation with positioning that interfered with any sort of text scaling). The other problem was that in using only one wrapper in conjunction with the CurvyCorners script, it produced an offset that screwed everything up - if it looked correct with JS, it was wrong without, and vice versa. So I tinkered about, and found that by adding a second wrapper and positioning it relatively inside the first wrapper, that offset was eliminated both with and without javascript, it eliminated any need for a noscript (which wasn't going to work and be even remotely valid), allowed me to remove the problems with the relationship between the third-tier navigation and the main navigation, and actually reduced the number of hacks that I was looking at using (primarily for IE). (I also did some re-ordering as well, although I'm still not quite satisfied with it.) As for the Opera hacks, there's something odd with that... I'm finding that Opera 9.2 renders everything almost identical to Firefox and Netscape, but there are one or two things that it seems to render more in the manner of IE7. Safari for PC seems to mimic this as well. Annoyance. I'm going to tinker about with the example you sent and see if I can get it to play nicely with all the factors involved in this. Thank you for taking the time to put it together. If anyone else has ideas as well on how to make this layout work better with text scaling, please let me know. I'm not crazy about the overflow: auto applied to the primary areas once the text reaches a certain size... http://www.lostinxlation.net/sandbox3/portfolio/cybernomics2.html http://www.lostinxlation.net/sandbox3/css/primary.css ~~J. Hodge (treswife at gmail dot com) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Previous Layout Issues / WAS: Cross-browser Display Issue / Problem With NOSCRIPT Validation
David,
Thank you for this. I did apply it, and it does work
in conjunction with the script - my first iteration
used percentile dimensions instead of ems.
Also, on the surface, it does appear to solve the font
scaling issue. Except... it has a different source
order than the proper outline form (h1 h2 h3
etc) for use without CSS and with screen-readers, etc.
It isn't so apparent on the index page, due to the
redundancy and simplicity of the material there. What
has happened, though, in this example is that the
H1/H2 has been swapped with the H3/H4, thereby
swapping the places of the #mainContent and the
#banner. On all subsequent pages, this is problematic
as the H1/H2 is set in the #banner on all pages, and
is at the top of the source order. In doing it this
way, it puts the primary content before even the
header/banner on all subsequent pages.
I've been doing some googling, and I'm not really sure
there is going to be a silver bullet for this. The
goal was:
* A quadrant layout, with Q1=lower-left ~H33%xW33%,
Q2=upper-right ~H67%xW67%, Q3=upper-left ~H67%xW33%,
Q4=lower-right ~H33%xW67%
* Content set into those quadrants in a source ordered
fashion (Q1=header/banner, Q2=primary content,
Q3=secondary content, Q4=primary navigation)
* Least structural markup reasonably possible, while
remaining fairly semantic and with consideration for
presentational js
* Valid XHTML, and as close as possible to valid CSS
(consideration for hacks / workarounds)
* Material as accessible as reasonably possible
The quadrant layout itself is easy enough, especially
if it started with Q1=upper-left. It's doing one in
this *particular* layout, with proper source-ordering
on *all* pages, and making it play nice with js, that
is causing such headache and frustration.
I'm starting to wonder if perhaps the most reasonable
solution to this, to maintain the accessibility
aspects of font-scaling, could be to offer an
alternative stylesheet with fewer constraints.
~~J.
(treswife at gmail dot com)
J Hodge wrote:
David,
I looked at the example you sent, and I see where
you
are going with it. The problem in this case is
that a
height, or at least min-height, *has* to be
specified
on #container for the CurvyCorners script to work
properly... trimmed
~~J. Hodge
(treswife at gmail dot com)
In reference to uri ::
http://www.chelseacreekstudio.com/ca/cssd/hodge01.html
Add both js to the file, and:
#container {
border : 1px solid silver;
margin : 20px auto 0 auto; --- :: the 20px margin at
the top as shown ::
text-align : left;
width : 757px;
height : 34em; -- :: add ::
min-height : 34em; --- :: add ::
}
The rounded corners come up in ff/mac and opera/mac on
a local file and
hold with font-scalling. You'll need to test in on
your server with a PC
withe font-scaling in IE6 and IE and resolve any
other issues that may
remain.
Best
PS Still no need to hack Opera on this end.
-- http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d List
wiki/FAQ -- http://css-discuss.incutio.com/ List
policies -- http://css-discuss.org/policies.html
Supported by evolt.org --
http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Cross-browser Display Issue / Problem With NOSCRIPT Validation
Good evening to everyone. Testbed: http://www.lostinxlation.net/sandbox3/portfolio/cybernomics1.html Testbed CSS: http://www.lostinxlation.net/sandbox3/css/primary.css I'm trying to get this site ready for the final cosmetic touches, and so far it is displaying correctly in the majority of modern browsers WITH JavaScript enabled. Unfortunately, when JavaScript is disabled, almost all browsers render ul#portNav incorrectly. I've had varied results from toggling the positioning between relative and absolute (with the necessary changes to top, left, etc), but nothing that has yielded cross-browser consistency. The goal is to have the ul#portNav display as it does in browsers using JavaScript, even when JavaScript is disabled. Any ideas? Secondly, Opera 9.x has some funky issues in rendering the ul#portNav as well, beyond the above issue. I found that out of FF/NN/IE/Saf/Op, it was the only one that used the primary.css (prior to adding hacks) and rendered that ul as being positioned at the *top* of the container. After adding an Opera hack to the primary stylesheet, I found that it rendered even more oddly once the scripts were turned off, so I added a noscript filter to correct the issue for Opera in the head of the affected pages. Unfortunately, a noscript in the head does not validate for either strict or transitional. Does anybody have any idea how to approach this in a way that will validate? Lastly, before I go in and start adjusting all the fonts to relative sizing, I'd love input from anybody with an eye for typesetting on how to make the right sidebar and the left sidebar look more harmonious. I've been looking at this for so long trying to get everything else sorted out that my eyes already feel like they are about to bleed Thank you in advance for your time and attention. I hope everyone is having a lovely evening. Time for me to go wrangle sick lilliputians... ~~J. (treswife at gmail dot com) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Cross-browser Display Issue / Problem With NOSCRIPT Validation
Thank you, David. I am aware that scaling is problematic, and was thinking the best approach would be to write the CSS so that the content areas become scrollable once the text size is increased. However, upon further consideration, it occurs to me that that it might also be beneficial to scale up the dimensions of the overall layout as well... the particular layout I'm using was one I picked for some practice in source ordering and the use of relative positioning, and it has certainly posed its own little challenges. =0) Thoughts on the relative merits of scrollable divs and larger dimensions, in this particular context? ~~J. (treswife at gmail dot com) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Trying to put a simple two columns into an existing one column div
Here is the page: http://ggshows.com/DisplayPage.asp?page=SimpleTwoColumns http://ggshows.com/DisplayPage.asp?page=SimpleTwoColumns Here is the css: outbind://23/www.ggshows.com/css/viennaHolly.css www.ggshows.com/css/viennaHolly.css Here is the content of pgSimpleTwoColumns.htm: outbind://23/www.ggshows.com/pgSimpleTwoColumns.htm www.ggshows.com/pgSimpleTwoColumns.htm DisplayPage.asp is an ASP file that accepts a named page, will add pg to the front of the name, and .htm to the end of the page, then display that content in the space to the right of the navigation area on the left. What I'm trying to accomplish is to put a two column layout into pgSimpleTwoColumns.htm and have those two columns displayed in the content area. I'm using two divs named articleLeftColumn and articleRightColumn, but they don't seem to be doing anything for me. I tried changing the color of the h1 title, but that did not work. So, I'm thinking that the CSS is not being found by this included file, but I'm using this technique of inserting pages into this content area for this whole web site, so I'm confused as to what I'm missing here. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] typical cross-browser trouble
Hello, I wonder if someone could help me understand how to solve this kind of issue: http://www.jenstrickland.com/genericom/ What am I doing wrong with my tabs? The height varies from safari to firefox on the mac, and on win ie, it tends to be similar to firefox on the mac. Thanks! jen __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Request: Help with IE6 issues with :hover gallery
Good afternoon. My apologies for missing any prior replies to my query about 3 weeks ago. I've been in the hospital due to post-surgical complications. The project I am working on at the moment involves a photo gallery of artwork. I have managed to get it working the way I wanted, writing the CSS based from two different galleries that both allege to work with IE6+. It works fine in IE7, FF2, Opera, and SafariPC, but fails to yield a large image on hover in IE6. Can somebody please review and let me know what I am doing wrong? The live example page is: http://www.lostinxlation.net/sandbox2/gallery1a.html The live example CSS is: http://www.lostinxlation.net/sandbox2/css/primary.css (gallery CSS near the bottom) Thank you in advance for your time and attention! ~~J. treswife -at- gmail -dot- com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Form buttons and background image in IE7
Hi!
Was hoping you could help me out here. I am implementing a form that
uses a background image on the submit-buttons. So far, so good.
However, in IE7, the background-images will not fill the button, and
always leave a 1px border with the background-color, inside the
borders specified for the button. This in turn ruins my carefully
crafted gradients and stylish borders.
Seen this on two computers, one running Vista, one running XP,
rendered like intended in FF.
--8--
!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
meta content=text/html; charset=UTF-8
http-equiv=Content-Type /
style media=all type=text/css
input.submit {
background-color:#f00;
background-image:url('./images/button_submit_background.gif');
background-position:top left;
background-repeat:repeat-x;
border-top:1px solid #f7f7f8;
border-left:1px solid #e9ebef;
border-bottom:1px solid #7c7e82;
border-right:1px solid #949597;
}
/style
titleA page with a Dude-button/title
/head
body
form action=# method=post
p
input type=submit class=submit name=dude
value=Dude! /
/p
/form
/body
/html
--8--
--
Pål Eivind Jacobsen Nes
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Help, Please: Another CSS Image Gallery, Positioning Issues
Thank you to Michael McEwen, Andrea Black, and Fora. I managed to get things positioned roughly the way I would like and displaying reasonably correctly in Firefox 2, IE7, Opera 9, and Safari for PC. However, as Andrea and myself have both noted, it does not seem to be displaying correctly in IE6. Specifically, mousing over the thumbnails does not produce anything in the full image area or the description area, unlike in the other browsers. Current test code is located at: http://www.lostinxlation.net/sandbox2/gallery1a.html And current test CSS is located at: http://www.lostinxlation.net/sandbox2/css/primary.css (look near the bottom of the file for the styles applicable to the gallery) And, again, this is based from Dynamic Drive's example: http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/ which states that it works in IE6+. Any thoughts on what may be causing the lack of display in IE6? Is this an issue of needing positioning overrides for IE6? Thank you to all who have assisted so far, and in advance to everyone for your time and attention. ~~J. treswife -at- gmail -dot- com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Help, Please: Another CSS Image Gallery, Positioning Issues
Good evening to everyone. I am working on implementing another CSS photo gallery, this time utilizing the one found on Dynamic Drive at the following URL: http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/ My live test is at: http://www.lostinxlation.net/sandbox2/ddrive.html The applicable styles are at: http://www.lostinxlation.net/sandbox2/ddrive.css http://www.lostinxlation.net/sandbox2/css/primary.css As it sits, the full size image is properly located when displayed. However, the *thumbnails* need to be positioned on the right side, to mimic a right sidebar. When I attempt to position them using a margin-left, they display in a stack, even if using display: inline. Attempts at absolute positioning display them piled on top of one another. Relative positioning attempts displace the position of the full image. If anybody has any ideas, they would be greatly appreciated. Thank you in advance for your time and attention. ~~J. treswife -at- gmail -dot- com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Positioning Issues with CSSPlay Simple Photo Gallery
Arian, Thank you! Your solution worked like a charm. My apologies for not replying sooner; bit insane at the moment trying to get the decks cleared before an anticipated surgery. Again, thank you very much! ~~J. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 and Bughunting, Please
Good afternoon! It would be fabulous if I could get a site check on my current project: Test site - http://www.lostinxlation.net/sandbox1/index.html Test CSS - http://www.lostinxlation.net/sandbox1/primary.css http://www.lostinxlation.net/sandbox1/print.css http://www.lostinxlation.net/sandbox1/mobile.html I'm looking specifically for issues in common Mac and *nix browsers, IE6 (the standalone version I have seems to be rendering worse than IE5.5, which doesn't seem correct), and on handheld / mobile devices. The only thing that should not be functioning is the Submit button on the form page, and the photogallery may not work as expected in Safari and Opera, due to the handling of :hover (still need to tweak that). Also, does anybody have any ideas on how to feed in certain styles in a way that they will be rendered if, and only if, javascript is not functioning? The specific issue I have in mind is that I am using Ruzee's RoundedCorners for the dropshadowed areas, and implementing it requires removing background-color from the applicable selectors and instead including it in script-specific styles, leaving no background-color for those areas when javascript is not working / turned off. Thank you in advance for the time and attention. ~~J. treswife at gmail dot com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Positioning Issues with CSSPlay Simple Photo Gallery
Good morning. I'm attempting to implement Stu Nicholl's (CSSPlay) Simple Photo Gallery in my current project. Unfortunately, it does not seem to be working correctly and I have not been able to determine the exact reason, nor the fix. This is the working live example from CSSPlay: http://www.cssplay.co.uk/menu/photo_album.html This is my live test: http://www.lostinxlation.net/sandbox1/gallery.html This is my live test css: http://www.lostinxlation.net/sandbox1/testcss.css If you try using it in my test version, you'll see that the large image lines up in the box where it should be when you click on 1. When you click on 10 it aligns properly horizontally, but pushes downwards. When you click on any other number, the image pushes towards the right, and down when selecting any number in the bottom row. If anybody can shed some light on the situation, I would really appreciate it. Thank you in advance for your time and attention. ~~J. [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 replacement with hover effect, not in a nav list
hi - i keep coming across this issue, and i can't seem to find anything in a google search ... i want to replace text with an image, and have the image change its background position on hover, but it's not part of a navlist - it's either placed under a p or floated next to a p. somehow, my brain doesn't know how to approach this if it's not part of a navlist. i keep thinking that if i wrap the hyperlink in an a and move it off the screen, then apply a background image to, say, a p, how does the background position of one element change when you hover over the other? or, if i place the background image on the a, in order to take advantage of the hover property to move the background position, do i then have to use a span to contain the text and move it off the screen? i usually avoid the IR method involving spans, but maybe this is just the way to do this technique, i don't know. i am probably thinking about it all wrong, or making it more complicated than it really is... can someone point me to a link, if you have one, that might address this specific issue? all i've been able to find is regarding navigation lists. thanks in advance! jen __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 replacement with hover effect, not in a nav list
ok, i answered my own question. i used this approach: pa href=somelink.html id=somenamespanText to be replaced/span/a/p I then gave the a a background image, and on hover, adjusted the background position to show the hover state. And finished by giving the span a display:block; and text-indent:-px; granted, i haven't yet checked in the evil IE twins, 6 and 7, but all is well in firefox and safari. i would think that technique is not really so far-out and crazy that it wouldn't work. thanks! jen Original message Date: Sun, 24 Jun 2007 19:58:22 -0600 From: J Siegfried [EMAIL PROTECTED] Subject: [css-d] Image replacement with hover effect, not in a nav list To: css-d@lists.css-discuss.org Message-ID: [EMAIL PROTECTED] Content-Type: text/plain; charset=ISO-8859-1; format=flowed hi - i keep coming across this issue, and i can't seem to find anything in a google search ... i want to replace text with an image, and have the image change its background position on hover, but it's not part of a navlist - it's either placed under a p or floated next to a p. somehow, my brain doesn't know how to approach this if it's not part of a navlist. i keep thinking that if i wrap the hyperlink in an a and move it off the screen, then apply a background image to, say, a p, how does the background position of one element change when you hover over the other? or, if i place the background image on the a, in order to take advantage of the hover property to move the background position, do i then have to use a span to contain the text and move it off the screen? i usually avoid the IR method involving spans, but maybe this is just the way to do this technique, i don't know. i am probably thinking about it all wrong, or making it more complicated than it really is... can someone point me to a link, if you have one, that might address this specific issue? all i've been able to find is regarding navigation lists. thanks in advance! jen __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Multiple elements changing on hover
Hi- Hoping someone can help with a design issue that has me a bit stymied. The design calls for wide boxes containing a little flash preview, a title (h3), some description and a bunch of details. The entire box should be a link. On hover, the background of the entire box should change AND the h3 should also change colors. I assumed this would not be an issue...but I must be specifying it wrong because the h3 is not changing colors on box hover. Part of it may be that I'm using yui-grids, and while that's been great in many ways, it does mean a whole 'nother level of specificity in the styles that occasionally taxes my brain. I've been round and round with the CSS and finally in frustration applied a hover state directly to the h3, which of course does not work in IE6, and only works if the mouse passes over the h3, which is not the design intent. I've intentionally stripped out the design and much of the detail in my posted example to keep it concise, and put all applicable styles into the head. http://www.redtaildesign.com/tracks/ Any thoughts on how to make the h3 change color on box hover? I feel like I'm missing something really basic but I've looked at it too long. Jona __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Page Check -
Hi All, Can I please get a page check on www.oneyed.com/mt/vendors/ideagen I have checked it with FF2 / IE7, but don't have access to any of the other browsers. If there are glaring mistakes in my CSS, please let me know, because if this looks okay across browser land it will become the template for that site. Kind Regards, Kevin J. Pledger __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 Flowing around images
Hi Georg, Yes in your example 1 is that I am looking for, but instead of being on the left have it on the right. Which means by looking at your example and the code I need to create a new p class and a img class for the paragraphs on which I want the images to appear. Kind Regards, Kevin . -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Gunlaug Sørtun Sent: Monday, March 19, 2007 16:31 PM To: Kevin J Pledger Cc: 'Css-D Lists' Subject: Re: [css-d] Text Flowing around images Kevin J Pledger wrote: I am presently working on this site for my company and would like to place some images within the text and have it flow or even use left or right positioning for the images. Link www.oneyed.com/mt/vendors/ideagen/index.html I know Georg, did paste have a link in one of his emails about this topic, but after searching, I may have deleted that email. Is it this line-up method you're looking for... http://www.gunlaug.no/contents/wd_example_01_02.html ...or do you just want the text to flow normally around a small floated image like the basic example (1:) in my page? Both are achieved by declaring 'float: left' or 'float: right' on the image(s). An eventual link is then just wrapped around the floated image(s). regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 IE7 information -- 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 Flowing around images
Georg,
Thank you for your help and very candid comments. As with anything old
habits die hard and takes time to change.
Regards
Kevin
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Gunlaug Sørtun
Sent: Monday, March 19, 2007 21:25 PM
To: Kevin J Pledger
Cc: 'Css-D Lists'
Subject: Re: [css-d] Text Flowing around images
Kevin J Pledger wrote:
Hi Georg,
Yes in your example 1 is that I am looking for, but instead of being
on the left have it on the right.
That's a basic right-floated image, like this...
HTML:
img class=flr .. /
CSS:
img.flr {
float: right;
margin: 0 0 3px 3px;
}
...or something in that order.
Which means by looking at your example and the code I need to create a
new p class and a img class for the paragraphs on which I want the
images to appear.
You only need a class for the image(s). The relevant paragraph(s) will wrap
around a floating image by default.
It is only if you want something that looks like my example 4 that you also
need to address the relevant paragraph.
Now, since you're going for 'table-less', you should also get rid of the old
habits of littering your source-code with font tags and nbsp; spacing.
There's no real progress in replacing tables with divs and then plug the
content inside those divs using the same - obsolete - presentational mark
up. I don't think 'Microsoft FrontPage 6.0' will get you anywhere, so it's
probably time to bury it.
What you have now may do as a first step, but you should start using a
Strict doctype, proper mark up and practices that goes with it, ASAP.
Then you can - in time - learn how to design and rearrange whatever you like
with CSS, without being hampered by unyielding source-code.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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
IE7 information -- 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] AltText using CSS ?
Hi All, Just back from overseas working, which no internet access ... Many Thanks to Georg, Jukka, Roger and Joanne, Whom replied to my question on Alt Text using CSS. You all certainly give me a lot to think about, and are not sure now whether to go that route. This list is a wonderful resource, but to a newbie in CSS its still very daunting in trying to understand it all ... Regards, Kevin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Text Flowing around images
Hi All, I have used in the past when using tables, placed images in the same table and have text flowing around it and used the images as a hyperlink to another larger image. I used this technique to mainly breakup along page of text ... I am presently working on this site for my company and would like to place some images within the text and have it flow or even use left or right positioning for the images. Link www.oneyed.com/mt/vendors/ideagen/index.html I know Georg, did paste have a link in one of his emails about this topic, but after searching, I may have deleted that email. Thoughts / ideas appreciated. Kind Regards, Kevin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] How do I force opposed floats (left and right) to bottom align.
Hi. I'm trying to get two bits of text to sit on opposite sides (left/right) of a header, and various sources suggest using the opposing floats method. The problem that I have with that is that the opposing floats top align (which becomes apparent when the text sizes differ. In order to show what I'm talking about, I've set up example code from the aListApart website example here: www.sourceworks.co.uk/aListApartSplittingTheDifference and the example code from the peach pit website exandable rows example (by Dan Cederholm) here: www.sourceworks.co.uk/peachpitExpandableRows In both cases, the smaller text (on the right) is top aligned, whereas what I'm trying to achieve is to bottom align the text on the right. All of the examples on http://www.positioniseverything.net/easyclearing.html are top-aligned too, so that doesn't appear to help. All suggestions gratefully received... Jaime __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] How do I force opposed floats (left and right) to bottom align.
On 3/13/07, j t [EMAIL PROTECTED] wrote: Hi. I'm trying to get two bits of text to sit on opposite sides (left/right) of a header, and various sources suggest using the opposing floats method. The problem that I have with that is that the opposing floats top align (which becomes apparent when the text sizes differ. I found another suggestion on this page: http://www.communitymx.com/content/article.cfm?cid=529B0 (written by John Gallant and Holly Bergevin) which talks about using absolute positioning. I've set up an example here: http://www.sourceworks.co.uk/communityMxExample This is great, apart from how the text disappears off the top of the page when I manually increase its size. This (I guess) is due to the containing box not expanding to enclose its contents (which in turn is because the contents use absolute positioning). Just in case my first post didn't clearly explain what I'm after, here's an ascii-art picture (it should make sense in a monospace font): \ / \/ \/ That's just two different-sized v's sitting on opposite ends of a line. Jaime __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] How do I force opposed floats (left and right) to bottom align.
On 3/13/07, Gunlaug Sørtun [EMAIL PROTECTED] wrote: http://www.sourceworks.co.uk/communityMxExample This is great, apart from how the text disappears off the top of the page when I manually increase its size. This (I guess) is due to the containing box not expanding to enclose its contents (which in turn is because the contents use absolute positioning). You can make it work fairly well by using one float and one absolute positioned element inside a 100% wide float. Your example reworked... http://www.gunlaug.no/tos/alien/test_07_3660.html That's great - thank you! I still wonder, however, whether it's possible to do some kind of bottom alignment when they're both floats, because then I'm guaranteed that the two boxes will never overlap. Once again, thanks for your help. Jaime __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Vertical Scrollbar in IE ... Causes horizontal scroll bar
Hi Francky,
Thanks for your help. Unfortunately, I'm blocked from seeing your website and
have no public server myself to post to. However, knowing that this is not
common and probably not a browser problem is a big help. Now I can assume that
there is something in my code that is causing the problem. I'll take your
advice and look for padding issues.
Thanks again,
Mike
-Original Message-
From: francky [mailto:[EMAIL PROTECTED]
Sent: Friday, March 09, 2007 3:22 PM
To: Beauchamp Michael J CONT NPRI
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Vertical Scrollbar in IE ... Causes horizontal scrollbar
Beauchamp Michael J CONT NPRI wrote:
Hi,
This is probably a FAQ but I can't find the answer...
I have a problem in IE. I have body overflow set to auto. The width of the
document is all percentage and never scrolls horizontally. However, there is
usually a vertical scroll. The problem is that in IE, when the vertical
scrollbar appears, the width of the page stays the same (in terms on actual
screen width in pixels), creating a need for horizontal scrolling. It's as
if IE doesn't notice that the scrollbars are using up some of the horizontal
space so it never resizes to compensate.
Can anyone tell me how to solve this? At the moment I have overflow-y:scroll
set so the scrollbar is just always there. I guess it works... sort of.
[unfortunately, I can't post or link to the code.]
Thanks in advance for any help or pointers to help.
Hi Michael,
Strange ... normally IE is *always* making space for the vertical scrollbar (up
to IE6 under WinXP; in IE6 a transparent vertical scrollbar, if not needed).
Is it IE7 and/or Vista which is giving your results?
I made 2 testpages, a short and a long one, both with body { width:
100%; overflow: auto; }, and no horizontal scrollbar is appearing in IE.
* Short page
http://home.tiscali.nl/developerscorner/css-discuss/test-IEoverflow-scrollbars-short.htm
* Long page
http://home.tiscali.nl/developerscorner/css-discuss/test-IEoverflow-scrollbars-long.htm
Is the long page showing the hor. scrollbar at your side? [1] If not, maybe
there is in the css of the content of the longer page something like an element
with a width in % and a padding-left and/or padding-right as well?
Could be also some IE expanding bug - hard to say without code...
Maybe you can isolate the problem in a minimal error page [2] [3], replace
the remaining content with Lorem's and 1-color images, and send us a link to
that?
Greetings,
francky
[1] Not yet results of Browsershots at this moment
http://browsershots.org/website/http://home.tiscali.nl/developerscorner/css-discuss/test-IEoverflow-scrollbars-long.htm#success
[2] The D-Zero Method
http://home.tiscali.nl/developerscorner/golden-rules-of-css.htm#r13
[3] PIE: Mystery Bug
http://www.positioniseverything.net/articles/mys-bug.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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 Scrollbar in IE ... Causes horizontal scrollbar
Hi, This is probably a FAQ but I can't find the answer... I have a problem in IE. I have body overflow set to auto. The width of the document is all percentage and never scrolls horizontally. However, there is usually a vertical scroll. The problem is that in IE, when the vertical scrollbar appears, the width of the page stays the same (in terms on actual screen width in pixels), creating a need for horizontal scrolling. It's as if IE doesn't notice that the scrollbars are using up some of the horizontal space so it never resizes to compensate. Can anyone tell me how to solve this? At the moment I have overflow-y:scroll set so the scrollbar is just always there. I guess it works... sort of. [unfortunately, I can't post or link to the code.] Thanks in advance for any help or pointers to help. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 :after workaround
All,
I' new to this list, but every week I get further into css. Really this
is because I need to publisht the same content to multiple places.
Anyhow - I recently added putting images before all the titles on my
site nerds-central.blogspot.com. I then found that no version of IE
supports the :before (or :after) pseudo class :-(
I have created a little work around for my issue - which can be seen on
nerds-central, the code is this:
CODE
/* This script injects Nerd images before h1,h2 and h3 in IE where
the :before pseudo class
* is for some odd reason not supported.
*/
/** Is this browser IE?
*/
function IsIE()
{
return (navigator.appVersion.indexOf(MSIE)!=-1
navigator.appVersion.indexOf(Opera)==-1);
}
function PutInNerds()
{
preputNerds(document.body.getElementsByTagName('h1'));
preputNerds(document.body.getElementsByTagName('h2'));
preputNerds(document.body.getElementsByTagName('h3'));
}
function preputNerds(tags)
{
var l=tags.length;
for(var i=0;il;++i)
{
var tag=tags[i];
var html='img
src=http://www.nerds-central.com/BlogImages/miscBitMaps/WebNerd24.png;
style=padding: 0px; margin: 0px; padding-right: 1px/img' +
tag.innerHTML;
tag.innerHTML=html;
}
}
function SetNerdsOnLoad()
{
if(IsIE()) PutInNerds();
}
END CODE
My question is - does anyone have a more generic workaround, is there
are discussion thread somewhere about this. Otherwise, should I pursue
this technique to make it more generic.
Cheers
AJ
==
Hard Core How-To's, Coding Techniques ETC.
--- http://nerds-central.blogspot.com! ---
Nerds Central welcomes nerds :-)
==
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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 :before and :after work around
All,
I' new to this list, but every week I get further into css. Really this
is because I need to publisht the same content to multiple places.
Anyhow - I recently added putting images before all the titles on my
site nerds-central.blogspot.com. I then found that no version of IE
supports the :before (or :after) pseudo class :-(
I have created a little work around for my issue - which can be seen on
nerds-central, the code is this:
CODE
/* This script injects Nerd images before h1,h2 and h3 in IE where
the :before pseudo class
* is for some odd reason not supported.
*/
/** Is this browser IE?
*/
function IsIE()
{
return (navigator.appVersion.indexOf(MSIE)!=-1
navigator.appVersion.indexOf(Opera)==-1);
}
function PutInNerds()
{
preputNerds(document.body.getElementsByTagName('h1'));
preputNerds(document.body.getElementsByTagName('h2'));
preputNerds(document.body.getElementsByTagName('h3'));
}
function preputNerds(tags)
{
var l=tags.length;
for(var i=0;il;++i)
{
var tag=tags[i];
var html='img
src=http://www.nerds-central.com/BlogImages/miscBitMaps/WebNerd24.png;
style=padding: 0px; margin: 0px; padding-right: 1px/img' +
tag.innerHTML;
tag.innerHTML=html;
}
}
function SetNerdsOnLoad()
{
if(IsIE()) PutInNerds();
}
END CODE
My question is - does anyone have a more generic workaround, is there
are discussion thread somewhere about this. Otherwise, should I pursue
this technique to make it more generic.
Cheers
AJ
--
==
Hard Core How-To's, Coding Techniques ETC.
--- http://nerds-central.blogspot.com! ---
Nerds Central welcomes nerds :-)
==
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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 :before workaround
All,
I' new to this list, but every week I get further into css. Really this
is because I need to publisht the same content to multiple places.
Anyhow - I recently added putting images before all the titles on my
site nerds-central.blogspot.com. I then found that no version of IE
supports the :before (or :after) pseudo class :-(
I have created a little work around for my issue - which can be seen on
nerds-central, the code is this:
CODE
/* This script injects Nerd images before h1,h2 and h3 in IE where
the :before pseudo class
* is for some odd reason not supported.
*/
/** Is this browser IE?
*/
function IsIE()
{
return (navigator.appVersion.indexOf(MSIE)!=-1
navigator.appVersion.indexOf(Opera)==-1);
}
function PutInNerds()
{
preputNerds(document.body.getElementsByTagName('h1'));
preputNerds(document.body.getElementsByTagName('h2'));
preputNerds(document.body.getElementsByTagName('h3'));
}
function preputNerds(tags)
{
var l=tags.length;
for(var i=0;il;++i)
{
var tag=tags[i];
var html='img
src=http://www.nerds-central.com/BlogImages/miscBitMaps/WebNerd24.png;
style=padding: 0px; margin: 0px; padding-right: 1px/img' +
tag.innerHTML;
tag.innerHTML=html;
}
}
function SetNerdsOnLoad()
{
if(IsIE()) PutInNerds();
}
END CODE
My question is - does anyone have a more generic workaround, is there
are discussion thread somewhere about this. Otherwise, should I pursue
this technique to make it more generic.
Cheers
AJ
--
==
Hard Core How-To's, Coding Techniques ETC.
--- http://nerds-central.blogspot.com! ---
Nerds Central welcomes nerds :-)
==
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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 testing with no mac
It's no guarantee, but if the site works in another Webkit-based browser (like, say, Konqueror running on Cygwin/X), then it probably works in Safari. On 1/31/07, Ido Dekkers [EMAIL PROTECTED] wrote: is there a way ( some kind of emulator) to check if the site is safari compatible if i have no mac ? Thanks Ido __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/ -- Mark J. Reed [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] calling an image from within the CSS
Hi All,
One the page in the link, www.oneyed.com/mt . I want to be able to make that
image as background in #banner within the CSS file so its the same on all
pages.
After looking at various pages and trying to understand the different types
of coding, I put in this line ( background : url(images/mt2.jpg) #fff; ) and
as I thought it wasnt visible. When the #fff is removed the image appears,
but breaks the page. I want to be able to retain the white background as the
banner covers the width of the page, so the image will have to be centered.
In html you would call it as in this case img border=0
src=images/mt2.jpg width=795 height=59 but I have no idea on how to
translate that into CSS other than what I have tried above, but I am
guessing I have missed some elements to make it visible or with my present
CSS cant do this.
#banner {
background: #fff;
height:75px;
border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
border-bottom:1px solid #000;
voice-family: \}\;
voice-family: inherit;
height:74px;
}
htmlbody #banner {
height:74px;
}
Kind Regards,
Kevin J. Pledger
_
CONFIDENTIAL CAUTION: The information transmitted is intended only for the
addressee and may contain privileged and/or confidential material. Any
disclosure,
distribution or copying of this message is strictly prohibited. If you are
not the
intended recipient, kindly contact the sender and delete the message. Thank
you.
_
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] calling an image from within the CSS
Rick den Haan wrote: The background CSS property is a culmination of several individual properties. Does it work if you set those separately? I.e.: background-image: url(images/mt2.jpg); background-color: #fff; background-position: top center; background-repeat: no-repeat; If you want to put it in one property, browsers tend to be specific about the order of things if you use more than one value. From the CSS spec: background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] See http://www.w3.org/TR/CSS201/colors.html#propdef-background for more information. Rick, I tried the above and it still wont display. Tried the link you give and get *The URL path in your request doesn't match anything we have available.* Will keep looking and experimenting. Regards Kevin. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 IE7 information -- 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] calling an image from within the CSS
Nick Mavros wrote ... I think this is the correct structure background: #fff url(images/mt2.jpg) no-repeat top left; The #fff is the background color If you don't place the no-repeat then the img will repeat in both axes. You can also use repeat-x or repeat-y if you want it to repeat in an axis. Top (you can also use bottom or middle) left (or right) is for the placement of the image. You can use pixels instead of words: background: #fff url(images/mt2.jpg) no-repeat 50px 10px; In this case will place the image 50px from the left of the container and 10px from the top. Nick, Tried this and white background disappeared and still no image. Very frustrating .. Will keep on reading and trying. Thanks for your input. One always keeps learning.. Regards, Kevin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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 IE7 information -- 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] calling an image from within the CSS
-Original Message-
From: Nick Mavros [mailto:[EMAIL PROTECTED]
Sent: Friday, January 19, 2007 18:40 PM
To: Kevin J Pledger
Cc: 'Css-D Lists'
Subject: Re: [css-d] calling an image from within the CSS
Kevin J Pledger wrote:
Nick,
Tried this and white background disappeared and still no image.
Very frustrating ..
Will keep on reading and trying.
Thanks for your input. One always keeps learning..
Regards,
Kevin
Nick Mavros wrote:
Maybe you got the url wrong.
The url you are using url(images/mt2.jpg) it means that the image mt2.jpg is
located in a folder images inside the folder where the html file stands.
Let me explain more:
lets say your file is index.html you have to use the following structure:
In the base folder is the index.html and the images folder. And in the
images folder is the mt2.jpg.
[base folder]
index.html
[folder images]
mt2.img
-
Nick,
My directory structure is this under mt/
scripts/css/
images/mt2.jpg
index.htm
So I am pretty sure that with url(images/mt2.jpg) is correct. I also tried
url(/url/images/mt2.jpg) but still the same result no image showing up.
My CSS for #banner is this now based on your advice and what I read on wc3.
My ordering could be wrong also..
#banner {
background-color: #fff;
background-image: url(images/mt2.jpg);
background-repeat: no-repeat;
background-position: top center;
height:75px;
border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
border-bottom:1px solid #000;
voice-family: \}\;
voice-family: inherit;
height:74px;
}
htmlbody #banner {
height:74px;
}
Back to the drawing board and more reading.
Thanks again.
Kevin.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] calling an image from within the CSS
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Rick den Haan
Sent: Friday, January 19, 2007 19:07 PM
To: 'Css-D Lists'
Subject: Re: [css-d] calling an image from within the CSS
Kevin J Pledger wrote:
Rick den Haan wrote:
See http://www.w3.org/TR/CSS201/colors.html#propdef-background for
more information.
Tried the link you give and get *The URL path in your request doesn't
match anything we have available.*
My bad. http://www.w3.org/TR/CSS21/colors.html#propdef-background that
0 shouldn't have been there
Nick Mavros wrote:
Maybe you got the url wrong.
The url you are using url(images/mt2.jpg) it means that the image
mt2.jpg is located in a folder images inside the folder where the
html file stands.
Rick den Hann wrote:
Actually, the url is relative from the location of the *css* file, not the
HTML.
So, if your structure is like this:
[/]
- index.html
- [/style]
- - style.css
- [/images]
- - mt2.jpg
you should use url(../images/mt2.jpg) in your style.css file. Maybe that's
the problem? I always put single quotes around the url just in case, so
url('../images/mt2.jpg'). Does that work?
Hi Rick,
I had tried that already but the minute I try that the code goes from this:
#banner {
background-color: #fff;
background-image: url(images/mt2.jpg);
background-repeat: no-repeat;
background-position: top center;
height:75px;
border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
border-bottom:1px solid #000;
voice-family: \}\;
voice-family: inherit;
height:74px;
}
htmlbody #banner {
height:74px;
}
To this, I suspect the inclusion of the .. Causes some major heart attack to
the code.
#banner {
border:1px solid #000; background-color: #fff;
background-image: url('images/mt2.jpg');
background-repeat: no-repeat;
height:75px;
voice-family: \}\;
voice-family: inherit;
height:74px; background-position-y:center
}
htmlbody #banner {
height:74px;
}
Very Frustrating
I went through this when I tried simple javascripting ... Look and look for
the error can see it, walk away come back you see that you left out a ' in
the code
Thanks again ..
Kevin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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
IE7 information -- 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] calling an image from within the CSS
Hi Rick,
I worked it out in between me sending and receiving your reply.
I put in the full url that I was testing from and it pulled in the image. It
was then I realised what you meant and when I put
url('../../images/mt2.jpg') it worked. Don't know why I didn't think of that
in the first place.
My thanks to you and Nick for your patience.
Kind Regards,
Kevin.
_
From: Rick den Haan [mailto:[EMAIL PROTECTED]
Sent: Friday, January 19, 2007 19:37 PM
To: Kevin J Pledger
Cc: 'Css-D Lists'
Subject: Re: [css-d] calling an image from within the CSS
Kevin J Pledger wrote:
I had tried that already but the minute I try that the code goes from this:
#banner {
background-color: #fff;
background-image: url(images/mt2.jpg);
background-repeat: no-repeat;
background-position: top center;
height:75px;
border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
border-bottom:1px solid #000;
voice-family: \}\;
voice-family: inherit;
height:74px;
}
htmlbody #banner {
height:74px;
}
To this, I suspect the inclusion of the .. Causes some major heart attack to
the code.
#banner {
border:1px solid #000; background-color: #fff;
background-image: url('images/mt2.jpg');
background-repeat: no-repeat;
height:75px;
voice-family: \}\;
voice-family: inherit;
height:74px; background-position-y:center
}
htmlbody #banner {
height:74px;
}
Where did you leave the ..? From your previous post, I understand your file
structure is like this:
mt/index.html
mt/scripts/css/???.css
mt/images/mt2.jpg
If I got that right, you need to go two levels back up from the CSS file. So
change
background-image: url('images/mt2.jpg');
to
background-image: url('../../images/mt2.jpg');
Does that help?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Bizarre * selector rules processing
What were you thinking? I dunno - Javascript, Java, C++...? Even C supports the single-line // comment syntax these days. . So expecting CSS to support it is hardly idiotic. Just wrong. :) On 1/18/07, Barney Carroll [EMAIL PROTECTED] wrote: Martin Heiden wrote: What happens when you use css comments: That's a brilliant idea. Only an idiot would fail to use it. '//' - what was I thinking? Regards, Barney __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/ -- Mark J. Reed [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] How to construct a 3 Column layout to a centered Page Layout
Hi Georg, Thank you very much for your reply. I guess its more experimentation along with frustration till eventually it will fall into place. I have read your own website extensively and come away with a sore head, just seeing how much you can do with CSS. Kind Regards, Kevin J. Pledger -Original Message- From: Gunlaug Sørtun [mailto:[EMAIL PROTECTED] Sent: Sunday, January 14, 2007 17:53 PM To: Kevin J Pledger Cc: Css-D Lists Subject: Re: [css-d] How to construct a 3 Column layout to a centered Page Layout Kevin J Pledger wrote: I have read extensively articles, looked at code and looked at the websites others are building who are on this list. I am used to doing everything in tables, but CSS looks more interesting but so much to learn for a newbie. CSS has a pretty steep learning curve compared to HTML tables. Guess I am trying to walk before I crawl in the CSS world. Guess that's a natural human reaction. Happens all the time :-) It is impossible to make www.oneyed.com/mt look like www.oneyed.com/mt/LayoutGala07.html without changing both the CSS and source-code radically. Two different methods are used. For a start: the former is based on 'absolute positioning' and the the latter is based on 'float'. 'A:P' layout-methods pretty much excludes 'float' as layout-methods in such a case. How can I using the present code specify a minimum height for the left / right content area's. The minimum height would be 100% of the tallest column, for all columns. That's easy with CSS in all browsers that supports 'CSS tables'... http://www.w3.org/TR/CSS21/tables.html ...but someone forgot to tell MSIE about that part of CSS - so we have to fake it one way or another... http://www.gunlaug.no/tos/moa_11.html http://www.positioniseverything.net/articles/onetruelayout/ http://www.alistapart.com/articles/fauxcolumns/ I still don't quite understand the difference between wrapper / container and the use of float in the code. I try to experiment and get frustrated. The built-in flexibility/complexity of CSS based layouts compared to 'HTML table', may be frustrating. HTML tables behave and appears one way - with only a few variations, while CSS can make most element-combinations behave and appear in a multitude of ways - and can also simulate HTML tables to perfection when needed. The only real limitation with CSS design is lack of support in browsers, where especially IE (all versions) is weak. In www.oneyed.com/mt/LayoutGala07.html #wrapper and #container are just IDs they've used on two different container-divs, since they style them to do different things. That's the flexibility of CSS again. - The 'float' property makes #wrapper expand (stretch in height) to contain #content and the two side-floats; #navigation and #extra. That's in part how the 'equal height columns' appearance is created in that layout. Floats and normal in-flow elements can be contained this way, but 'absolute positioned' elements, like you use in your page, can not. What would be a good book for me to go and buy to use as reference and online references, besides this list. I can't recommend any books on CSS since I haven't read any - yet. I _can_ recommend the 'CSS 2.1' specification... http://www.w3.org/TR/CSS21/ ...and especially the 'Visual formatting model'... http://www.w3.org/TR/CSS21/visuren.html ...since everything anyone needs to know about CSS - in order to start designing with it, is contained there. 'Web Design References' with 'Cascading Style Sheets' and all the other stuff, may also help... http://www.d.umn.edu/itss/support/Training/Online/webdesign/ regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] How to construct a 3 Column layout to a centered Page Layout
Hi All, I have a page here that at present looks okay in FF 2.x / IE7 don't have other browsers on which to check. I have read extensively articles, looked at code and looked at the websites others are building who are on this list. I am used to doing everything in tables, but CSS looks more interesting but so much to learn for a newbie. Guess I am trying to walk before I crawl in the CSS world. http://www.alistapart.com/ http://glish.com/css/7.asp My first attempt at CSS (code copied from 7.asp, refined to what I want) is here and have validated the CSS, the html is not strict to a tag in hr width=50% but not worried about that. www.oneyed.com/mt www.oneyed.com/mt/scripts/css/mt_layout_1.css The current layout I have is okay for what I want to do at present, but how can I format this current page using CSS to look similar to this layout (www.oneyed.com/mt/LayoutGala07.html) without breaking everything and still using the same CSS code I have at present. How can I using the present code specify a minimum height for the left / right content area's. I still don't quite understand the difference between wrapper / container and the use of float in the code. I try to experiment and get frustrated. What would be a good book for me to go and buy to use as reference and online references, besides this list. Thanks in advance for any help and pointers. Kind Regards, Kevin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] 3 Columns - Adjusting Centercontent
Hi Guys,
I am trying to redesign a webpage, plus very new to CSS and want to use the
3 Columns - Holy Grail - http://glish.com/css/7.asp Below is the code I am
using, based on the CSS code from the link with my own additions.
I want to add an image in the #banner, which can be done easily. I know how
to adjust the leftcontent / rightcontent columns from the top of the page.
Question:
How can I adjust the centercontent column down from the top of the page.
Thanks in advance.
Kevin
body {
margin:10px 10px 0px 10px;
padding:0px;
}
#leftcontent {
position: absolute;
left:10px;
top:150px;
width:200px;
background:#fff;
border:1px solid #000;
}
#centercontent {
background:#fff;
margin-left: 199px;
margin-right:199px;
border:1px solid #000;
voice-family: \}\;
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
}
htmlbody #centercontent {
margin-left: 201px;
margin-right:201px;
}
#rightcontent {
position: absolute;
right:10px;
top:150px;
width:200px;
background:#fff;
border:1px solid #000;
}
#banner {
background:#fff;
height:40px;
border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
voice-family: \}\;
voice-family: inherit;
height:39px;
}
htmlbody #banner {
height:39px;
}
h1 {
margin:5px 5px 5px 5px;
padding:0px;
font-size:14px;
font-weight:900;
color:#ccc;
}
h2 {
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:5px 5px 5px 5px;
padding:0px;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:5px 5px 5px 5px;
padding:0px;
}
a {
color:#09c;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}
#banner h1 {
font-size:14px;
padding:10px 10px 0px 10px;
margin:0px;
}
Kind Regards,
Kevin J. Pledger
Technical Manager
Mainstream Technologies Pte Ltd.
Tel: 65 6764-3022
Fax: 65 6764-6064
Mob: 65 9777-6202
_
CONFIDENTIAL CAUTION: The information transmitted is intended only for the
addressee and may contain privileged and/or confidential material. Any
disclosure,
distribution or copying of this message is strictly prohibited. If you are
not the
intended recipient, kindly contact the sender and delete the message. Thank
you.
_
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of James Leslie
Sent: Friday, January 05, 2007 19:48 PM
To: Phil Turner
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] icons in the address bar
http://en.wikipedia.org/wiki/Favicon should have all the info and links you
need.
James
Can someone point me in the right direction I would like to put my own icon
in the address bar but dont know what size to create the graphic or what the
code is, thanks in advance
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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
IE7 information -- 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] 3 Columns - Adjusting Centercontent
Hi Mike, Thanks for the reply. I had a thought it would be simple and steering me in the face. I had tried using top, but didn't use it with margin-top. Some times you cant see the forest for the trees. Kind Regards, Kevin -Original Message- From: Matt Ryan [mailto:[EMAIL PROTECTED] Sent: Saturday, January 06, 2007 05:47 AM To: Kevin J Pledger Cc: css-d@lists.css-discuss.org Subject: Re: [css-d] 3 Columns - Adjusting Centercontent On 1/5/07, Kevin J Pledger [EMAIL PROTECTED] wrote: Question: How can I adjust the centercontent column down from the top of the page. Presuming you want to move the center column down without moving the others, it looks like you should be able to add this to the #centercontent selector: margin-top:10px; (or whatever value you want) Matt Ryan __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Styling abbr
OK, is there any way to get rid of the dotted underlines on abbr tags, assuming I'd like to indicate that they're abbreviations some other way? -- Mark J. Reed [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Styling abbr
Ah! border-bottom! I thought it was some sort of extension to
text-decoration. Thanks!
On 12/28/06, Bjoern Hoehrmann [EMAIL PROTECTED] wrote:
* Mark J. Reed wrote:
OK, is there any way to get rid of the dotted underlines on abbr tags,
assuming I'd like to indicate that they're abbreviations some other
way?
That depends on where you see them and why they are there. If you see
them in Firefox, they are probably the result of the rule set
/* titles */
abbr[title], acronym[title] {
border-bottom: dotted 1px;
}
in the `html.css` file of your Firefox installation. You should then
be able to set border-bottom for these elements to some different
value using a similar rule set in your style sheet.
--
Björn Höhrmann · mailto:[EMAIL PROTECTED] · http://bjoern.hoehrmann.de
Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de
68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/
--
Mark J. Reed [EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Div show/hide
Seen the rant. I agree that links to content should be, at their core, plain links that would, absent JavaScript, take you to a new page with the content, said behavior then available to be modified by JavaScript to do something else, preferably without making the core behavior inaccessible even in JavaScript-enabled contexts. If I were writing the page, I would go further along the principles of non-intrusive JavaScript and not use the onclick attribute in HTML, either, but instead assign the link an ID and then have initialization code in an external script file set its onclick property. But not everyone is me, and not all web authors are as reluctant to mix code in with their markup, and the javascript: protocol is a handy way to get behavior instead of content out of a link. Contrary to the youngpup rant, even if I had absolute power over all web authors I would not ban javascript:. I would suggest that it be used only for the more purely behavioral functions - things that look like buttons or widgets and not normal hyperlinks, which only do things within the page rather than opening up a different page (even in a popup/tooltip), etc. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Div show/hide
On 12/11/06, Andy Pemberton [EMAIL PROTECTED] wrote:
Russ:
Though this is more of a javascript/html dom question, I'll answer anyway.
You must return false in the 'onclick' method of the link you're using to
fire this javascript event. This will prevent the browser from following the
href attribute.
So your markup should look like:
a href=# onclick=ShowHideLayer('TISdata'); return false; Truth
In Savings Disclosure/a
I'd also argue, however, that you should include the URL of a page that has
this dynamic content in place. This will enable browsers without javascript
or that have javascript disabled to view the content.
Good point. You can safely combine them...
a href=url-for-non-javascript-browsers
onclick=functionForJavascriptBrowsers(); return falseClick here/a
In some cases, the page is a total loss to non-javascript browsing,
which is best handled by directing those users to another page
entirely in the first place. If that's the case, you can assume
javascript for the page in question and simplify the above to this:
a href=javascript:functionForJavascriptBrowsers()Click here/a
No onclick handler or false return value needed - the javascript: uri
method causes the function to be invoked when the link is clicked,
with no other action taken.
Hope this helps,
Andy
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/
--
Mark J. Reed [EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] input type=GET target=DIV ???
On 12/11/06, crhras [EMAIL PROTECTED] wrote: That site works because they use frames and target the GET output to the content frame. I want to achieve the same functionality using only CSS. Can it be done? Yes, but not easily. You can't target a div the way you can a frame; you'd have to use AJAX techniques: have a button that triggers, instead of a form submission, a call to a JavaScript function that manually assembles and POSTs the same query that the browser would assemble if you had really submitted the form, with a callback to a JavaScript function that populates the div with the results. There are JavaScript libraries that make this task easier (dojo, Yahoo!, etc), but you still need to know how to program... -- Mark J. Reed [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Should I use cascaded ids for nested divs?
On 12/7/06, Travis Killen [EMAIL PROTECTED] wrote:
Using this method:
#header #branding {
border: 1px solid red;
}
you will assign a 1px solid red border to any div whose id is branding,
AND is contained within the div header. ie - if you have more than one
branding div then the CSS rule will only be applied if the branding div
is contained inside the header.
Except, of course, it's illegal to have more than one element with the
same id in the same document.
Something like #header #branding makes the most sense if you have an
external stylesheet shared by multiple HTML pages, many of which have
an element with an id of branding, and you want to apply certain
styles *only* when that branding element is inside of another
element with an id of header.
--
Mark J. Reed [EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] tooltip question
Just use a div within the HTML of that page for each tooltip, instead of separate HTML pages. Use CSS to position each tooltip div absolutely where you want it, and set the visibility to hidden. Then have the onclick in the image map do, instead of a window.open, a document.getElementById(thisToolTipId).style.visible = visible. You can put an onclick handler on the div's themselves that hides them again, and/or set a timeout to close them after a certain period of time... On 12/6/06, Kathryn Crutcher [EMAIL PROTECTED] wrote: I am working on a site that will be used on a stand alone touch-screen kiosk with a Firefox browser. One of the files will have a floorplan diagram and I need a way to show additional information when areas of the image are touched. There will be several links to additional information with either brief text or brief text + image. Ideally the length of the box will be determined by the content. On this sample http://www.enermodal.com/kiosk/calgary/ss0.htm you can get a sense of what I need by clicking on the #6 in the image. This is not acceptable as I can't eliminate the titlebar and status bar in FF. I know how to make a box appear with CSS on mouseover but with the touch screen kiosk it must be a clickable link. Any suggestions greatly appreciated. Thanks, Casey __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/ -- Mark J. Reed [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] tooltip question
On 12/6/06, Mark J. Reed [EMAIL PROTECTED] wrote: document.getElementById(thisToolTipId).style.visible = visible. that should be ... .visibility = visible. -- Mark J. Reed [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/
