[css-d] Problem with dropdowns

[Brian Jones]

Hi,

I'm working on this dropdown nav
(http://www.bleusolutions.com/testing/dropdown.html) and I can't seem
to get the text in sub menus to fit correctly. I also want to get the
flyout menu to line up directly next to the dropdown menu.
Any help would be greatly appreciated

Thanks

--
-bdot
"There are only 10 kinds of people in this world. Those who understand
binary and those who don't"
__
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] Make text bottom-align?

[David Laakso]

On 12/10/10 3:30 PM, John wrote:
I'm posting to learn whether there is code to enable bottom-alignment 
of text.


Nail it! Your question has been answered. Numerous times and ways.
Best,
~d


--
:: desktop and mobile ::
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/

Re: [css-d] Make text bottom-align?

[John]

On Dec 10, 2010, at 2:17 PM, Jukka K. Korpela wrote:


Jukka K. Korpela wrote:


But the obvious approach is to use a single-cell table with
valign=bottom. You won't need any CSS for that, though CSS helps you
to remove the default margins for heading elements, for example (it
is natural to use heading elements for the head/subhead stuff).

If you wish to choose the more complicated and less reliable CSS way,
then you could define a container  element, set position:
relative and some height (say height: 6em) for it, depending on what
you intend to put there, and two inner  elements, positioned
"absolutely" with bottom: 0 and e.g. left: 0 and left: 50%
respectively.


An illustration of the two approaches (with parameters somewhat  
differing from the above):

http://www.cs.tut.fi/~jkorpela/test/align.html



thank you for that, Jukka; I'm curious why the CSS way is less  
reliable? Having to do with how MS Explorer behaves?



thanks!

J
__
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] Make text bottom-align?

[Jukka K. Korpela]

Jukka K. Korpela wrote:


But the obvious approach is to use a single-cell table with
valign=bottom. You won't need any CSS for that, though CSS helps you
to remove the default margins for heading elements, for example (it
is natural to use heading elements for the head/subhead stuff).

If you wish to choose the more complicated and less reliable CSS way,
then you could define a container  element, set position:
relative and some height (say height: 6em) for it, depending on what
you intend to put there, and two inner  elements, positioned
"absolutely" with bottom: 0 and e.g. left: 0 and left: 50%
respectively.


An illustration of the two approaches (with parameters somewhat differing 
from the above):

http://www.cs.tut.fi/~jkorpela/test/align.html

--
Yucca, http://www.cs.tut.fi/~jkorpela/ 


__
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] Make text bottom-align?

[Jukka K. Korpela]

John wrote:


On Dec 10, 2010, at 12:44 PM, Jukka K. Korpela wrote:


The HTML code and the CSS code have syntax errors that are
detectable using available checkers. They should be fixed, but more
importantly, we need a description of the problem (what is
expected, and a URL demonstrating an attempt to achieve that).


Many thanks. I can't account for line breaks in those links I
supplied; I merely copied them from my browser and pasted them into
email.

the jpg shows what I'm after:  the paragraph at the right is to
bottom-align with the head/subhead material at the left. In other
words, I would like the last line of the right-hand paragraph to
always line up with the last line of the matter at the left.


I suppose you wanted to post to the list, not to me personally only; hence 
I'm copying your entire message above.


I think you should post the URL of your best effort so far, illustrating 
what you tried in HTML and in CSS.


But the obvious approach is to use a single-cell table with valign=bottom. 
You won't need any CSS for that, though CSS helps you to remove the default 
margins for heading elements, for example (it is natural to use heading 
elements for the head/subhead stuff).


If you wish to choose the more complicated and less reliable CSS way, then 
you could define a container  element, set position: relative and some 
height (say height: 6em) for it, depending on what you intend to put there, 
and two inner  elements, positioned "absolutely" with bottom: 0 and 
e.g. left: 0 and left: 50% respectively.


--
Yucca, http://www.cs.tut.fi/~jkorpela/ 


__
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] Make text bottom-align?

[Jukka K. Korpela]

John wrote:


This link shows graphically what my goal is: http://thinkplan.org/
workshop/botAlign.jpg


You mean
http://thinkplan.org/workshop/botAlign.jpg
(A URL should not contain a linebreak.)
Exactly what there is the matter?


this link is of the actual, live-code page: http://thinkplan.org/
workshop/ill.html


The page
http://thinkplan.org/workshop/ill.html
looks very different from the jpeg image, and on IE 8, it looks very broken 
(missing image symbols appearing). Apparently the image 
http://thinkplan.org/workshop/pix/johnill.png is missing, and IE is not as 
forgiving as Firefox.


The HTML code and the CSS code have syntax errors that are detectable using 
available checkers. They should be fixed, but more importantly, we need a 
description of the problem (what is expected, and a URL demonstrating an 
attempt to achieve that).


--
Yucca, http://www.cs.tut.fi/~jkorpela/ 


