Re: [css-d] Trying to override site style sheet with inline CSS?

2011-10-08 Thread Mark Henderson

Keith Purtell wrote:
But one item defies all efforts. For some reason, hiss CSS for general 
text content is set up with a 1cm indent, which looks pretty ugly. 
I've been tolerating it with paragraphs, but it also kicks in whenever 
I try to add a list, which is uglier yet (screen capture: 
http://www.keithpurtell.com/kthings/gaps.jpg). I tried inserting 
inline CSS of text-indent:0 in both the ol and the lis but it 
didn't have any effect. What to do to banish this monster? 


A screen shot for code debugging just isn't going to cut it I'm afraid. 
Help yourself by helping us and provide a public clickable link or your 
own simplified test case of the problem, and I am sure someone will find 
a solution. FWIW, it doesn't sound like it's limited to text elements 
and I would be inclined to look at any wrapper divs in question and 
check for margin or padding on those (but I am just guessing, because in 
this case a picture does NOT tell a thousand words!).


HTH

--
Mark
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Centering an entire page in the available window.

2011-08-15 Thread Mark Henderson
On 16 August 2011 10:02, Tim Climis wrote:
 You're almost there.  First, you don't need text-align: center.  That's extra.

Extra *unless* you plan on supporting earlier versions of IE.

--
/*Mark
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] parse error on *html

2011-07-29 Thread Mark Henderson
Philippe wrote:
 In a decent browser, it won't select anything and nothing though...
 That hack relies on the fact that the simple little mind of IE 6  7
 ‘thinks’ there is an element that wraps around the root element
 (html). Of course there is none.

And Alan responded:
 This is not correct. For IE6 and earlier, there is an element outside
 html.
[..]
 This means that IE6- sees this.

 root-container
  html ... /html
 /root-container


Perhaps this comes down to interpretation. Putting things in a
different light, let's assume that Philippe was talking with regards
to the specifications (that's how I took it) and they say that html
_IS_ the root.

http://www.w3.org/TR/html4/struct/global.html#h-7.3
http://en.wikipedia.org/wiki/HTML_element#Document_structure_elements

So it doesn't matter that the IE developers forgot they had
implemented some hidden node outside of html, to my mind what
Philippe said /was/ still correct.

Just an opinion.


--
/*Mark
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] text position in unordered list

2011-07-29 Thread Mark Henderson
 And, moment of discovery for me...when 10px of padding is added to move the
 text over, 10px must be subtracted from the container, to keep it the same
 width.

The way it is configured now, right. There have been a few discoveries
since those menus were released (although they are still great
examples and quite workable).  #navcontainer doesn't need a width or
anything else and the styles can be deleted (unless there is a
specific need for a width or a margin-right to achieve part of your
layout design so it gives you some flexibility). Move the fixed width
to the LI. Below should be /everything/ you require to make it work:

#navcontainer ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer li {
width: 166px;
overflow: hidden;/*to make links full width in IE*/
}
#navcontainer a {
display: block;
padding: 3px;
margin: 3px 0;/*added to show how to add vertical space*/
background-color: #036;
border-bottom: 1px solid #eee;
}
#navcontainer a:link, #navlist a:visited {
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover {
background-color: #369;
color: #fff;
}
/*IF supporting IE6 then add the following also*/
* html #navcontainer a {
height: 1%;/*kills whitespace between list items but you can probably
get away with leaving this out*/
}


Now you can alter the padding as you see fit without having to
calculate new widths every time and the width of the link IS the width
of the LI item.

HTH


--
/*Mark
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] parse error on *html

2011-07-28 Thread Mark Henderson
On 29 July 2011 12:21, John j...@coffeeonmars.com wrote:
 Just ran the latest version of my page through CSS validator, and it came up
 with 1 error:

 Parse Error *html .livebar{height:100%; /*For IE6 since overflow:auto does
 not trigger hasLayout*/}

I'm pretty sure it should have a space there, as in * html, not *html.
Nothing wrong with * html hacks as long as you understand the
implications, and they are inside a @media block at the END of the
style sheet, although I'm personally with Tom and prefer conditional
comments.

HTH

--

