Re: [css-d] how big is a space in ems?

[Jason Crosse]

On 11/03/2008 18:20, Jukka K. Korpela wrote:
> So if you had a situation where you wanted, for some reason, to set e.g. 
> the left padding of an element to match the width of a space, then
> padding-left: 0.25em
> would probably be the best guess in general.

That's exactly what I want: I have text being output from a dynamic 
system and don't want to hard-code an   before the text output, 
  but instead want to pad it has you mention so it sits consistently 
with the adjacent text.

Thanks all for the help. I'm testing 0.5ex at the moment, but I knew 
there was a reason I avoid using ex units. I'll change this to 
0.25em and tweak from there.

-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] how big is a space in ems?

[Jason Crosse]

I've got a pretty basic question. How wide is a typographical space 
in relative units? I want to pad a one-line element's left side so 
it looks like a space has been inserted.

Is there a reliable way of doing this (e.g 0.5ex;), or does is just 
depend on how big a given font's space is?

If it's dependent on the font, is there a traditional proportion 
that's widely used across popular fonts?
-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Quickly Removing Formatting from an Element

[Jason Crosse]

On 05/03/2008 02:26, Felix Miata wrote:
> According to Philippe's response it
> looks like FF3 will provide some sorely need defensive power for the inane
> presumption that color: #333 is preferable to #000 on background-color: #FFF.

I know I'm OT here, but I find that easier than black on white. 
Actually, my default is set as #333 on #ccc, but I sit close to the 
screen and sometimes have to change that depending on ambient light.

Are there any readability studies out there on this topic? I know, 
for example that it's harder for dyslexics to read black on white 
than a lower contrast combination.
-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] A simple way to display data in a tabular form?

[Jason Crosse]

On 05/03/2008 06:16, Sherry Myrow wrote:
> Logistically it's really simple.  I need to create a page that displays a
> bunch of data.  I have a huge list of manufacturers and a long list of model
> numbers.   I need to be able to extract the manufacturer name from the
> database and display that on screen (so it can be dynamic).  Then underneath
> the Manufacturer name i want to show every single model number (again pulled
> from the database).  Each model number should be clickable to a page that
> shows the corresponding product list for that specific manufacturer and
> model number.
> ...
> Can anyone point me in the right direction?  URLs to a good tutorial or page
> that explains how to integrate php with css and html would be s
> apreciated. I'm finding many articles on line about creating navs and entire
> home pages but nothing as simple as what I need.

To me, it sounds like you should use a table: it's tabular data 
after all, isn't it?

As for php, that's off-list but you can make a start here: 
http://www.w3schools.com/php/default.asp

-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Request for Comments on this CSS Stylesheet Approach

[Jason Crosse]

On 18/02/2008 16:09, Rick Faircloth wrote:
> I've realized at the start of a pretty large site, including
> Internet and Intranet sections, that my stylesheet could grow
> very large and even finding sections of styles for particular
> pages could be a cumbersome task.
> 
> What I'm considering is having one main stylesheet, then
> having supplemental stylesheet for the various pages I will create.
> E.g., for a particular page, I would have main.css, plus index.css.
> For announcements, I would have main.css, plus announcements.css.
> 
> I would be avoiding loading a lot of irrelevant styles for a particular
> page and make finding style references much easier, too.

You could take the modular approach. Instead of creating stylesheets 
for individual pages, you could, for example have

* common.css
* web.css
* intranet.css

Having individual style files for individual pages seems worse than 
embedding styles in the head of a document. It seems to me you've 
got all the disadvantages plus extra calls to the server.

-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Maximum value for em

[Jason Crosse]

On 07/02/2008 15:53, Geoffrey Hoffman wrote:
> Just speaking off the top of my head here... The size of an em is derived
> from the text size of the container. I haven't actually calculated it but
> say if your font-size is 12px then an em is about the same, or at least
> proportional to it. By contrast an ex is smaller, but still proportional to
> the font size of the parent container.

An em is indeed the same as the font-size, so as you say, if a font 
is 12px them an em is also 12px.

http://www.w3.org/TR/REC-CSS2/syndata.html#em-width

-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] IE7 needs both width and min-width

[Jason Crosse]

