[css-d] bunch of ie problems

[Brian Cummiskey]

I'm nearing completion on a client website, but i keep running into 
numerous IE6 problems.  The site runs and looks perfect in firefox.  It 
is build off a highly modded wordpress install.

Rounded corners:  after some scrolling where the top portion of the page 
is out of view, sometimes IE will display it fine, others it will push 
the rounded corners out some, leaving a gap.  Other times, the corners 
stay put, but a blue bar fills the top margin area.  I'm wondering if 
this has to do with the HAS LAYOUT fix that Holly helped me with for the 
menus last week, but i'm not sure how to implement it on this type of 
markup.

Content area background gradient:  Fails to show in IE on all pages, 
expect where i have a:hover images on the category listing pages.  The 
links use the single image background positioning trick to pre load 
the hover image.  When hovered, the gradient appears. when un-hovered, 
it disappears again.  (check the price list or testimonials page for 
example)

There may be other things I haven't found yet, but those are the major 
ones i'm dealing with right now.
Also, I haven't checked it on a Mac yet, so if any mac users out there 
can give it a check, i'd appreciate it.

(sorry for the cloaked addresses, but i don't want the site public yet)

*site:  http://tinyurl.com/qdr9b
css:  **http://tinyurl.com/zld4l   (kinda messy, still working on 
cleaning up a lot of the default wordpress settings)

*Thanks,

-Brian
*
*
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Hyperlinks - best practice

[Bojana Lalic]

Hi all

 

Which of the following two is a better practice of including hyperlinks
on pages:

 

Including hyperlinks in the paragraphs:

 

Eg. 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus nisl
lorem, ullamcorper vitae, interdum et, venenatis at, pede. Vivamus risus
nunc, varius eu, dictum fermentum, rutrum a, massa.

 

OR

 

Displaying a list at the end of the paragraph:

 

Eg.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus nisl
lorem, ullamcorper vitae, interdum et, venenatis at, pede. Vivamus risus
nunc, varius eu, dictum fermentum, rutrum a, massa.

 

Dolor

Adipiscing

Vivamus

Ullamcorper

fermentum

 

Some of my colleagues are worried about the way screen readers read
links, and they would like me to point them to a resource that gives a
definitive answer... if there is such thing. 

 

Regards

 

Bojana
Global Summit 2006: Technology Connected Futures -- 17-19 October, Sydney, 
Australia.  

Visit our website http://www.educationau.edu.au/globalsummit2006 for further 
details.

_

IMPORTANT: This e-mail, including any attachments, may contain private or 
confidential information. 
If you think you may not be the intended recipient, or if you have received 
this e-mail in error, 
please contact the sender immediately and delete all copies of this e-mail. If 
you are not the intended 
recipient, you must not reproduce any part of this e-mail or disclose its 
contents to any other party.

This email represents the views of the individual sender, which do not 
necessarily reflect those of 
education.au limited except where the sender expressly states otherwise.

It is your responsibility to scan this email and any files transmitted with it 
for viruses or any other 
defects.

education.au limited will not be liable for any loss, damage or consequence 
caused directly or indirectly by this email.

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Hovering Background images in IE

[Jan Deppisch]

Hi,

I want to hover some floated background-images, but IE6 doesn't reset
the hover-state back to normal.

HTML:
div id=header
 a href=/service/span class=service title=ServiceService/span/a
 a href=/specials/span class=specials
title=SpecialsSpecials/span/a
/div

CSS:
#header {
 height: 106px;
}

#header a {
 float: left;
}

#header a:link span {
 display: block;
 height: 106px;
 text-indent: -5000px;
}

#header a:hover span {
 cursor: pointer;
}

#header a span.service {
 width: 134px;
 background: #fff url(../../_media/img/header/service_hell.jpg)
no-repeat center center;
}

#header a:hover span.service {
 width: 134px;
 background: #fff url(../../_media/img/header/service.jpg) no-repeat
center center;
}

#header a span.specials {
 width: 245px;
 background: #fff url(../../_media/img/header/specials_hell.jpg)
no-repeat center center;
}

#header a:hover span.specials {
 width: 245px;
 background: #fff url(../../_media/img/header/specials.jpg) no-repeat
center center;
}

Any other idea on how to optimize the css is welcome.

Thanks!

Jan
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Skewed Text.....can it be done?

[David O'Neill]

Hey one and all,

I was just playing with photoshop to come up with a new layout for a site
and I was wondering if it was possible to do skewed text, or divs. I am
finding it hard to word this properly so I will just post a link to the
image of what I have in mind. And if any of you have any comments or
suggestions please let me know.

http://2d.ie/roughwork4.jpg

Thanks a million
David

-- 
Depth In Two Dimensions
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Style with only one bit of content

[Eoin Maguire]

Occasionally I find that I need a style that's essentially exactly the same
as a previously made style (for example, the same BG colour and font-size)
but the new style needs something extra like bolding or something small like
that.

 

It seems strange to create a whole new style just for adding bold text but
then I can't think of any other way of doing it. I've ended up creating
styles named things like 'makeBold' with nothing more than font-weight:
bold inside them.

 

I keep thinking this is going against the proper way of doing scalable CSS
but can't think of a way of avoiding creating this extra style, short of
using strong tags.

 

Is this the proper way of adding simple levels of styling?

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] bunch of ie problems

[Gunlaug Sørtun]

Brian Cummiskey wrote:

 Rounded corners:  after some scrolling where the top portion of the 
 page is out of view, sometimes IE will display it fine, others it
 will push the rounded corners out some, leaving a gap.  Other times,
 the corners stay put, but a blue bar fills the top margin area.  I'm 
 wondering if this has to do with the HAS LAYOUT fix that Holly helped
  me with for the menus last week, but i'm not sure how to implement
 it on this type of markup.

You _can_ apply 'hasLayout', but it might be a bit complicated with
possible offset-positions and/or other adjustments.

However, it looks like the stacking is improved enough to make IE
paint reliable, if you add...

#page {position: relative;}

regards
 Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Skewed Text.....can it be done?

[Christian Heilmann]

 I was just playing with photoshop to come up with a new layout for a site
 and I was wondering if it was possible to do skewed text, or divs. I am
 finding it hard to word this properly so I will just post a link to the
 image of what I have in mind. And if any of you have any comments or
 suggestions please let me know.

 http://2d.ie/roughwork4.jpg

CSS doesn't do it
MSIE special filters for CSS do it:
http://en.selfhtml.org/css/eigenschaften/filter.htm
SVG will support this: http://www.xml.com/pub/a/2004/06/02/svgtype.html?page=3
Flash does it now

I wouldn't do it.

-- 
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Background image being overridden

[ed gooddy]

CSS in a table:
   I have a table with background images but I get a white background 
on the last line. I can´t work out why-I have got rid of the background color 
and tried to have a background transparent which worked for the radio buttons 
but the text input and the text next to it still have a white background. How 
can I get rid of the background?Thanks for any pointers


-
 Yahoo! Photos – NEW, now offering a quality print service from just 7p a photo.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Background image (LINK INCLUDED)

[ed gooddy]

CSS in a table:
   I have a table with background images but I get a white background 
on the last line. I can´t work out why-I have got rid of the background color 
and tried to have a background transparent which worked for the radio buttons 
but the text input and the text next to it still have a white background. How 
can I get rid of the background?Thanks for any pointers   
  http://www.britishalliance.com/test.html


-
 All new Yahoo! Mail The new Interface is stunning in its simplicity and ease 
of use. - PC Magazine
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Forms

[Zoe M. Gillenwater]

J. Robson wrote:
 Hi,

 Which the BEST form of use FORM ELEMENTS (web standards, usability and
 acessibity) and flexible with CSS? Vertical Form / Column Form /
 Margin Form and the other layoyut.
   

There's no best form layout. Each situation will call for something 
different. Just make sure you use labels correctly, and fieldsets and 
legends are a good idea as well. Other than that -- well, take a look at 
the options:
http://css-discuss.incutio.com/?page=FormElements

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Forms Best Pratices

[J. Robson]

Hi All,

Which the Best Pratices Semantic to HTML FORM (web standards, usability and
acessibity) and flexible with CSS?



Regards,

J. Robson
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Safari font sizes

[Ian Young]

Has anyone else come across Safari not rendering font size ?

Using following:
.caption {
margin-left:15px;
padding-right: 6px;
font-weight: normal;
font-size: 0.85em;
color: #ff;
font-family: arial, helvetica, sans-serif;
text-align: center;
}

Safari seems to ignore the 0.85 em and render as 1.0em.

html is span class=caption text /span

Any thoughts? Sorry no link available for this one.

Ian

**IMPORTANT*
***

This e-mail contains information which is confidential and may also be
privileged. It is for the exclusive use of the intended recipient(s). If you
are not the intended recipient(s) please note that any form of,
distribution, copying or use of this e-mail or the information in it is
strictly prohibited and may be unlawful. If you have received this in error
please inform us at the above address then delete the e-mail and destroy any
copies of it. Thank you.