/*Mark
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] getting an image in back of text (z-index)

2011-07-26 Thread Mark Henderson
On 27 July 2011 12:27, John j...@coffeeonmars.com wrote:
 same beast I've been dealing with..has a chunk of body copy and I'd like to
 slip an image underneath the copy but above the center column. Not
 vertically, but in the front-to-back sense of underneath.

Link?? Or is it the same link as the previous thread?


 My body copy is child of my center area. So, if an image is child of the
 same parent, shouldn't assigning a higher z-index to the copy place it in
 front of an image?

That totally depends on the structure and properties of your html/css.

Since you want to slide the image *underneath* it doesn't sound like
it needs to be a part of the page flow, so can you not just make this
a background image and position it accordingly, which would likely
solve most of the problems you mentioned?

At any rate, without a link we are operating on pure guesswork.

HTH

--
/*Mark
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] font-size value affects position. why?

2011-07-26 Thread Mark Henderson
On 27 July 2011 12:28, John j...@coffeeonmars.com wrote:
[]...
 if I vary *just* the font-size, this head will move up or down. why should
 that be?

Examine line-height.
http://www.w3.org/TR/CSS1/#the-height-of-lines


 also, I've seen people use both % and specific px values with font-size.
 which one is correct? Is it design-specific?

Holy war territory and probably not up for a major discussion on this
list. Pixels were never a good idea in the dreaded days of IE6 and
before, which couldn't scale such units. Generally, if you are
concerned about accessibility then it's never a bad idea to use ems
throughout with a default font-size:100.01% on the body.

Google something like css font size are pixels good or bad? or css
font sizing methods and draw your own conclusions.

HTH

--
/*Mark
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] getting an image in back of text (z-index)

2011-07-26 Thread Mark Henderson
On 27 July 2011 13:37, John j...@coffeeonmars.com wrote:
 what do you mean by out of the flow of the page?

http://www.vision.to/articles/the-difference-between-the-flow-and-positioning-for-web-pages.php

Please remember, a little self-help goes a long way and google is your
friend :-) Looking at your source there are a number of /relevant/
errors:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.coffeeonmars.com%2Fpage.htmlcharset=%28detect+automatically%29doctype=Inlinegroup=0

I would personally start by correcting those as they are certainly
causing issues at my end. Two things that stand out: Paragraphs inside
spans are not allowed, and I recommend making the menu an unordered
list as what you currently have is a /fudge/.

Viewing in IE7/8 is /not/ what I see in FF3 and Opera 9 (Win XP), and
IE6 (Win2k) shows only a blank page with a grey background (I know you
probably aren't supporting this browser but an empty page indicates a
serious issue). I also have to add I see no green whatsoever in /any/
browser, nor do I see the uxlogo100.jpg, but that might just be me. I
didn't check any other browsers because what I initially saw was
enough to raise a red flag.

Honestly John, all things considered, I recommend /starting over/ and
to that end if you can take the time to create and upload a graphical
representation of what you want the page to look like, someone here
(including myself) can probably get you heading in the right
direction.


HTH

--
/*Mark
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Fwd: Newbie has big CSS AND cross browser issues

2011-07-19 Thread Mark Henderson
Hi Bobbi,

At some recent point in time Godmode wrote:
 Add the following to your ul styles:

    width: 800px
    margin: 0 auto;
    overflow: hidden;
    padding: 0;

[..] and then proceeded with a pretty good explanation.

However, I personally would *not* do this as it is restrictive in
nature. Adding a width to your menu when it isn't required can create
other problems when the text of your list items changes, or when you
wish to add another item for instance. The more flexibility that can
be built-in to a page, the better in my opinion. There are several
ways to skin a cat, but one approach that I've always found delivers
good results was actually posted here a few days ago in another
thread:

http://www.projectseven.com/csslab/lists/inline-block/horizontal/

Note the menu itself has no fixed width so can expand as you add items
or text. I've just taken a look at David's working example and his
method uses width:99% which is effectively the same thing and allows
the list to take up as much room as it needs (safety first to prevent
rounding errors in some silly OLD browsers is probably the reason 99%
is used but I'm just guessing).


 You said you wanted it to be left-aligned, so remove text-align:center
 from both the div.navbar and anchor styles.  Incidentally, I think it
 looks nicer centered, but that's not what you asked for :)

Unless I'm mistaken I believe she only wants the text in the container
below left aligned (but the container itself centered on the page) and
there was no mention of the text in the menu itself.


 Add line-height:20px to your anchor styles.  That will center the text
 vertically.

Indeed, but for the most part I wouldn't encourage using pixels for
line-height, and no unit is actually required (there are exceptions of
course but they are rare and this isn't one of them). One advantage of
not using floats in cases such as this (menus) is there is no need to
try and *fudge* a vertical alignment, as simple padding can be used
instead.

Personally Bobbi, I would encourage you to take a closer look at the
source of the Project Seven page - or David's now that I've peeked -
because they both achieve everything you want in a clean and efficient
fashion (one small e.g. there's no need for those position:relatives
you have scattered all over the place). As David always says less is
more!


HTH

--
Mark
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] FireFox/CSS Question

2009-11-18 Thread Mark Henderson
 I wonder what's the problem? Have I set something wrong in FireFox?
 
 Any suggestions?
 
 Thanks,
 
 tedd

Hi Tedd,

Coming in late here but what do you see on a new Firefox profile? 

HTH
Mark
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] IE7 stretching floated div

2009-11-17 Thread Mark Henderson
 Hey Everyone
 
 I am finding an IE bug that seems odd. I have a div with two inputs
inside
 of it. the div is floating right and one of the inputs is floating
left and
 the other right to create some space. here's what it looks like
 
 div class=float:right
 input class=float:left /
 input class=float:right /
 /div
 
 This works fine everywhere but in IE. It stretches the containing div
to
 100% width. So I have to add a set width to make it play nice. For
some
 cases I am not going to want to add a width. Does anyone know what's
causing
 this?
 
 Thanks in advance.
 
 - Jeff

Hi Jeff,

Probably going to need to see more than just that snippet of code.
However, one reason IE doesn't shrink-wrap - which is what you are
seeing in other browsers - is because of an incomplete or no doctype.
So, what's the doctype you are using??

HTH
Mark
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] IE7 stretching floated div

2009-11-17 Thread Mark Henderson
Hey Marc,

Thanks for getting back to me. I can't really send out the page 
because it's the section to edit your profile on the site I am working 
on. I don't want to ask anyone to sign up for something.

This is the Doctype that is in place though. It looks ok.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN 
 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
- Jeff

With a k, not a c please! That doctype should be ok. Since you can't
send the page (understandable in this case) is there any chance of
stripping it down to a test case and posting it elsewhere, or at the
least cutting and pasting the entire form (and not just the div from
earlier).

Mark 
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] IE7 stretching floated div

2009-11-17 Thread Mark Henderson
Jay Tanna wrote on 18 November 2009 at 12:27
 
 You haven't said which DIV is causing the problem.  You have only one
div in your
 snippet so it is difficult to comment.

I think that's probably because the OP doesn't really know where the
problem lies, hence their post to this list (and that's not meant as a
slight on the OP). But yes, we really need more information. See further
down.

 Generally, floated elements are relatively positioned within one
another.  

Ah, no I don't think so, but someone a little more familiar with the
specs may help us out here. I can see what you are trying to say, but
since relative positioning is a type all unto itself, this is not the
best way to describe the behaviour. It is true you can relatively
position a float, but this is not the default. 

http://www.w3.org/TR/CSS2/visuren.html#relative-positioning 
http://www.w3.org/TR/CSS2/visuren.html#floats 

And the below explains how floats are positioned.

http://www.w3.org/TR/CSS2/visuren.html#float-position 

Therefore, a non floated DIV will stretch 100% while floated DIV will
be 
 positioned relatively and automatically shrink to match the width of
 the content inside itself.

Right, a div in the 'normal flow' will expand to the window width,
whereas a float will shrink-wrap to its content (usually!), and not
because it has relative positioning. It's the float that causes the
shrink-to-fit, and nothing else.

 Have you got a sample page where we can have a look at to see what is
going on. 

I wrote in my original reply on 18 November 2009 at 09:49

 Since you can't send the page (understandable in this case) is there 
 any chance of stripping it down to a test case and posting it
elsewhere, 
 or at the least cutting and pasting the entire form (and not just the
div 
 from earlier).

And Jeff responded to the list with

 Sorry about that! My boss is Marc with a c. I am going to look into it
a 
 little more and if I can't find the solution then I will try to strip
the form 
 out. Thanks for helping out with this.

So we will just wait and see how he gets on I suppose.

Mark
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] IE7 stretching floated div

2009-11-17 Thread Mark Henderson
Alan Gresley wrote on 18 November 2009 at 16:45
[..]
 I have no specific test case for IE7- but is this your bug.
 

http://css-class.com/test/bugs/gecko/1-7~1-9/floats-inline-and-float.ht
m
 

Ah ha! Well that does seem to fit with his earlier code snippet, good
spotting.

 
 BTW, please specify which IE version you have the problems in future.
 IE6, IE7 and IE8 are very different creatures. IE8 has few known bugs
 and is vastly different from it predecessors.
 

Alan, it's in the subject line!
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Form Alignment

2009-10-28 Thread Mark Henderson
Dave wrote:
 File Here:

http://www.linkhomes2000.co.uk/main/selling/link_start_sell-property.php
 
 can not get text on left to align with fields on right. This is the
offending css:

[...]

Then Dave responded to Tim
 Hi,
 
 Thank you for your reply, you were the only one who did reply, for
that if
 nothing else I'm very grateful!
 
 No offense, but if you're ever trying to do what I was don't use this,
it's
 miles out...
 
 But once again thank you for trying , as I said no one else even
replied...
 

Dave, here's the thing. Based upon your initial request, it is somewhat
unclear as to *what* precisely you are trying to achieve and that could
be why Tim's response didn't meet your needs. I only see text above each
of the form elements and nothing seems terribly well aligned, so
aligning text on left with fields on right could come down to an
individuals interpretation. So the best bet might be to put up a
screenshot of what you want the final result to be, or show us another
website that does what you are after, and then I am confident someone
from this list will be able to provide you with a solution.

Mark
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Hover Effects

2009-10-12 Thread Mark Henderson
Cody Sickler wrote:
 
 On the layout I'm currently working on, I've gotten the effect I
 needed, but it isn't standards compliant (http://cosi.exofire.net the
 bottom and top navigation bars). I can't figure out a better way to
 achieve the general effect other than doing what I have done.

I'm not sure *exactly* what it is you are trying to achieve but you can
start by altering your html so it reads
ul
lia href=#link text here/a/li
lia href=#link text here/a/li
/ul

as you currently have the link outside the list. Take a look at
http://css.maxdesign.com.au/listamatic/ - I suspect there are some good
examples of what you are after on that site, in particular the
horizontal navigation section should be of interest.

HTH
Mark
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] sorry - site re-check - haslayout?

2009-09-17 Thread Mark Henderson
MEM wrote:
 My directory structure is:
 + rebelatehome
   + css
   - home8.css
   + images
   - hover.png
   + js
 
 So, if the css is inside css directory, to go to images directory from the
 css file, we have to, up one level:
  ../  enter one level /images/ and access the image: hover.png.
 Hence, the relative path:
 ../images/hover.png should be correct.
 

Márcio,

Your understanding and explanation above is correct, and hence your paths are 
also correct. I can see all background images, including the hover, although it 
is very faint and hardly distinguishable from the red background you also have 
in place. Checked in IE8 and FF3.

HTH
Mark

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Horizontal list menu - removing space between li

2009-06-29 Thread Mark Henderson
David Laakso wrote: 
 /My opinion requires a shovel./
 
 Take the shovel to the woods. Dig a very deep hole. Bury Verdana in
it.
 Forever.
 And reset to:
 
  #navcontainer ul li a
 {  /*font-family:Verdana;
 /* font-size:0.6em;*/
 font: 0.9em Helvetica Neue, Arial, sans-serif;
 }
 