After a day of plenty of swearing, I seem to have found something 
out that I think I should have known about before. I'm posting in 
the hope it will help out some other hapless web developer and 
prevent some nasty monitor-forehead interfacing.

For some reason, I know not why, after making a small change to an 
html page, IE7 stopped picking up some percentage widths (for 
floated elements). After a lot of swearing, I found out that 
sometimes, to even pick up a width, IE7 needs *both* a min-width and 
width. As I was using percentages that was not a hassle - so for 
example the rule

 float:left; width: 25.5%;

was having no effect: the width of the element was shrinking down to 
the width of its content, while on IE6, Opera, Safari and Firefox 
everything was fine. Adding a min-width thus

 float:left; width:25.5%; min-width:25.5%;

Sorted everything out. So now everything's hunky dory. I'm sure most 
of you on this list will have known about this and I'm quite 
surprised I haven't come across it before. That's part of the joy of 
the job, I suppose: after the frustration comes the satisfaction of 
learning something new and solving a problem.
-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] percentage widths don't add up to 100 in Safari and Opera

[Jason Crosse]

On 18/01/2008 22:12, Tom Livingston wrote:
>> Properly using ems to size things is precisely how you prevent layouts from
>> breaking when actually used font size differs from the font size you used
>> while designing. Also, when you design using the user's default as the base
>> (e.g. body, td & p @ font-size: 100%), he won't need to change it.
>> --
> 
> Most designers, and more importantly clients, don't want their body
> copy at 16pt. So I am always setting a font-size on p's, etc. to .8 or
> .85ems. Should someone who NEEDS larger text scale up these pages, the
> layout may break. However, you are correct that proper use of ems
> should prevent it from breaking in the first place.

With the layout I've got: fixed pixel width, evenly sized tabs 
spread across this pixel width, using ems for the width of each tab 
is not an option: as soon as the font is resized, or looked at on a 
machine set at over 96dpi, the tabs would wrap, breaking the layout.

That is why I have used percentage widths and not ems, and why I'll 
have to live with Opera's rounding, unless I target it with 
display:table etc. Oddly, Opera displays a 0.2% margin correctly, 
but displays a 9.8% width as though it were 9%.



-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] percentage widths don't add up to 100 in Safari and Opera

[Jason Crosse]

On 16/01/2008 15:58, David Laakso wrote:
> Don't know about Safari but Opera rounds decimals. Have you tried using 
> em's?
> 
> Best,
> 
> ~dL
> 

The trouble with that is, although the outer container is of a fixed 
width, I'd like the contents to remain flexible, in case a new tab 
is added, or one removed.

Using ems would also mean that the layout would break when the user 
changes font size.

I've just had a quick Google about for the rounding issue, but 
nothing useful as yet...

-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] percentage widths don't add up to 100 in Safari and Opera

[Jason Crosse]

I'm trying to create a horizontal nav. I have a container div 
specified in pixels, position relative. Its LIs are floated left. 
There are ten LIs, each with a width of 9.8%, and a margin-right of 
0.2%.

In IE6 and Firefox, this adds up to a nice full-width nav bar, but 
in Safari (on PC, v3.0.4) the nav bar stops about 30 pixels shy of 
the right-hand side. In Opera (9.25), this is even more pronounced, 
with almost a whole tab width remaining.

Here's some code:


title

Home
About us
Services
Industries
News
Publications
Case studies
Community
Contact us
Careers



and here's some css

#container {margin:0 auto; padding:0; width:990px; position:relative;}

ul.horiz li {float:left; display:inline;}