--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.394 / Virus Database: 268.10.5/406 - Release Date: 02/08/2006
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Forms Best Pratices

[Alex Robinson]

At 10:16 -0300 3/8/06, J. Robson wrote:

Which the Best Pratices Semantic to HTML FORM (web standards, usability and
acessibity) and flexible with CSS?


See the answer that Zoe Gillenwater just sent to your previous nearly 
identical question:

At 09:03 -0400 3/8/06, Zoe M. Gillenwater wrote:
There's no best form layout. Each situation will call for something
different. Just make sure you use labels correctly, and fieldsets and
legends are a good idea as well. Other than that -- well, take a look at
the options:
http://css-discuss.incutio.com/?page=FormElements


There's nothing to add except to point out that your question about 
semantics and accessibility would be better suited to a list that 
caters for general web development discussion, since css-d exists to 
discuss the practical application of css, not markup, semantics, 
accessibility etc

http://css-discuss.incutio.com/?page=OffTopic

Also, please don't post essentially the same question again if no one 
has answered your initial post. Just be patient. Wait a couple of 
days. If no one has replied after that time, think about how you 
might ask your question better to get the answer you seek.


Alex Robinson
css-d moderator

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari font sizes

[ross]

try percent-  85%. (this depends on what you size you have in the body 
tag.


Ross
- Original Message - 
From: Ian Young [EMAIL PROTECTED]
To: [EMAIL PROTECTED] Css-Discuss. Org css-d@lists.css-discuss.org
Sent: Thursday, August 03, 2006 2:23 PM
Subject: [css-d] Safari font sizes


 Has anyone else come across Safari not rendering font size ?

 Using following:
 .caption {
 margin-left:15px;
 padding-right: 6px;
 font-weight: normal;
 font-size: 0.85em;
 color: #ff;
 font-family: arial, helvetica, sans-serif;
 text-align: center;
 }

 Safari seems to ignore the 0.85 em and render as 1.0em.

 html is span class=caption text /span

 Any thoughts? Sorry no link available for this one.

 Ian

 **IMPORTANT*
 ***

 This e-mail contains information which is confidential and may also be
 privileged. It is for the exclusive use of the intended recipient(s). If 
 you
 are not the intended recipient(s) please note that any form of,
 distribution, copying or use of this e-mail or the information in it is
 strictly prohibited and may be unlawful. If you have received this in 
 error
 please inform us at the above address then delete the e-mail and destroy 
 any
 copies of it. Thank you.

 --
 No virus found in this outgoing message.
 Checked by AVG Free Edition.
 Version: 7.1.394 / Virus Database: 268.10.5/406 - Release Date: 02/08/2006
 __
 css-discuss [EMAIL PROTECTED]
 http://www.css-discuss.org/mailman/listinfo/css-d
 IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
 List wiki/FAQ -- http://css-discuss.incutio.com/
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Skewed Text.....can it be done?

[Robert O'Rourke]

Christian Heilmann wrote:
 I was just playing with photoshop to come up with a new layout for a site
 and I was wondering if it was possible to do skewed text, or divs. I am
 finding it hard to word this properly so I will just post a link to the
 image of what I have in mind. And if any of you have any comments or
 suggestions please let me know.

 http://2d.ie/roughwork4.jpg
 

 CSS doesn't do it
 MSIE special filters for CSS do it:
 http://en.selfhtml.org/css/eigenschaften/filter.htm
 SVG will support this: http://www.xml.com/pub/a/2004/06/02/svgtype.html?page=3
 Flash does it now

 I wouldn't do it.

   

I reckon it could be done using eric meyer's slantastic method along 
with height: 100%; applied to 3 main column divs floated left with some 
left negative margins on them... oh and italic text. It'll probly look a 
bit naff and text-resizing will be an issue at larger sizes. Backwards 
compatibility is sucky too so you'd need an IE5.5 and below filter to 
convert back to plain columns.

http://meyerweb.com/eric/css/edge/slantastic/demo.html

It'd be interesting to see if it works. Best off with flash if looks are 
more important than search engines though.

Good luck =]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] CSS dummy needs advice - list of albums

[Jan Erik Moström]

I'm playing with CSS trying to learn more but right now I don't know what to do
(or even search Google for). I want a part of a page to contain a list of
different photo albums, I want it to look something like this

--
|   | Header |
|  Thumbnail| Info   |
|   | text text text text|
|   ||
--

--
|   | Header |
|  Thumbnail| Info   |
|   | text text text text|
|   ||
--

etc

Unfortunately the result becomes

--
|   | Header |
|  Thumbnail| Info   |
|   | text text text text|
|   | ---|
--| Thumbnail  | Header  |
  || info|
  || text text   |
  || text text   |
  

A screen dump can be found at http://www.yttersjo.se/Hus171/p1.png (the colors
are just for debugging purposes ;-)

I don't know if know I've understood things correctly but I think that the
thumbnail reaches below the div in which it's defined pushing the following
thumbnail to the right.

Unfortunately, I don't understand how I can fix this so the result will look
like I want. I would appriciate if anyone can tell me what I'm missing.

jem

The HTML code looks like this (at the moment)

div class=swedishpict
img src=landsmall.jpg alt= width=128 height=96 align=middle
h1a href=familj/hans_johanna_torp_2006/index.htmlHans och Johannas
torp, 22 juli 2006/a/h1
p class=albuminfo2006-07-22, swedish, A a href=explain.html
target=_blank(???)/a/p
p
Vi var och kollade på Hans och Johannas torp.
/p
/div

and the relevant parts of the CSS like this

div.swedishpict
{
background-color: #7f0;
margin: 0 auto;
width:400px;

}

div.swedishpict h1
{
background-color: #0f0;
margin: 0px;
font-size: 120%;
}

div.swedishpict p
{
background-color: #00f;
margin: 0px;
}

div.swedishpict img
{
background-color: #f00;
float: left;
padding: 2px 2px 2px 2px;
margin: 2px 2px 2px 2px;
border-color: #999;
border-width: 1px;
border-style: dotted;
}

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS dummy needs advice - list of albums

[Christian Heilmann]

Get the sample code for Bulletproof CSS by Dan Cederholm at
http://www.simplebits.com/publications/bulletproof/code/

Chapter 4 has an example that is exactly what you need.

The main problem with your CSS was that you floated the different
images to the left but you never cleared the floating. A quick fix
would be to add a clear:both to the settings for swedishpict.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS dummy needs advice - list of albums

[Scott Sauyet]

Try adding

 div.swedishpict img {
 clear: left
 }

and see if that helps.


Good luck,

   -- Scott

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS dummy needs advice - list of albums

[Jan Erik Moström]

Reply to Christian Heilmann [EMAIL PROTECTED] 06-08-03 15:00:

 Get the sample code for Bulletproof CSS by Dan Cederholm at
 http://www.simplebits.com/publications/bulletproof/code/
 
 Chapter 4 has an example that is exactly what you need.

Thanks (even the sweden part of the css code matches ;-)

jem
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Style with only one bit of content

[Christian Montoya]

On 8/3/06, Eoin Maguire [EMAIL PROTECTED] wrote:

 It seems strange to create a whole new style just for adding bold text but
 then I can't think of any other way of doing it. I've ended up creating
 styles named things like 'makeBold' with nothing more than font-weight:
 bold inside them.

 Is this the proper way of adding simple levels of styling?

Nope. Use multiple classes:

p class=special.../p
p class=special bold.../p

then in your CSS:

.special { font:...; color:...; }

.bold { font-weight:bold; }


-- 
-- 
Christian Montoya
christianmontoya.com ... portfolio.christianmontoya.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] bunch of ie problems

[Brian Cummiskey]

Gunlaug Sørtun wrote:
 #page {position: relative;}

 regards
  Georg
   
Thanks Georg.  This seems to have helped out greatly.  Its not perfect, 
but its much better than it was.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Style with only one bit of content

[Amy Ostrom]

Dear Eoin:

It is important not to get too carried away with CSS and divitis.  For
instance, using the strong element isn't necessarily bad in certain
contexts such as a book title or something that should contextually be
bold.  Another example is if you want section headers to be twice as big as
the text.  Don't create a new class for it, just use the h2 element, etc.
Not all (X)HTML is bad.  If you aren't sure what exactly bolding is for (W3C
explains the element as indicating stronger emphasis).  In my opinion,
using the strong element in most cases is not a no-no.

For all other uncertainties, think of your page as a research paper for
school.  Without any styling, does it make since?  Does where you use a h1
make since in a paper heirarchy/outline?  That is the true nature of HTML,
to mark up research documents.  CSS is simply design.

In peace,

Amy M Ostrom
Web Interface Designer
[EMAIL PROTECTED]