Heh, best not make it a shallow grave then!

MEM wrote:
  #navcontainer ul li
  {
  display: inline;
  float:left;  :: try ::
  }
 
 That works, but the the padding-bottom space applied on the ul here:
 
 #navcontainer ul
   {
 ...
 padding-bottom:1em;
 ...
   }
 
 disappears.
 
 If, however, I remove it, the image stays also floated.
 
 To correct this, I have added a clear:left; property on the div that
olds
 the image.

With respect to this and your request for modifications/improvements, I
would remove the following:

.destaque {
clear:left;
}

And add overflow: hidden to #navcontainer ul. That will give you the
same clearing and you should see the padding you have on the UL come
back.

HTH
Mark
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Horizontal list menu - removing space between li

2009-06-29 Thread Mark Henderson
MEM wrote:
 Thanks. It works and don't mess with padding. It stills feels weird
that
 something like overflow:hidden; (to hide scroll bars), serves as float
 solver. No?
 

Well, yes.

http://www.quirksmode.org/css/clearing.html 

That might help explain things a little better.


HTH
Mark
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Vertical Menu problem

2009-06-05 Thread Mark Henderson
Alan Gresley wrote:

 The most notable difference occurs with
 lists - Safari and Gecko based browsers (e.g. Firefox) use padding-left
 while Internet Exploder uses margin-left to indent,
 

 All modern browser have padding-start for list, not padding-left since 
 this default (padding-start) is applied regardless of if the text flows 
 from left to right or right to left.

Pedantically, you are correct.

 but as you are
 discovering Exploder also has a default top padding.
 

 Is this a IE6 whitespace bug you referring to for li?

Heh, no. It seems I was a little too cute for my own good. I meant IE 
has a top padding of zero (the OP already knew Firefox had a top 
padding), hence the difference. That's why a padding of 0 on the UL 
seemed to fix the problem, at least at my end.


 Further reading:
 [1] http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ 
 
 Using the Meyer reset or any other reset is the same a knocking down a 
 bridge and then building it back up and can add many extra styles to 
 ones CSS

Reset sheets have their limitations, but it seems more of a personal 
preference than right or wrong to me.


 To be fair, IE8 can not be referred to as 'exploder' since it now is the 
 best in implementing CSS2.1 correctly.
   

Agreed, and FWIW I consider IE8 to be an excellent browser.

adieu
Mark



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Vertical Menu problem

2009-06-04 Thread Mark Henderson
On Behalf Of Yazmin Media
 Sent: 5 June 2009 04:38
 To: css-d@lists.css-discuss.org
 Subject: Re: [css-d] Vertical Menu problem
 
 John,
 
 Try these definitions for your CSS:
 
 .verticalMenu {
 background-color : #FFD096;
 float : left;
 margin-left : 6px;
 width : 150px;
 padding: 0;
 }
 .left_menu_txt {
 padding: 0;
 }
 ul.left_menu_txt {
 list-style: none;
 margin: 0;
 }

Just to add to this: John, something you will need to understand is that
many styling inconsistencies occur between browsers because these
browsers apply their own styles to HTML elements (hence the now common
use of a reset style sheet[1]). The most notable difference occurs with
lists - Safari and Gecko based browsers (e.g. Firefox) use padding-left
while Internet Exploder uses margin-left to indent, but as you are
discovering Exploder also has a default top padding. As an FYI, for the
sake of efficiency, the last 2 above rules can be merged:

ul.left_menu_txt {
 list-style: none;
 margin: 0;
 padding: 0;
}


HTH
Mark

Further reading:
[1] http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ 
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] site check, particularly on ie6 ?

2009-05-29 Thread Mark Henderson
snak detek+0r wrote:
 Subject: [css-d] site check, particularly on ie6 ?
 
 there are two different layouts, front page
 http://tinyurl.com/pxgydd
 
 and all other pages
 http://tinyurl.com/msyk76
 
 fingers crossed,
 thanks!

No amount of finger-crossing will solve the 404s on both style sheet
links.


Mark 

P.S. My posts have been coming through rather intermittently of late -
including the occasional lengthy delay - so if by the time you receive
this the question has been answered, you know why!
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] How to display a line BELOW the div?

2009-05-28 Thread Mark Henderson
Anna G wrote:
 Thanks David :)
 But both the image and the first paragraph have be inside the box1 div
:(
 

http://www.cwc.co.nz/sandbox/css-demos/anna-no-wrap.html 

I've repeated div.no-wrap instead of the different box IDs, but that
shouldn't matter. Is that close enough?

HTH
Mark

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] How to display a line BELOW the div?

2009-05-25 Thread Mark Henderson
Anna Gavrilovic wrote:
 Hi all

 I've got the following code:

 style type=text/css
 div.left {
  float: left;
 }
 /style
 div class=box-text-port
   div style=width: 170px; class=left img src=tn_ScreenShot003.jpg
 alt= width=160 border=0 height=182/div
   pVestibulum egestas quam in nulla pretium blandit. In ac urna purus,
 tempor hendrerit sem. Vestibulum nec ligula dolor, quis egestas elit.
 Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
 cubilia Curae; Integer posuere nunc et odio adipiscing non porta lacus
 molestie./p
 /div
 div class=box-files-port
   pI would like to display this BELOW the image/p

 /div

 I would like to display div class=box-files-port below the image. How
 would I go about doing this?

 Ann
hi Anna,

add
div.box-text-port {
overflow: auto;
}

but that code is pretty inefficient, to say the least.

Mark


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] How to display a line BELOW the div?

2009-05-25 Thread Mark Henderson
David Laakso wrote:
 Please see:
 http://chelseacreekstudio.com/ca/cssd/ana.html
 Checked in IE 6/7/and 8. And in Opera, Safari, and Firefox.
   

Nice David. That's very similar to a demo done for Karl a few days 
ago[1] (using slightly different code) Once again proving the point that 
even in the wacky world of CSS there is always more than one way to skin 
a cat!

Anna, both our examples will cause the paragraph (I used a div called 
.no-wrap since I had to accommodate a heading as well) to stay indented 
all the way down past the image if there's enough content. Is that the 
desired effect? Or do you want the first paragraph to wrap if its length 
is greater than that of the image?

I re-read my earlier response which may have been a little harsh, so my 
apologies if I appeared rude, as that was not my intent.


HTH
Mark

[1] http://www.cwc.co.nz/sandbox/css-demos/img-with-no-wrap.html

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Help Please: Image floats, without the text wrap

2009-05-24 Thread Mark Henderson

 Karl,

 Your style sheet link gives a 404. Change from href=../css.css to 
 css.css and that *may* fix the problem, although, based upon what 
 you are asking your current code set will still fail. Here is how I 
 normally achieve what I think you are after:

 http://www.cwc.co.nz/sandbox/css-demos/img-with-no-wrap.html

 HTH
 Mark


Caveat: For IE6 compliance, add the following to the bottom of your 
style sheet, or in a conditional comment.

* html div.no-wrap {
zoom: 1; /*to give IE6 hasLayout*/
}

I would also give div.no-wrap a bottom padding of 20px (or a number of 
your choice) for aesthetic reasons (white space). And that gif was only 
for testing purposes, right?

adieu
Mark
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Help Please: Image floats, without the text wrap