ul.mainnav{padding:20px 0 0 0; margin:0; width:100%;}
ul.mainnav li {width:9.8%; text-align:center; font-size:75%; 
font-weight:normal; margin-right:0.2%; border-bottom:0.083em solid 
#ff; border-top:0.417em solid #ff;}
ul.mainnav a  {padding:0.8em 0; display:block; color:#595A5C; 
text-decoration:none;}
ul.mainnav li.even   {background-color:#f0f0f0;}
ul.mainnav li.odd{background-color:#e2e3e4;}

Has anyone got any thoughts on this?

Thanks a lot.
-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] 'stuck' css rollovers in IE <= 6. Fix?

[Jason Crosse]

On 09/11/2007 18:09, D A wrote:
> I'm trying to create a horizontal menu from a UL using both an image
> replacement technique along with the 'sprite' rollover technique.
> 
> It works great in Firefox and IE7.
> 
> However, in IE6 and below, the rollover works, but gets 'stuck'. It
> doesn't revert back when you 'unhover'. What's even odder is that once
> they are stuck, if you just resize the browser slightly, they then
> become unstuck.
> 
> Is there a common IT bug that would cause that? Perhaps the haslayout
> issue (though I tried to use the ZOOM fix with no luck).
> 
> Any suggestions appreciated!
> 
> Sample:
> 
> http://www.darrelaustin.com/stuff/navbar2/topnavigation.htm
> 

Personally, I'd change the html to be:


Home
Forums
Links
Wiki
Store
Search
Advertise
Feed
Undies Reviews
Site Review



and then the css would be:

#navWrapper {

background: #1d6b9b;
width: 100%;
}

#navWrapper ul {
text-align: left;
margin: auto;
padding: 0px;
/* this is the total width of the menu images. Adjust as necessary
if you add/omit links */
width: 831px;
}

#navWrapper a {
cursor: pointer;
}

#navWrapper ul li {
float: left;
}


.clearAll {
clear: both;
}


#navWrapper li {
position: relative;
display: block;
background-position: 0px -28px;
height: 28px;
}   

#navWrapper li a {
display: block;
text-indent:-999em;
background-position: 0px 0px;
width: 100%;
height: 100%;
}   

#navWrapper li a:hover {
background-position: 0px -28px;
}   

#navWrapper li.on a {
background-position: 0px -56px;
}   

/* home */
li#navHome {
width: 55px;
}
li#navHome a  {
background: url("images/nav_home.gif") no-repeat;
}


/* forums */
li#navForums {
width: 75px;
}
li#navForums a  {
background: url("images/nav_forums.gif") no-repeat;
}


/* links */
li#navLinks {
width: 59px;
}
li#navLinks a  {
background: url("images/nav_links.gif") no-repeat;
}


/* wiki */
li#navWiki {
width: 52px;
}
li#navWiki a  {
background: url("images/nav_wiki.gif") no-repeat;
}



/* store */
li#navStore {
width: 64px;
}
li#navStore a  {
background: url("images/nav_store.gif") no-repeat;
}




/* search */
li#navSearch {
width: 80px;
}
li#navSearch a  {
background: url("images/nav_search.gif") no-repeat;
}



/* advertise */
li#navAdvertise {
width: 100px;
}
li#navAdvertise a  {
background: url("images/nav_advertise.gif") no-repeat;
}



/* feed */
li#navFeed {
width: 61px;
}
li#navFeed a  {
background: url("images/nav_feed.gif") no-repeat;
}



/* undiesreviews */
li#navUndiesreviews {
width: 147px;
}
li#navUndiesreviews a  {
background: url("images/nav_undiesrev.gif") no-repeat;
}



/* sitereviews */
li#navSitereview {
width: 127px;
}
li#navSitereview a  {
background: url("images/nav_siterev.gif") no-repeat;
}   




-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] floats and div widths

[Jason Crosse]

On 07/09/2007 15:06, Cynthia Page wrote:
> Also is it appropriate to ask such a basic question on this list?

Absolutely. We have all levels of experience on the list.

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

Re: [css-d] RFC: printing backgrounds by default

[Jason Crosse]

On 04/08/2007 23:41, fantasai wrote:
> So we want to know what you think: would a switch like this be confusing?
> Is there a better way to handle this kind of switch? What are your thoughts
> on this problem?
> 
> For those who want more details, the bug report is here:
>https://bugzilla.mozilla.org/show_bug.cgi?id=381466
> 
> ~fantasai
> 
> [1] http://archivist.incutio.com/viewlist/css-discuss/91007

What I have done in the past is to have a print stylesheet to make
printed text darker than its on-screen equivalent. This relies on
the backgrounds not printing.

Also consider the number of people using "sliding doors" style
rounded-corners. These would appear pretty strange if printed.

