[css-d] What's creating this img border?
Hi People, I added a link to the fotos in my #sitenav. Now there's a blue border around the foto-links but I can't seem to find what's causing it. See border here: http://thewei.com/sandbox/scenter/ No border here (but fotos aren't links, either) http://thewei.com/sandbox/scenter/about.php Please help me find the border in my code. Thanks as always . . . Kimi -- This email sent by Kimi Wei 201-475-1854 | k...@thewei.com | thewei.com __ 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/
Re: [css-d] What's creating this img border?
On Mar 5, 2009, at 4:14 AM, Kim Brooks Wei wrote:
I added a link to the fotos in my #sitenav. Now there's a blue border
around the foto-links but I can't seem to find what's causing it.
See border here:
http://thewei.com/sandbox/scenter/
No border here (but fotos aren't links, either)
http://thewei.com/sandbox/scenter/about.php
Please help me find the border in my code. Thanks as always . . .
There is no border, but
ul#sitenav li a:visited { /*sc.css (line 272)*/
background:none repeat scroll 0 0 #A15F3B;
color:#E93941;
}
The background of the a around the image shines through, which is
pretty normal. Images are inline elements and rest on the baseline,
there is space for descenders.
ul#sitenav li img {vertical-align:bottom;}
is a possible solution.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
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/
Re: [css-d] What's creating this img border?
Subject: [css-d] What's creating this img border?
Hi People,
I added a link to the fotos in my #sitenav. Now there's a blue border
around the foto-links but I can't seem to find what's causing it.
See border here:
http://thewei.com/sandbox/scenter/
No border here (but fotos aren't links, either)
http://thewei.com/sandbox/scenter/about.php
Please help me find the border in my code. Thanks as always . . .
Kimi
You have
a img {
border: none;
}
You might want to try
img {
border:0
}
Cheers
Ian
__
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] Top margin not set properly.
Top margin not set properly. Check the code at http://pastie.org/409144 thanks for any help in advance!! rajakvk __ 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/
Re: [css-d] Top margin not set properly.
Top margin not set properly.
Check the code at
http://pastie.org/409144
Do you pay per word for this email? :) From that scarce information
you gave I *suppose* you have a margin collapse issue. I suppose you
are wondering why the outer-container does not stick to the body
top, even though the body has margins top and bottom set to 0. This is
due to the margin-top of the P element being passed on to the adjacent
inner-container, which in turn passes it on to the adjacent
outer-container, which in turn passes it on to the adjacent BODY
element. So, you are having a margin-top for the body equal to the
margin-top of the P element. In order to cope with this you have to
break the 'adjacent margins chain'. I suggest setting the margin of P
to 0, and using padding instead (like P {padding: .5em 0;})
Regards,
Vladislav Vladimirov
http://ovalpixels.com/
What is success is inevitable?
__
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] Doctype problem
Hello, I'm currently building a website to go into an ecommerce package but have run into a snag as I originally coded the layout into an XHTML doctype and the ecommerce package has an HTML doctype. This meant that although everything rendered perfectly in each browser when I had initially coded it since putting into the HTML doctype page some bits of the design have broken. Although I have now corrected most of it there is still one problem I can't seem to fix and here it is: I have a side navigation column that is a normal verticle list of links. when I give the link a display: block; rule I seem to get an extra bottom margin of 15px. The only browsers that seem to display properly are Opera and Safari? Has anyone experienced this before or know how to get round this problem? Many thanks. __ 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/
Re: [css-d] Doctype problem
I have a side navigation column that is a normal verticle list of links.
when I give the link a display: block; rule I seem to get an extra
bottom margin of 15px. The only browsers that seem to display properly
are Opera and Safari?
Since you didn't provide a demo link, I could only guess you are
having br elements separating the a-s of the navigation. The
breaks should be the cause of the unexpected margin. If you don't have
access to the menu code to delete them, you can hide them through css
like this:
#navigation br {
display:none;
}
Regards,
Vladislav Vladimirov
http://www.ovalpixels.com/
__
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/
Re: [css-d] Top margin not set properly.
Subject: [css-d] Top margin not set properly.
Top margin not set properly.
Check the code at
http://pastie.org/409144
You might want to try
.outer-container{min-height:100%;background-color:#FF;overflow:hidden}
Georg helped me with this last week.
Not sure if your min-height:100% works either.
Ian
__
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] Changing the color of a link makes another element vanish
Hi,
I stumbled upon the following problem.
Just have a look at my site http://www.ourmagic.net/index_copy(1).htm
And http://www.ourmagic.net/index_copy(2).htm
The site is under heavy reconstruction so please only comment on the problem
I describe.
Looks different.
In index_copy(2) you can see, that there is a grey submenu but none of the
mainmenu links is yellow
I wanted to hightlight the last Mainmenu Kontakt in yellow with this
statement in the header section of the page
#menuKontakt a{color:#fef000}; I also tried #menuKontakt
a{color:#fef000}; that is the only change
The result is index_copy(1) where Kontakt IS yellow, but suddenly the
whole submenue is gone.
Here is an excerpt from the HTML;
---
ol id=hauptMenu
li id =menu1a href=zauberer/zauberkuenstler-meine-magie.htm
onclick=return
ConversionCount();Zauberkunst/aspannbsp;.nbsp;/span
ol class=subMenu
li class=sub1 a
href=zauberer/zauberkuenstler-magie-im-turm.htm onclick=return
ConversionCount();Vorteile/aspan nbsp;.nbsp;/span/li
li class=sub2 a
href=zauberer/zauberkuenstler-magie-im-turm.htm onclick=return
ConversionCount();Meine Magie/a/li
/ol
/li
li id= menu2a href=zauberer/zauberkuenstler-magie-im-turm.htm
onclick=return ConversionCount();shows/aspan nbsp;.nbsp;/span
ol class=subMenu
li class=sub1a
href=zauberer/zauberkuenstler-magie-im-turm.htm onclick=return
ConversionCount();Möglichkeiten/aspan nbsp;.nbsp;/span/li
li class=sub2a
href=zauberer/zauberkuenstler-magie-im-turm.htm onclick=return
ConversionCount();2 - 25 Personen/aspan nbsp;.nbsp;/span/li
li class=sub3a
href=zauberer/zauberkuenstler-magie-im-turm.htm onclick=return
ConversionCount();Standup/aspan nbsp;.nbsp;/span/li
li class=sub4a
href=zauberer/zauberkuenstler-magie-im-turm.htm onclick=return
ConversionCount();Walk Act/aspan nbsp;.nbsp;/span/li
li class=sub5a
href=zauberer/zauberkuenstler-magie-im-turm.htm onclick=return
ConversionCount();Unaufdringlich/aspan nbsp;.nbsp;/span/li
li class=sub6a
href=zauberer/zauberkuenstler-magie-im-turm.htm onclick=return
ConversionCount();Hochzeit/aspan nbsp;.nbsp;/span/li
li class=sub7a
href=zauberer/zauberkuenstler-magie-im-turm.htm onclick=return
ConversionCount();Besondere Wünsche/a/li
/ol
/li
li id= menu3a href=zauberer/zauberkuenstler-magie-im-turm.htm
onclick=return ConversionCount();Internationales Publikum/aspan
nbsp;.nbsp;/span/li
li id= menu4a href=zauberer/zauberkuenstler-magie-im-turm.htm
onclick=return ConversionCount();Exklusives Geschenk/aspan
nbsp;.nbsp;/span/li
li id=menuReferenzena
href=zauberer/zauberkuenstler-referenzen.htm onclick=return
ConversionCount();Referenzen/a span nbsp;.nbsp;/span/li
li id=menuGalerie
a href=zauberer/zauberkuenstler-galerie.htm
onclick=return ConversionCount();Galerie/aspan
nbsp;.nbsp;/span/li
li id=menu7a href=2_vita.htm
Vita/aspan nbsp;.nbsp;/span
ol class=subMenu
li class=sub1a
href=zauberer/zauberkuenstler-magie-im-turm.htm onclick=return
ConversionCount();Alter Ego/aspan nbsp;.nbsp;/span/li
li class=sub2a
href=zauberer/zauberkuenstler-magie-im-turm.htm onclick=return
ConversionCount();Tom Bennett/a/li
/ol
/li
li id=menuLinksa href=zauberer/zauberkuenstler-partner-links.htm
onclick=return ConversionCount();Links/aspan
nbsp;.nbsp;/span/li
li id=menuKontakta href=zauberer/zauberkuenstler-kontakt.htm
onclick=return ConversionCount();Kontakt/a
ol class=subMenu
li class=sub1a
href=zauberer/zauberkuenstler-magie-im-turm.htm onclick=return
ConversionCount();Anfrage/aspan nbsp;.nbsp;/span/li
li class=sub2a
href=zauberer/zauberkuenstler-magie-im-turm.htm onclick=return
ConversionCount();Kosten/aspan nbsp;.nbsp;/span/li
li class=sub3a
href=zauberer/zauberkuenstler-magie-im-turm.htm onclick=return
ConversionCount();Technik/a/li
/ol
/li
/ol !-- Ende hauptMenu--
This here is the corresponding CSS part
#hauptMenu
{
position:absolute;
list-style: none;
top:15px ;
}
#hauptMenu li {
float:left;
display:block;
display:block;
float:left;
}
/*Links: Rubrik groszlig;*/
#hauptMenu a {color:#F6F6F6;} /*inaktiv besuchte */
#hauptMenu a:hover , #hauptMenu a:active, #hauptMenu a:focus
{color:#fef000; } /*aktiv gelb*/
#menu1, #menu2, #menu3, #menu4, #menu5, #menuReferenzen, #menuGalerie ,
#menuLinks, #menuKontakt,#menu10
{
background-image:none;
background-position:top center;
background-repeat:no-repeat;
}
#menu1, #menu2, #menu3, #menu4
{
text-transform:uppercase;
}
#menuReferenzen,
Re: [css-d] Changing the color of a link makes another element vanish
On Fri, Mar 6, 2009 at 5:15 AM, Thomas Burkhart tho...@burkharts.netwrote:
Hi,
I stumbled upon the following problem.
Just have a look at my site
http://www.ourmagic.net/index_copy(1).htmhttp://www.ourmagic.net/index_copy%281%29.htm
And
http://www.ourmagic.net/index_copy(2).htmhttp://www.ourmagic.net/index_copy%282%29.htm
The site is under heavy reconstruction so please only comment on the
problem
I describe.
Looks different.
In index_copy(2) you can see, that there is a grey submenu but none of the
mainmenu links is yellow
I wanted to hightlight the last Mainmenu Kontakt in yellow with this
statement in the header section of the page
#menuKontakt a{color:#fef000}; I also tried #menuKontakt
a{color:#fef000}; that is the only change
The result is index_copy(1) where Kontakt IS yellow, but suddenly the
whole submenue is gone.
Next time, just link to the CSS stylesheet? ;)
Your problem is invalid CSS. In the second page, the first invalid statement
is commented out, allowing the display: block declaration to actually work.
Move your semi-colons inside the braces on the HTML pages.
Also, this is something that could be caught in the CSS validator.
--
-Jack Timmons
http://www.trotlc.com
Twitter: @jorachim
__
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/
Re: [css-d] Changing the color of a link makes another element vanish
Oh sh**, sorry about some that trivial. Too long programming C++.
Problem solved, case closed
Thanks Jack
Tom
Von: Jack Timmons [mailto:jorac...@gmail.com]
Gesendet: Freitag, 6. März 2009 12:52
An: Thomas Burkhart; css-d@lists.css-discuss.org
Betreff: Re: [css-d] Changing the color of a link makes another element
vanish
On Fri, Mar 6, 2009 at 5:15 AM, Thomas Burkhart tho...@burkharts.net
wrote:
Hi,
I stumbled upon the following problem.
Just have a look at my site http://www.ourmagic.net/index_copy(1).htm
http://www.ourmagic.net/index_copy%281%29.htm
And http://www.ourmagic.net/index_copy(2).htm
http://www.ourmagic.net/index_copy%282%29.htm
The site is under heavy reconstruction so please only comment on the problem
I describe.
Looks different.
In index_copy(2) you can see, that there is a grey submenu but none of the
mainmenu links is yellow
I wanted to hightlight the last Mainmenu Kontakt in yellow with this
statement in the header section of the page
#menuKontakt a{color:#fef000}; I also tried #menuKontakt
a{color:#fef000}; that is the only change
The result is index_copy(1) where Kontakt IS yellow, but suddenly the
whole submenue is gone.
Next time, just link to the CSS stylesheet? ;)
Your problem is invalid CSS. In the second page, the first invalid statement
is commented out, allowing the display: block declaration to actually work.
Move your semi-colons inside the braces on the HTML pages.
Also, this is something that could be caught in the CSS validator.
--
-Jack Timmons
http://www.trotlc.com
Twitter: @jorachim
__
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/
Re: [css-d] Refresh image in header...
Is it possible, through CSS, to have the image in a header change when
the user refreshes or re-enters the page?
No, not in CSS directly but you can call a PHP script from within your CSS:
#randomImage {
background: url(./rotate.php) no-repeat;
width: 510px;
height: 268px;
margin-left: 0px;
}
Where the PHP script is available at alistapart.com:
http://www.alistapart.com/d/randomizer/rotate.txt
Mark W.
__
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/
Re: [css-d] Top margin not set properly.
On Fri, Mar 6, 2009 at 3:22 PM, Vladislav Vladimirov vladk...@gmail.com wrote:
Top margin not set properly.
Check the code at
http://pastie.org/409144
Do you pay per word for this email? :) From that scarce information
you gave I *suppose* you have a margin collapse issue. I suppose you
are wondering why the outer-container does not stick to the body
top, even though the body has margins top and bottom set to 0. This is
due to the margin-top of the P element being passed on to the adjacent
inner-container, which in turn passes it on to the adjacent
outer-container, which in turn passes it on to the adjacent BODY
element. So, you are having a margin-top for the body equal to the
margin-top of the P element. In order to cope with this you have to
break the 'adjacent margins chain'. I suggest setting the margin of P
to 0, and using padding instead (like P {padding: .5em 0;})
Regards,
Vladislav Vladimirov
http://ovalpixels.com/
What is success is inevitable?
Vladislav Vladimirov, apologies and
thanks for your sharp response. it really helps me.
__
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/
Re: [css-d] Floating a sub-list level with it's parent list
Hi,
From your layout above the only way I could get it to position correctly
was with the following:
HTML:
ul id=mainnav
liMain Nav
ul
liPage 1/li
liPage 2/li
liPage 3/li
li id=submodSubscriber Modules
ul
liModule 1/li
liModule 2/li
liModule 3/li
liModule 4/li
/ul/li
/ul/li
/ul
CSS:
#mainnav {
float: left;
}
#submod {
position: relative;
top: -65px;
left: 60px;
}
-- This works with no other CSS included so you'll have to play around with
top and left to ensure they line up (depending on your style of list).
Ta,
~Mx
On Mar 5, 2009 12:26am, Seona Bellamy se...@pretentia.com wrote:
Hi guys,
I'm in a bit of a bind here. I have a nested list that I have no control
over - it's coming out of the CMS with this hierarchy and I can't change
that. Here is an example of the unstyled list:
- Main Navigation
--- Page 1
--- Page 2
--- Page 3
--- Subscriber Modules
- Module 1
- Module 2
- Module 3
- Module 4
[snip]
Can anyone suggest a way that I can bring these two lists into the format
I've been requested to?
Cheers,
Seona.
__
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/
Re: [css-d] how to auto-resize images with CSS ?
Hi Cor,
I'm guessing you mean you have say, an image 110x80px or 100x90px and the
maximum width of both could be 100 or high could be 80 and it would resize
accordingly?
Maybe you could use max-width and max-height values?
CSS:
img {
max-width: 80px;
max-height: 100px;
}
I don't know if this would work and it's not compatible with IE6.
Either that or Javascript!
http://www.w3schools.com/css/pr_dim_max-width.asp
Ta,
~Mx
http://www.mxdx.co.uk
On Mar 5, 2009 7:41am, cr.vege...@gmail.com wrote:
Hi All,
I have multiple images with different widths and heights
and want to display these images as max. 100x80 pixels,
without width/height distortion.
So either the max. width 100 or the max. height 80
should be used for resizing.
Can this be done automatically with CSS ?
TIA, Cor
__
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/
Re: [css-d] Element alignment.
bruce.som...@web.de wrote: But the following must be CSS: Again at http://www.maireadnesbitt.com/initial.html - how can the borders on leftcontent and rightcontent extend out the bottom of the window? rightcontent: height: 100%; border: 4px double black; 100% plus 4px is more than 100%. leftcontent: height: 120% border: 4px double black; 120% plus 4px is also more than 100%. BTW, because of position:fixed, the side columns won't scroll. Probably what you intended, but it means that people on the new fancy smaller screens won't see the links that are below their screen. -- Els __ 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/
Re: [css-d] how to auto-resize images with CSS ?
Maybe have a look at using EM values instead?
Take a look at this:
http://www.bigbaer.com/css_tutorials/css.scale.image.html.tutorial.htm
Ta,
~Mx
On Mar 6, 2009 1:57pm, cr.vege...@gmail.com wrote:
Hi,
Thanks for your suggestions. I just tested:
img {
max-width: 150px; max-height: 120px; }
but this does not
work
properly in Chrome and FF3.
For example:
an image with 200x100 is resized to 150x100 (distortion)
an image with 150x150 is resized to 150x120 (distortion)
I better keep using my PHP script to calc
the proper image styles.
For example:
an image with 200x100 is resized to 150x75 (without distortion).
Thanks anyway, Cor
- Original Message -
From:
mx.css...@googlemail.com
To: cr.vege...@gmail.com ; css-d@lists.css-discuss.org
Sent: Friday, March 06, 2009 2:09
PM
Subject: Re: [css-d] how to auto-resize
images with CSS ?
Hi Cor,
I'm guessing you mean you have say, an image
110x80px or 100x90px and the maximum width of both could be 100 or high
could
be 80 and it would resize accordingly?
Maybe you could use max-width and
max-height values?
CSS:
img {
max-width: 80px;
max-height:
100px;
}
I don't know if this would work and it's not compatible
with IE6.
Either that or Javascript!
http://www.w3schools.com/css/pr_dim_max-width.asp
Ta,
~Mx
http://www.mxdx.co.uk
On
Mar 5, 2009 7:41am, cr.vege...@gmail.com wrote:
Hi All,
I have multiple images with different widths and
heights
and want to display these images as max. 100x80
pixels,
without width/height distortion.
So
either the max. width 100 or the max. height 80
should be
used for resizing.
Can this be done automatically with CSS
?
TIA, Cor
__
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/
Re: [css-d] Element alignment.
Von: Els el...@tiscali.nl Gesendet: 06.03.09 01:20:19 An: bruce.som...@web.de CC: css-d@lists.css-discuss.org Betreff: Re: [css-d] Element alignment. bruce.som...@web.de wrote on Friday, March 6, 2009: Von: Els el...@tiscali.nl bruce.som...@web.de wrote: http://www.maireadnesbitt.com/initial.html The page has three columns: leftcontent, centercontent and rightcontent. Why does the centercontent not begin at the top of the window? Because of there being 'things' before the columns inside the body element. centercontent has no top margin, while rightcontent has a top margin of 25 px. Why do they line up vertically, nonetheless? The top margin of the right content is overlapping the space that is caused by said 'things'. There are 3 characters,  , at the top left of the window, whose origin escapes me. They are not found anywhere in the HTML-file. Has anyone seen such an occurence? That is something called UTF-8 BOM. Your editor puts it in there I think. Choose an editor that doesn't add it, or one where you can choose to add or not add it. Personally I use TextPad (only on Windows), which has a tickbox for it, which I untick. The second thing that probably takes up space above your columns, is your style element. This belongs inside the head of your document, not in the body. What sort of 'things' can be within the body-element before the columms? From where? Thing 1: the UTF-8 BOM Thing 2: the style element. The style-element IS contained within the head-element: head ... style ... /style ... /head ... body ... Firebug showed me the style element as first element inside body, right after the UTF-8 BOM. I didn't realise that this is probably caused by this very UTF-8 BOM, which I now see via view source, is before the doctype, and not inside body like Firebug showed. I wonder why a BOM is being inserted with text/html; charset=us-ascii . I have no idea about that, sorry. Just open the file in a different text editor than before, save it, re-upload, and check if it's gone. -- Els Thanks a lot for that. It has less to do with CSS that I had thought. But the following must be CSS: Again at http://www.maireadnesbitt.com/initial.html - how can the borders on leftcontent and rightcontent extend out the bottom of the window? Bruce __ 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/
Re: [css-d] how to auto-resize images with CSS ?
Hi,
Thanks for your suggestions. I just tested:
img { max-width: 150px; max-height: 120px; }
but this does not work properly in Chrome and FF3.
For example:
an image with 200x100 is resized to 150x100 (distortion)
an image with 150x150 is resized to 150x120 (distortion)
I better keep using my PHP script to calc the proper image styles.
For example:
an image with 200x100 is resized to 150x75 (without distortion).
Thanks anyway, Cor
- Original Message -
From: mx.css...@googlemail.com
To: cr.vege...@gmail.com ; css-d@lists.css-discuss.org
Sent: Friday, March 06, 2009 2:09 PM
Subject: Re: [css-d] how to auto-resize images with CSS ?
Hi Cor,
I'm guessing you mean you have say, an image 110x80px or 100x90px and the
maximum width of both could be 100 or high could be 80 and it would resize
accordingly?
Maybe you could use max-width and max-height values?
CSS:
img {
max-width: 80px;
max-height: 100px;
}
I don't know if this would work and it's not compatible with IE6.
Either that or Javascript!
http://www.w3schools.com/css/pr_dim_max-width.asp
Ta,
~Mx
http://www.mxdx.co.uk
On Mar 5, 2009 7:41am, cr.vege...@gmail.com wrote:
Hi All,
I have multiple images with different widths and heights
and want to display these images as max. 100x80 pixels,
without width/height distortion.
So either the max. width 100 or the max. height 80
should be used for resizing.
Can this be done automatically with CSS ?
TIA, Cor
__
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] Background image shifts to right only in IE
Hi all, I have a problem with the background image on a DIV containing an unordered list used for navigation. The image is a solid horizontal bar (colored blue) shown under the list items. The image shifts to the right when you hover over the LI elements, but only in IE, not in Firefox. You can see the behavior at http://blg.publishpath.com. The DIV has an id of 'navigation' , and the UL element has a class of 'mainnav'. The DIV is relatively positioned, with the UL floated within it, in order to get the contents horizontally centered. Note that the extra markup in the page comes from the CMS I'm using - it keeps the HTML and CSS from validating properly. Thanks in advance for any suggestions. Regards, Erik Domingo __ 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] Jumping footer...
Hi, We've redesigned this website: http://test.royalsussex-southdowns.co.uk/test/ I'm having problem with a jumping footer in IE7/8 it's some weird rendering issue, sometimes the page loads right but sometimes if I go to Lowthers Lambs or History page, the footer appears covering the container and leaves blank space in the footer wrap. Any ideas? -- Krystian - Sunlust Affordable Web Services in Eastbourne: http://eastbournewebdesign.net Mobile UK (Orange): 07528 036 337 Call for more information or email me. __ 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] IE Floating problem
Link: http://ikjensen/test/ Having a minor / major problem with this layout and IE6. The content area starts below the Sidebar. Which bug have I found here ? In FF3.0 it shows perfect. -- Regards / Mhv. Ib K. jensen - http://ikjensen.dk __ 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/
Re: [css-d] Trouble with IE8 Vista Operating system and wordpress site
Hi, I ran into a snag with the overflow:hidden and that is there is one page full of anchor tags on professional site the updates are live not yet live. The fix seems very complicated for anchor tags, so I started to exploring css tables, and looks fine so far in my version of IE8, however there was some indication that beta versions had some issues, do you know of any updates on this? Thanks, On Thu, Mar 5, 2009 at 7:50 AM, Nancy Johnson njohnso...@gmail.com wrote: Thank you for your suggestions. I actually was using equalheights.js on two sites. One my professional site and the other the one I linked to which is volunteer. On my professional site, which is not live yet, I was able to use the position is everything solution for every browser except IE6 and 7, which I will continue to use the javascript. I have at least one very long page of user driven data that can go up to 41 printed pages and that got truncated in IE6 and 7. However in the http://www.pleasantstreetchurch.org/wordpress site, I couldn't get the overflow:hidden to work at all and I couldn't figure out what was wrong, but since it only had to do with a border and not background color, I put a right border in the left container and a left border in the sidebar and used a margin of -1px in the sidebar and so far that seems to work although I need to test it further. Nancy On Mon, Mar 2, 2009 at 7:57 PM, Gunlaug Sørtun gunla...@c2i.net wrote: Nancy Johnson wrote: http://www.pleasantstreetchurch.org/wordpress Not directly related to CSS - IE8rc1 gets stuck on the 'equalheight.js' script. Comment out that script and IE8 will behave ok. There are many alternatives to that script. Equal Height Columns is one that may work for you... http://www.positioniseverything.net/articles/onetruelayout/equalheight ...and I have listed/linked to a few more options here... http://www.gunlaug.no/contents/wd_additions_22.html regards Georg -- http://www.gunlaug.no __ 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/
Re: [css-d] Trouble with IE8 Vista Operating system and wordpress site
Nancy Johnson wrote: I ran into a snag with the overflow:hidden and that is there is one page full of anchor tags on professional site the updates are live not yet live. The fix seems very complicated for anchor tags, so I started to exploring css tables, and looks fine so far in my version of IE8, however there was some indication that beta versions had some issues, do you know of any updates on this? All I _know_ is that IE8rc1 handles CSS tables fine. IE8 is supposed to be in full support of CSS2.1, so all _should_ be well also in IE8 final. regards Georg -- http://www.gunlaug.no __ 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] css, in place of javascript
Hello, I am rebuilding a very basic image gallery, (and apologies there is a table in it) But that was not my problem.(yes, it should be) But... I was wondering if there was a way using css to create what used to be added using javascript and images. I would like to have an image file with text underneath, and when the image is moused over, the text below highlights as well as a border being created around the image. I used to use swap image restore and attach the behaviour to the text image file. Is there are way to do this with css? I hope this makes sense. thanks very much in advance, here is a link to a test page, http://www.niagara-galleries.com.au/artists/imagno.html __ 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/
Re: [css-d] IE Floating problem
Ib Jensen wrote: Link: http://ikjensen/test/ Having a minor / major problem with this layout and IE6. The content area starts below the Sidebar. Which bug have I found here ? In FF3.0 it shows perfect. 404. Did you mean http://ikjensen.dk/test/? -- A thin red line and a salmon-color ampersand forthcoming. http://chelseacreekstudio.com/ __ 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] text positioning
I have an example of a table defined with a height to one of the cells and I would like some text to be aligned to the right and bottom of that cell. Here is the example: http://www6.netrition.com/anchor_bottom.html I would like the blue text lower right to be anchored to the bottom and right of its surrounding table cell. Obviously, there is no additional information in the above html that would produce what I want, but that's the base of the simple example I am using. I tried applying a style of position:absolute;bottom:2px;right:2px in this example: http://www6.netrition.com/anchor_bottom_position_absolute.html but you can see the blue text gets anchored to the lower bottom corner of the browser not the table cell. How can I anchor that text to the lower right corner of its cell? Thank you. -- Jim Albert __ 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/
Re: [css-d] IE Floating problem
Ib Jensen wrote:
Link: http://ikjensen.dk/test/ (repaired)
Having a minor / major problem with this layout and IE6.
The content area starts below the Sidebar.
Which bug have I found here ?
In FF3.0 it shows perfect.
In IE7 or earlier the top margin of block elements does not collapse
into the top margin of it's container as it should if this block element
is preceded in the source by a floated sibling element. The bug is
demoed here [1].
In your case the top margin of div#center-in does not collapse into and
to become the top margin of div#content. The float is div.column#left.
The fix is to give a top margin to the containing element.
#content { margin-top:1em; }
BTW, the bug is fixed in IE8.
1. http://css-class.com/test/bugs/ie/floatsandblockelements.htm
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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/
Re: [css-d] IE Floating problem
Alan Gresley wrote:
Ib Jensen wrote:
Link: http://ikjensen.dk/test/ (repaired)
I forgot to mention about the float drop in IE6 due to it's quirky
handling of percentages. The fix is changing the width.
.subcolumns {
width: 99%; /* Change to keep IE6 happy */
overflow:hidden;
}
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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/
Re: [css-d] text positioning
On Mar 7, 2009, at 2:17 PM, Jim Albert wrote:
I have an example of a table defined with a height to one of the cells
and I would like some text to be aligned to the right and bottom of
that
cell.
Here is the example:
http://www6.netrition.com/anchor_bottom.html
I would like the blue text lower right to be anchored to the bottom
and right of its surrounding table cell.
Obviously, there is no additional information in the above html that
would produce what I want, but that's the base of the simple example I
am using.
I tried applying a style of position:absolute;bottom:2px;right:2px in
this example:
http://www6.netrition.com/anchor_bottom_position_absolute.html
but you can see the blue text gets anchored to the lower bottom corner
of the browser not the table cell.
That is to be expected. The containing block for that absolute
positioned element is the root element. To achieve what you want, in
your simple example above, you'd need to make the parent div the
containing block (relative positioning it):
DIV style=overflow:hidden;height:300px; position: relative
How can I anchor that text to the lower right corner of its cell?
If the cell has a declared height (e.g. td {height:300px;}), you can
then wrap the contents of the cell in a div, set the height to 100%,
and then just as in the above example.
PS - try to present test cases with valid html please.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
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/