2009-05-24 Thread Mark Henderson
Owlservice wrote:
 Hi Mark,

 Oops, slightly embarrassed about the file level error :)

 Thanks for you input. Just what I was looking for.

 Regards,
 Karl
   

No worries Karl. Embarrassed but not humiliated I hope!

adieu
Mark
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Help Please: Image floats, without the text wrap

2009-05-24 Thread Mark Henderson
Karl Bedingfield wrote:
 Hi all,

 I am sure I am doing something very wrong here and wondered if you can
 assist? I think I have spent too long looking at this.

 I am trying to have an image float left while heading and content to
 the right does not text wrap.

 This is what I have done so far and all that happens is the image just
 sits above the heading and content.

 Test HTML: http://www.nuveautek.com/test/

 CSS: http://paste-it.net/public/h23dcd6/

 Any assistance and humiliation greatly appreciated. :)
   

Karl,

Your style sheet link gives a 404. Change from href=../css.css to 
css.css and that *may* fix the problem, although, based upon what you 
are asking your current code set will still fail. Here is how I normally 
achieve what I think you are after:

http://www.cwc.co.nz/sandbox/css-demos/img-with-no-wrap.html

HTH
Mark

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Vertically Centering multiple images in a div.

2009-05-12 Thread Mark Henderson
Oliver Garvey wrote:
 Hi guys, I'm having a lot of trouble trying to get some images vertically
 centered in a div. I'm creating a gallery and underneath the main image have
 a set of thumbnails which can be scrolled to select an image to display. The
 problem is, no matter what I try I just can't get the images to center
 vertically.

 Here's a link to one of the pages: http://garvey.netne.net/beach.html
   

Hi Oliver,

I haven't taken the time to implement the necessary changes to get this 
working, but I'm sure if you take a look at Bruno Fassino's Gallery 
example[1] you will see it can be done. Incidentally, Bruno has some 
other interesting layout techniques you may be interested in (just 
navigate to the home page and go from there).

If for some reason you can't get this approach to work, post back and we 
can take another look. Good luck.

HTH
Mark

[1] http://www.brunildo.org/test/ImgThumbIBL2b.html
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Centering a floated list....

2009-04-18 Thread Mark Henderson
Matthew Stoneback wrote:
 I have a navigation on this page: http://www.eddysound.com/dev/adr/ that I
 would like to center.  It is a floated list.  I cannot seam to get the list
 to center within the blue navigation area.  What am I doing wrong?  I have
 been able to do this before but I am currently stumped.  Here is the CSS for
 the page: http://www.eddysound.com/dev/adr/main.css
   

Centering a float isn't really possible. The simplest solution to your 
problem (that I can see) is to change the list items to inline and 
remove the block from the link.  The following CSS should get you close 
to what you want. Tweak as you see fit.

/* Navigation */
#nav {
   /*remove the following two declarations as they only serve to limit 
the design
width: 850px;
height: 40px;
*/
margin: 0;
padding: 0;
background: #004084;
border-bottom: 2px solid #444;   
}

#nav ul {
/* remove unnecessary width - see above comment
width: 850px; */
list-style: none;
margin: 0 auto;
padding: 0;
text-align: center;/*add to center the menu*/
}

#nav ul li {
display: inline;/*change this from float: left;*/
margin: 0;
padding: 10px 5px 5px; /*alter padding*/
line-height: 1.7;/*add this for vertical spacing*/
}

#nav ul li a {
/* remove float and block
display: block;
float: left; */
margin: 0;
padding: 5px 20px;/*alter padding*/
color: #FFF;
font-size: 21px;
text-decoration: none;   
}

Caveat - only tested in Firefox, but there are plenty examples of this 
method at Listamatic so it should be fine.

http://css.maxdesign.com.au/listamatic/horizontal16.htm


HTH
Mark
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] background images

2009-04-14 Thread Mark Henderson
At 10:10 April 2009 Brian Hazelton wrote
 
 When should I use an image and when should i use it as a background
 image. Since CSS allows designers to seperate content from styling,
when
 should I use the image tag or should I never use the image tag?
 

Hi Brian, 

Have you done any background reading on this topic?[1] 

To cut a long story short, the summary version is background images for
presentation, img tags for content.  In some cases that will be a
judgement call, but for the most part it's self explanatory.


[1] http://tinyurl.com/cssvimg 


Mark
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] CSS Menu Issue

2009-04-08 Thread Mark Henderson
Cristiano Diniz da Silva wrote at 9 April 2009 07:39
 Hi,
 
 I got a strange error happing with my menu in Firefox 1.5 / 2. It's
hiding behind
 other div elements even with the z-index set to 100.
 
 Does anyone knows what might be happening?

With no code or link provided, not a clue. If you post a link, I can
assure you someone on this list will come to your aid. 

Also, if you have time, it might pay to read
http://www.catb.org/~esr/faqs/smart-questions.html - although not
totally focused on web design,  there's some very helpful and relevant
material in there.

HTH
Mark
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] [OT] CSS Problem with a tags on IE 6\7

2009-04-04 Thread Mark Henderson
Christopher R wrote:
 I understand but I have the exact same code on another page and it validates 
 so although
 reading up is beneficial, there has to be something minor that would remove 
 all errors !
   

I can only think of one thing to say to that - lobotomy!

adieu
Mark
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] CSS Problem with a tags on IE 6\7

2009-04-03 Thread Mark Henderson
Christopher R wrote:
 I've run into a problem first off the a links on this page 
 http://www.thecreativesheep.ca/site/indexpage9.html don't work in IE 6 or IE 
 7 but work in FireFox also on that same page how does one get rid of all the 
 extra space at the bottom of the page ? And on this page 
 http://www.thecreativesheep.ca/site/animationpage2.html I'm trying to figure 
 how to fix those HTML errors ?
   
IE (particularly 6 and before) has stacking issues and using all that 
absolute and relative positioning is the root cause of this and several 
other problems on that page. However, you've been told before about this 
and IIRC, both your tee pee and sheep were in serious danger at the time 
:-). In itself this simply goes toward validating my final comments.  
Personally, I would start again using a more robust layout technique.

Ian has pointed you in the right direction regarding the flash issue.  
Take his advice please.

 On Thu, Apr 2, 2009 at 1:10 PM mx.css...@googlemail.com wrote:
   
 No facility to check at the moment but I've noticed whitespaces between  
  HREF= and /location.htm.
  Might be that?
  
  HTML:
  div class=navigationpanelul
  lia class=gallery href= /gallery.htmGallery/a/li
  lia class=animation href= /animation.htmAnimation/a/li
  lia class=blog href=/blog.htmBlog/a/li
  /ul/div
Then Christopher R responded:
 I don't have location.htm on my page unless I'm overlooking it I don't have it
Surely you jest?? The reference to location.htm was to YOUR locations 
inside the a tags, which mx  made very clear with the html code copied 
from your page (including the extra spaces).  Please tell me you 
understand this now.
 I have the same code on another page and it validates fine ?!
No. If you have code on one page that validates, presuming you are using 
the same doctype on both, then by definition it cannot be the same on 
another, else it *cannot* be failing said validation. I see Michael has 
just responded to this, however, I will again refer you to Ian's 
suggestion - SWFobject.

In closing, if you are going to continue to post here, the List Admin 
recently requested in a separate thread we all pay careful attention to 
trimming our posts, and recommended bottom posting as best practice. 
Please take his advice on both.

David Laakso also had some advice for you which I am more than a little 
inclined to agree with, and without wishing to appear rude, I will 
reiterate the crux of it:

You might submit your advanced CSS question (s) to: 
http://csscreator.com/, http://www.sitepoint.com/forums/, or 
http://bytes.com/.

HTH
Adieu

Mark
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] i thought styling some quote images around text can be quite simple but how wrong!