__
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] plain table rendering

[Jukka K. Korpela]

Angela French wrote:


I usually style all my tables with nice colors and never have any
rendering issues.


I usually have several issues, and I don't even consider colors, as a rule. 
But the issues depend on the table, its context, and its intended use.



Today I'm in a hurry, and just want a plain old
table dropped on my page:   


I don't think it's particularly plain. This is plain: .


Much to my surprise IE and FF render these two very differently (ff =
ugly).


The main difference is in the rendering of borders. If you specify 
border="1" and do not specify border properties (which can really be 
effectively set in CSS only), then you're asking browsers to use their 
default borders - and they are somewhat odd. But don't blame the poor 
wowsers only. After all, the browser doesn't know whether it's a data table 
or a layout table, and which type of data or layout table, so it uses a 
default rendering that is supposed to be somewhat tolerable with any kind of 
table. Hence it cannot be optimal for your intended use.



It gets even work when I drop in a small icon into the first
column.


I'm not sure what you mean - maybe "worse", not "work". In the absence of a 
URL, this is really guesswork. I don't see any particular rendering 
difference if I just insert an image in the first cell.



Can anyone tell me what the basic rendering issues are with plain
tables between the two browsers so I know how I need to start styling
this?


The border properties. If you use Quirks Mode, then there are also 
differences in inheriting font properties from the body element into tables.



Why can't they render a plain old table the same?


They are different browsers, so why should they behave the same, in matters 
where no specific behavior is mandated?


--
Yucca, http://www.cs.tut.fi/~jkorpela/ 


__
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] Make text bottom-align?

[John]

Hello;


I'm posting to learn whether there is code to enable bottom-alignment  
of text.





This link shows graphically what my goal is: http://thinkplan.org/ 
workshop/botAlign.jpg


this link is of the actual, live-code page: http://thinkplan.org/ 
workshop/ill.html


This link is of the css of the live page: http://thinkplan.org/ 
workshop/ill.css


thank you for ideas and for taking time to look at my links.

John
__
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] iPhone 4

[David Laakso]

On 12/10/10 2:36 PM, Don Miller wrote:


If this [1] is the site you are talking about it comes in fine as is 
on Mac OS X 10.4 iPhoney [G3 iPhone] simulator. And on the OperaMini 
simulator . Bear in mind on a 
desktop at 1280 and wider windows, particularly  on laptops running 
120 or 130 dpi [I'm at 1680/116.5 dpi], your line-measure is 
extraordinarily long and difficult to read. You may want to set a 
min/max width?



[1]


Questions are best posted to the list. And bottom posting while not a 
CSS-D list policy is appreciated.


Best,
~d


Thanks,
will look into max width.

Don




Try this on your outermost wrapper?:
#whatever{ min-width : 38em; max-width : 1198px; margin : 0 auto; 
overflow : hidden; }


--
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/

Re: [css-d] plain table rendering

[David Laakso]

On 12/10/10 3:05 PM, Angela French wrote:


I usually style all my tables with nice colors and never have any rendering issues.  Today I'm in a hurry, and just want a 
plain old table dropped on my page:

Angela French



This may help?

~d
PS Pointing to your problem page is always a good idea.

--
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] plain table rendering

[Angela French]

Hello,

I usually style all my tables with nice colors and never have any rendering 
issues.  Today I'm in a hurry, and just want a plain old table dropped on my 
page:   

Much to my surprise IE and FF render these two very differently (ff = ugly).  
It gets even work when I drop in a small icon into the first column.

Can anyone tell me what the basic rendering issues are with plain tables 
between the two browsers so I know how I need to start styling this?

Why can't they render a plain old table the same?

Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.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] How to 'unvisited' links?

[Michael Geary]

On Mon, Dec 6, 2010 at 8:07 PM, David Hucklesby  wrote:

> Using Firefox or Google Chrome, you have another option. Install Chris
> Pederick's Web Developer extension. From the "Miscellaneous" menu,
> choose the last option: "Visited Links." This lets you set all links as
> "visited" or "unvisited" at will.
>
> http://chrispederick.com/work/web-developer/


Oh wow, I didn't realize Chris had ported Web Developer to Chrome. Thanks so
much for pointing that out, David.

And let me second the suggestion - any developer who doesn't have the Web
Developer extension needs to get it right now!

-Mike
__
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] correct use of background-image

[G.Sørtun]

I read an article suggesting you start with building your site for a mobile 
site and then adding to it to create a desktop site but that is not always 
possible so I would like to figure out how to adapt a site.


Start by testing your (regularly styled) sites on various mobiles. If it 
works reasonably well - and on many devices/mobile browsers they 
probably will - you won't have to do anything. If something doesn't 
work, restyle that part (use mediaqueries) and leave the rest more or 
less as is.


• If a site's main target is mobile browsers, start there and add 
styling for desktop browsers.
• If a site's main target is desktop browsers, start there and add 
styling for mobile browsers/devices. That's usually also the best 
starting point if you want a site to work well on as many devices as 
possible.