On 8/3/06, Eoin Maguire [EMAIL PROTECTED] wrote:

 Occasionally I find that I need a style that's essentially exactly the
 same
 as a previously made style (for example, the same BG colour and font-size)
 but the new style needs something extra like bolding or something small
 like
 that.



 It seems strange to create a whole new style just for adding bold text but
 then I can't think of any other way of doing it. I've ended up creating
 styles named things like 'makeBold' with nothing more than font-weight:
 bold inside them.



 I keep thinking this is going against the proper way of doing scalable CSS
 but can't think of a way of avoiding creating this extra style, short of
 using strong tags.



 Is this the proper way of adding simple levels of styling?

 __
 css-discuss [EMAIL PROTECTED]
 http://www.css-discuss.org/mailman/listinfo/css-d
 IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
 List wiki/FAQ -- http://css-discuss.incutio.com/
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/




-- 

In peace,

Amy M Ostrom
Web Interface Designer
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Style with only one bit of content

[Robert O'Rourke]

Christian Montoya wrote:
 On 8/3/06, Eoin Maguire [EMAIL PROTECTED] wrote:

   
 It seems strange to create a whole new style just for adding bold text but
 then I can't think of any other way of doing it. I've ended up creating
 styles named things like 'makeBold' with nothing more than font-weight:
 bold inside them.

 Is this the proper way of adding simple levels of styling?
 

 Nope. Use multiple classes:

 p class=special.../p
 p class=special bold.../p

 then in your CSS:

 .special { font:...; color:...; }

 .bold { font-weight:bold; }


   

Or better yet use a strong tag if it adds semantic value to the document.

http://www.stuffandnonsense.co.uk/archives/semantics_and_design.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] White space in IE

[Ian Young]

Been all through this one and cannot find where IE6 is adding some white
space at bottom of page.

Can anyone see the problem?
http://www.venachar-lochside.com
http://www.venachar-lochside.com/templates/css/styles2.css

Thanks in anticipation

Ian
**IMPORTANT*
***

This e-mail contains information which is confidential and may also be
privileged. It is for the exclusive use of the intended recipient(s). If you
are not the intended recipient(s) please note that any form of,
distribution, copying or use of this e-mail or the information in it is
strictly prohibited and may be unlawful. If you have received this in error
please inform us at the above address then delete the e-mail and destroy any
copies of it. Thank you.

--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.394 / Virus Database: 268.10.5/406 - Release Date: 02/08/2006
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Style with only one bit of content

[Dave Goodchild]

On 03/08/06, Robert O'Rourke [EMAIL PROTECTED] wrote:

 Christian Montoya wrote:
  On 8/3/06, Eoin Maguire [EMAIL PROTECTED] wrote:
 
 
  It seems strange to create a whole new style just for adding bold text
 but
  then I can't think of any other way of doing it. I've ended up creating
  styles named things like 'makeBold' with nothing more than
 font-weight:
  bold inside them.
 
  Is this the proper way of adding simple levels of styling?
 
 


Multiple classes are not supported by IE. Use strong for semantics, and if
you really need to:

strong {
font-weight: bold;
}

...strong is semantic, generally rendered as bold in browsers, and the css
rule will ensure that this is so from a presentational level!




-- 
http://www.web-buddha.co.uk
http://www.projectkarma.co.uk
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] bunch of ie problems

[Tom Keenan]

Brian,

First thing I always do is to try to validate the (x)html and css.  
Your xhtml validated but your css generated the following errors:


Errors
URI : http://www.mtcues.com/beta/wp-content/themes/mtcuestheme/style.css

 * Line: 569 Context : #catnav

   Invalid number : display inline-block is not a display value :  
inline-block
 * Line: 576 Context : #pagenav

   Invalid number : display inline-block is not a display value :  
inline-block
 * Line: 653 Context : * html #overlay

   attempt to find a semi-colon before the property name. add it
 * Line: 653 Context : * html #overlay

   Property progid doesn't exist : DXImageTransform
 * Line: 653 Context : * html #overlay

   Parse Error - DXImageTransform.Microsoft.AlphaImageLoader 
(src=overlay.png, sizingMethod=scale);
 * Line: 654 Context : * html #overlay

   Parse error - Unrecognized : }
 * Line: 656 Context : #h2wrapper

   Invalid number : margin Too many values or values are not  
recognized : 15px 0 15px 0 0



You also asked for someone to review the site on the mac. I viewed it  
using Safari 2.0.4 and Firefox 1.5.0.6.  I didn't visit every page  
but I did visit every menu item. In Safari I couldn't see any obvious  
errors. In Firefox it looked as though the search button and the  
search box overlapped by a few pixels.


Tom Keenan
[EMAIL PROTECTED]



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] weird IE display problem

[André Wilms]

Hello everyone,

I noticed a weird effect on this page

http://www.robbirobb.com/new/products/dailyfoods/baby_and_me.html

with these css files

http://www.robbirobb.com/new/styles.css
http://www.robbirobb.com/new/products/products.css

when I visit the site with the Internet Explorer 6/Win XP.

The effect can be seen if you go the site, scroll down to the bottom
and back up to the top. After scrolling down and up, a part of the site 
has changed its background color to white.

The effect is gone when I don't have this right-floating Megabytes box 
or if this Megabytes box doesn't get any floating so it spans across 
the entire width of the page. But I want this Megabytes box floating 
to the right ..

Has anybody here an idea what goes wrong?

Thank you in advance,
André
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background image (LINK INCLUDED)

[Florian Hamberger]

Am Donnerstag, 3. August 2006 15:00 schrieb ed gooddy:
 CSS in a table:
I have a table with background images but I get a white background
 on the last line. I can´t work out why-I have got rid of the background
 color and tried to have a background transparent which worked for the radio
 buttons but the text input and the text next to it still have a white
 background. How can I get rid of the background?Thanks for any pointers
 http://www.britishalliance.com/test.html

Hello Ed,
in your table there's one TR with only one TD and no colspan defined - usually 
you have 5 TDs per TR. Perhaps this may be the reason.

Regards
Florian
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Style with only one bit of content

[Robert O'Rourke]

Dave Goodchild wrote:


 On 03/08/06, *Robert O'Rourke* [EMAIL PROTECTED] 
 mailto:[EMAIL PROTECTED] wrote:

 Christian Montoya wrote:
  On 8/3/06, Eoin Maguire [EMAIL PROTECTED]
 mailto:[EMAIL PROTECTED] wrote:
 
 
  It seems strange to create a whole new style just for adding
 bold text but
  then I can't think of any other way of doing it. I've ended up
 creating
  styles named things like 'makeBold' with nothing more than
 font-weight:
  bold inside them.
 
  Is this the proper way of adding simple levels of styling?
 
 


 Multiple classes are not supported by IE. Use strong for semantics, 
 and if you really need to:


Thats only if you concatenate class rules in the css like so:

.className1.className { rule : attribute ; }

I've never had a problem using multiple classnames in the html as per 
Christian's suggestion and using the following css:

.className1 { rule : attribute ; }
.className2 { rule : attribute ; }

Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] White space in IE

[Gunlaug Sørtun]

Ian Young wrote:
 Been all through this one and cannot find where IE6 is adding some
 white space at bottom of page.

 http://www.venachar-lochside.com

This creates/is the whitespace:
div class=clearingnbsp;/div

Change it to:
div class=clearing!-- --/div
...and the whitespace is gone.

Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] multiple-level dropdown menu - exquisit implementation using purely CSS

[Robert Byrnes]

 Works on all versions of all browsers on all platforms:

 http://www.grc.com/menu2/invitro.htm

 Courtesy of Steve Gibson, a consummate perfectionist  ;)

 Not working with keyboard access (ok, also not forcing users to tab
 through all links either) and not allowing the menu to stay on the
 screen without causing scrollbars when there is not enough screen
 estate.

You wouldn't want the menu to disappear, would you?

 The CSS only functionality is achieved by using a lot of conditional
 comments to support MSIE 6 and the HTML rendered within IE6 is invalid
 (TABLES inside A elements!). The example also does not allow for
 resizing of the text, as I expect that'll cause issues.

The text you're referring to must be the buttons that appear in the masthead. 
They are actually images. The text in the menu dropdowns scales beautifully.

 It is a very impressive example of research and a creative idea to get
 around the MSIE 6 issue but once again it mixes behaviour,
 presentation and structure to allow for an effect in CSS that could be
 much easier and more accessible with JavaScript.

The whole point of this menu project was to avoid using JavaScript. Sorry 
Christian. Given that Internet Explorer is broken, one is then left with no 
choice but to mix presentation and structure, and create code that won't 
validate. Not a bad trade off considering what has been achieved.

If anyone is interested in Steve's process of development and testing (with 
many, many participants using different platforms, browsers, versions,) you can 
read the posts yourself at http://www.grc.com/groups/news.feedback. But I 
recommend that you download the posts (grc.news.feedback) into your news reader 
(from news.grc.com) for easier access. See http://www.grc.com/discussions.htm 
for more information about this method.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] multiple-level dropdown menu - exquisit implementation using purely CSS

[Christian Heilmann]

  Not working with keyboard access (ok, also not forcing users to tab
  through all links either) and not allowing the menu to stay on the
  screen without causing scrollbars when there is not enough screen
  estate.

 You wouldn't want the menu to disappear, would you?