2008-10-24 Thread Mark Henderson
liketo findoutwhy wrote:
 to simply add two quote images around some text. seems quite simple at first
 but turns out all the obvious solutions are not as desirable as a perfect
 solution:

 please see
 http://www.0011.com/css/quote.html

 basically, Style 1 is just inlining the image, text, and image.

 Style 2 is using a table.

 Style 3 is using images as background.

 None of them actually is perfect... it seems so easy at first... anyone know
 a way to make it work at all? thanks

There seem to be a few options available (admittedly, I had one 
bookmarked). The last one uses images:

http://www.designmeme.com/articles/csscurlyquotes/
http://24ways.org/2005/swooshy-curly-quotes-without-images
http://simonwillison.net/2003/May/21/stylingBlockquotes/

And remember, Google is your friend, especially if you do like to 
emulate that email address.

HTH
Mark
__
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] i thought styling some quote images around text can be quite simple but how wrong!

2008-10-24 Thread Mark Henderson
liketo findoutwhy wrote:

 oh thanks for your answer.  hm... is the last webpage above the same 
 as my Style 1b?   the requirement is that the ending quote image is 
 right next to the ending word, not at the far bottom right corner.  
 thanks again.


Hello and you are most welcome. I only took a quick look at your code 
before hitting my CSS bookmark folder, since this was one of those 
things that, like you, I discovered first hand is slightly more 
complicated than it first appears (at least to get things working well 
cross-browser).

I also apologise for not paying close enough attention to your 
requirements (was that originally there? It's late, or rather early here 
- as in after 2.30am - so maybe I'm losing my mind but I didn't see that 
first time around!).

The last example link I posted uses background images and appears to be 
closer to your 2b (but not the same),

Ok, so here is one solution, tested in FF3, Safari, Opera 9, and IE6. 
This is win2k I'm logged into right now, and I'll check on IE7 in the 
morning by booting to XP if nobody else has offered a better fix. But 
I'm pretty sure someone more knowledgeable than myself is likely to have 
done so before I wake.

Change the following rule under style 3 to:

.spanRightQuote {
  background: url(rightquote.gif) no-repeat right bottom;
  padding: 0 0 0 15px; /*only left padding needed as the span location 
has moved*/
  zoom: 1; /* hasLayout for IE6 */
}

and in your code:

div class=quoteContainer
div class=divLeftQuote2
div class=divLeftQuote
hello world again hello world again hello world again hello world
span class=spanRightQuotenbsp;/span
/div
/div
/div

Obviously that's quite bloated markup! Although I do see at least one of 
those divs is for the examples presentational purposes only.

You can if you want use the following to achieve the same result:

div class=quoteContainer
div class=divLeftQuote
hello world again hello world again hello world again hello world
span class=spanRightQuotenbsp;/span
/div
/div

and add the margin from .quoteContainer2Inner rule to .divLeftQuote:

.divLeftQuote {
  background: url(leftquote.gif) no-repeat 0px 0px;
  padding: 0 0 0 20px;
  margin: 10px;
}

Good luck!

HTH
Mark
__
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] i thought styling some quote images around text can be quite simple but how wrong!

2008-10-24 Thread Mark Henderson
liketo findoutwhy wrote:

 This is the one:
  From Ben Bacarisse
 
  How about: http://www.bsb.me.uk/testing/quotes.html (re-size window to
  test the wrapping).
Groovy...

... however, that method has a problem and I noticed a similar one when 
tinkering with your examples. Have you seen what happens to the height 
of the last line when the quote wraps? Shrink the window so you have two 
lines of text. Then shrink it even further so you have 3 or 4. If the 
right quote  absolutely *has* to sit next to the end of the text (and I 
really don't know why - is this a management decision or your personal 
preference?) then I imagine this will be a problem for you - but maybe 
not. it certainly would be for me.

At any rate, it appears to be caused by having your image quotes inline 
as opposed to using background images, which I personally find to be the 
preferred option in cases where the image is purely decorative.


HTH
Mark
__
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] IE position problem

2008-10-11 Thread Mark Henderson
Here's my 2 cents FWIW.

Alan, I think we need to go back to your original post to see where some 
of this confusion stems.

 Jennifer.

 Setting padding and margin to 0 in 'body' will globally remove all padding 
 and margins until you change the situation. 

I will admit that simply quoting this and then elaborating on it 
*without* including your follow up could be considered somewhat 
misleading  - however - your use of the term *global* in this case is 
partly responsible for the confusion (I personally wouldn't have used it 
in such a way since the word has implications, but it does depend on 
your everyday use with regards to CSS I suppose).  Now to your follow up:

  That is, if you do nothing else to padding or margins, they will never 
 appear.
 As soon as you define a class or id and change its padding and/or margin, 
 that definition will be obeyed within that class or id. Anything outside 
 those definitions, that is in the body only, will obey the definition for the 
 body. i.e. No padding/no margin.

What I believe you should have said, and perhaps probably even meant to 
include (as I note you have done so in a later post) was the addition of 
other *elements* (and *not* classes or IDs). Elements being the key word 
here - since the clear inference from the above is that the addition of 
any heading or paragraph element, for example, will in fact result in 
the global margins and paddings being applied (unless said element were 
to have a class or ID added, since any h1 or h2 or p etc. still fits 
logically INSIDE your definition, whether you mean it to or not). I 
believe that is why some of the other posters in this thread have 
disagreed with you and attempted to clarify. I think that's fair since 
what you communicated above is quite clearly inaccurate. This is what 
some might call semantics, but in the coders world semantics are 
significant.

 What has happened is that some folks have read their own meaning into what I 
 said, which is that (apart from HTML the BODY is the prime and only 
 global element at the start of a document.

No, they read a meaning into what you said based on *what you said* (see 
above explanation), although it seems clear from your follow up posts 
you never meant to imply what is, in fact, a logical interpretation of 
your words. That's not their fault.

 When any other element is *added* within 'body' the situation *changes*. The 
 text within 'body' will still obey 'body' rules and anything else will set 
 its own rules and take over from 'body' and may or may not inherit attributes 
 from 'body' and may or may not set its own attributes. That's a fundamental 
 fact and is the 'change' from 'body' attributes that I originally spoke of.

That's better! Indeed it is a fundamental fact but it is not what you 
originally said, only what you may have *meant* to say - there's a big 
difference.

  I have never mentioned 'inheritance' up until this message, so I don't know 
 where that came from.

Surely you jest? It's probably partly related to the flaw in your 
original post, and that word global - as I said above, it has 
implications! But more importantly, it was about trying to explain to 
someone who was still coming to grips with the affect the body tag has 
on other elements, and why padding and margin don't always inherit.


Adieu
Mark


__
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] IE 6 Issues

2008-05-09 Thread Mark Henderson
Robbert van Andel wrote:
 I believe the second issue we are having is related.  On some pages with a
 lot of text, or a bulleted list, there is a 2 or 3 pixel shift after the
 text passes the same subnav division.   Example at
 www.salemcancercare.org/draft3/aboutus/partner.html 
 

Sounds like this:

http://www.positioniseverything.net/explorer/threepxtest.html

HTH
Mark

__
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] How to make one DIV appear at the bottom of another?

2008-05-01 Thread Mark Henderson
Erik Harris wrote:
 http://www.gunlaug.no/tos/moa_8d.html
 Interesting.  This one doesn't work at all in IE6 (at least not in
 IE6-Standalone), despite supposedly being a way to make fixed
 positioning work in IE6.

Then Holly Bergevin wrote:
 Just for the record, in a native installation of IE6, the above
example works fine.

A bit late on this one, but it works fine in my IE6 Standalone on XP Pro
(using multipleIE while running a full install of IE7). 

FWIW, I've always found you can rely on the information Georg provides
to be accurate and well tested. That isn't to say he can't be wrong from
time to time, as we are all only human. 

Mark

__
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] Egg timer flicker in ie6 on hover.