I think there's mileage in printing a background when specified in
the print stylesheet. I've not given it much deep thought though. I
can imagine the amount of cursing a user would do when printing
something only to find that the designer has specified white text
out of dark green in order to stick to brand guidelines.

So perhaps for the sake of the users it's best not to.
-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Javascript stops CSS Validation

[Jason Crosse]

On 26/07/2007 04:30, Christopher Blake wrote:
> Hi,
> 
> If it helps, this is the page I am trying to validate the CSS for:
> http://www.3pointdesign.com/
> 
> I am trying here:
> http://jigsaw.w3.org/css-validator/
> 
> and this is what I get:
> Servlet has thrown exception:javax.servlet.ServletException: Timed out

I just tried the same thing and for the same result. Then, using the
Firefox web developer toolbar selected "validate local CSS" instead.
 The result was

> Lexical error at line 210, column 2. Encountered: "/" (47), after : "<"

Looking through your stylesheets searching for '<', I found an IE
conditional comment in there. I think this is likely to be your
problem - these shouldn't be in your stylesheet. Put this somewhere
in the  of your document xhtml, and that should sort things out.

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

Re: [css-d] Firefox behaviour - Child element margins applied to parent elements instead

[Jason Crosse]

On 25/07/2007 12:05, Tony Haddon wrote:
> My problem lies in the margin I've applied to the h1 element here.
> It ought to offset the h1 block from the containing #inner element.
> In IE6 it works as planned, but Firefox appears to apply the margin
> to the element two steps up the tree e.g. the #outer element.

The XML prologue is causing IE to go into quirks mode, so you may
want to remove this.

Secondly, to get the spacing you want, instead of using margins on
the h1 element, you could try padding your #outer element instead,
and zeroing the margins on the h1 element.

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

Re: [css-d] IE Form background problem

[Jason Crosse]

On 19/07/2007 20:27, Rafael Faria wrote:
> Now I'm having a big problem with a form field, and IE 6/7.

Do you have a URL to look at?

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

Re: [css-d] Firefox doesn't render the background-color

[Jason Crosse]

On 20/07/2007 13:31, gary.brindley wrote:
> I have a very strange error which renders perfectly in IE7 but not
> Firefox 
> The site is at www.quelltex.co.uk

I'm getting a strange couple of characters at the start of the css. 
It's being served as utf-8, are you sure you saved it as utf-8 and 
not iso-8859-1?

That doesn't solve the troubles you're having though. I found making 
#ctent floated, and removing the height rule from #banner helped a bit.

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

Re: [css-d] Form on Opera - Safari - Konqueror issue

[Jason Crosse]

On 17/07/2007 18:18, Rob Cochrane wrote:
> I want the form elements to sit tight against each other (input and 
> select) as seen in this example on a site I am building viewed in FF or IE7
> http://www.vehicle-web.net/VW_index.php (click the ok button in change 
> language section to set the required session vars as there are bits 
> still missing)
> 
> I have also posted a test sample 
> http://www.vehicle-web.net/testforOpera.html

 I think I've fixed it in your test page, at least, which may 
help you with your site. See the changed code below. What I've done 
is remove the float and clearing from the label, input and select 
elements. Instead, I've made the label display as a block. You could 
make the input and select display as blocks, too: I don't think it 
makes a difference.
 Anyway, I hope that is of some help to you.

Amended code:
> 
> 
> 

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

Re: [css-d] Floating images with text wrapping underneath

[Jason Crosse]

David Hucklesby wrote:
> 
> p {
>   display: table;
>   height: 0;
> }
> 
> "display: table;" makes it display as a box, as you'd expect. 

I'm very interested in use of the display:table rule and its 
relatives. I've avoided  using them completely up until now, but if 
you and any others on the list have successfully used them then I 
may have to think again.

I must say, though, that very quickly adding that to the p rule in 
the site mentioned did not seem to have the desired effect; maybe I 
did not put enough effort into properly testing it.

Do you, or anyone else on the list have any examples of sites that 
use these rules? I'd love to see them.
-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Constraining a div element.

[Jason Crosse]

On 16/07/2007 16:44, coolman coolx wrote:
> I have two flash animation siting side by side and floated ... once I reduce 
> the resolution to 1024 by 768, one of the images drops.