No, I expect it to pop up to the right or upward instead of causing
scrollbars. Instead of extending the available space it tests if it
can fit and go to other directions if necessary.

  The CSS only functionality is achieved by using a lot of conditional
  comments to support MSIE 6 and the HTML rendered within IE6 is invalid
  (TABLES inside A elements!). The example also does not allow for
  resizing of the text, as I expect that'll cause issues.

 The text you're referring to must be the buttons that appear in the 
 masthead. They are actually images. The text in the menu dropdowns scales 
 beautifully.

As said, an assumption of mine. Sorry about that one.

  It is a very impressive example of research and a creative idea to get
  around the MSIE 6 issue but once again it mixes behaviour,
  presentation and structure to allow for an effect in CSS that could be
  much easier and more accessible with JavaScript.

 The whole point of this menu project was to avoid using JavaScript.

Now here is my big question: WHY?

Yes, JavaScript may not be available. But JavaScript can

- test if it is available,
- pull in styles when and if they are needed,
- test if the menus will fit the screen and pop them up in other
directions where there is space,
- provide keyboard access via the cursor keys (as multi level menus
work in applications),
- allow for delayed showing and hiding to make sure users with bad eye
hand coordination can use the menu
- even allow to pull in the secondary and tertiary levels via Ajax if needed.

Sorry Christian. Given that Internet Explorer is broken, one is then
left with no choice but to mix presentation and structure, and create
code that won't validate.

No you don't. You have to if you try to shoehorn behaviour into CSS,
which was meant for presentation definition. Seeing hacks like this
makes me wish :hover was never invented.

I am not saying that this is not an impressive amount of research and
development, I just see it as one that was based on wrong assumptions.
The assumption was that MSIE is broken and that CSS is the right
technology for menus.
Instead, the question before the research should be how should a
multi level menu work, how does it work in other applications and how
can we replicate it with web technologies. And when you test all the
use cases and problems of a menu like this you will soon find out that
CSS is not the technology to use.

Invalid markup is one thing, but having to add lots of conditional
comments and browser specific markup inside them bloats the HTML
unnecessarily and makes it a nightmare to maintain. Furthermore, users
that have to rely on tabbing or use assistive technology that does not
skip elements with a display attribute of hide willl get EVERY link in
the menu on every page, and will thank you for having to tab through
them all.

We all wave the finger at old outdated JavaScript that does browser
sniffing and code forkin, yet by avoiding JavaScript we put the code
forking inside the HTML. Same mistake, different playground.

By using JavaScript for the behaviour, HTML for the structure and CSS
for the look and feel you don't need any extra HTML and your CSS will
be a lot smaller, too.

Check out James Edward's Menu system and more importantly the chapter
on how it was built in the JavaScript Anthology:
http://www.brothercake.com/site/portfolio/book/
http://www.brothercake.com/site/products/menu/

Then take a look at Sun/Mozillas research in that area:
http://developer.mozilla.org/en/docs/Accessible_DHTML

By offering a complex menu like this we are crossing the boundary
between web development and application development, and a richer meny
also requires richer navigation options.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS External Links

[Julian Wilke]

On 01/08/06, David Dorward [EMAIL PROTECTED] wrote:
 I add background images of a globe. See http://dorward.me.uk/

 The CSS can be found at http://dorward.me.uk/css/easter-2005.css ,
 grep it for 'a[href ^=http:]'.

 Note that IE doesn't support a CSS way to recognise external links.
 You may wish to change the selectors and markup (e.g. add a class) to
 add support for IE.

A pretty thorough explanation of this technique can be found in this
article [1].
It's kind of a pseudo-convention to use an arrow pointing out of a
box/page icon for identifying external links. And as we all know from
usability expert Jakob Nielsen [2]: conventions are gd.

[1] http://www.maxdesign.com.au/presentation/external/
[2] http://www.useit.com/jakob/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Centering an inline list?

[Denise]

I am using ul and li to create a horizontal navigation menu in the
header area and would like the links to appear in the center of the
enclosing div.  Currently they align to the left.

Relevant markup is as follows:
#mdmenu {
width:800px;
height:30px;
margin:5px auto 20px auto;
background:url(../images/menu.gif) repeat-x;
border:1px solid #e0e0e0;
}
#mdmenu ul {list-style:none; margin:0px auto;}
#mdmenu li {
display:block;
text-align:center;
padding:5px 10px;
float:left;
}
#mdmenu li a { color:#7F7F7F; font-size:12px; }

An example can be viewed at:
http://www.unicornhosting.com/md1076/index.php?theme=passman

Thanks,
Denise

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] bunch of ie problems

[Brian Cummiskey]

Hi Tom,

  * Line: 569 Context : #catnav

Invalid number : display inline-block is not a display value :  
 inline-block
  * Line: 576 Context : #pagenav
   
These were the hacks Holly suggested to fix the HASLAYOUT IE bug on the 
nav bars.
Invalid number : display inline-block is not a display value :  
 inline-block
  * Line: 653 Context : * html #overlay

attempt to find a semi-colon before the property name. add it
  * Line: 653 Context : * html #overlay

Property progid doesn't exist : DXImageTransform
  * Line: 653 Context : * html #overlay

Parse Error - DXImageTransform.Microsoft.AlphaImageLoader 
 (src=overlay.png, sizingMethod=scale);
  * Line: 654 Context : * html #overlay
   
These are all part of the lightbox JS image viewer,  and again, are ie 
hacks.
Parse error - Unrecognized : }
  * Line: 656 Context : #h2wrapper

Invalid number : margin Too many values or values are not  
 recognized : 15px 0 15px 0 0
   
But that's a big oops.  That, or I'm trying out a new pentagon layout :D
 In Firefox it looked as though the search button and the  
 search box overlapped by a few pixels.
   
Thanks.  I'll add a hint more spacing between the box and button.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Site check review please - advice on ice/jello andcss format requested

[Peach Lynda L CTR USAF 96 CG/SCWOE]

 Well, if the validator were any good, it would tell you to use a valid 
 doctype...
 http://www.w3.org/TR/xhtml-media-types/#summary
  ...when serving pages as 'text/html'.

Validator I used was off Dreamweaver 8 and also off Firefox Web Developer 
Tools. The latter is HTML Tidy; I thought the DW8 was based on w3.org. 

I'm gathering the problem is this:
meta http-equiv=content-type content=text/html; charset=iso-8859-1 /

What should it be?

-
 That layout-solution clearly hasn't been tested with user-options such as 
 'font
 resizing', 'ignore font size' and 'minimum font size'.

Hmmm  -- I did do testing for resizing larger - smaller is rarely an issue. 
Admittedly didn't test for the other two specifically. Appreciate being 
reminded about this.

-
 Is it 'jello' or 'elastic' you want? :-) Number of columns doesn't really 
 matter, 
 but the way you approach it does. An example...
http://www.gunlaug.no/tos/moa_12a.html

I can do a 3 column with the big one in the center -- have them on the site. 
But couldn't find anything with 4 columns that met what I had to do on that 
site as far as links and content.

I can live with the iced-4-column but future work needs 4 columns where at 
least ONE of the middle or inner columns can be elastic. 

-
 B) should I take the CSS and pull like items together.
 Compacting the stylesheet is a good idea. May not help on maintenance though.

I think it would help with maintenance. In fact, that's the only reason I would 
take the time to do it. Right now if I alter say the padding and margin on 
those inner columns, I have to get it right on every ONE of those classes. If I 
cleaned it up or compacted it -- one change would be all that would be needed.

Appreciate your feedback a lot.

Lynda

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] target

[Julian Wilke]

On 01/08/06, Ed Seehouse [EMAIL PROTECTED] wrote:
 The solution is to use a doctype that allows _blank.   Or not to
 create new windows, which is favoured from a useability point of view.
   A lot of people these days have popup blockers installed and their
 browsers won't open your new window.  Darn, I promised no lecture,
 didn't I. :-)

I agree, I wouldn't force a new window as well. With tabbed browings
it is really annoying if a website is forcing you to open a link in a
new window. I think the target attribute is deprecated in the strict
doctypes for this exact reason. But don't quote me on this one.

If you wanted to have external links open in a new window I would
suggest that you identify the links as external through a litttle icon
instead, like explained here:
http://www.maxdesign.com.au/presentation/external/

This way the user can decide for himself if or not he wants to open
the link in a new window.

If you are tying to do a image gallery type of thing, therefore wanted
to open new windows, I would recommend to use the Lightbox JS Script
[1], it is pretty easy to set up and it degrades gracefully in case
JavaScript is deactivated.

[1] http://www.huddletogether.com/projects/lightbox/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering an inline list?

[cj]

the reason it's not centering with the (correct for what you're trying
to do) margins you have is because the ul is 100% width.  if firefox
actually had inline-block, you could set the display to that and be
done, but alas...  :'(

to be cross-browser, try something like
#mdmenu ul {list-style:none; margin:0px auto;width: 40em;}

i just picked a width, but it seemed to work for me on text resizing.  :)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering an inline list?

[Denise]

Excellent!  That did the trick.  Thank you.

