Re: [css-d] problem with vertical nav list

[James Gadrow]

[EMAIL PROTECTED] wrote:
> Hello,
>
>  
>
> Maybe someone can help me out here. I've been working with a vertical list
> to create a menu using this:
> http://css.maxdesign.com.au/listamatic2/vertical02.htm#
>   as my example.
>
>  
>
> That particular list appears as it should in my IE7 browser. However, MY
> list is adding a 1px margin to the  elements, even when I have
> specifically said I want the margin to be 0. This occurs in IE7 and IE6.
> Needless to say it appears as it should in Mozilla based browsers. 
>
>  
>
> You can see my list here: http://www.tibbits.ca/test/index2.php
>
>  
>
> Could someone explain where this margin is coming from and how I can fix it?
>
>
>  
>
>  
>
> Thank you,
>
>  
>
> Matt Tibbits
>
>
> No virus found in this outgoing message.
> Checked by AVG Free Edition.
> Version: 7.5.467 / Virus Database: 269.6.2/787 - Release Date: 5/3/2007 2:11
> PM
>
>
> __
> 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/
>
>   
Have you tried removing the whitespace in your list? IE is very picky 
about that sorta thing :)

-- 
Thanks,

Jim

__
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] DIVs height is wrong in IE

[James Gadrow]

Christian Kirchhoff wrote:
>  
> Hallo,
>
> please take a look at the following example:
> http://www.digitale-bibliothek.de/downloads/test/test.htm
>
> The basic layout is:
> - one top DIVused as a header and one main DIV
> - both DIVs have a three column layout, left column float:left, right column
> float:right, the center column has margins that each equal the overall width
> of either the left ar the right column.
> - The middle column DIVs have a min-width defined.
> - The middle and right DIV of the main area each have margin-bottom:
> -32767px and padding-bottom: 32767px in order to drag down their background
> color.
>
> There is a box with some links in the lower right area, under the google ad
> box. This box seems to be cut in IE 7, because the containing DIVs height is
> somehow computed worng. The overflow of that containing DIV is set to
> hidden. If I set it to auto, scroll bars appear as expected. If I set it to
> visible, it seems to show the same result as "hidden".
>
> I guess it the problem is connected to the fact that I set the height of the
> html and the body element to 100%. But if I wouldn't do that, in IE7 the
> right column DIV would be cut even earlier, even if I set it's overflow to
> visible.
>
> Does anybody know how to correct this?
>
> Any hint would be appreciated.
>
> Best regards,
>
> Christian Kirchhoff
> Directmedia Publishing GmbH · Möckernstraße 68 · 10965 Berlin
> www.digitale-bibliothek.de AG Berlin-Charlottenburg · HR B 58002 · USt.Id.
> DE173211737
> Geschäftsführer: Ralf Szymanski · Erwin Jurschitza
>
> __
> 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/
>
>   
If you place overflow: scroll on the body tag of your document you'll 
see why IE is doing the voodoo that it do(es) so well. Don't have any 
advice for you to help you correct it though... If you're just wanting 
all the sections to be be '100%' of the height for your backgrounds, 
perhaps you should consider utilizing a 'faux column' technique? Also, 
when I ran your page through the validator you have a  and  tag 
inside of an anchor tag.

-- 
Thanks,

Jim

__
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] is it possible to get A:focus working in IE?

[James Gadrow]

Sandy wrote:
> Hello All,
>
> Is it possible to get A:focus working in IE?
>
> I have done a little research, and found lots of people saying that IE 
> doesn't support "focus". Is there some kind of work around?
>
> thanks!
> Sandy
> __
> 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/
>
>   
The only work arounds I know are javascript (which can be disabled) and 
behaviours (which I've not yet attempted to learn). Unless someone here 
knows another way there are no known CSS only workarounds.

-- 
Thanks,

Jim

__
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] page loading in 2 visible steps

[James Gadrow]

I didn't see any problem at all when viewing the page...

[EMAIL PROTECTED] wrote:
> I'm having a problem with my pages loading at my new ISP (BlueHost). They tell
> me the problem is not on their end, that it is a coding problem. I've checked
> at home and at work and I'm seeing the problem both places:
>
> The pages load in the browser (the first time) in TWO steps (sort of 
> "ba-dink"):
>
> Step 1: the content (without styling)
> Step 2: then, a second later, the styling is applied and the background 
> image in
> the case of the main page appears.
>
> The first step can display for as long as a second or two. The sylesheet is
> @import. Is this something I need to tweak or do they?
>
> Here a link to view and thanks for your advice:
>
> http://www.kdwebstudio.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/
>
>   


-- 
Thanks,

Jim

__
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] % Height attribute not applying to Flash

[James Gadrow]

Does anyone know how to apply a height to a flash object? For some 
reason when you set the height as a percentage, it is not applied to the 
flash object, but if I set the height using any other units (px, em, 
etc.) it is applied correctly. I've looked around for answers but all 
I've been able to see is how to make a flash play 100% of window height 
(not what I'm trying to do) and how to make css work IN flash.

Here is the relevant section of my code:

#flashContent
{
width: 100%;
height: 30.833%;
max-width: 858px;
max-height: 276px;
}

#flashContent object, #flashContent embed
{
width: 99.3006993%;
height: 97.8260869%;
max-width: 852px;
max-height: 270px;
}


http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,22,0";>



http://www.macromedia.com/go/getflashplayer"; 
src="flashcontent.swf" bgcolor="#ff" quality="best" />



-- 
Thanks,

Jim

__
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] 3 col layout

[James Gadrow]

Martin Paton wrote:
> Hello
>
> Is it possible to contain a 3 column layout within another container?
>
> For clarity I've uploaded a screenshot of what I want to achieve. I've
> tried about a zillion combinations of 3-col layouts, but just can't get
> it to work (except in firefox)
>
> http://pkl.net/~toasty/site.gif
>
> Some advice would be much appreciated.
>
> Thanks
> Martin
>
>
> This message has been scanned for malware by SurfControl plc. 
> www.surfcontrol.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/
>
>   
Yes, it is absolutely possible.

-- 
Thanks,

Jim

__
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] Question about multipule stylesheets

[James Gadrow]

Juanita wrote:
> Hi -
>
> I'm starting a site (fairly new to css) where one section (not just a page
> but many pages that are related) must look COMPLETELY DIFFERENT (colors,
> background, logo etc.) than the rest of the site, but the basic structure
> of both sections are exactly the same. Is what I've explained below ok? Is
> there a better way (before I go too far) than what I've planned?
>
> I've started with a global style sheet that has the basics such as:
>
> body {
> font-size: 12px;
> font-family: Verdana, Arial, Helvetica, Sans-Serif;
> padding:0px;
> margin:0px;
> }
>
> #wrapper {
> width: 775px;
> margin-left: auto;
> margin-right: auto;
> height:100%;
> }
>
> Then to give each respective section it's specific look, I needed to add
> additional property/values to the same selector that I have in the global
> stylesheet. So I end up with a second (and third) stylesheet that also
> have the body, wrapper, etc. selector with additional property/values (tho
> I've not repeated the property/values that are in the global.) And of
> course, the global is linked to all pages, while the second is linked only
> to the pages for that section, and the third the same.
>
> Second stylesheet
> body {
> background: #ced9e4;
> color:#999;
> }
>
> #wrapper {
> background:url(../images/wrapper_main.gif) repeat top center;
> background-color:#fff;
> }
>
> Third Stylesheet
> body {
> background: #343434;
> color:#333;
> }
>
> #wrapper {
> background:url(../images/wrapper_jazz.gif) repeat top center;
> background-color:#000;
> }
>
> __
> 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/
>
>   
This will work fine. But if something isn't overriding as you'd expect 
it to, first check that the rule you want applied is at least as 
specific as one specified in your basic sheet. Additionally, if you 
don't mind hedging out the version 4 browsers you may want to consider 
importing the lower-level style sheet into your 2nd / 3rd level style 
sheet as this will be sure that the finer-level stylesheets override 
their predecessors properly and you can link all 3 sheets in one link 
statement. Example:

*Basic.css
Stuff with structure
*Section.css
import Basic.css
Stuff with section colors / text
*Page.css
import Section.css
Stuff with page specific css



-- 
Thanks,

Jim

__
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] select/option tags

[James Gadrow]

> Is there a work around to this inconsistency?
>
> --Kenoli

Unfortunately, when styling form elements you're either going to have to 
accept a bit of browser variance or start using javascript to style 
them. This is because the browsers are so flighty with how they style 
their form elements. And lots of the time you can't access particular 
parts of a form item to change it at all via css (ie, the button for the 
input=file form).

-- 
Thanks,

Jim

__
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] Overflow:scroll and position:relative in IE6 - Bug?

[James Gadrow]

Alan K. Gay wrote:
> I would like to place a relatively positioned element inside a fixed width
> div with overflow:scroll.   It works fine in FF, and in IE6 in quirks mode.
> But the minute I put IE6 in "standards" mode, the scroll bar quits working
> and the overflow from the inner element becomes visible outside the outer
> div.
>
> The code below generates a blue div scrolled horizontally inside a yellow
> div.  If you remove the URL from the doctype in IE6 it works, but otherwise
> in IE6 the scroll is dead and the blue div escapes the right side of the
> yellow div.
>
>  "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd";>
>
>  This is div text
> 
>
> Alan K. Gay 
>
>
> __
> 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/
>
>   
Try making the scrolling div position: relative as well:

http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd";>
   
   This is div text
   

I found the solution at: 
http://www.webdeveloper.com/forum/showthread.php?t=114891
so if this didn't work for you, maybe further reading of that thread 
will help.

-- 
Thanks,

Jim

__
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] Overflow:scroll and position:relative in IE6 - Bug?

[James Gadrow]

Alan K. Gay wrote:
> Ta-da.  You are correct.  Is there something I didn't understand about the
> standards, or is this just an IE local knowledge thing?  Thanks a bunch.
>
>   
For me I know that if you're using positioning you're essentially 
telling the browser: "Yes, I know this doesn't normally go here but just 
trust me!" And so I know it is probably going to be prone to various 
rendering "bugs" so I usually make sure everything is displaying 
properly and try using position: relative when it is not because it is 
usually due to the way a positioned element is contained (ie: logic 
error) rather than an error in implementation.

-- 
Thanks,

Jim

__
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] 2 questions

[James Gadrow]

Lauri Pantos wrote:
> Hi.  
> #1 what would be the advantage of defining styles in the head instead of the 
> body?
> #2 is it normal that the style info looks to be commented out, but still 
> works?
> http://www.somtndesign.com/contactus2ak.htm
>
> Thanks
> Lauri Pantos
>
>   
A1 - Defining styles in the head of the document allows you to define a 
style once instead of on each and every element (say, I want all of my 
top-level h2 tags to have the color #33 I could just declare it once 
instead of many times over). It is usually better to link to an external 
stylesheet though as then you can change documents depending upon 
situations and re-use code across pages.

A2 - The comment is html style which has no effect upon css which uses C 
style comments: /* comments go here */

-- 
Thanks,

Jim

__
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] z-index and transparent .png probs.

[James Gadrow]

Christopher Blake wrote:
> HI,
>
> http://www.3pointdesign.com/index3.html
>
> http://www.3pointdesign.com/styles/three.css
>
> I have a background image that repeats. I want to put a gradient tint  
> over the top part of the background so have placed a #topgradient div  
> over the background with a transparent .png. I then have added my  
> #wrapper div and made the background white. The problem I am having  
> is that no matter what I do I cannot seem to stop the #topgradient  
> from overlapping the #wrapper. I have played with z-index before and  
> never encountered this problem before. Can anyone help?
>
> Thanks, Chris
>   
I don't see the problem... the 'gradient' appears behind the 'wrapper' 
as specified in your html & css. Do you have a test case where this 
didn't work?
Now if you wanted the 'gradient' on top of the 'wrapper' (which is the 
reverse of what you say you want) then you need to reverse the z-index.

-- 
Thanks,

Jim

__
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] enclosing a div in another one

[James Gadrow]

James Hague wrote:
>  hi ..
>
> in an example like the one below .. how can one enclose the regContainer div
> inside the mainFrame div irrespective of the content of the regContainer.
> The clearer div is not doing the trick!  a large content of 'regContainer'
> pushes its lower edge below the main frame!
> Please help?  James
> --
> 
> 
>
> 
> .mainFrame{
> height:100%;
>  background: white;
>  border: 5px solid #CC;
> }
>
> .regContainer {
>  position:relative;
>  top:125px;
>  color: #black;
>  width: 720px;
>  float:left;
>  border:1px solid black;
> }
>
> .clearer {clear: both;font-size: 6px;}
>
> 
>
> 
> 
>
> 
>
>long paragraph  goes here   
>
> 
>
> 
>
> 
> 
> --
> __
> 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/
>
>   
The issue here is that you've specified that .mainFrame is 100% of the 
height of the body. And, according to the display: block; specs content 
too large to fit within its container is supposed to spill out of the 
container by default (not that IE respects that spec but that's another 
issue).

Not sure exactly what you would like to happen but you can either remove 
the height property on your mainFrame (and thus allow it to expand to 
fit the content) but making your page scroll (which is normally accepted 
behaviour).

Or you can apply another height to the .regContainer that fits 
terminates the border within .mainFrame and then set it's overflow 
property for whatever you would like to happen if the content spills off 
the page (presumably you would like the interior content to scroll and 
thus you would use overflow: auto).

-- 
Thanks,

Jim

__
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] enclosing a div in another one

[James Gadrow]

James Hague wrote:
> On 5/18/07, *Brian Crescimanno* <[EMAIL PROTECTED] 
> > wrote:
>  
> The required effect is to get the outer 'main frame' div -  with its 
> gray border -  to enclose the inner 'regContainer' div, irrespetive of 
> 'regContainer' height.
>
> but you can either remove
> > the height property on your mainFrame (and thus allow it to
> expand to
> > fit the content) but making your page scroll (which is normally
> accepted
> > behaviour).
>
>  
> but when I remove the height : 100% - the frame actually shrinks in 
> both IE6 + FF - and it doesnt really solve the problem.
[snip]

This is becasue without the height 100% attribute, the div is being 
sized according to the content inside of it. Use a lorem ipsum generator 
to generate some longer content and you'll see that it does indeed 
stretch with the content. It sounds like you want the viewport to be the 
size of the page at all times, however so what you should do is stated 
below in my next comment.

[/snip]
>  
> The point is that the height of the regContainer is unknown - so I am 
> not sure how to set it in that case.
[snip]

Use percentages and max-height. This will mean the div will only take up 
what space its content needs up the the maximum height of 1/2 of the 
viewport (and, thus, your .mainFrame). Now, max-height won't be 
respected by IE6 and lower but if you set the min-height property (and 
us an ie hack) then the end result will be that ie users will see 
scrollbars if the .regContainer causes .mainFrame to expand.

What it sounds like you're trying to accomplish is to keep your page 
within the viewport at all times no matter what size the window is. 
This, however, is a poor layout choice for a few reasons:

a) It is not very well support(ed/able) by browsers
b) You can't resize text with the window size (well, not without using 
javascript and not EVERYONE has javascript enabled)
c) When content starts overflowing its containers (and it will, I assure 
you) your page will be cluttered by many different scrollbars which just 
aren't pretty or (worse still) will be hidden and creating a HUGE 
accessibility issue.