What I'd do in this case is create a container for both flash 
movies, and set the width such that it can hold both of them 
side-by-side. Then, one will not drop below the other, because the 
container will "protect" them from that.
-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] i.e. 6 looks right 7 and firefox incorrect

[Jason Crosse]

On 16/07/2007 14:29, JGardner wrote:
> Hello,
> 
> I am working on a site 
> http://webtech.tstc.edu/students/gardnerj/IMED2311/UFofA/test.htm
> 
> The menu/login looks like what I want in IE6, but not IE 7 and Firefox. For 
> some reason in 7 and Firefox the red background does not extend all the way 
> down through the menu.
> 

OK - just a quicky from me, so I'm sure other people will have 
better suggestions. The background isn't showing because the child 
LI elements are floated. You can sort this by adding to #nav ul the 
rule overflow:hidden; This will force the UL element to grow and 
show the red background down the list. Also, you need to add 
margin-top:0; and margin-bottom:0; to get rid of the excess red.

Now I see there is a problem with light blue showing above "Member 
Login". This can be got rid of my zeroing the top margin of #login h2.

I hope all that helps.

-- 
http://antanova.blogspot.com


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

Re: [css-d] site check please

[Jason Crosse]

On 15/07/2007 12:19, Stephen Oravec wrote:
> http://www.intheholler.com
Win XP - FF 2.0.0.4 - fine
Opera 9.20 - fine
IE6 - not fine.

  1. The darker green borders on the headings e.g. "What's New" are
very thick. They look ~1em thick.

  2. The right-hand side column moves beneath the left-hand side
column, and starts right after the middle column ends. I'm thinking
this is because your "wrapper" div is not wide enough in IE6.
Possibly a manifestation of the 3px gutter bug?
-- 
http://antanova.blogspot.com

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

Re: [css-d] site check please

[Jason Crosse]

On 15/07/2007 12:19, Stephen Oravec wrote:
> http://www.intheholler.com
Win XP - FF 2.0.0.4 - fine
Opera 9.20 - fine
IE6 - not fine.

  1. The darker green borders on the headings e.g. "What's New" are 
very thick. They look ~1em thick.

  2. The right-hand side column moves beneath the left-hand side 
column, and starts right after the middle column ends. I'm thinking 
this is because your "wrapper" div is not wide enough in IE6. 
Possibly a manifestation of the 3px gutter bug?
-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Explorer bug or poor css technique?

[Jason Crosse]

rollandburn wrote:
> Thanks everybody,  I really appreciate all the help and feedback!
> 
> Gonna go install Parallels and do some searching on if I can have
> multiple IE's on the same OS.
> 
> =]

You should be able to use multiple versions on windows - although 
conditional comments won't work.

Have a google around for details. For a start look here: 
http://browsers.evolt.org/?ie/32bit/standalone

Good luck!  (^_^)
-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Companion column method

[Jason Crosse]

On 09/07/2007 08:03, Ingo Chao wrote:
> Hi,
> 
> this draft
> 
> http://www.satzansatz.de/cssd/companions.html
> 
> introduces a technique for equal heights aspect of columns.
> 
> Comments and corrections are appreciated. Thank you for your time.
> 
> Regards,
> 
> Ingo
> 

Great, thanks Ingo. 

I really appreciate you spending the time to bring together several techniques 
and adding your own thinking - it's people like you who really help push the 
web  forward with these techniques and in the process help thousands of other 
developers.

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

Re: [css-d] Layout problems...

[Jason Crosse]

On 03/07/2007 14:59, Scott Schulthess wrote:
> John - 
> 
> Don't bother support Mac IE. Nobody uses it.  We web designers officially 
> came off the hook - a few years ago I think - when Microsoft officially 
> stopped supporting the browser.   I tried to get a copy of it on my macbook 
> and had lots of trouble and it barely worked.
> 
> -Scott

I agree with that. If you want to set your mind at rest, though, then you could 
serve Mac IE only a "reset" stylesheet instead of trying to style for it at 
all. 
-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Getting the z-index right in my css

[Jason Crosse]