-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Behalf Of cj
Sent: Thursday, August 03, 2006 1:13 PM
To: Denise
Cc: css-d
Subject: Re: [css-d] Centering an inline list?


the reason it's not centering with the (correct for what you're trying
to do) margins you have is because the ul is 100% width.  if firefox
actually had inline-block, you could set the display to that and be
done, but alas...  :'(

to be cross-browser, try something like
#mdmenu ul {list-style:none; margin:0px auto;width: 40em;}


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] bunch of ie problems

[Holly Bergevin]

From: Brian Cummiskey [EMAIL PROTECTED]

From: Tom
  * Line: 569 Context : #catnav

Invalid number : display inline-block is not a display value :  
 inline-block
  * Line: 576 Context : #pagenav
   
These were the hacks Holly suggested to fix the HASLAYOUT IE bug on the 
nav bars.

and so forth. Using the CSS validator set to parse a style sheet with the 
version 2.1 or higher set, there is no error for - 

#catnav {display: inline-block;}

Watch out for huge wrapping difficulties - 
http://jigsaw.w3.org/css-validator/validator?text=%23catnav+%7Bdisplay%3A+inline-block%3B%7Dwarning=1profile=css21usermedium=all

Just thought I'd mention it.

~holly 
 
   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Background image dropping in div when borders commented out

[Ian Young]

In this draft of site for client, put background image inside a div in order
to control for different resolutions.

Two odd things.

Despite having same position as when defined in body - 50% 30%, the image
has dropped lower in page. More bizarrely in the div where the image is
located, if the border is commented out or deleted the image drops to bottom
of page.

I have tried all combinations of background-position and still cannot get
image to site at top of page in centre.

Both html and css validate. So what's going on?

http://www.iyesolutions.co.uk/templates/new-dol/home-test.html
http://www.iyesolutions.co.uk/templates/new-dol/includes/style-home.css

Original
http://www.directors-online.net

Got me stumped.

Ian
**IMPORTANT*
***

This e-mail contains information which is confidential and may also be
privileged. It is for the exclusive use of the intended recipient(s). If you
are not the intended recipient(s) please note that any form of,
distribution, copying or use of this e-mail or the information in it is
strictly prohibited and may be unlawful. If you have received this in error
please inform us at the above address then delete the e-mail and destroy any
copies of it. Thank you.

--
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.394 / Virus Database: 268.10.5/406 - Release Date: 02/08/2006
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Site check review please - advice on ice/jello andcss format requested

[Gunlaug Sørtun]

Peach Lynda L CTR USAF 96 CG/SCWOE wrote:

 I'm gathering the problem is this: meta http-equiv=content-type 
 content=text/html; charset=iso-8859-1 /
 
 What should it be?

Never mind the meta-element. It doesn't matter out on the web.

This is what W3C states:
- The doctype you've used: XHTML 1.1, *should not* be used for a document
served as 'text/html'.
- You're left with (HTML compatible) XHTML 1.0 or HTML 4.01 when using
that MIME-type.

No validator of any flavor or origin will help you here, so you just
have to take W3C's own words (articles) for it...
http://www.w3.org/TR/xhtml-media-types/#summary
http://www.w3.org/MarkUp/2004/xhtml-faq#mime11

 -
 
 That layout-solution clearly hasn't been tested with user-options 
 such as 'font resizing', 'ignore font size' and 'minimum font 
 size'.
 
 
 Hmmm  -- I did do testing for resizing larger - smaller is rarely an 
 issue. Admittedly didn't test for the other two specifically. 
 Appreciate being reminded about this.

FYI: I hardly ever resize fonts. Instead I have set a 'minimum font
size' value so my browsers do it automatically for me on every site.
Few sites seems to be well prepared for that option, and you can find
quite a few complaints about that on various forums.

 Is it 'jello' or 'elastic' you want? :-) Number of columns doesn't 
 really matter, but the way you approach it does. An example... 
 http://www.gunlaug.no/tos/moa_12a.html
 
 
 I can do a 3 column with the big one in the center -- have them on 
 the site. But couldn't find anything with 4 columns that met what I 
 had to do on that site as far as links and content.
 
 I can live with the iced-4-column but future work needs 4 columns 
 where at least ONE of the middle or inner columns can be elastic.

1: your 4-column isn't iced or fixed - it is em-based: locked to
font-size.

2: my example is elastic: it is guided by (will expand with) the
font-size, but will stay within the width of the browser-window - as
long as the window is wider than a fixed min-width. I haven't bothered
to give my particular solution a name, since it is only the method for
solving problems with IE/win (pre IE7) that is somewhat new.

I have not written an in-depth article about possible line-ups and
numbers of columns for my elastic solution, but any number of
side-by-side columns will work with the method I've used in my example.
The variable - em-based max-width - is only on the outer container,
while all columns use a percentage-width.
Min-width takes care of the problems with overlapping and/or dropped
columns, as long as the author takes care of image-dimensions and alike.

You'll have to relearn how to apply font-size base if you want IE6
(and older versions) to play along though, as all the common practice
methods with font-size on body will override IE's own internal values. I
have simply moved the font-size base further in, thus avoided the
collision.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background image dropping in div when borders commented out

[Don Miller]

- Original Message -
From: Ian Young [EMAIL PROTECTED]
To: [EMAIL PROTECTED] Css-Discuss. Org css-d@lists.css-discuss.org
Sent: Thursday, August 03, 2006 11:41 AM
Subject: [css-d] Background image dropping in div when borders commented out
|
| Two odd things.
|
| Despite having same position as when defined in body - 50% 30%, the image
| has dropped lower in page. More bizarrely in the div where the image is
| located, if the border is commented out or deleted the image drops to
bottom
| of page.
|
| Both html and css validate. So what's going on?
|
| http://www.iyesolutions.co.uk/templates/new-dol/home-test.html
| http://www.iyesolutions.co.uk/templates/new-dol/includes/style-home.css
|
| Original
| http://www.directors-online.net
|
| Got me stumped.

Ian:
Looks fine in IE6 Win98 except the log in stuff is also at the top but I
think it looks good that way.
What browsers are causing the trouble All or only---??

Don

| __
| css-discuss [EMAIL PROTECTED]
| http://www.css-discuss.org/mailman/listinfo/css-d
| IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
| List wiki/FAQ -- http://css-discuss.incutio.com/
| Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
|
|
|
| --
| No virus found in this incoming message.
| Checked by AVG Free Edition.
| Version: 7.1.394 / Virus Database: 268.10.5/406 - Release Date: 8/2/2006
|
|



-- 
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.394 / Virus Database: 268.10.5/406 - Release Date: 8/2/2006

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Site check review please - advice on ice/jello andcss format requested

[Peach Lynda L CTR USAF 96 CG/SCWOE]

Others can join Georg  I in this discussion ... :-)

 Never mind the meta-element. It doesn't matter out on the web.

 This is what W3C states:
 - The doctype you've used: XHTML 1.1, *should not* be used for a document 
   served as 'text/html'.
 - You're left with (HTML compatible) XHTML 1.0 or HTML 4.01 when using 
   that MIME-type.

Okay -- I'll remove that line from the page.
Knowing that DOCTYPE has a major impact on browser handling of HTML and CSS .. 
after replying to your earlier email, I got to look at DOCTYPE and the META via 
Google. I'm thinking I may have the wrong DOCTYPE at the top. I've been using 
transitional in my sites but wanted to stretch myself in dealing with strict. 
  http://www.w3.org/TR/xhtml1/ has the following for strict ..
  !DOCTYPE html 
 PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
 http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;

Yet the code I have has 
  !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en

If I replaced the above with the w3.org strict recommended DOCTYPE, am I going 
to case problems in the CSS and browser rendering?
-

 FYI: I hardly ever resize fonts. Instead I have set a 'minimum font size' 
 value so my browsers do it automatically for me on every site.
 Few sites seems to be well prepared for that option, and you can find 
 quite a few complaints about that on various forums.

Ahhh -- my work doesn't allow me that luxury. And frankly haven't ever had 
the 2x4 hit me over the head to bring it to my attention. But I can see why 
people would do it. I'll do a better job in the future of checking for it.
-

 1: your 4-column isn't iced or fixed - it is em-based: locked to 
 font-size.

I knew I had a fixed or locked size as far as width. I accepted that but 
did want to avoid locking the user to ONLY viewing in say 10px. I hate when 
that is done to me! I think the lesson learned here is whether it be pixel or 
em -- locked is locked. If you are forcing the user to view everything in a set 
space for the entire page expect some feathers to be ruffled. By doing that you 
are started out by stating you will view my page in this box -- whether you 
like it or not. Something I knew -- and have known for a long time. Guess I 
just needed to be reminded as to why we have moved away from fixed page widths 
in layout.

 2: my example is elastic: it is guided by (will expand with) the font-size, 
 but will 
 stay within the width of the browser-window - as long as the window is wider 
 than a 
 fixed min-width. I haven't bothered to give my particular solution a 
 name, since 
 it is only the method for solving problems with IE/win (pre IE7) that is 
 somewhat new.

 I have not written an in-depth article about possible line-ups and numbers of 
 columns 
 for my elastic solution, but any number of side-by-side columns will work 
 with the 
 method I've used in my example.
 The variable - em-based max-width - is only on the outer container, while all 
 columns 
 use a percentage-width.
 Min-width takes care of the problems with overlapping and/or dropped columns, 
 as long 
 as the author takes care of image-dimensions and alike.