That being said, it's *possible* to achieve the effect you desire by 
using the above tips as well as those provided by others on the list, I 
would just be prepared to hear negative feedback from your end users and 
have another layout idea simmering in the back of your mind.

-- 
Thanks,

Jim

__
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] Multiple elements changing on hover

[James Gadrow]

J. Decker wrote:
> The block level items I'm working on...where you see extra styling are
> styles I didn't bother to copy into the test doc, because they didn't
> impact the hover issue.
>
> Thanks again for your help!
>
> Jona
You may be styling some more on that link, but as the h3 is the only 
item enclosed within the span and the h3 can be selected by simply 
stating the code I gave you earlier then the extra span is unneeded. And 
applying styles to the same element in two different selectors will 
cause you grief later when you need to maintain your code. If you need 
to only target particular h3 elements within the same block level, I 
would consider adding a class only to the ones you wish to be affected. 
This saves you some code bloat and the more stream-lined your code the 
easier it's going to be for you when you try and find an error / issue.

Just a constructive tip ;)

-- 
Thanks,

Jim

__
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] fluid div height

[James Gadrow]

AG wrote:
> Forgot to mention that inside the container div I have 2 content divs
> [not one as described below]. Both are float: left; 
> When there's only one content div... no problem, but with 2, or even
> 1 float: left; the container div collapses in FF.
>
> Thanks, and sorry about the double post.
> Ara G.
>   
That's because float takes its associated section out of normal document 
flow. So, if there's nothing else below your content then the container 
actually contains nothing and so it takes up all the height that it 
needs to (which is none).

To fix this add a clearing element below your content divs such as (of 
course, you should make the style for the clear element external to be 
of most use):








 



-- 
Thanks,

Jim

__
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] position:absolute and 3 column layout using float:left and negative margins

[James Gadrow]

Andrew Gaffney wrote:
> It appears both the one that matches what I want from the first set and the 
> 2nd 
> link use float and negative margins, which is already what I'm using for 
> layout 
> of the 3 columns inside of "CenterBox".
>
> The problem I'm having is that if I make "CenterBox" use anything other than 
> position:absolute, that 3 column layout no longer stays *within* the 
> "CenterBox" 
> DIV (it becomes zero height).
There are a few ways to make a 3 col layout (in order of personal pref):

1. Using floats
2. Using absolute positioning
3. Using display: table
4. Using 

Ok... let's examine the options from the bottom up.

Option #4... do I even need to say why not to use this one unless 
unavoidable? Thought not.
Option #3 is pretty decent, it makes the row display exactly as the 
designer would like, including making the height of each section equal! 
However, the good folks over at Mickeysoft can't read a specification to 
save their lives and have still not implemented display: table (even in 
IE7, talk about out of date!), so good luck with that option.
Option #2 is a solid option but I try and avoid positioning things 
absolutely unless I *ahem* absolutely must (pardon the pun). But, you've 
specified that you don't wish to use position: absolute so this isn't 
really an option for you.
Option #1 is my preferred method but if you're doing a 3 col section 
within a 3 col layout that's already using floats clearing an element 
can have unexpected results.

The good news for you? By changing your position to relative, you've 
just told your box to not contain elements with position: absolute / 
float applied (such as your 3 columns). This means that if you insert a 
clearing div () after your 3 columns your 
box will expand to once again contain the columns. However, now that 
you've told the page to reserve space for that element, to re-position 
it where it belongs you need to add "top: 123px; left: 96px;" and remove 
your margin settings. This should make the page look exactly the same as 
it does with position: absolute. No idea if that's what you want or not, 
but there you have it.

Oh, and the link to your stylesheet didn't work because your server is 
case-sensitive so you forgot to capitalize the 's' in 'sheet.' ;)

-- 
Thanks,

Jim

__
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] Empty Inline elements and backgrounds

[James Gadrow]

Aaron Cohen wrote:
> Hi, I've seen this discussed in the archives once, but
> couldn't quite follow the solution.
>
> Apparently IE doesn't render the background of empty
> inline elements. I need to display an empty span with
> a background image. I can't just use an img tag in its
> place because of some requirements for a DOM script I
> am writing.
>
> Anyway, as a simple test, in FF the bg color of the
> empty span shows through on this test file, but not in
> IE7. I thought of relatively positioning a container
> span and then adding a width and height but this does
> not work. Any suggestions? Here's the simple test file
> that illustrates the problem:
>
> http://www.cohencentral.com/test.html
>
> I assume the problem is because the span is empty and
> is inline. Can someone please offer a solution? 
>
> Thanks.
>
> Thanks,
> -Aaron
>   
have you tried   ?

This should take care of the issue at the expense of adding a 
non-semantic space. (WARNING! Off Topic suggestion!) However, if you're 
DOM scripting anyway... perhaps you could add the   if the client is 
using IE? That way you don't need to clutter up your page with the 
non-semantic space and it would only come into play when it needs. I 
think doing it this way will even hide the   from being displayed 
in your source which means no one will even know it's there who doesn't 
read the script. Problem is it wouldn't work if the user has JS 
disabled, but it sounds like your page is kinda dependant upon it 
anyways so it may not be a big issue...(/WARNING)

If you have a question about my off-topic portion of the suggestion, 
respond off-list so as not to stray.

-- 
Thanks,

Jim

__
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] position:absolute and 3 column layout using float:left and negative margins

[James Gadrow]

Andrew Gaffney wrote:
> James Gadrow wrote:
>> Andrew Gaffney wrote:
>>> Yeah, that's what happens when I type the URL by hand :)
>>>
>>> Now that the biggest problems are out of the way, there's a 
>>> rendering oddity with the page in IE6 (and 5, but I don't really 
>>> care about that). The content DIV ("CenterBox") is lined up on the 
>>> left with the header image, but it extends ~10px too far on the 
>>> right side. There also seems to be ~10px extra padding/margin on the 
>>> left side of the navigation box. It looks correct in IE7 and FF. I 
>>> have absolutely no idea what's going on there.
>>>
>>> However, looking at it now, it appears that the "ase" from the last 
>>> word in the 3rd column are repeated to the left of the navigation 
>>> column. This is probably what's pushing it out. Why does IE have to 
>>> suck so much? Anyone have any idea why it's repeating those letters 
>>> and how to get rid of them?
>> Sounds like the IE duplicate characters bug. It's caused by comments 
>> between floats (which, I think I remember your code is heavily 
>> commented...).
>> Read about it here ( 
>> http://www.positioniseverything.net/explorer/dup-characters.html ) 
>> and see if that doesn't fix the problem.
>
> That fixes the character duplication, but that apparently wasn't the 
> cause of the extra spacing on the left. Any ideas for the extra spacing?
>
IE double margin float bug maybe?

http://positioniseverything.net/explorer/doubled-margin.html

-- 
Thanks,

Jim

__
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] Empty Inline elements and backgrounds

[James Gadrow]

Aaron Cohen wrote:
> Thanks for the suggestion. Unforunately adding a nbsp
> is not possible, due to the fact that I sometimes use
> that span to contain text instead of a bg image,
> depending on certain conditions.
>
> so, I would still like to know if it's possible to
> somehow make the empty span behave like a block
> element, so that the bg shows thru, but not render on
>   
Well, if there's content in the span it should display correctly (thus, 
you're only add the nbsp where you don't add content and this is usually 
as easy as adding an 'else' condition if scripting).

However, in the interest of staying on topic. Try wrapping the 
bothersome span as well as any following text inside another span and 
then wrap just the following text in another span that's on the same 
document level as the empty span. Then set each 2nd span to display: 
block; float: left; and then use absolute positioning on their parent 
span to place it back where it belongs. This distance could be more 
easily calculated if you set the line-height of the  element. So it 
would look like:

span span {display: block; float: left;}
ul li {line-height: 1em; position: relative;}
.textWrap {position: absolute; left: 100%;}

