[css-d] Remove whitespace between elements
Dear all, I'd like to remove the whitespace between the header image and the menu (red background) below it. I specified [margin:0;] for both elements and [float:left;] for the menu. But I somehow can't seem to get rid of the whitespace between them. Can anybody please tell me what I'm doing wrong? Thanks a bunch! Ruben [URL] https://dl.dropbox.com/u/39492899/Flamenconl/flamenco_1.html[URL] https://dl.dropbox.com/u/39492899/Flamenconl/flamenco_1.css __ 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] Remove whitespace between elements
Hi Ruben, we can download the css file, but the link https://dl.dropbox.com/u/39492899/Flamenconl/flamenco_1.html[URL] even taking out the [URL] portion of it isn't working, so I'm not sure how the markup is layed out, could you fix the link, or paste the markup to the list? isabel On Wed, Jul 11, 2012 at 8:07 AM, Ruben van den Berg < ruben_van_den_b...@hotmail.com> wrote: > > Dear all, > I'd like to remove the whitespace between the header image and the menu > (red background) below it. I specified [margin:0;] for both elements and > [float:left;] for the menu. But I somehow can't seem to get rid of the > whitespace between them. Can anybody please tell me what I'm doing wrong? > Thanks a bunch! > Ruben > [URL] https://dl.dropbox.com/u/39492899/Flamenconl/flamenco_1.html[URL] > https://dl.dropbox.com/u/39492899/Flamenconl/flamenco_1.css > > > __ > 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] Remove whitespace between elements
Dear Isabel, Thx for pointing that out. The html link is: https://dl.dropbox.com/u/39492899/Flamenconl/flamenco_1.html or please see below for the html as plain text. Thanks! Ruben http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> http://www.w3.org/1999/xhtml"; xml:lang="nl" lang="nl"> Flamenco Home Nieuws Wat is Flamenco? FAQWoordenboekSpanjetips Boekingen Contact HomeWelkom op flamenco.nlOp flamenco.nl kun je uitgebreide informatie vinden over flamenco: de temperamentvolle muziek, dans en zang uit Zuid Spanje. Daarnaast kunnen dansworkshops, optredens en lezingen geboekt worden via flamenco.nl; we beschikken daartoe over een uitgebreid netwerk van professionele en enthousiaste flamencoartiesten en docenten.Voor een overzicht van flamenco-websites verwijst flamenco.nl je graag naar de flamenco startpaginaVoor een flamenco agenda, bezoek www.terremoto.Contact opnemen kan via: i...@flamenco.nl > Date: Wed, 11 Jul 2012 12:17:19 +0100 > From: unboun...@gmail.com > To: ruben_van_den_b...@hotmail.com > CC: css-d@lists.css-discuss.org > Subject: Re: [css-d] Remove whitespace between elements > > Hi Ruben, > > we can download the css file, but the link > https://dl.dropbox.com/u/39492899/Flamenconl/flamenco_1.html[URL] even > taking out the [URL] portion of it > isn't working, so I'm not sure how the markup is layed out, could you fix > the link, or paste the markup to the list? > > isabel > > > > On Wed, Jul 11, 2012 at 8:07 AM, Ruben van den Berg < > ruben_van_den_b...@hotmail.com> wrote: > > > > > Dear all, > > I'd like to remove the whitespace between the header image and the menu > > (red background) below it. I specified [margin:0;] for both elements and > > [float:left;] for the menu. But I somehow can't seem to get rid of the > > whitespace between them. Can anybody please tell me what I'm doing wrong? > > Thanks a bunch! > > Ruben > > [URL] https://dl.dropbox.com/u/39492899/Flamenconl/flamenco_1.html[URL] > > https://dl.dropbox.com/u/39492899/Flamenconl/flamenco_1.css > > > > > > __ > > 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] Remove whitespace between elements
I'm not sure why is it happening,
but
div:first-child {height:236px;}
removes the white space
On Wed, Jul 11, 2012 at 12:41 PM, Ruben van den Berg <
ruben_van_den_b...@hotmail.com> wrote:
>
> Dear Isabel,
> Thx for pointing that out. The html link is:
> https://dl.dropbox.com/u/39492899/Flamenconl/flamenco_1.html
> or please see below for the html as plain text.
> Thanks!
> Ruben
> http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
> http://www.w3.org/1999/xhtml"; xml:lang="nl" lang="nl">
>
> name="keywords" content="trefwoorden, gescheiden, door, komma's" />
> Flamencotype="txt/css" />
>
> alt="Afbeelding Flamencodanseres" />
> Homehref="#">Nieuws Wat is Flamenco?
> FAQWoordenboek
> Spanjetips Boekingen
> Contact
> HomeWelkom op flamenco.nlOp
> flamenco.nl kun je uitgebreide informatie vinden over flamenco: de
> temperamentvolle muziek, dans en zang uit Zuid Spanje. Daarnaast kunnen
> dansworkshops, optredens en lezingen geboekt worden via flamenco.nl; we
> beschikken daartoe over een uitgebreid netwerk van professionele en
> enthousiaste flamencoartiesten en docenten.Voor een overzicht van
> flamenco-websites verwijst flamenco.nl je graag naar de flamenco
> startpaginaVoor een flamenco agenda, bezoek
> www.terremoto.Contact opnemen kan via: i...@flamenco.nl
>
>
>
>
>
>
>
> > Date: Wed, 11 Jul 2012 12:17:19 +0100
> > From: unboun...@gmail.com
> > To: ruben_van_den_b...@hotmail.com
> > CC: css-d@lists.css-discuss.org
> > Subject: Re: [css-d] Remove whitespace between elements
> >
> > Hi Ruben,
> >
> > we can download the css file, but the link
> > https://dl.dropbox.com/u/39492899/Flamenconl/flamenco_1.html[URL] even
> > taking out the [URL] portion of it
> > isn't working, so I'm not sure how the markup is layed out, could you fix
> > the link, or paste the markup to the list?
> >
> > isabel
> >
> >
> >
> > On Wed, Jul 11, 2012 at 8:07 AM, Ruben van den Berg <
> > ruben_van_den_b...@hotmail.com> wrote:
> >
> > >
> > > Dear all,
> > > I'd like to remove the whitespace between the header image and the menu
> > > (red background) below it. I specified [margin:0;] for both elements
> and
> > > [float:left;] for the menu. But I somehow can't seem to get rid of the
> > > whitespace between them. Can anybody please tell me what I'm doing
> wrong?
> > > Thanks a bunch!
> > > Ruben
> > > [URL]
> https://dl.dropbox.com/u/39492899/Flamenconl/flamenco_1.html[URL]
> > > https://dl.dropbox.com/u/39492899/Flamenconl/flamenco_1.css
> > >
> > >
> > > __
> > > 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] Remove whitespace between elements
Le 11 juil. 2012 à 20:41, Ruben van den Berg a écrit :
>>> I'd like to remove the whitespace between the header image and the menu
>>> (red background) below it. I specified [margin:0;] for both elements and
>>> [float:left;] for the menu. But I somehow can't seem to get rid of the
>>> whitespace between them. Can anybody please tell me what I'm doing wrong?
>>> Thanks a bunch!
>>> Ruben
>>> https://dl.dropbox.com/u/39492899/Flamenconl/flamenco_1.html
>>> https://dl.dropbox.com/u/39492899/Flamenconl/flamenco_1.css
Images are inline elements and rest on the baseline of the text. That leaves
some space for descenders (like p, q, j). The small gap you see under the image
and above the red block is that space.
#himg {display: block } would remove that space
or
#himg { vertical-align: bottom; }
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/
Re: [css-d] Remove whitespace between elements
Thanks a lot! That was very helpful!
Ruben
> From: e...@l-c-n.com
> Date: Wed, 11 Jul 2012 23:20:30 +0900
> To: ruben_van_den_b...@hotmail.com
> CC: css-d@lists.css-discuss.org
> Subject: Re: [css-d] Remove whitespace between elements
>
>
> Le 11 juil. 2012 à 20:41, Ruben van den Berg a écrit :
>
> >>> I'd like to remove the whitespace between the header image and the menu
> >>> (red background) below it. I specified [margin:0;] for both elements and
> >>> [float:left;] for the menu. But I somehow can't seem to get rid of the
> >>> whitespace between them. Can anybody please tell me what I'm doing wrong?
> >>> Thanks a bunch!
> >>> Ruben
> >>> https://dl.dropbox.com/u/39492899/Flamenconl/flamenco_1.html
> >>> https://dl.dropbox.com/u/39492899/Flamenconl/flamenco_1.css
>
> Images are inline elements and rest on the baseline of the text. That leaves
> some space for descenders (like p, q, j). The small gap you see under the
> image and above the red block is that space.
>
> #himg {display: block } would remove that space
> or
> #himg { vertical-align: bottom; }
>
>
> 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-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] Float problem. I think.
I'm doing over a very old website, and I'm having a problem with a floated div (content_main) not staying to the upper right. The problem can be found on _http://www.sportsmansresource.com/contact.htm_ (http://www.sportsmansresource.com/contact.htm) . No matter what I'm trying, it drops below the div floated left (left_content). It works fine on a possible homepage I created (_http://www.sportsmansresource.com/home_page_css.htm_ (http://www.sportsmansresource.com/home_page_css.htm) ). If you can help or offer any help, I'd be very appreciative. Thanks Bruce __ 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] Vendor-prefixed CSS3
When utilizing CSS3, I know it's generally best to make vendor-prefixed AND non-vendor-prefixed declarations, i.e., you should declare -moz-transform, -webkit-transform, -o-transform, and -ms-transform, along with just transform itself. Is there a suggested best practice for what order these declarations should be made in? My instinct would be to declare the non-vendor-prefixed one last, so if/when the browser supports that version of the declaration, it will overwrite the vendor-prefixed version of the declaration. Does that sound right? Is there something I'm not thinking of? Thanks, Kyle -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.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] Float problem. I think.
On 12.07.2012 01:17, bho...@aol.com wrote:
I'm doing over a very old website, and I'm having a problem with a floated
div (content_main) not staying to the upper right.
You are apparently using "overflow: auto;" on to
contain floats, which creates a scrollbar that takes up space so the
right float can't fit alongside the left.
Make that '.section {overflow: hidden;}' and it will line up as intended.
regards
Georg
__
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] Vendor-prefixed CSS3
Le 12 juil. 2012 à 09:05, Kyle Sessions a écrit : > When utilizing CSS3, I know it's generally best to make vendor-prefixed AND > non-vendor-prefixed declarations, i.e., you should declare -moz-transform, > -webkit-transform, -o-transform, and -ms-transform, along with just > transform itself. Is there a suggested best practice for what order these > declarations should be made in? My instinct would be to declare the > non-vendor-prefixed one last, so if/when the browser supports that version > of the declaration, it will overwrite the vendor-prefixed version of > the declaration. Does that sound right? Is there something I'm not thinking > of? It is not a best practice, it is a requirement to future proof your declarations. The non-prefixed declaration _must_ come last. Remember that the cascade is at work here. 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/
Re: [css-d] Vendor-prefixed CSS3
On 12.07.2012 02:05, Kyle Sessions wrote: My instinct would be to declare the non-vendor-prefixed one last, so > if/when the browser supports that version of the declaration, it will > overwrite the vendor-prefixed version of the declaration. Does that > sound right? Yes. Always the non-prefixed version last, for the reason you state. Is there something I'm not thinking of? Only that a browser vendor may choose to mess up the order/priority for whatever reason. And if that happens they will soon have to fix their own mess anyway, so no need for us to bother about it. regards Georg __ 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] Vendor-prefixed CSS3
On Wed, Jul 11, 2012 at 5:50 PM, Georg wrote: > On 12.07.2012 02:05, Kyle Sessions wrote: > >> My instinct would be to declare the non-vendor-prefixed one last, so >> > > if/when the browser supports that version of the declaration, it will > > overwrite the vendor-prefixed version of the declaration. Does that > > sound right? > > Yes. Always the non-prefixed version last, for the reason you state. > > > Is there something I'm not thinking of? >> > > Only that a browser vendor may choose to mess up the order/priority for > whatever reason. And if that happens they will soon have to fix their own > mess anyway, so no need for us to bother about it. > > regards > Georg Thanks, Philippe and Georg; that all makes total sense! I saw some vendor-prefixed declarations after some non-prefixed declarations in a CSS file I'm working on, and, after a long day, I wasn't entirely sure if that was right or not. ;) Best, Kyle -- Kyle G Sessions Berkeley Electronic Press ksessi...@bepress.com 510-665-1200 + 128 www.bepress.com bepress: the frontier of scholarly publishing since 1999 Check out IR success stories on the DC Telegraph at http://blog.digitalcommons.bepress.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] Float problem. I think.
Greg,
Thanks. That always bites me.
Thanks again,
Bruce
In a message dated 7/11/2012 8:40:31 P.M. Eastern Daylight Time,
gunla...@c2i.net writes:
On 12.07.2012 01:17, bho...@aol.com wrote:
> I'm doing over a very old website, and I'm having a problem with a
floated
> div (content_main) not staying to the upper right.
You are apparently using "overflow: auto;" on to
contain floats, which creates a scrollbar that takes up space so the
right float can't fit alongside the left.
Make that '.section {overflow: hidden;}' and it will line up as intended.
regards
Georg
__
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/