Wish you'd write that in-depth article. I'm going to go look at the WIKI 
(again). I get along fine in the 3 column elastic. While I could leave this 
site just as it is and move along, there are reasons why it would behoove me to 
understand what you are talking about and perhaps achieve a better result than 
what I'm getting now.

Several other sites within this one (such as the simple 
http://www.eglin.af.mil/chapel/) are elastic. Maybe what I should do is take 
that one and see if I can get the single inner column to become two columns. 
And NOT by inserting a table either. 

Anyone with advice on WHERE to look for tutorials or examples of how I 
could achieve the latter would be great appreciated.

Thanks again ..
Lynda
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Various Display Oddities

[Matthew Bernhardt]

Hello everyone,
   I'm back, with another pair of somewhat-vexing phenomena. For reference,  
here is the page and CSS I'm talking about:

http://support.knowlton.ohio-state.edu/ksa06jello/

I've run this page through the XHTML and CSS validators, and they're  
reporting that everything is valid.

There are 4 areas where this page doesn't render as I intend in various  
browsers. I've tried to massage each of them away, but haven't succeeded.  
At this point, I could use a set of eyes that aren't mine. For  
clarificatin, I've shaded the two divs (#ksamasthead and #ksasubmasthead)  
that are related to these issues.

The issues (in descending importance):
1) also on IE6/Win, the #ksamasthead div doesn't land on the  
#ksasubmasthead div below it. I believe this is due to the logo image  
being floated, and so passing outside the #ksamasthead div. I looked at  
the Wiki and added an overflow: auto; to fix this situation in the other  
browsers, but IE doesn't budge.

On a related note, the main menu (The School | Architecture ...) is  
something I'd ideally like to vertically align to the bottom of the  
ksamasthead div. Vertical alignment, though, is something I've struggled  
with. I've gotten it to work in some test pages, but not others, and not  
this one. Currently I've assigned that div a margin-top: 4em; which  
works in normal text sizes, but when I scale the text down it doesn't work  
anymore.

2) on IE6/Win, submenu (Welcome | News | Events...) has a 1-pixel gap  
between it and the border of its div. That gap doesn't appear in Opera9,  
nor FF1.5.0.6. I don't believe it appears on any Mac browser in my test  
suite (Safari/FF/Opera/IE). In looking over the CSS, I don't define  
-anything- to happen above that menu; interestingly, the list at the  
bottom of the page (Knowlton School of Architecture | 275...) is showing  
correctly with what should be identical markup strategies?

3) on FF1.5.0.6/Win, the top of the content box disappears. It's assigned  
as the top border of the #ksasubmasthead div - and it's being covered by  
something but I'm not sure what. If I make it 2 pixels wide, it shows 1  
pixel worth (and the other browsers all show 2 pixels). This just popped  
up recently, it was working about an hour ago - but not now.

4) This is picking nits, but I've tried adding a :last-child selector in  
the CSS for both the main and sub menus to add a trailing color bar to the  
right of both menus. It shows up correctly in FF, but not in Opera or IE.  
I'm not too stressed about this one, but I am curious about why it's  
happening?

Thanks very much for any insight anyone can offer.

-- 
Matt Bernhardt, [EMAIL PROTECTED]
Webmaster  +  Fab  Lab  Coordinator
Knowlton  School   of  Architecture
TheOhio StateUniversity
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] div's not reflowing correctly as window gets smaller (IE win)

[Michael]

I am using AListAparts liquid layout method with negative margins.  I  
have a two column layout with the navigation on the right hand side.   
All was working fine until I tried to add some index blocks.  Each  
block is a div and consists of a thumbnail picture and some text.  I  
was hoping the blocks would end up in rows and columns and would use  
the available  space in the window.  The wider the window, the more  
columns.  Works for FireFox (Mac and PC).

However on IE (Win), the right nav will encroach upon the right  
column of blocks, the nav content will bounce down below, until a  
significant portion of the column is overlayed.  Then the blocks will  
reflow correctly, the nav comes back, until the window gets close to  
the next column once again.

All files have been Tidy'd and validated strict.

http://www.sandsmuseum.com/test/index.html

(The page has links to the css below for ease of viewing.)

css:
initialization:  http://www.sandsmuseum.com/global/cssstyle/ 
undoinitialization.css
layout:  http://www.sandsmuseum.com/global/cssstyle/layout.css
navigation:  http://www.sandsmuseum.com/global/cssstyle/rightnav.css
text format:  http://www.sandsmuseum.com/global/cssstyle/sitetext.css

The layout and the sitetext, where the class for the blocks  
(indexelement) are of most interest.

Comments about anything I have done or am doing will be gratefully  
accepted.

Thanks,

Michael

Michael Sands
1652 Kennewick Drive
Sunnyvale, CA  94087

+1 408-773-1170

The Sands Mechanical Museum
www.sandsmuseum.com


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] suckerfish AND Real Player movies

[neal]

hello -
I deployed the wonderful suckerfish dropdown and if it goes in front of a
flash file setting the parameter to trans allows the drop to go over the
Flash - - however if the flash is serving a real player video the drop
down goes under it - - anyone come across this ?  any solutions?

thanks

Neal
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] suckerfish AND Real Player movies

[Micky Hulse]

wmode=opaque

Not a 100% fix... but is usable and works better (imho) than 
transparent (depending on circumstance.)

You might gander at:

Flash, DHTML Menus and Accessibility:
http://snipurl.com/m08r

This article has shown you reasons you may want to use opaque mode in 
your Flash movies. Opaque mode allows your DHTML drop down menus to stay 
in front of your Flash movie as well as hiding non-essential Flash from 
screen readers. Yes, transparent mode will also allow your DHTML drop 
down menus to render properly and will hide non-essential Flash, but due 
to possible performance issues, that's best left for opaque mode. Use 
transparent mode to show elements stacked beneath your Flash movie and 
when actual transparency is needed.

Here is the example used from that article:

WMODE(s):
http://snipurl.com/u6hx


Hths.
Cheers,
Micky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background image dropping in div when borders commented out

[Shawn Lawler]

Here are a couple of things to get you started in the right direction.

1.  body {margin:0; padding:0;}
2.  As far as I can tell (by viewing the full background image), the 
background image on www.directors-online.net is positioned from its left 
and bottom edges (so that the top most portion of the image isn't 
visible) - in your version you're attempting to position the image from 
the left and top.  And so something like [background-position: 50% 
bottom;] would get you pretty close to what you want.

Check this link out for more info on background positioning:
http://www.quirksmode.org/css/backgroundposition.html

Hope this helps,
Shawn Lawler


Ian Young wrote:
 In this draft of site for client, put background image inside a div in order
 to control for different resolutions.

 Two odd things.

 Despite having same position as when defined in body - 50% 30%, the image
 has dropped lower in page. More bizarrely in the div where the image is
 located, if the border is commented out or deleted the image drops to bottom
 of page.

 I have tried all combinations of background-position and still cannot get
 image to site at top of page in centre.

 Both html and css validate. So what's going on?

 http://www.iyesolutions.co.uk/templates/new-dol/home-test.html
 http://www.iyesolutions.co.uk/templates/new-dol/includes/style-home.css

 Original
 http://www.directors-online.net

 Got me stumped.

 Ian
   
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Identify the IE Bug

[PETER SHEATS]

Can someone help me identify the IE bug that causes the content to be
cut off at this page:

http://www1.pba.edu/undergraduate/music-arts/art/majors-minors.cfm?degre
e=SARTMN06 

 

The page looks fine in Firefox, Opera, and others but messes up in IE 6
and IE 7.  I've looked at all the bugs and I can't figure out what on
earth is causing it.  

 

Any help would be extremely appreciated!

 

Thanks,

 

Peter Sheats

 

Webmaster

Palm Beach Atlantic University

[EMAIL PROTECTED]

561.803.2033

 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background image dropping in div when borders commented out

[Ian Young]

 Both html and css validate. So what's going on?
|
| http://www.iyesolutions.co.uk/templates/new-dol/home-test.html
| http://www.iyesolutions.co.uk/templates/new-dol/includes/style-home.css
|
| Original
| http://www.directors-online.net
|
| Got me stumped.

Ian:
Looks fine in IE6 Win98 except the log in stuff is also at the top but I
think it looks good that way.
What browsers are causing the trouble All or only---??

Don


Happens in all browsers.

http://www.iyesolutions.co.uk/templates/new-dol/home-testa.html

shows the effect when the border in #maincontent is comments out

Ian
-- 
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.394 / Virus Database: 268.10.5/406 - Release Date: 02/08/2006

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Gap along right side (from header to footer) in IE5.5 6