Don't replace content-images with background-images for/on any device. 
Reduce decoration on mobiles relative to desktop browsers.


regards
Georg
__
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] correct use of background-image

[Chetan Crasta]

An image should be inserted as a background image only when it is
purely decorative. If an image is part of the content, it should be
inserted using the img element.
Background images are ignored by search engines, they don't figure in
search results. Also, background images are not accessible because
they are ignored by screen readers.

~Chetan

On Fri, Dec 10, 2010 at 10:04 PM, TriState Advantage, Kris Jacobson
 wrote:
> Recently I was studing a tutorial on taking an existing website and creating 
> a seperate style sheet to make the site workable as a mobile site. In the 
> tutorial you replace the existing header image with a smaller image using 
> background-image selector in the css.
> What I am not clear about, is the original image would have to be placed on 
> the original site using the background-image selector in css and not the html 
> image tag?
> Studing this I am thinking all the original images on the site would have to 
> be placed with the background-image tag so that the site could be adapted. 
> Which would probably involve each image in a seperate div so that this would 
> work.
> Am I interpeting this correctly? Is this proper use of the background-image 
> tag? I have tried googling background-image and haven't come up with any 
> answers.
> I read an article suggesting you start with building your site for a mobile 
> site and then adding to it to create a desktop site but that is not always 
> possible so I would like to figure out how to adapt a site.
> Any thoughts or suggestions on a better way to do this would be appreciated.
> Thank you
> Kris
> __
> 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] correct use of background-image

[David Laakso]

On 12/10/10 11:34 AM, TriState Advantage, Kris Jacobson wrote:

Recently I was studing a tutorial on taking an existing website and creating a 
seperate style sheet to make the site workable as a mobile site.
Kris


I'll let someone else answer your specific question.
But keep well in mind that almost always nowadays media queries are the 
way to go for mobile:







Best,
~d

--
:: desktop and mobile ::
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] correct use of background-image

[TriState Advantage, Kris Jacobson]

Recently I was studing a tutorial on taking an existing website and creating a 
seperate style sheet to make the site workable as a mobile site. In the 
tutorial you replace the existing header image with a smaller image using 
background-image selector in the css.
What I am not clear about, is the original image would have to be placed on the 
original site using the background-image selector in css and not the html image 
tag?
Studing this I am thinking all the original images on the site would have to be 
placed with the background-image tag so that the site could be adapted. Which 
would probably involve each image in a seperate div so that this would work.
Am I interpeting this correctly? Is this proper use of the background-image 
tag? I have tried googling background-image and haven't come up with any 
answers.
I read an article suggesting you start with building your site for a mobile 
site and then adding to it to create a desktop site but that is not always 
possible so I would like to figure out how to adapt a site.
Any thoughts or suggestions on a better way to do this would be appreciated.
Thank you
Kris
__
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] iPhone 4

[David Laakso]

On 12/9/10 9:19 PM, David Laakso wrote:

If you have an iPhone 4 simulator or handset ...>


Best,

Helen
Tuscumbia, Alabama




Thanks to all who took the time to check it and reply:-) .
~helen

--
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/

Re: [css-d] How to 'unvisited' links?

[Donna Jones]

When I test my page's css, I want to see  element both :link and
:visited.
But I have clicked the. How to return it to :link from :visited?
(without change it's URL?)


hi, if you have the web developer's toolbar, go to Miscellaneous > 
Visited Links (at bottom).  There you can change the links back and 
forth.  I find it tremendously helpful.


best
Donna

web developer's toolbar in case you need it:
http://chrispederick.com/work/web-developer/

__
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] Background image randomly showing in IE6 and IE7

[Chetan Crasta]

You have to give div#rightbackground hasLayout. You can use the
proprietary zoom:1 to do this:



~Chetan

On Fri, Dec 10, 2010 at 5:23 PM, Albert van der Veen
 wrote:
> Hi all,
>
> Please have a look at this site: http://www.debanne.nl/
>
> For some reason the large background photo on the right sometimes shows and
> sometimes not in IE6 and IE7. There are different pictures on every page
> which is accomplished by overruling the css with an extra style element in
> the header (generated by the CMS):
>
> #rightbackground {
> background-image:url("uploads/media/hp-foto-new.jpg"); }
>
> Any idea what causes this?
>
> Thanks,
> 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/
>
__
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 randomly showing in IE6 and IE7

[Albert van der Veen]

Hi all,

Please have a look at this site: http://www.debanne.nl/

For some reason the large background photo on the right sometimes shows 
and sometimes not in IE6 and IE7. There are different pictures on every 
page which is accomplished by overruling the css with an extra style 
element in the header (generated by the CMS):


#rightbackground { 
background-image:url("uploads/media/hp-foto-new.jpg"); }


Any idea what causes this?

Thanks,
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/