2008-04-28 Thread Mark Henderson
Dermot Ward wrote:
 Hi,
Can anyone please tell me why there is that irritating egg timer
flicker 
on the Categories ul on hover?

I think this will help solve your problem:

http://evil.che.lu/2006/9/25/no-more-ie6-background-flicker

HTH

Mark

__
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] Folks Step Right Up...CSS Oddity

2008-01-15 Thread Mark Henderson
Jason Ogle wrote:
 Hello there folks,
 
 I've got a problem that's absolutely driving me batty! If there were  
 CSS freakshows, this would be one.
 
 Please hit this link in IE 6 or 7
 http://creative.myspace.com/ca/cahub/test.html
 
 The very bottom area has tour dates. Why in the HECK is there that  
 extra space at the bottom of the div and inside is miraculous  
 duplicate dates. You can view source, there are no duplicate dates.
 
 Please somebody help asap as I must deliver this tomorrow. Also,  
 please reply to my personal email as well as I'm on digest.
 
 Thanks!!
 

Hi Jason,

Sounds like the duplicate character bug, which you can read more about here:

http://www.positioniseverything.net/explorer/dup-characters.html

You have comments in your page so I didn't look any further as that is 
usually the cause.

HTH
Mark
__
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] horizontal list in ie 6

2007-12-29 Thread Mark Henderson
Ross Hulford wrote:
 I have done this and fixed it before but I cannot remember how I did it! At
 the moment my list steps in ie 6
 
 Item1
   Item2
   Item3
 
 
 The css
 
 #middleMenu li a{
 height:20px;
 display:block;
 float:left;
 margin-left:20px;
 font-size:11px;
 text-decoration:none;
 color:#FCEE21;
 background-color:#00;
 
 }

Hi Ross,

Try this:
http://www.positioniseverything.net/explorer/creep.html

It's more than likely you can get away with avoiding the trigger, and 
changing padding-bottom on the outer div (#middleMenu) to margin-bottom. 
However, I'm not entirely sure how that affects your layout.


HTH
Mark
__
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] Div's not lining up in IE (any :P)

2007-12-29 Thread Mark Henderson
Alan Gresley wrote:
 Adding padding-top to the #content div will actually accentuate the gap 
though this will even things out across browser-land.

Hi Alan,

Well, that is exactly what Georg already said

Georg wrote:
  For testing-purposes, adding...
 
  #content {
  padding-top: 1px;
  }
 
  without zeroing out the margin-top on #spotlight, will make all
  browsers contain the margin and push #spotlight down.

...but that wasn't an intended solution. I'm pretty sure that 
recommendation was made so Mike could see the full margins in effect and 
what exactly is going on.

To achieve the line up in IE like the other browsers it's better to allow for 
greater margin 
collapse [1].

I am curious - why is that better than the alternatively proposed 
zeroing out of the top margin on the offending #spotlight div? To my 
mind, zeroing the margin is as clean and simple as it gets, since that 
*was* causing the problem in the first instance.

Mark
__
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] Peekaboo perhaps - resolved

2007-09-11 Thread Mark Henderson
 From: Bob Meetin - www.dottedi.biz [mailto:[EMAIL PROTECTED]
 Sent: Wednesday, 12 September 2007 4:53 a.m.
 To: css-d@lists.css-discuss.org
 Subject: Re: [css-d] Peekaboo perhaps - resolved
 
 Honestly though, I tried reading the peekaboo manuscript and got to
the
 resolution, but seriously for anyone who has problems staying focused
 (be it time, ADHD or whatever reason), cut to the chase solutions are
 far more palatable, particularly if you are not tech-guru skilled.
 Tired... --

Perhaps, but...

 Give hasLayout to the content div that contains the floats and see how

 you get on.

...is pretty cut to the chase in my opinion, given the original
question only contained a brief description of the problem you were
encountering, with no sample code or link provided. Generally, it is
difficult to provide such a solution without one of these two things. 

Mark


-- 
This message has been scanned for viruses and
dangerous content by ISPNZ's automated
virus detection system, and is believed to be clean.

__
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] Peekaboo perhaps

2007-09-09 Thread Mark Henderson
 From: Bob Meetin
 Sent: Monday, 10 September 2007 4:18 a.m.
 To: css-d@lists.css-discuss.org
 Subject: [css-d] Peekaboo perhaps
 
 Hi, I can't share a link yet but I think this is the peekaboo bug.
 Firefox is fine, but with IE I have some text that is invisible unless
I
 do some curious scrolling or excessive resizing of window width.
 
 The content area of the troubled page begins with an H1 open/close,
then
 a paragraph open/close.  The third item is a series for 4 pictures
float
 left with centered captions.  I have done things like containing the
the
 pics in a div and some other oddball things.  I can probably get a
link
 later this week.
 
 Ideas?

Well, since you have an *idea* of the problem at hand, and the symptoms
would certainly indicate you are correct, try the standard peekaboo
fixes:
http://www.positioniseverything.net/explorer/peekaboo.html

Give hasLayout to the content div that contains the floats and see how
you get on.

HTH
Mark


-- 
This message has been scanned for viruses and
dangerous content by ISPNZ's automated
virus detection system, and is believed to be clean.

__
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] 3px IE6 gap

2007-09-06 Thread Mark Henderson
 From: Anne E. Shroeder
 Sent: Friday, 7 September 2007 2:31 p.m.
 To: css-d@lists.css-discuss.org
 Subject: [css-d] 3px IE6 gap
 
 Got an IE 6 problem -- it's putting a 3px gap between my two divs -
left one
 is floated, right one is set at a left margin to equal the photo plus
 border.  http://www.language-works.com/CSS_Stuff/specialreport.htm
 
 Have tried a variety of things to close the gap but nothing works.
Any
 ideas on the hack I need here?
 

Hi Anne

http://www.positioniseverything.net/explorer/threepxtest.html
http://haslayout.net/css/3px-gap

HTH
Mark



-- 
This message has been scanned for viruses and
dangerous content by ISPNZ's automated
virus detection system, and is believed to be clean.

__
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] footer that 'sticks' at the bottom

2007-07-18 Thread Mark Henderson
 
 From: Arian Hojat
 Sent: Thursday, 19 July 2007 8:04 a.m.
 To: css-d@lists.css-discuss.org
 Subject: [css-d] footer that 'sticks' at the bottom
 
 Hey all,
 I was looking at the 'bottom footer' examples here:
 http://css-discuss.incutio.com/?page=FooterInfo
 and seems like if content area has alot of text, then the 
 footer is 'pushed down' anyway? even if it is absolutely positioned.
 
 I seen a couple webpages where the footer is a neat little 
 thin strip absolutely positioned? at the bottom of viewport, 
 and the content will go behind it, but the content is never 
 hidden since they use some padding i guess and u can use the 
 browser's scrollbars to view the content if its expand over 
 browsers' viewport size, but the footer is always there and 
 never 'pushed out'. Anyway to achieve this? An example of one 
 where it doesnt work the way i expect is below (footer is 
 absolutely positioned so not sure why).
 
 thanks,
 Ari

Check the Wiki for references to footers and fixed positioning: 
http://css-discuss.incutio.com/?page=FooterInfo

Also, Georg has some good examples on his site: 
http://www.gunlaug.no/contents/wd_additions_15.html
http://www.gunlaug.no/contents/wd_additions_17.html

... although it's possible this isn't his final say on the matter, it
explains things quite well. You will most likely need to actually
understand the concepts in order to apply such a solution to your
layout. 

And then there's this: 
http://www.gunlaug.no/tos/moa_8d.html 

Good luck!

HTH
Mark

-- 
This message has been scanned for viruses and dangerous
content by ISPNZ's automated virus detection system,
and is believed to be clean.

__
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 you kill the cell spacing in table with CSS?