[Jeralyn Merideth]

I thought it might be the header pushing everything to the right so I tried 
re-working it using width: 100%, margin-right: 0, margin: 0,all 
combinations I can think of and nothing is closing the gap. I am missing 
something but cannot find it. I would appreciate some fresh eyes on this 
problem. Also, as an aside, I am using an image replacement for the header and 
needed it to be a link. While that task was accomplished, the cursor doesn't 
change (in IE, I noticed...FF is ok) so unless you're looking at the progress 
bar you wouldn't know it's a link. Did I code it incorrectly?

http://www.msbanet.org/emails/Esgn/060802_esgn_pandemicDVD.htm

Thanks,

Jeralyn


-
Do you Yahoo!?
 Get on board. You're invited to try the new Yahoo! Mail Beta.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Identify the IE Bug

[[EMAIL PROTECTED]]

I use tables so rarely, and not for layout so I don't have the 
experience to know exactly what is going on with IE.  I would recode as 
follows:

h2Elective Art Courses (6 Credit Hours)/h2

h3Two 2000 Level Art Courses/h3
pNote: Following the completion of the above required courses; the 
remainder of the 17 credits may be achieved through the completion of 
art courses at any level and in any sequence. Prerequisites must be 
followed.
/p

This would require very little css to look as you like.  And the markup 
would be cleaner and semantically correct.  You should also get rid of 
the many html errors.

Not exactly an answer to your question, but I think this will solve your 
problem
-- 
Joel Goldstick
www.columbuswebmakers.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] A quick Hello and a question

[Wade Markham]

Hello all,

 

I'm Wade, a new designer. I've a problem, and unfortunately, I don't an url
for the troublesome code. Can I post the code?

 

Wade 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Site check review please - advice on ice/jello andcss format requested

[Gunlaug Sørtun]

Peach Lynda L CTR USAF 96 CG/SCWOE wrote:
 Others can join Georg  I in this discussion ... :-)

Yes, please do :-)
Nothing like a creative discussion in the midst of all the IE-bugs we
have to kill.

 Never mind the meta-element. It doesn't matter out on the web.

 Okay -- I'll remove that line from the page.

Leave the meta in the page, since at least /some/ browsers may use it
off-line - so it's useful for testing and such. It just does not make
any difference on-line.

 Yet the code I have has !DOCTYPE html PUBLIC -//W3C//DTD XHTML 
 1.1//EN http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd; html 
 xmlns=http://www.w3.org/1999/xhtml; xml:lang=en

 If I replaced the above with the w3.org strict recommended DOCTYPE, 
 am I going to case problems in the CSS and browser rendering?

I don't think so. There are some slight differences between
HTML-compatible XHTML 1.0 and the non-HTML-compatible XHTML 1.1, so
check with the W3C HTML validator.
Browsers won't create any problems that I know of.

You can always test if browsers accept your XHTML - for future-proofing,
by serving your XHTML 1.0 Strict as both 'text/html' and
'application/xhtml+xml'.
Information and example on how I do it...
'text/html': http://www.gunlaug.no/contents/wd_1_06_03.html
'app...n/xhtml+xml': http://www.gunlaug.no/contents/wd_1_06_03.xhtml

 FYI: I hardly ever resize fonts. Instead I have set a 'minimum font
  size' value so my browsers do it automatically for me on every 
 site. Few sites seems to be well prepared for that option, and you 
 can find quite a few complaints about that on various forums.
 
 
 Ahhh -- my work doesn't allow me that luxury. And frankly haven't 
 ever had the 2x4 hit me over the head to bring it to my attention. 
 But I can see why people would do it. I'll do a better job in the 
 future of checking for it.

Luxury? :-)
Testing with regular browser-options?

I don't surf much, but I always design with such user-options in mind -
like explained here...
http://www.gunlaug.no/contents/wd_1_03_04.html
...and it sure affects how I apply CSS, so we're right on-topic here on
css-d ;-)

 Wish you'd write that in-depth article.

I didn't think it were a need for it, since the basics are explained by
others.
Roger Johannson has an article on the subject...
http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/
...but he hasn't bothered to make it work properly in IE6.

(Last time I referred to RJ's article/method here on css-d, we had a
long and somewhat interesting discussion which came pretty close to a
flame-war. Let's avoid that this time around :-) )

The missing pieces for IE6 is what makes most elastic designs fail,
thus I created a solution that works.
There are probably other ways to do it, but I haven't found any out here
that worked to my satisfaction. Most work like what you have now, and I
don't think those are any good.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Gap along right side (from header to footer) in IE5.5 6

[[EMAIL PROTECTED]]

#wrapper {padding: 0;}


Not sure, but this might work.  IE and FF have different defaults;
-- 
Joel Goldstick
www.columbuswebmakers.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] p:first-letter

[jaklitsch maya]

I tried for the first time p:first-letter. 

When I used it it, every first letter of every p on
the site got changed. I only put in a slightly larger
increase in font size and bold it. What I also got in
ie6 was an at least 1em if not more space between the
first letter and the second. I reduced margin-right to
0, but nothing changed.

When I tried to limit it to a single page with
.classname p:first-letter the browsers ignored it,
both ie and ff.

Why?

Maya 

__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Identify the IE Bug

[Gunlaug Sørtun]

PETER SHEATS wrote:
 Can someone help me identify the IE bug that causes the content to be
  cut off at this page:
 
 http://www1.pba.edu/undergraduate/music-arts/art/majors-minors.cfm?degre
  e=SARTMN06

Sorry, but that is one of the buggiest source-codes I have seen in a
long time...
(X)HTML: 51 errors.
...so you should at least try to clean it up some before looking for
browser-bugs.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] p:first-letter

[Shelly]

Ooo..one I can finally answer!

 .classname p:first-letter

should be:

p.classname:first-letter

Hope that helps :)

~Shelly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Trouble with putting a background-image in container

[Wade Markham]

When I try to create a background by using a jpeg file for container {}, I
get nothing.

 

  container {

  width: 703px;

  position: absolute;

  background-image: url(Images/Paper.jpg);

  }

 

Wade

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] p:first-letter

[Philippe Wittenbergh]

On Aug 4, 2006, at 7:17 AM, jaklitsch maya wrote:

 I tried for the first time p:first-letter.

 When I used it it, every first letter of every p on
 the site got changed. I only put in a slightly larger
 increase in font size and bold it. What I also got in
 ie6 was an at least 1em if not more space between the
 first letter and the second. I reduced margin-right to
 0, but nothing changed.

 When I tried to limit it to a single page with
 .classname p:first-letter the browsers ignored it,
 both ie and ff.

 Why?


.classname p:first-letter reads as the the first-letter of a p that  
is a child of an element with .classname.
Make it p.classname:first-letter

Concerning your IE problem, see also this page for some of the more  
interesting problems with ::first-letter in iExploder (v7 is a bit  
better, but still has some nice problems).
http://www.satzansatz.de/cssd/pseudocss.html

Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com




__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Identify the IE Bug

[Tom Keenan]

From: [EMAIL PROTECTED]
Subject:Re: [css-d] Identify the IE Bug
Date:   August 3, 2006 3:22:15 PM PDT
To:   [EMAIL PROTECTED]
Cc:   css-d@lists.css-discuss.org

Well, first try validating. When I tried to validate your xhtml at  
http://validator.w3.org/ it turned up 51 errors. Now I grant you  
some are picky but my experience is that running down these errors  
really helps in making things work smoothly.

I also tried validating your CSS at http://jigsaw.w3.org/css- 
validator/ and it stopped dead with an error.

There is indeed missing content in IE6 and it does indeed look fine  
in Safari and Firefox.
There are many IE6 errors documented at http:// 
www.positioniseverything.net/explorer.html (an excellent resource -  
the whole site not just that set of pages).

Good luck,

Tom Keenan
[EMAIL PROTECTED]



On Aug 3, 2006, at 2:42 PM, PETER SHEATS wrote:



 Can someone help me identify the IE bug that causes the content to be
 cut off at this page:

 http://www1.pba.edu/undergraduate/music-arts/art/majors-minors.cfm? 
 degre
 e=SARTMN06



 The page looks fine in Firefox, Opera, and others but messes up in  
 IE 6
 and IE 7.  I've looked at all the bugs and I can't figure out what on
 earth is causing it.



 Any help would be extremely appreciated!



 Thanks,



 Peter Sheats



 Webmaster

 Palm Beach Atlantic University

 [EMAIL PROTECTED]

 561.803.2033



 __
 css-discuss [EMAIL PROTECTED]
 http://www.css-discuss.org/mailman/listinfo/css-d
 IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
 List wiki/FAQ -- http://css-discuss.incutio.com/
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/




Tom Keenan
[EMAIL PROTECTED]



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] A quick Hello and a question

[Steve Clason]

Wade Markham wrote:
 Hello all,

 I'm Wade, a new designer. 

Hi Wade.

 I've a problem, and unfortunately, I don't an url
 for the troublesome code. Can I post the code?