Text Here  Some More 
Text.

That's pretty ugly but it sounds like your script is preventing a lot of 
easier solutions. Now, you'd want to test that cross-browser because 
something is tickling my brain about using position: absolute inside 
position: relative but I don't remember off hand what it could be...

-- 
Thanks,

Jim

__
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] USING RELATIVE AND ABSOLUTE POSITIONING

[James Gadrow]

Jason Chan wrote:
> When do you use relative, absolute, and/or fix positioning ? I mean I 
> understand the concepts but I am mainly floating div containers to 
> construct a layout for a site. The only time that I see myself using 
> relative or absolute is in this case:
>
>
> HTML:
>
> 
>
> 
>  
>
>  
>
> CSS:
>
> #header { position: relative; }
>
> #logo { position: absolute;
>   top: 10px;
>   left: 10px; }
>
> where the positioning of the logo is absolutely positioned inside the 
> header bc the position is labeled as relative.
>
>
> This is the one and only thing i learned about these two properties, 
> relative and positioning. are there any other things that you can do 
> with them? 
I find absolute positioning to be a great way to sub-divide a column in 
a 3 column layout where the sub divided section as using clear to 
establish a further columned section would place it below the 3 main 
columns.

Also, absolute positioning is cool for total separation layouts. Say you 
have three divs each children of the body element but div2 is a 
navigational element that you want placed inside div1 you can position 
it absolutely and have it fit together perfectly. Having each of your 
page element completely separate from one another allows you to use 
multiple stylesheets to create entirely different layouts without having 
to worry about what is nested where. This could be a great boon if 
you're designing to meet accessibility guidelines.

-- 
Thanks,

Jim

__
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] Conditional Statement

[James Gadrow]

david wrote:
> Vicki Stebbins wrote:
>   
>> Hi All,
>>
>> I'm wanting to target IE7.0 with a problem it has with 'sticky menus' in 
>> the Suckerfish Menus (pop out menu stay stuck out and don't return).
>>
>> The fix is to add this line to the CSS:
>> #nav li:hover, #nav li.over {position: static;}
>>
>> #nav being the nav div that the menu is contained in.
>>
>> When it's added however it breaks the menu in Safari so, I thought I'd do a 
>> conditional statement just to target IE7.0. I've never done this before and 
>> I put it together like this:
>>
>> 

Re: [css-d] Conditional Statement

[James Gadrow]

Ingo Chao wrote:
> david wrote:
>   
>> James Gadrow wrote:
>> 
>>>   david wrote:
>>>   
>>>> Vicki Stebbins wrote:
>>>>   
>>>> 
>>>>> ...
>>>>> 
>
> http://msdn2.microsoft.com/en-us/library/ms537512.aspx
>
>
> Ingo
>   
D'oh! Didn't even realize that my space obviously didn't register. 
Thanks for pointing it out Ingo! Could have frustrated the OP to no end :)

-- 
Thanks,

Jim

__
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] Different ways of doing the same thing

[James Gadrow]

Les Mizzell wrote:
> It's always interesting to look at other folks stuff. I just inherited a 
> site, and in looking at their CSS, the main div is listed thusly:
>
> #pageWrapper {
>width:760px;
>position:absolute;
>left:50%;
>margin-left:-380px; }
>
>
> Where I would have just done:
>
> #pageWrapper {
>width:760px;
>margin: 0 auto 0 auto;  }
>
>
> Any advantage of doing it the first way?
> __
> 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/
>
>   
Well, it won't confuse a browser that won't center with margin: auto 
(such as IE 7 in quirks mode). And for some reason they're taking the 
page out of the normal flow so maybe they had a reason for that? Other 
than that, I can suggest that you could also do it as:

#pageWrapper {
width: 760px;
margin: 0 auto; }

Which saves a few more bytes of data which means faster download times 
for your clients, sure not by much, but each optimization is still an 
improvement :)

-- 
Thanks,

Jim

__
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] How to center the entire page

[James Gadrow]

jana coyle wrote:
> I am looking to have my page evenly centered on the screen.  It is currently 
> on the left side of the screen. Here is the link to my site 
> http://www.precisemessenger.com/private/help1.html  I would like it to have 
> two even spaces on both sides of the page, here is an example 
> http://www.precisemessenger.com/private/sample.gif  Any help would be great.
>
> Thanks,
> Kevin
> __
> 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/
>
>   
Here's a link that's short and to the point:

http://bluerobot.com/web/css/center1.html

HTH!

-- 
Thanks,

Jim

__
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] "Divitis?"

[James Gadrow]

Ross Hulford wrote:
> Yep. That;s the way I approach it. Much neater.
>
> R.
> - Original Message - 
> From: "Brian Crescimanno" <[EMAIL PROTECTED]>
> To: 
> Sent: Tuesday, May 29, 2007 2:13 PM
> Subject: Re: [css-d] "Divitis?"
>
>
>   
>> Out of curiosity, why not use an unordered list--it would seem more
>> semantically correct in this situation.
>>
>> You could change your div to a ul and wrap your items in li tags; then
>> you can set the background of the the li tag to the image you want and
>> position it appropriately.
>>
>> Brian
>> __
>> 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-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/
>
>   
Yup, if you ever say the words "I have a list of..." then you should 
probably be using a list :)
Except, of course, if each list element has several sub-elements to it, 
then you're probably a good candidate for a DATA table.

-- 
Thanks,

Jim

__
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] Need some help - single column, 3 rows (divs), last row forced to bottom of page

[James Gadrow]

William Gaffga wrote:
> Hi All,
>
> Don't think this is my first post but don't recall my last.
>
> I need some help. I'm working on a site that is deceptively simple, a
> single centered column, 700px wide, with three divs, acting like rows.
> The first two "rows" should each be 300px high, their bottom and top
> should touch. The third row, a nav bar, should be flush to the bottom
> of the page.
>
> I have this working in Firefox & now Safari but IE chokes on it, the
> second & third rows being pushed off to the side despite using a
> container div. If this is not an adequate description you can see an
> example here: 
>
> After doing some research it must have to do with "having layout" or
> one of the other IE issues. Unfortunately, my brain just isn't
> absorbing the data for how to fix this.
>
> Can someone provide a fix, advice on how to proceed (without tables)
> or at least point to an example that works - cleanly!
>
> Thanks very much.
>
> Will.
> __
> 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/
>
>   
Actually, your issue has nothing to do with hasLayout. The issue here is 
two-fold. When you use position: absolute in IE it thinks you want left: 
50% instead of left: 0 like firefox defaults to. So, for .middle add the 
line left: 0;

Now, since your .bottom container is utilizing fixed positioning, you 
need to do a little extra work since using left: 0 on this element will 
actually left align it with the browser window and you want it centered 
you need to use negative margins. Set these two lines and it will center 
your .bottom container left: 50%; margin-left: -351px;

-- 
Thanks,

Jim

__
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] Navigation

[James Gadrow]