2007-07-17 Thread Mark Henderson
Jukka K. Korpela wrote:
 As far as I can see, on Win IE border-collapse: collapse overrides the 
 _default_ cellspacing. That is, if you set it and do not use the 
 cellspacing attribute in HTML markup, there is no spacing between cells.
 
 Oddly enough, it does not override an _explicit_ cellspacing attribute.

A quick demo locally reveals you are correct (in IE 5.5/6/7). For some 
reason I had a recollection that cellspacing was still required for 
certain browsers, and then I found this in my bookmarks:

http://archivist.incutio.com/viewlist/css-discuss/14032

...which is somewhat antiquated. At least my memory is still working! 
Sorry for the inaccurate information.

Mark



__
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 you kill the cell spacing in table with CSS?

2007-07-16 Thread Mark Henderson
Duckworth, Nigel wrote:
 I have an example at http://www.omgma.com/
 Under the third menu tab in the center of the page 
 - where it says Program Schedule (Below the What's New) 
 I have a table.
 
 I tried using border-collapse - but I am still getting 
 spacing between the cells.  What is the CSS to get rid 
 of the spacing between table cells?
 
 You need to apply the border-collapse to TABLE (not the TD) then you can
 apply your borders to TD, something like this: 
 
 table#sessions { 
 padding:  5px !important; 
 margin: 0 !important;
 border-collapse: collapse !important; 
 border-spacing: 0 !important;
 }
 
 table#sessions td { border: 1px solid #092845; } 

Indeed, but unfortunately in Win IE border-collapse: collapse does not 
override cellspacing. Border-spacing is the cellspacing equivalent in 
CSS, but browser support is poor AFAIK.  Thus, if you absolutely MUST 
have no space between cells, you will also need to add cellspacing=0 
in the table tag itself.

HTH
Mark
__
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] images won't align in IE

2007-07-06 Thread Mark Henderson
Christopher Blake wrote:
 Please help, I am clueless as to why it isn't working. Also I hate  
 the fact that if I
 try things I do not know whether they have worked - I will  
 upgrading to intel-mac soon
 and run parallels and windows as soon as I have the money!

Since money is an issue (and I hear you on that one) you can use the 
following free service to help:
http://browsershots.org/

It's not ideal, but definitely better than nothing. There is also 
browsercam.com but it isn't free.

 I have heard that things are looking ok in firefox and IE7. However  
 browser shots tell a different story in IE6.
 
 First 2 pages I looked at:
 
 http://www.3pointdesign.com/websites.html

Your problem is partly due to the fact that you haven't overridden the 
default border on links (hence the blue line around each image in IE). 
You have set the width of each of the divs 
(.web_left,web_middle,web_right) to be exactly the same as the image 
width, but with the additional border it allows the text to float up 
next to the image, causing the mess in the provided screen shots. I wont 
go into detail, but you have a little but of *divitus* going on. Change 
all the instances of div class=web_row2 to div class=web_row and 
use that as the wrapper around each of your screen shot rows. There's no 
need for the additional class and it doesn't change the appearance in FF 
or Opera (at least not locally). Next, insert a break before each text 
link to force the text onto its own line, and remove the clearing div 
just before the end of each .web_row div. It's not required, and this is 
also what's causing the right column drop in your second example.

Something like:

div class=web_row

div class=web_lefta href=http://3pointdesign.com/two/; title=3 
Point Design (V.1) rel=gb_page_fs[]img 
src=/images/web_pics/page2_0_1.png alt=3 Point website - version one /
br /3 Point Design (V. 1)/a/div

div class=web_middlea href=http://www.neilparishmep.org.uk/; 
title=Neil parish MEP rel=gb_page_fs[]img 
src=/images/web_pics/page2_1_1.png alt=Neil Parish MEP website /
br /Neil parish MEP/a/div

div class=web_righta href=http://www.allsetts.co.uk/; 
title=Allsets Farm rel=gb_page_fs[]img 
src=/images/web_pics/page2_2_1.png alt=Allsets Farm website /
br /Allsets Farm/a/div

/div

And in your css:

.web_row {
   padding-bottom: 15px;/*provides a small gap between each row now that 
there is no clearer*/
   overflow: auto;
   zoom: 1;/*gives IE layout and allows padding-bottom to show inside 
floated parent div*/
}
.web_row img {
   margin: 0;
   padding: 0;
   border: 0;/*kill the border around the image screenshots*/
}

Here is a local screen shot of IE6 running on Win2k.
http://www.cwc.co.nz/sandbox/chris-blake/screenshot-ie6-opt.jpg
...and a live link, though I know you can't view it!
http://www.cwc.co.nz/sandbox/chris-blake/websites.html

 http://www.3pointdesign.com/stuff/index2_IE6.png
 
 The right hand column has disappeared here too!!
See above.

A description of the png issue in IE and its flaws can be found here:
http://www.satzansatz.de/cssd/tmp/alphatransparency.html

A workable solution:
http://www.howtocreate.co.uk/alpha.html

However, I would say that your use of pngs in this case is, in my 
opinion, not an appropriate one (given the file size of these screen 
shots and the comparable result in jpg format). Using Fireworks 8 I can 
get your 40kb + pngs easily down to less than 15kb (in every case) 
without any significant decrease in quality and this would be my 
preferred solution.

And finally, don't use underscores in your class and ID names:
http://devedge-temp.mozilla.org/viewsource/2001/css-underscores/


HTH
Mark
__
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] blue border around image links.

2007-07-06 Thread Mark Henderson
Christopher Blake wrote:
 Hi Pepl,
 
 How do I remove the blue border from my image links?? They only  
 appear in IE6.

Did you even read my reply to your previous thread ([css-d] images won't 
align in IE) where I answered this and your question about png 
transparency, along with a working IE solution for your image alignment 
issues?

Mark
__
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] Absolute Positioning and Fixed Footer Woes in IE

2007-01-07 Thread Mark Henderson
Mark Henderson wrote:
 [...] So, to reiterate, does anyone know of a way to have a fixed 
 width box horizontally centered but always a fixed distance from the 
 bottom of the viewport, whilst allowing the content to scroll using 
 overflow. I hope that all made sense. Any ideas?

then Gunlaug Sørtun wrote:
 Yes...
 http://www.gunlaug.no/contents/wd_additions_15.html
 http://www.gunlaug.no/contents/wd_additions_17.html
 ...but I don't know if any of the above can be adapted to your case
 without seeing the case.
 
 regards
 Georg

Thanks Georg.

My apologies for the delay, but after some time away from this project 
(and a holiday!) I have finally returned to it and settled on a 
compromise across browser land, managing to convince the client of this 
also. I'm still pretty much where I was beforehand, in that IE can't 
quite do what I want (compare Firefox or Opera to IE on PC to see the 
difference), but now I'm using your position fixed implementation, as 
opposed to the tagsoup [1] approach. It just seems cleaner and easier. 
I'm still not happy with the actual design, but have little choice as 
this is what I was given and this is what the client wants - period. It 
handles font-resizing *ok* in good browsers, but at text size 
larger/largest in IE on PC the footer goes a little haywire in its 
alignment. This seems due to the #hnav expanding the #footer-inner 
beyond its specified width, and I can fix this if I float the #hnav list 
items (they then wrap), but that has another trade-off in that I can no 
longer horizontally center the navigation. Go figure. However, its not 
critical and I can live with it, but if there is a fix for this I'd love 
to know it.

Example URI: http://www.hokonuimoonshinefest.co.nz/food.html

[1] http://tagsoup.com/cookbook/css/fixed/

Mark
__
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] Absolute Positioning and Fixed Footer Woes in IE

2006-12-18 Thread Mark Henderson
It's been a while...