You can post the code but you are less likely to get help than if you 
supply a URL.


-- 
Steve Clason
Web Design  Development
Boulder, Colorado, USA
www.topdogstrategy.com
(303)818-8590

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Trouble with putting a background-image in container

[Steve Clason]

Wade Markham wrote:

 When I try to create a background by using a jpeg file for container {}, I
 get nothing.

   container {
   width: 703px;
   position: absolute;
   background-image: url(Images/Paper.jpg);
   }

Hard to say without a URL, but if your CSS sits in its own directory 
then the path might be wrong--you might need (for instance):

background-image: url(/Images/Paper.jpg);

I don't believe you need the quotes but I think they look pretty.


-- 
Steve Clason
Web Design  Development
Boulder, Colorado, USA
www.topdogstrategy.com
(303)818-8590

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] need help with placement of boxes in CSS

[juliann wheeler]

I have my site nearly completed.  You can look at it here:

http://www.juliannwheeler.com/phyve/Phyve_Final/index_final.html

It looks great in Firefox, but in Internet Explorer many of the boxes are 
placed in the wrong place.

If you clock on who on the left nav you can see 4 different pages:
Name Creation
Brand Strategy  Identity
Safety Testing
Market Research

Each of these pages has a heading above the content in a teal all caps font. 
  Even though the placement of this box that holds this type is the same on 
each of these pages you can see in IE how it jumps around and is different 
on each one of these pages.

ALSO, my rollovers for the left nav do not work in IE, but they work fine in 
Firefox.

Can anyone explain


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Various Display Oddities

[Gunlaug Sørtun]

Matthew Bernhardt wrote:
 http://support.knowlton.ohio-state.edu/ksa06jello/

 1) also on IE6/Win, the #ksamasthead div doesn't land on the 
 #ksasubmasthead div below it. I believe this is due to the logo image
  being floated, and so passing outside the #ksamasthead div. I looked
  at the Wiki and added an overflow: auto; to fix this situation in 
 the other browsers, but IE doesn't budge.

IE6 knows nothing about standards on that point. It needs a
'hasLayout'[1] trigger - as usual.

#ksamasthead {zoom: 1;}
...will do the trick.

* html #ksamasthead {overflow: visible; height: 1%;}
...is an even better option.


And while you're at it: change...
#ksamasthead {overflow: auto;}
...to...
#ksamasthead {overflow: hidden;}
...to avoid the potential Gecko-bug on the former.

 On a related note, the main menu (The School | Architecture ...) is
  something I'd ideally like to vertically align to the bottom of the 
 ksamasthead div.

Add...

#ksamasthead {position: relative;}

...and change the menu to...

#ksamenu {
color: #6e0333;
font-size: .9em;
position: absolute;
bottom: 0;
left: 0;
}

* html #ksamenu {
bottom: -1px;
}
...and it will stay in place.

 2) on IE6/Win, submenu (Welcome | News | Events...) has a 1-pixel 
 gap between it and the border of its div.

Can't see that at my end.

 3) on FF1.5.0.6/Win, the top of the content box disappears.

Gecko still has problems hitting the pixel correctly, so I can't
recommend a perfect cure for such a problem. Happens a lot on my designs
too.

 4) This is picking nits, but I've tried adding a :last-child selector
  in the CSS for both the main and sub menus to add a trailing color 
 bar to the right of both menus. It shows up correctly in FF, but not 
 in Opera or IE. I'm not too stressed about this one, but I am curious
 about why it's happening?

Don't think they support it yet.

You can replace it by adding...
#ksamenu, #ksasubmenu {border-right: .5em solid #dd0067;}
#ksasubmenu {position: relative;}
...and get exactly the same effect across browser-land.

regards
Georg

[1]http://www.satzansatz.de/cssd/onhavinglayout.html
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] need help with placement of boxes in CSS

[Gunlaug Sørtun]

juliann wheeler wrote:

 http://www.juliannwheeler.com/phyve/Phyve_Final/index_final.html

 It looks great in Firefox, but in Internet Explorer many of the boxes
  are placed in the wrong place.

Looks great :-) but not very usable.
You should try to use those pages in Lynx - especially the front page,
and add all the missing pieces (alt-attributes - with suitable content)
that the W3C (X)HTML validator mentions as errors.

 If you clock on who on the left nav you can see 4 different pages:

 Each of these pages has a heading above the content in a teal all 
 caps font. Even though the placement of this box that holds this type
  is the same on each of these pages you can see in IE how it jumps 
 around and is different on each one of these pages.

Defaults are not identical across browser-land, so you'll have to set
margins and line-height and what-not as you like it to turn out.

 ALSO, my rollovers for the left nav do not work in IE, but they work 
 fine in Firefox.

Have a feeling that those effects are javascript-driven, so
off-topic here on css-d.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Trouble with putting a background-image in container

[David Sharp]

Steve Clason wrote:

 background-image: url(/Images/Paper.jpg);

 I don't believe you need the quotes but I think they look pretty.


   

Pretty they may be, but it is my understanding they don't play nicely 
with IE Mac...

regards,
D#
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Gap along right side (from header to footer) in IE5.5 6

[Jeralyn Merideth]

 [EMAIL PROTECTED] wrote: 
#wrapper {padding: 0;}


Not sure, but this might work.  IE and FF have different defaults;
-- 
Joel Goldstick
www.columbuswebmakers.com

~

Thanks Joelbut it didn't fix it. after trying your suggestion, I used the 
padding: 0 on the header and the h2, respectively but it changed nothing. Any 
other suggestions?

Thanks again,

Jeralyn



-
Do you Yahoo!?
 Get on board. You're invited to try the new Yahoo! Mail Beta.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] multiple-level dropdown menu - exquisit implementationusing purely CSS

[Al Sparber - PVII]

From: Robert Byrnes


 The whole point of this menu project was to avoid using JavaScript. Sorry 
 Christian. Given that Internet Explorer is broken, one is then left with 
 no choice but to mix presentation and structure, and create code that 
 won't validate. Not a bad trade off considering what has been achieved.

Except that your statement is not accurate and the flyouts are effectively 
unusable. Pure CSS menus only make sense if a single sub-menu level is used.

The technique is seriously flawed.

-- 
Al Sparber 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Site check please

[Robert O'Rourke]

Hello list,

Another day another template, I'd appreciate some testing on 
http://ipg.sanchothefat.com

Its the development copy of a simple website I've put together to try 
and improve their search engine rankings. I'm not really a designer so I 
didn't spend long on the design (its a lot better than the last one they 
had at least) so I'm only concerned about css glitches. I've validated 
it and tested it successfully on IE6, FF, Opera but that's it. (I'm 
still trying to figure out vmware :P )

It's very basic so should hold up, fingers crossed. I get a free holiday 
for this one =]

Thanks in advance,
Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Gap along right side (from header to footer) in IE5.5 6

[Gunlaug Sørtun]

Jeralyn Merideth wrote:
 I thought it might be the header pushing everything to the right so I
  tried re-working it using width: 100%, margin-right: 0, margin: 
 0,all combinations I can think of and nothing is closing the gap.
  I am missing something but cannot find it. I would appreciate some 
 fresh eyes on this problem.

 http://www.msbanet.org/emails/Esgn/060802_esgn_pandemicDVD.htm

It's the 'margin-doubling on floats bug' in IE/win. Same on both sides BTW.

Adding...
#mainContent {
display: inline;
}

...and...

#secondary {
display: inline;
}

...will fix it.

Note: 'floats' can't be 'inline', so the above is of course pure
nonsense - which makes it the perfect cure for that particular
iExploder-bug :-)

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Site check please

[David Laakso]

Robert O'Rourke wrote:
 Another day another template, I'd appreciate some testing on 
 http://ipg.sanchothefat.com
 Its the development copy of a simple website...}
 Rob
Your simple site is really not so simple. Working well in xp ie, ff, and 
opera.
18 captures(I did not wait for them to load) in linux, mac, and win/2000.
http://www.browsercam.com/public.aspx?proj_id=274271
Subjective:
The pale yellow is too pale; and, while the fonts scale fine, the start 
point for the primary content is a little small for my taste(or lack 
thereof).
Best,
~donQuixote
PS Another day, another windmill.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Site check please

[Robert O'Rourke]

David Laakso wrote:
 Robert O'Rourke wrote:
   
 Another day another template, I'd appreciate some testing on 
 http://ipg.sanchothefat.com
 Its the development copy of a simple website...}
 Rob
 ...

 Subjective:
 The pale yellow is too pale; and, while the fonts scale fine, the start 
 point for the primary content is a little small for my taste(or lack 
 thereof).
   

Cheers don. You're right about the pale yellow, I took it from their 
logo. I also tried out leaving the font size at 1em initially but it 
didn't look that good to me. Anyway, looks a bit flaky in IE5 on PC, but 
acceptable and Safari has some issues with the js image fader by the 
looks of it so i might just get rid of it. Thanks for the screenshots.

 Best,
 ~donQuixote
 PS Another day, another windmill.
   

Keeping fighting the good fight man.


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/