trevor bayliss wrote:
> Hello everyone I am new!
>I am having problems with the last tab on a navigation bar. For some 
> reason I can´t make it fit with the light blue line above it and I am stuck 
> as to how to do it. Also the navigation bar doesn´t show up in Netscape 4.78 
> (no Flash) with Windows 2000 Professional and the thing just goes crazy with 
> Explorer 4.0 (no Flash) Windows 98. I imagine that the problem is that they 
> are too old so I won´t worry that much about them. What can I do to make the 
> navigation line up? Thanks 
>  
>  "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd";>
> 
> 
> 
> UL {
>  LIST-STYLE-TYPE: none
> }
> LI {
>  LIST-STYLE-TYPE: none
> }
> A {
>  COLOR: #7f99ae; TEXT-DECORATION: none
> }
> #topnav {
>  BORDER-TOP: #d8e1e9 4px solid; MARGIN: 9px 0px 0px
> }
> #topnav LI.l {
>  WIDTH: 20px
> }
> #topnav LI {
>  DISPLAY: inline; BACKGROUND: #849eb3 no-repeat left top; FLOAT: left; WIDTH: 
> 85px; HEIGHT: auto
> }
> #topnav LI SPAN.last-tab {
>  DISPLAY: inline; BACKGROUND: #849eb3 no-repeat left top; FLOAT: left; WIDTH: 
> 80px; HEIGHT: auto
>  }
> #topnav A {
>  BORDER-RIGHT: #d8e1e9 1px solid; DISPLAY: block; BACKGROUND: no-repeat left 
> top; FONT: 11px/20px tahoma, arial; WIDTH: 85px; COLOR: #fff; TEXT-ALIGN: 
> center
> }
> #topnav A:hover {
>  BACKGROUND: #fcda2e no-repeat left top; TEXT-DECORATION: none
> }
> #topnav A.selected {
>  BACKGROUND: #fcda2e no-repeat left top; TEXT-DECORATION: none
> }
> #width {
>  MARGIN-LEFT: auto; WIDTH: 882px; MARGIN-RIGHT: auto; TEXT-ALIGN: left
> }
> 
> 
> 
> 
> 
>   Home 
>   About 
>   Shops 
>   Entertainment 
>   Malls 
>   Environment 
>   Local 
>   Information
>   Contact Us 
>   Login
> 
>
>
>
> You
>  snooze, you lose. Get messages ASAP with AutoCheck
> in the all-new Yahoo! Mail Beta.
> http://advision.webevents.yahoo.com/mailbeta/newmail_html.html
> __
> 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/
>
>   
Ok... I worked this out and I'm not sure it's what you want. But the 
reason you can't get things lining up is you didn't take off the default 
padding/margin on your list. This design could benefit from a rewrite 
but I have no idea what your project specs are so I left most of your 
code alone. Below is the code to duplicate the effect I created. I only 
tested in FF and IE7 but I figured this'll give you a good baseline to 
work from.

http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd";>



UL {
 LIST-STYLE-TYPE: none;
 padding: 0;
 margin: 0;
}
LI {
 LIST-STYLE-TYPE: none;
}
A {
 COLOR: #7f99ae; TEXT-DECORATION: none;
}
#topnav {
 BORDER-TOP: #d8e1e9 4px solid; MARGIN: 9px 0 0 0;
}
#topnav LI.l {
 width: 89px;
}
#topnav LI {
 DISPLAY: inline; BACKGROUND: #849eb3 no-repeat left top; FLOAT: left; 
WIDTH: 88px; HEIGHT: auto;
}
#topnav A {
 BORDER-RIGHT: #d8e1e9 1px solid; DISPLAY: block; BACKGROUND: no-repeat 
left top; FONT: 11px/20px tahoma, arial; WIDTH: 100%; COLOR: #fff; 
TEXT-ALIGN: center;
}
#topnav A:hover {
 BACKGROUND: #fcda2e no-repeat left top; TEXT-DECORATION: none;
}
#topnav A.selected {
 BACKGROUND: #fcda2e no-repeat left top; TEXT-DECORATION: none;
}
#width {
 MARGIN-LEFT: auto; WIDTH: 882px; MARGIN-RIGHT: auto; TEXT-ALIGN: left;
}





  Home 
  About 
  Shops 
  Entertainment 
  Malls 
  Environment 
  Local 
  Information
  Contact Us 
  Login


-- 
Thanks,

Jim

__
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] min height with ie and ff

[James Gadrow]

Ross wrote:
> In answer to my own question:
>
> min-height:400px;
> height:400px;
> height:auto !important;
>
>
> does height:auto !important; validate?
It should, !important is recognized by standards compliant browsers. 
It's only the quirky ones that misunderstand it.

-- 
Thanks,

Jim

__
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] min height with ie and ff

[James Gadrow]

[snip]
> In any case, you also need to have:
>
> html, body {
> height:100%;
> min-height:100%;
> }
>
> to make whatever div you're using go to 100% also.
>
> :)
>
> ~Shelly
[/snip]

Um, you only need this if the div you're trying to size doesn't have a
parent with a height setting. Else this could have some unpredictable
results on some layouts (think a footer that the user DOESN'T want
aligned to the bottom of the nav window if there isn't enough content
*dunno why, but there's no accounting for taste*). In fact, I would nix
the idea of the html body element all together because if you're sizing
a div's height and it isn't working as you anticipate, it'll be easier
to debug (because you probably DID want to set a height for its parent
but just forgot to).

Also, this technique doesn't work if you want min-height to be a static
value as the standards compliant browsers will render the element at the
static height and never resize it. Just in case someone decides to try
this technique for liquid images, etc. ;)

But, it's a good way to shave off a couple bytes of file size if you
want the settings to be 100%.

-- 
Thanks,

Jim


__
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] absolutely positioned divs seem to have wrong top position in IE 7 (or IE 6)

[James Gadrow]

Christian Kirchhoff wrote:
>  
> Hallo,
>
> Please take a look at the following page:
> http://www.digitale-bibliothek.de/Downloads/CSS-Test/blog.htm
>
> The left column div (with the menu) and the right one (with the google ads)
> are positioned absolutely, with em values.
>
> In Firefox (or Opera) the top position of those divs is as I want it to be.
> In IE 7 or IE 6 (not tested in older versions of IE) they are positioned to
> high. This could lead to the opinion that IE is taking another font size as
> a reference, thus using a different em value and computing a different top
> coordinate.
>
> BUT: If I set the left position of the left div to 1em (instead of 0em), the
> new left positions in Firefox and IE are the same.
>
> AND: If I set the top coordinate of those divs to 0em, then only in IE the
> divs really touch the upper border of the browsers client area. In Firefox
> there is still a gap between the top border of the client area and the top
> of the divs.
>
> So my guess is that the top coordinate of the origin (the root point) that
> is used for the calculation of the position of those divs is different in
> IE. And just from intuition I would even say that IE computes the correct
> position.
>
> But maybe this is an issue of the mode (strict, loose) or something else...
>
> Does anyone have a better experience with this than I have, and see what is
> going wrong here, and in which browser?
>
> Regards,
>
> Christian Kirchhoff
> Directmedia Publishing GmbH · Möckernstraße 68 · 10965 Berlin
> www.digitale-bibliothek.de
> AG Berlin-Charlottenburg · HR B 58002 · USt.Id. DE173211737
> Geschäftsführer: Ralf Szymanski · Erwin Jurschitza
>
> __
> 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/
>
>   

A couple quick thoughts. This sounds like a hasLayout problem so try
setting the absolutely positioned element's parent to zoom: 1; (invalid
CSS, but I use it to test for hasLayout as it doesn't affect other
browsers).

Also, if you're using a zero unit (0em) you can write that as just 0
(which is standard coding practice and it saves a few bytes of data each
time you do it, thus increasing the speed at which your page loads).

-- 
Thanks,

Jim


__
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] Urgent please Hyperlink help

[James Gadrow]

jo soap wrote:
> Hi ,
>
> I'm trying to use a logo as a link to another site opening in a new window.
>
> I've searched and tried several solutions and A) They're not working and B) 
> I'm not sure either method will validate.
>
> Can anyone please advise best method to ahcieve this.
>
> Yours gratefully,
>
> Jo.
>
> _
> Txt a lot? Get Messenger FREE on your mobile. 
> https://livemessenger.mobile.uk.msn.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/
>
>   
Although the WACG specifies that you're not supposed to be opening new 
windows, here's the way to do it that will leave your code valid:

http://www.sitepoint.com/article/standards-compliant-world

-- 
Thanks,

Jim

__
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] display:inline necessary with float: left/right ???

[James Gadrow]