I have a slightly unusual design request from a client that's giving me 
some grief in IE. In the nutshell, effectively what is required is a 
fixed footer of fixed height that sits at the bottom of the viewport. 
The content will be centered in another fixed width box and will scroll 
when it is longer than the height of the box, and the bottom of this box 
will sit directly above said footer. Initially I had achieved this to 
good effect using position: fixed and the respective IE hacks (no 
hardships there), but now I've been asked if they can have the scrollbar 
for the main content sitting right next to that box inside the window. 
This has given me a slight headache since I can get it working in 
Firefox/Netscape/Opera but NOT in IE6. Something like...

html, body {
margin: 0;
padding: 0;
height: 100%;
border: 0;
}

#content {
width: 730px;
position: absolute;
bottom: 260px;
top: 10px;
left: 50%;
margin: 0 auto auto -365px;
text-align: center;
overflow: hidden;
}

/* hide from ie mac \*/
#content {
overflow: auto;
}/*end hide*/

...does the trick for most browsers, but of course IE6 doesn't like the 
use of both position top and bottom without a height in this situation, 
and using a height wont work (well, I can't make it work).

So, to reiterate, does anyone know of a way to have a fixed width box 
horizontally centered but always a fixed distance from the bottom of the 
viewport, whilst allowing the content to scroll using overflow. I hope 
that all made sense. Any ideas?


TIA
Mark
__
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 7.0 not recognizing Height:100 percent

2006-11-16 Thread Mark Henderson
On the 17th of October Heidi Langeneckert wrote:
 My design is fairly simple, I just want my content centered 
 in the middle vertically, and stretch 100% from top to 
 bottom. 

Grüße Heidi

This might get you started:
http://css-discuss.incutio.com/?page=HundredPercentHeight

HTH
Mark

-- 
This message has been scanned for viruses and dangerous
content by ISPNZ's automated virus detection system,
and is believed to be clean.

__
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] I'm lost on this IE glitch, help appreciated

2006-09-12 Thread Mark Henderson
From: Stuart Swan [mailto:[EMAIL PROTECTED] 
 Hi List,
 
 I've come across an error in IE, on this page 
 http://www.stuartswan.com/v6/index.php on the part that says 'You are
 in: Home' it has a background image 400 pixels wide, in 
 Firefox it looks perfect and attaches to both sidebars nicely 
 but in IE it has a bit of padding on either side.

Hi Stuart

I see your problem hasn't been resolved yet. This should help you out:
http://www.positioniseverything.net/explorer/threepxtest.html

You have a (left) float on your leftsidebar and a margin on your content
div to position it adjacent to the sidebar. This is what triggers the
bug. If you add more text to your content div you'll see the text jog in
action (or rather, the jog will disappear) once it goes down below the
left navigation. The above link has a solution that should implement
fine on your current page, but if you have trouble write back and I (or
another list member) will help you out. I'm at work right now so I don't
have much time to spare I'm afraid. 

HTH
Mark

-- 
This message has been scanned for viruses and dangerous
content by ISPNZ's automated virus detection system,
and is believed to be clean.

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


Re: [css-d] site testing, now with url!

2006-08-29 Thread Mark Henderson
Andy Mosmiller wrote:
 It is hard to tell unless you worked on the site, but I am pretty sure
 that IE 7 is setting the height of the content to exactly 300px as
 specified in my IE conditional stylesheet (which of course acts as a
 min-height for current versions.)  Have people figured out how to tackle
 this looming problem yet for when people start using this browser?

IE7 only has this problem when you used fixed units (like pixels). Where 
possible in such scenarios try to use percentages if you absolutely 
*must* show it a height (although I cannot think of a reason). In this 
case George has already provided you with the answer (* html hack to 
hide from IE7).

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


Re: [css-d] site testing, now with url!

2006-08-29 Thread Mark Henderson
 I mistakenly wrote
 In this case George has already provided you with 
 the answer (* html hack to hide from IE7).

My apologies for misspelling your name Georg.

-- 
This message has been scanned for viruses and dangerous
content by ISPNZ's automated virus detection system,
and is believed to be clean.

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


Re: [css-d] Newbie seeking layout examples to study

2006-08-29 Thread Mark Henderson
I would like to know if someone can point me to  
 some sites that have a basic 3 column layout with header and footers
where I  
 can study the code?  Thank you!

I missed the earlier part of this thread, but try the layout gala:

http://blog.html.it/layoutgala/

If you want a better explanation and further insight then the following
might help:

http://alistapart.com/articles/negativemargins
http://alistapart.com/articles/holygrail

HTH
Mark

-- 
This message has been scanned for viruses and dangerous
content by ISPNZ's automated virus detection system,
and is believed to be clean.

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


Re: [css-d] radio buttons waaaaaaaaaay to big in IE

2006-08-28 Thread Mark Henderson
 From: Marcelo Wolfgang [mailto:[EMAIL PROTECTED] 
 Can anyone help me figure out why IE is acting so weird about 
 the radio buttons on this page ?
 http://work.grillo.tk/gaiolla/checkout_shipping.html

Sure.

 From: Micky Hulse [mailto:[EMAIL PROTECTED] 
 Just quickly looking-over you code, I see this as a potential prob:
 
 html, body, form, fieldset, select, a, input{
   padding:0px;
   margin:0px;
   font:10px Verdana, Arial, Helvetica, sans-serif;
   color:#00;
   height: 100%;
 }

Micky was on the money  I can confirm this is the culprit. Modifying
your body rule to the following:

html, body {
padding:0px;
margin:0px;
font:10px Verdana, Arial, Helvetica, sans-serif;
color:#00;
height: 100%;
}

and viewing in Firefox through an ie tab resolves the issue. Like Micky
I didn't take an in-depth look at your code, but is there any particular
reason you are using height:100% on the body? If the answer is no then
remove that also, since, unless you're experimenting with sticky footers
or vertical/horizontal centering, it's generally not required. Also,
10px for a body rule is rather small, and just as a FYI, the following
might prove an interesting read if you have the time.
http://css-discuss.incutio.com/?page=FontSize

HTH
Mark

-- 
This message has been scanned for viruses and dangerous
content by ISPNZ's automated virus detection system,
and is believed to be clean.

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


Re: [css-d] IE display problem(s)

2006-03-30 Thread Mark Henderson

 Connor Boyack wrote:
 However, in IE7b2, the overflow:visible; doesn't get caught for whatever
 reason, and it doesn't expand vertically.  Anybody know a fix for this?

I'm on digest so ignore me if this has already been answered.

Overflow isn't your problem. There's a new beta version available(1) 
which supports min/max width  height. You can read more about that and 
an interesting review from 456 Berea Street(2). If you choose to 
download, then you will need to hide the #content height declaration 
from IE7, and your best bet is probably conditional comments. 
Incidentally, the reason it is currently failing is due to the fact your 
current beta version (or at least betas prior to the March 20 release) 
implement height in the same way more standards compliant browsers do. 
IE7 will honour a fixed dimension (such as pixels or ems) and will not 
expand past this as you've discovered(3). There is however a workaround 
- feed it a percentage height and all will be well.

!--[if IE 7]
#content {height: 1%;}
![endif]--

However, personally I would just get the newer release and forget about it.

HTH
Mark

1. http://www.microsoft.com/windows/IE/ie7/default.mspx
2. 
http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/
3. http://www.webmasterworld.com/forum83/8361-4-10.htm
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Vanishing borders (IE Win)

2006-01-05 Thread Mark Henderson
hi Richard

I'm on digest so my apologies if this has already been answered. Add 
line-height: 25px (or similar, but you are using pixels for font-sizing 
so this was consistent) to #main_nav and things appear to rectify 
themselves (from memory IE has a habit on certain absolutely positioned 
elements of failing to expand based on the elements within).

Caveat - it appears you aren't designing for IE 5.0 so I didn't try to 
fix the issues in this browser,.but a good start would be adding height: 
0 to #main_nav li in order for it to support margins on inline elements.

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