On 05/07/2007 12:20, Ian Piper wrote:
> On 5 Jul 2007, at 11:34 am, Jason Crosse wrote:
> 
>> On 05/07/2007 11:22, Ian Piper wrote:
>>> I haven't found any useful way to
>>> get a flash logo like this one to validate on a web page.
>>>
>>> Thanks,
>>>
>>>
>>> Ian.
>>> -- 
>>
>> You could try fixing the flash embedding bode so that
>> 1. The element and attibute names are all in lower case
>> 2. The  elements are closed: 
>>
>> Then run it through again. It won't fix everything, but xhtml must
>> all be in lower case.
>> -- 
> 
> Good idea. That takes the number of errors down to 22. Still 22 too many
> of course, but heading the right way.
> 
> Thanks,
> 
> 
> Ian.
> -- 
> 

I see that you have only made some of the elements and attibutes lower case, 
and only closed some of the empty elements.

Forgive me if you're in teh process of doing it right now.

Anyway, here's the code I see on your page:

http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0";
width="105" height="95" id="logo anim 20060425 cropped2" align="">





http://www.macromedia.com/go/getflashplayer";>


Here is my replacement with all elements and attributes made lower case, and 
all empty elements closed:

http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0";
width="105" height="95" id="logo anim 20060425 cropped2" align="">





http://www.macromedia.com/go/getflashplayer";>


That should eliminate some more errors.

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

Re: [css-d] Getting the z-index right in my css

[Jason Crosse]

On 05/07/2007 11:22, Ian Piper wrote:
> 
> Thanks Georg. I will try these ideas out.
> 
> Regarding the xhtml errors, I completely agree. You will probably  
> have noticed that all of those validation errors come from the use of  
> a flash-based logo. I did advise my client about this, but they  
> insisted on having the logo, and I haven't found any useful way to  
> get a flash logo like this one to validate on a web page.
> 
> Thanks,
> 
> 
> Ian.
> --

You could try fixing the flash embedding bode so that
1. The element and attibute names are all in lower case
2. The  elements are closed: 

Then run it through again. It won't fix everything, but xhtml must
all be in lower case.
-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Space Problem

[Jason Crosse]

[EMAIL PROTECTED] wrote:
> I'm scratching my head wondering why there is a space in between two divs on 
> a page I am creating.
> 
> It works in IE and doesn't in Firefox (Usually the opposite of what I usually 
> encounter).
> 
> The web page is: http://valdostawebmaster.com/projects/blueprint/
> 
> and the CSS is: http://valdostawebmaster.com/projects/blueprint/blueprint.css
> 
> Any suggestions on this one would be appreciated.
> 
> Al Dunbar

In the "LISTS" section of your css, you have a rule

#navlist ul {...}

but your #navlist element IS the ul you are targeting. So, rewrite the selector 
thus:

ul#navlist {...}

and it will apply to the navigation. 

Right, so now we're targeting the correct element, but the gap's still there. 
And the nav links have shrunk. The gap is caused by the default margins on an 
UL element and the nav has shrunk because of your font-size rule.

So, we can rewrite the rule, removing the font resize, and making the margin on 
this element 0.

ul#navlist {
...
DELETE THIS -> font-size:.6em;
ADD THIS-> margin:0;
}

I haven't tested this at all, so make sure it's still correct on all your 
browsers, etc.


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

Re: [css-d] Best way for text when enlarged

[Jason Crosse]

david wrote:
> I saw a report mentioned a few years ago saying that (1) the majority of web 
> surfing in Japan is done via cell phone, and (2) analysts expect Europe to go 
> the same way. Considering that that was a few years ago, Europe may already 
> be doing the majority of its web surfing via mobile devices, too.
> 
> Only the US lags behind, courtesy of our pathetic excuses for cell phone 
> service providers ...
> 
As it happens, I was at an Adobe event a couple of weeks ago, and one presenter 
there mentioned that 50% of web access worldwide is now from mobile devices. I 
was very surprised. He didn't mention where he go the figure from, but it 
certainly highlights the need to cater for small screens.
-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] can anyone see my content disappearing - IE6 win SP2

[Jason Crosse]

Ian Young wrote:
>> I am told that on the wine pages  & contact page:
>>
>> http://www.tuttobenewines.com/contact.html
>> http://www.tuttobenewines.com/wines-rosso.html
>> http://www.tuttobenewines.com/wines-bianco.html
>>
>> I have a disappearing content bug in IE6 win SP2.
>>
>>
> No problems here. Win XP SP2 IE6/IE7.
> Not sure if that helps
> 
> Ciao