Jason Chan wrote:
> hey all,
>
> Is it just me or is display:inline necessary when floating with columns bc 
> the double margin bug in IE6.
> I ask this because i have seen many sites, that do not require the display 
> inline for it to appear properly in IE and yet still float columns:
>
> ie.
>
> #mid-one, #bottom-one {
>   float: left;
>   width: 430px;
>   margin-right: 40px;
> }
>
> #mid-two, #bottom-two {
>   float: left;
>   width: 220px;
> }
>
> I on the other hand will have to enter display: inline (as shown below for 
> it to work)
>
> #mid-one, #bottom-one {
>   float: left;
> display: inline;
>   width: 430px;
>   margin-right: 40px;
> }
>
> #mid-two, #bottom-two {
>   float: left;
> display: inline;
>   width: 220px;
> }
>
>
> I guess my main question is...
> Is there something that im not reading from this person's code that prevents 
> the double margin and not need the display: inline property???
Hmmm... I thought the double margin float bug was only supposed to rear 
its ugly head when the margin setting and the float setting were the same:

for example:
div {float: left; margin-left: 10px;} //triggers double margin float 
bug in IE if this element is against the edge of its container
div {float: right; margin-left: 25px;} //does not trigger double 
margin float bug because margin is applied to opposite side of element

-- 
Thanks,

Jim

__
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] absolutely positioned divs seem to have wrong topposition in IE 7 (or IE 6)

[James Gadrow]

Christian Kirchhoff wrote:
> P.S.: The body was set to {position: relative}. After I deleted that, the
> positioning in Firefox became the same that in IE...
>
> Though I don't understand why {position: relative} attached to the body
> element lets absolutely positioned child elemnts shift down a little in
> Firefox, I am glad that now I can keep working with a single CSS instead of
> extra CSS files for Internet Explorer.
The only reason that would happen is because FF and IE are being 
positioned relative to different elements and removing the position: 
relative from the body element made some element that was rendering 
correctly in FF move up to the top edge of the container that IE was 
positioning itself to. This definately is a hasLayout issue, but I took 
a look at the page itself and I find it visually appealing, so I don't 
see a real urgent need to go finding it, especially since it's going to 
force you to write conditional / hack code for IE.

But, you may want to create a test site and fool around with the page 
using borders on various divs to see what moves around when you reset 
the position: relative on the body. And it also looks like the menu is 
contained by the body itself but by  Now, granted, I 
didn't comb through the code with a fine-toothed comb to see exactly 
where 'main' ends, but I got about 1/2 of the way through the source 
code so it's obviously a wrapper of some sort and it also has position: 
relative applied to it, so *something* is supposed to be positioned 
relative to it. As I said, probably not a matter of urgency, but it's 
always nice to know exactly why your code is doing what it's doing, so I 
would recommend you look into it when you have a moment :)

-- 
Thanks,

Jim

__
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] relative or absolute urls?

[James Gadrow]

Ross wrote:
> When linking to images do you use relative or absolute urls?
>
> background-image:url(../images/myimage.jpg);
>
> or
>
> background-image:url(http://.mysite.php/images/myimage.jpg);
>
>
>
>
>
> I have a common header on all pages with different folders and sub folders 
> and the relative urls only work for the pages in main directory but the full 
> url means I have to change them all when moving from local to remote hosts.
>
> I can create a common page head with php but was looking for non php solution.
>
> R.
>
>
>
> __
> 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/
>
>   
As was previously suggested, root relative is probably the best way to go.
However, this is not suitable for all work environments (such as mine 
*sigh*) where your test area may be located in a sub-folder from a 
common network url.
In this case, you'll either have to bite the bullet or utilize php to 
code your page links for you.
Also, remember that all urls are relative to where the css document 
lives NOT the html/php document!

Thus if www.whatever.com/index and 
www.whatever.com/subfolder/subfolder2/page both point to the same css 
document the urls work for both!

-- 
Thanks,

Jim

__
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] page check in IE7 please

[James Gadrow]

Luc wrote:
>  Good morning list,
>
>  At the moment i'm without IE7 on my machine. Could somebody check
>  this page on IE7?
>
>  http://www.dzinelabs.com/projects/MP/Pages/roger
>
>  Does it hold together when resizing the viewport?
>
>  TIA
>  
>   
Only problem I see is that the last letter in your header is overlapping 
your right hand image.

-- 
Thanks,

Jim

__
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] page check in IE7 please

[James Gadrow]

Luc wrote:
> Good morning James, 
> It was foretold that on 19/6/2007 @ 09:16:57 GMT-0400 (which was
> 10:16:57 where I live) James Gadrow would write:
>
>   
>> Only problem I see is that the last letter in your header is overlapping
>> your right hand image.
>> 
>
> Is that some IE7 bug i'm not aware of? Or just setting the heading
> class with a font-size of 2 em will do the trick?
>
>  
>   
I'm not certain, I didn't take a look at the underlying code. I presume 
you either need a hasLayout trigger somewhere that contains your header, 
or (depending upon how you laid out the page) you may just need to 
review your margin / padding settings.

Unfortunately, I don't have much time to devote to an indepth review of 
your code as I'm still trying to nail a problem in a php script... guess 
I'll have to break down and get an IDE because notepad is terrible at 
debugging :p

-- 
Thanks,

Jim

__
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] page check in IE7 please

[James Gadrow]

Luc wrote:
> Good evening Roger, 
> It was foretold that on 19/6/2007 @ 12:38:55 GMT-0400 (which was
> 13:38:55 where I live) Roger Roelofs would write:
>
> 
>
>   
>> One of the beauties of allowing floats to drop is  
>> that the content is conveniently viewable at more screen/window  
>> sizes, but that means you have to give up a certain amount of  
>> control.  Sometimes it is easier to make the user scroll than it is  
>> to convince the customer that 'it is supposed to do that' :-).
>> 
>
> Dropping floats is my preference also but as you pointed out,
> sometimes the user/client prefers to scroll :-).
>
> I  could  make  the min-width less but i'm afraid that still leaves me
> with  IE7.  I  messed  around  with  the heading class (width, margin,
> paddings...)  with  the result that IE7 (installed it by now) gets the
> heading "right" but the other browsers "mess up".
>
>   
Place your ie code in a conditional comment so it doesn't mess up the 
page in other browsers.

-- 
Thanks,

Jim

__
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] Selected LI in navigation (one image)

[James Gadrow]

Matt wrote:
> I am using one image for the tabs navigation. The tabs have three states: 
> off, over and selected. 
>
> The off and over states work fine but I can't get the selected class to work.
>
> Any suggestions?
>
> ul#nav-top-text li a:hover {
>   background-position:0 -42px;
> }
>
> The problem
> 
> ul#nav-top-text .selected {
>   background-position:0 -86px;
> }
> 
>
> ul#nav-top-text li#item1 a {width:55px;padding-left:5px;background-position:0 
> 0;}
>   ul#nav-top-text li#item1 a:hover {background-position:-0px -42px}
>
> ul#nav-top-text li#item2 a {width:72px;background-position:-45px 0;}
>   ul#nav-top-text li#item2 a:hover {background-position:-60px -42px;}
>
>
> 
>   HOME
>   FASHION
> 
> __
> 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/
>
>   
According to what you have written there, the background is applied to 
the  element, yet you're altering the .selected element which is, in 
fact, the  element.

-- 
Thanks,

Jim

__
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] Selectors Confusion

[James Gadrow]

[EMAIL PROTECTED] wrote:
> I thought this question was so *clearly* phrased and I too am confused 
> about it.
> I was hoping that someone could attempt an equally concise reply, line by
> line...
a:link = Link (but NOT Link)
a.link = Link
a:hover = Link (while the user is hovering the mouse cursor over 
the link)
a.hover = Link
a:visited = Link (style applied if the user's history 
contains a visit to the linked document)
a.visited = Link
a:active = Link (while the user is holding down the mouse button 
after clicking on link)
a.active = Link

-- 
Thanks,

Jim

__
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] Selected LI in navigation (one image)

[James Gadrow]

Matt wrote:
> I know that. I just gave it as an example.
>
> ul#nav-top-text li#t1 .selected {background-position:-0px -86px} 
> HOME
>
> With class .selected within the  it works fine. However, I am looking for 
> a solution with the least amount of code.
>
> Matt
Just change in your original post:

ul#nav-top-text .selected {
background-position:0 -86px;
}

to

ul#nav-top-text .selected a {
background-position: 0 -86px;
}

What you were previously telling the browser was:
"Move the background applied to the .selected (li) element down 86 pixels."

And the browser said:
"There is no background on the li element, so, I'm all good here."

Now what you'll be telling it is:
"Move the background applied to the a element of the .selected element 
(li) down 86 pixels."

And the browser will say:
"Oh, that's the active portion of the background image right? Here ya go!"

That's why it works when you change where the class is declared because 
you're changing which element it's applied to. But you can do the same 
thing (without getting classitis) by just placing the a after the 
.selected in your declaration.

-- 
Thanks,

Jim

__
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] Ideas for handling text with CSS

[James Gadrow]

[EMAIL PROTECTED] wrote:
> Hi everyone,
>
> I was wondering if anyone has a link or information as how to best handle
> text with CSS.  By text I mean a line of text that may include 3 pieces of
> information, like name, phone, and email address.
>
> In the past, I always used tables for this, but want to handle this with
> the use of CSS if possible.
>
> I found a site that mentioned word-spacing, but that won't work because I
> don't want a large amount of spacing between the first and last name.
>
> Any suggestions or links are greatly appreciated.
>
> Thanks!  ;-)
>
> Suzanne
>
> __
> 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/
>
>   
You're actually perfectly justified in using a table for this if you're 
talking about listing people with their phone numbers and e-mails.

ie:
bob smith (800) 555-1234 [EMAIL PROTECTED]
jane doe (123) 555-4567 [EMAIL PROTECTED]
john (135) 555-7902 [EMAIL PROTECTED]

because then you're talking a matrix of values with the e-mail and phone 
being dependant upon the name (an index).
However, if you're only displaying ONE person, then you'll want to use 
 tags to mark each section you want styled on the line.

ie
Bob Smith(800) 
555-1234[EMAIL PROTECTED]

However, you only need the spans if no other markup exists that you 
could utilize. Say, you wanted to use the e-mail in a mailto link, you 
could leave off the span for that section.

ie:
Bob Smith(800) 555-1234mailto:[EMAIL PROTECTED]">[EMAIL PROTECTED]

HTH!

-- 
Thanks,

Jim

__
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] Selected LI in navigation (one image)

[James Gadrow]

Matt wrote:
> James,
>
> Thanks for the explanation but it doesn't work. 
>
> This works, but I don't like this solution:
>
> CSS
> ***
> ul#nav-top li#t1 a {width:56px;padding-left:5px;background-position:0 0;}
> ul#nav-top li#t1 a:hover {background-position:0px -42px;}
> ul#nav-top li#t1 .selected a { background-position: 0 -86px; }
>
> XHTML
> ***
> ONE
> TWO
>
>
> I'd like to have the selected class withing the LI element. So the selected 
> LI will look like this:
>
> ONE
> TWO
You can... the problem now is that you left a space between li#t1 and 
.selected (thus, the rule is saying to target a DESCENDANT of #t1 with 
.selected applied to it instead of a #t1 that itself has .selected)

here's complete code to do what I'm saying: (it's important to note that 
unless you have other rules that require you to place the tag before 
your #[id]s then you can eliminate them. so, if your page suddenly 
breaks, change each #nav-top to ul#nav-top and #t1 to li#t1. However, 
this is redundant coding that is adding to the file's size and thus to 
page load time.)

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>




#nav-top #t1 a {width: 56px; padding-left: 5px; 
background-color: #ff;}
#nav-top #t1 a:hover {background-color: #00ff00;}
#nav-top #t1.selected a {background-color: #ff;}

Test



ONE
TWO




-- 
Thanks,

Jim

__
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] where to find info

[James Gadrow]

Fiona wrote:
> Hello,
>
> I have been teaching myself CSS by working through tutorials etc.
>
> I have been puttin it into practise by building a couple of dummy (trial 
> ones, not stupid ones)websites, but have been mainly concentrating on the 
> latest browser versions, till I started getting the hang of what I was 
> doing.
>
> Now I want to learn how to adjust the code to display in some of the older 
> browsers - is there a good reference site that any of you know of that 
> explains some of this ?
>
> Any help much appreciated
> Fiona 
>
> __
> 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/
>
>   
The best teacher about cross-browser compat / bugs is experience. 
However, lacking that I try and decide exactly which browsers I need to 
support (usually latest 2 full versions of modern browsers) and then go 
look up specs on exactly what elements they support. Most css is well 
supported now-a-days by every browser except IE6 (it'll be a little 
nicer once it drops out, but by then everyone will be complaining that 
IE7 is behind the times because mickeysoft doesn't update their products 
enough, except to fix critical security threats that should have been 
worked out before launch date ;) )

However, that being said, coming from someone else who is self-taught, 
buy a book. The websites are great but they usually leave out a certain 
amount of in-depth coverage that helps you understand what's going on 
behind the curtain. I recommend books from the O'Reilly series (which I 
consider the holy grail of web development) or another good book is "CSS 
Mastery" by Andy Budd.

-- 
Thanks,

Jim

__
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

[James Gadrow]

Rick Faircloth wrote:
> Is there any way to bring consistent styling to fieldsets
> and legends between IE and FF?
>   
You should get used to keeping the word consistent out of your vocab 
when talking about form styling. ;)
> How do I keep the rounded corners?
>   
You can have rounded corners with borders, but it takes a lot of 
non-semantic mark-up because the corner graphic you're using is rendered 
INSIDE the border.

Thus you need (and, yes, the order is important here):

.top {background: url('path to a border image that you want') repeat-x 0 
0;};
.right {background: url('path to a border image that you want') repeat-y 
100% 0;};
.bottom {background: url('path to a border image that you want') 
repeat-x 0 100%;};
.left {background: url('path to a border image that you want') repeat-y 
0 0;};
.topright {background: url('path to corner graphic') no-repeat 100% 0;};
.bottomright {background: url('path to corner graphic') no-repeat 100% 
100%;};
.bottomleft {background: url('path to corner graphic') no-repeat 0 100%;};
.topleft {background: url('path to corner graphic') no-repeat 0 0;};









   Place content here. You may be able to 
get rid of one of these divs depending upon your display preference.








> Also, how to get the rounded corners in FF?
Same as above.

hth

-- 
Thanks,

Jim

__
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

[James Gadrow]

Anthony Lieuallen wrote:
> http://developer.mozilla.org/en/docs/CSS:-moz-border-radius
As Anthony wrote, this will create a rounded border as well. However, 
there are a few known issues: Background images may spill beyond the 
rounded borders, and it can only be used with the solid border style so 
if you want a different one you'll have to use a different method.

Also, it will only work for clients using a recent version of FF 
(border-radius is actually part of the CSS3 specification, and I can't 
wait until it gains more main-stream support). There may be an 
implementation method for WebKit as well, but it escapes me at the moment.

For those reasons, I recommend adding the extra mark-up, or, if you're a 
purist, using javascript to generate the extra mark-up necessary (which 
will cause it to degrade gracefully if javascript is disabled).

That's just my advice; however, IE still controls around 80% of the 
market and is notoriously slow in implementing css improvements. So, be 
prepared to utilize other methods for the majority of your clients.

-- 
Thanks,

Jim

__
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] ID vs Class

[James Gadrow]