I'm not seeing any probs either (WinXP sp2 IE6 sp2). 

One suggestion I can make is to try and remove the dreamweaver template tags 
before you upload - so work with templates locally, then export a version out 
without markup and upload that. I found that in the past, comments between 
floats gave me the IE repeated content bug. Keep the templated one to work with 
locally, of course.

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

Re: [css-d] Best way for text when enlarged

[Jason Crosse]

Shark Attack Design wrote:
> I wonder what proportion of web users ever bother to adjust the default text 
> size of their browser(s)? The preset default size is generally 16 (I think 
> Safari is different?) although I'm not sure what the units are for that 
> default -- pixels? Points?

It's been discussed fairly recently on this list. The 16px default size is 
based on text being 12pt high on a 96dpi screen. Now, many new PCs are being 
dispatched with 120dpi or higher pre-configured so on those machines 16px will 
not be the default: it will be bigger. 

Also, now many mobile devices with small screens are accessing the web, and 
their default pixel size is unlikely to be 16px. 

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

Re: [css-d] Site Check in IE Please

[Jason Crosse]

Richard Brown wrote:
> Hi
> 
> Could someone take a quick look at this site in IE please? I think the third 
> column is dropping below the 1st. Is that correct?
> 
> 
> 
> Thanks.

Yes, that's correct. I haven't looked at your CSS, but are you taking into 
account that unless fixed, IE6 will add 3px 'gutters' to your columns if they 
are floated. That could be what's forcing the right-hand column down there.
-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling for Fieldsets and Legends

[Jason Crosse]

Rick Faircloth wrote:
> Hi, all...
> 
> Is there any way to bring consistent styling to fieldsets
> and legends between IE and FF?  For now I'm using separate
> stylesheets for IE6, IE7, and FF2.
> 
> I'd like to have the look that default IE 7 applies, however, I'd
> like to change the border color.  That causes square corners.
> How do I keep the rounded corners?
> 
> Also, how to get the rounded corners in FF?
> 
> Thanks for any insight, tutorials, etc.
> 
> Rick

Hi Rick, Do you have a URL we could look at?

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

Re: [css-d] Site Check Please

[Jason Crosse]

Matthew Ohlman wrote:
> Good Evening CSS-D,
> 
> I was hoping someone could give me a quick site check on the following 
> design.  I would especially appreciate a review of IE on Mac if possible 
> since I do not have access to a Mac.  General comments and suggestions are 
> very much appreciated if you have any.
> 
> The site is:  http://www.ohlman.com/sldc/index.html
> 
> Thanks so much in advance, Matthew

Personally, I think that IE/Mac is such an esoteric and combination that it 
would be acceptable to serve IE on Mac a "reset" stylesheet, or just serve 
unstyled. So long as any user with that OS/Browser combo is able to access the 
content you're OK. 

You'd be unlucky to have a user with the Mac/IE combo anyway, IMO.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Int. Explorer 7 - need help - fixed

[Jason Crosse]

Kathy Wheeler wrote:
> Would also appreciate hearing from *real* win ie7 people as I'm still 
> evaluating VirtualPC as an alternative to a win box(es).

I don't think there will be any difference between running WinXP natively and 
running it within virtualPC - especially when related to rendering within a 
browser.
-- 
http://antanova.blogspot.com 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] 10px gap below float in IE6 & 7 - how do I eliminate?

[Jason Crosse]

> Example is here: http://tinyurl.com/yonjur
> 
> I can't get this to work right! I have been struggling all day with this.
> 
> Looks right in FireFox but in IE 6 & 7 the background is flowing under 
> the float and adding 10px of gray background to the bottom before the 
> footer.
> 
> 
> How can I get rid of the extra spacing below the slide show.  I want to 
> keep the float so that text can flow beneath the slide show if there is 
> more content added.  But when the text is shorter than the slide picture 
> I want the footer to be up tight against the bottom of the slides.  Is 
> this doable?  Or am I chasing my tail again?

I see you have the slideshow in a table: do you really need it to be?

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