Travis Killen wrote:
> Why should class be used to define an element vs. id?  
You use ids for unique page elements.

ie:

id="contentWrapper"
id="mainNav"
id="inbox"

You use classes for styling similar elements.

ie:

class="externalLink"
class="topItem"
class="message"

However, you only need an id / class where there's no other way to 
distinguish an item. If you only have 1 form under "contentWrapper" you 
don't need to give it an id / class too.

hth

-- 
Thanks,

Jim

__
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] Menu rollover looping

[James Gadrow]

Nicholas Karnick wrote:
> How can the problem be fixed?
Apply a containing element to the menu item, make it 5px longer to the 
left than the menu item and apply the hover effect to it instead. (still 
position the menu item, but since the hover effect is applied to its 
containing element it effectively transfers the 5 'blank' pixels from 
the left to the right-side, thus providing a blink-less transition ;)
>  And secondly, if it cannot be fixed, how 
> taboo would it be to leave the menu as is?
Not too bad if you no longer require the service of your eyes *heats up 
poker in fire*. ;)

-- 
Thanks,

Jim

__
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] Thread answered:What is the equivalent of font-size:11px?

[James Gadrow]

> This along with other resets makes all your fonts equivalent to 10px. 
>   
Actually, it makes it equivalent to 62.5% of the user's base font size 
(usually 16px). But, yes, you can usually safely assume 10px.
> But also allows you do your entire layout in ems should you choose 
> to do so.
I would advise that you do so. If you size your fonts in em but do your 
layout in px it's kinda defeating the purpose. Using em for layout is 
known as 'elastic layout' and work no matter what font size the user has 
set (well, at REASONABLE font sizes at least).
> Since you are allowing the user to resize text, there is the possibility for 
> them to muck up the design no 
> matter how hard you try to make it perfect. So a little varience is fine.
Amen to that bruddah! lol
While I don't advocate taking control of content sizing from the user, 
(after all, many people have visual impairments) I do try and keep in 
mind if someone is bound and determined to break my layout then it's 
going to happen no matter what I do. I don't think I've seen many 
designs that could stand up to 20 size bumps (unless they're doing ALL 
widths in ems, but for most of the design cases I've seen the client 
doesn't like the fact that the page scrolls horizontalls which means 
using %, which means the page will break when the text is sized too high).

-- 
Thanks,

Jim

__
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] iframes - who still uses them

[James Gadrow]

Ross wrote:
> Does anyone still use frames or iframes? Is it a valid development technique?
Depending upon what you are doing with them, an iframe may be the only 
way to achieve a desired effect. Say, you want a webpage with a section 
of the page that tells you in big, blue letters that you have a new 
personal message. Fine, now add the caveat that you want it to display 
when you have a new message without making your end user refresh their 
page. Now you need an iframe with javascript to make it refresh every so 
often so that ITs information will be current but your user can still 
browse at their leisure.

There must be other uses for them, but I've never really run into a 
project that I had to use them.

-- 
Thanks,

Jim

__
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] with fixed width, but auto height

[James Gadrow]

Bartłomiej Kozielski wrote:
> what must I do for the textbox to automatically set its height depending on
> the number of lines in it? Is there any CSS rule?
No rule via number of lines, (well, perhaps if you calculated the height of 
each line in the textbox and applied it.. but would probably be inconsistent 
between browsers) however, the 'rows' attribute of the textarea (which may be 
required anyway, depending on your doctype) would perform exactly what you're 
trying to do. And since you're already using PHP...

-- 
Thanks,

Jim

__
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

[James Gadrow]

I'm actually putting this to use today. It's a REALLY simple concept and 
I'm surprised no one (well, references aside :p) thought of it before! 
Hopefully, if all goes well I may be able to post a test of this in 
action! :)

-- 
Thanks,

Jim

__
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] How do I inherit the Height from content

[James Gadrow]

Roelf D. Kuitse wrote:
> I need to make sure that one of my divs is only the height (not bigger
> or smaller) of all the span's that I have inside of it.  But the various
> span heights need to be based off of the amount of content inside of
> them.  Any idea's??
Correct me if I'm wrong, but this should be the default behavior as long 
as the spans are not taken out of normal flow. And if they ARE taken out 
of normal flow but are just floated then you can add a clearing element 
to the container. If the spans expand then the container will expand 
with them.

-- 
Thanks,

Jim

__
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] Flash banner floating issue [Firefox]

[James Gadrow]

Martin Paton wrote:
> When this page is resized (in Firefox) the flash banner crops on the
> left rather than the right. Is there any CSS that I can use to target
> the  tag to prevent this from occuring?
>   
You could always add an id, class, etc.

Also, you might want to read this article as an alternative to using the 
 tag for flash files (which do not validate):

http://www.alistapart.com/articles/flashsatay

-- 
Thanks,

Jim

__
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] 3 columns not fitting IE

[James Gadrow]

CSS List Account wrote:
> The page fits in FireFox, but IE 6 always shows a horizonal scroll bar.  Is
> it the image, or ?
>   
I'm unable to determine completely since I was unable to see your styles 
(you're using frames and all I saw was the frame source), however, this 
is likely because you're applying html {overflow: auto} to get rid of 
unnecessary scrolls right?

If that is the case, I solved this a little while ago for one of the 
sites I worked on but the solution is to use expression()s (which can be 
disabled if the user has their security settings on 'High'). Basically, 
IE6 is applying the width of the elements across the wrong element and 
it was hard (impossible?) depending on your layout method to get it into 
the correct element. As a result, it is filling 100% of the width, 
including the space preserved for the scrollbar of the correct element.

The solution requires working knowledge of JavaScript (which is what 
expression()s use) and is dependant upon your layout method and elements 
involved.
>  Also, I would like the top of the photo (left column), text (center column),
> and map (right column) to all line up.  Again, they do in FireFox, but not
> IE6.
>   
This is probably a hasLayout issue. Once again, since I'm unable to view 
your source, I can't tell you WHICH elements need layout but you can 
read about it here (it's best to educate yourself for future reference 
anyway :) ):

http://www.satzansatz.de/cssd/onhavinglayout.html

-- 
Thanks,

Jim

__
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] Basic CSS question

[James Gadrow]

Julian Tulip's Licorice wrote:
> I am trying to learn some of the little things i missed, so sorry if this
> seems like a silly question.
>   
The list is here to answer questions for those of all walks of life so 
no apology necessary :)
> But I see this sometimes:
>
> form#search {color: #fff;}
>
> The hash is right up against the form, and my understanding is the result is
> different than the former example? why is the space removed and what does
> this do?
>   
form #search {color: #fff;} /* This will make any element with an id of 
'search' render with white font if it is in a form element */
form#search {color: #fff;} /* This will make any element with an id of 
'search' that is, itself, a form element render with white font */

I find this most useful with classes since there are, conceivably, some 
class names that you'd like to re-use if appropriate such as:

class='last'
class='first'
class='clear'
etc.

Qualifiers add a way of targeting these elements without having to add 
an id / class to a higher level container (thus resulting in cleaner code).

-- 
Thanks,

Jim

__
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] Aural Style Sheets

[James Gadrow]

Denise wrote:
> I would appreciate any advice (and links) from those of you familiar with
> designing for this audience.
I, too, would like to have some of this information as I've only briefly toyed 
with the idea of learning aural style sheets. So, please either post them to 
the list (since it's still dealing with css, just a particular derivative) or 
cc me in :)

>   Additionally, recommendations for commonly used speech reader "browsers" 
> that I could download for testing the site
> would be great (i.e., Emacspeak).
>   
I don't know of too many, I've not mucked around too much with them yet. 
However, I know of Jaws (you can download a free trial but I believe 
after that there's a registration fee) or, if you're using firefox, 
there's a free plugin called FireVox.

HTH!

-- 
Thanks,

Jim

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