Re: [css-d] Site check, please -- two small problems

[Don - HtmlFixIt.com]

See this Tom,
http://htmlfixit.com/?p=1013
The advice there should fix your son of suckerfish issue I suspect.

Don
> Second, I am using the son of Suckerfish menus. In Safari, when you move
> over a choice to reveal the submenu, things appear okay -- until you move
> onto one of the submenu's choices. Then the list item "expands," showing
> more width to the right, and that extended area remains visible even after
> the submenu is closed. This must be a CSS error on my part, but I can't
> figure it out.
> 
__
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] FW: Unwanted underlines on text (not links) in FF

[Don - HtmlFixIt.com]

Allison Bloodworth wrote:
> Hi,
> 
> For some reason when I add the following to my css:
> 
> a:hover {
>   text-decoration: underline;
>   }
> 
> All my *text* (not just links) is underlined on mouseover in FF 1.5.0. This
> is not happening in IE 7. The site where this is happening can be found
> here: http://www.ischool.berkeley.edu/~allisonb/OHA/
> And the stylesheet is here:
> http://www.ischool.berkeley.edu/~allisonb/OHA/stylesheets/styles.css
> 


OHA provides a cooperative in which the members can pursue their love of 
riding and nature. It strives to support those members through mutual 
respect and commitment.



since all of your content is inside an  tag ... it underlines as 
requested.
Try this instead:


OHA provides a cooperative in which the members can pursue their love of 
riding and nature. It strives to support those members through mutual 
respect and commitment.


Same problem through out your page.

Don

__
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] pdf link is linking to everything

[Don - HtmlFixIt.com]

Phil Turner wrote:
> Help please Ive linked a pdf file to the brochure image, but its also  
> made the other images a link
> and I cant get rid of the colour highlight on the links, its  
> obviously inheriting the default but I've written new link attributes  
> for the div and its not working
> 
> http://www.kruger.co.uk/davinci.html
> 
> urgent help needed, thanks in advance
> 
I think it's the image, not the link ...

#rightcolumn img {
border: 0;
}
__
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 comments

[Don - HtmlFixIt.com]

Jens Brueckmann wrote:
> Hi John,
> 
>> 
>>
>>  shows at the top of the page on a white line.
> 
> adding a space after the first two dashes and before the second double
> dashes should solve your problem.
> 
> Cheers,
> 
> jens
> 


Works for me.
__
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] problem with subemenus in drop menu (IE7)

[Don - HtmlFixIt.com]

> The trigger for the dropdown is in the javascript, so the submenus are not 
> positioned underneath the top level menu with CSS when hovered. Pure CSS 
> based dropdown menus can now work in IE7 since it now honors the hover of any 
> element. The element to make CSS dropdowns work when hovered is li element. 
> The CSS you have is very convoluted and hard to follow but that's because it 
> is auto generated. I would recommend the Sons of Suckerfish as an alternative.
> 
> http://www.htmldog.com/articles/suckerfish/dropdowns/
> 
> Kind Regards, Alan
>
A second on the son of suckerfish solution, but subject to fixing the 
sticky ie7 problem as explained here:
http://htmlfixit.com/?p=1013
With the help of this list a week or two ago.
__
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 affect

[Don - HtmlFixIt.com]

Terry O'Leary wrote:
> HI Guys
> 
> I'm wanting to produce a menu type affect that when a user rollsover a menu
> item an image slide out of the menu (similar to a drop down) I dont want
> this image to do anything just slide in and out of view depending o nthe
> hovering.
> 
> Can anyone suggest a site that has implemented this affect (primarily in
> css) but flash or ajax would be fine!
> 
Not sure quite what you want Terry, but perhaps you can find your 
desired look by building off of one of these:
http://www.cssplay.co.uk/menus/index.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/

Re: [css-d] IE bug?

[Don - HtmlFixIt.com]

Shelly wrote:
> I'm having an issue here I've never come across before.
> 
> I've got a site changed out from tables to XHTML Transitional/CSS.  I 
> need a couple of conditional comments for teensy edits, but I'm having a 
> headache of a time.
> 
> If I set the conditional like so:
> 
> 
> 
> (with or without spaces), then IE6 reads this fine, but IE7 completely 
> ignores it.
> 
> However, if I write it like this:
> 
> 
> stuff here
> 
> (with or without spaces) then IE7 will apply the changes, but IE6 will 
> display "" at the very top of all the pages.
> 
> Why is it doing this?

Hi Shelly,

I think you are using inproper syntax in any event.{1} {2} Try:

Re: [css-d] Web calendar

[Don - HtmlFixIt.com]

David Dorward wrote:
> On 04/04/07, Chris Rahe <[EMAIL PROTECTED]> wrote:
>> I'm pretty new to css, table-less design but I'm trying to get up to speed
>> quickly. I had to put a calendar on the web and I tried to come up with a
>> useful way to do it using CSS and no tables.
snip
> ... I suggest switching to use a table for your data structure.
> 
First it looks very nice!
Second, it shows why you don't use overly descriptive terms for the 
classes and id's.  Every day is classed Sunday.  It makes no real 
difference, but still.

Third, if you don't expect people to have styles off I suppose ... then 
do you worry about it?
I think you may do well to experiment with the use of unordered lists or 
maybe even definition lists which may help with the issue that is 
mentioned there.  I haven't thought about it at length, but I think it 
can be done.

I presume you are dynamically going to generate this in the end?
__
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] horizontal LI menu doesn't work in FireFox

[Don - HtmlFixIt.com]

Tom Dell'Aringa wrote:
> Floating the containing DIV does not seem to help. How can I get UL in FF to
> open up? You can see the test page at:
> 
> http://www.pixelmech.com/rev/tabs2.html
> 

Oh, now I see you want it side to side 100% in essence?
Float the UL itself.

#navbar ul {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
border-top: 2px solid #464a52;
background: #000; }

Then I think you will get the intended result in FF.
__
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] horizontal LI menu doesn't work in FireFox

[Don - HtmlFixIt.com]

Tom Dell'Aringa wrote:
> Hi folks,
> 
> I'm wanting to use a navigation bar similar to Simplebits.com - just a
> simple horizontal menu. It seems to work just fine in IE6 and IE7, but fails
> in Firefox (for a change). In Firefox, the UL seems to be collapsing, due to
> the fact that the LI and A's are floated. In IE it does not collapse.
snip

> http://www.pixelmech.com/rev/tabs2.html
> 
Not seeing your issue Tom.  It looks fine in FF 2.0.0.3 on my windows 
machine.
__
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] Pipe List

[Don - HtmlFixIt.com]

~davidLaakso wrote:
> Jim Nannery wrote:
>>> I am seeking a pipe menu, or a border menu that does /not/ require
>>> images and works in all versions of IE including mac/IE5.2. If I have a
>>> choice I would prefer /not/ to hack IE7.0.
>>> For example, something like this
>>> (the file folder
>>> tab is not a requirement, although it is charming :-) ). It is the look
>>> and feel I am after.
>>>
>>> Anyone?
>>>
>>> Regards,

Okay David,

Version 2 of my faux pipe delimited unordered list menu [1] has one less 
hack in it (no ie6 hack) and appears to work fine in win ie6, ie7 and 
ff.  I don't do mac often :-)

The trade off?  Well I class the first li and create a border-left: 0 
rule for that classed li.  Better?  Worse?

The beauty of the tabs in the NYT example is obviously that it works for 
all tabs because they have both left and right dividers.  They also 
special class the active tab.  They do not use pipes on the tabbed menu 
that I think you referred to.  They did down lower in the jump to, that 
confused me at first as well until I grasped what you were referring to.

I await colorful screen shots on the Mac 5.x platform :-)

Don

[1] Version 2: 
http://htmlfixit.com/tutes/tutorial_CSS_Generated_Faux_Pipe_Delimited_Unordered_List.php


__
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 Comments: Help with order please in IE

[Don - HtmlFixIt.com]

I would use this:






Are you sure though that you really want to do this this way? 
Maintenance nightmare.  Better to come up with a cross browser/version 
solution?


__
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] Pipe List

[Don - HtmlFixIt.com]

snip
 > Here's one that apparently works all three ways in ie6, ie7 and in ff
 > using just borders ...
 > http://www.sitepoint.com/examples/pipe-delimiter/index.htm
 >
 > Note that he is hiding the first pipe by using a negative left margin
 > even though it actually exists.  One could of course argue that this
 > isn't a pipe solution at all, it is a border solution or faux pipe 
perhaps?
 >

Which leads me to this ... which appears to work everywhere ... faux 
pipe delimited list:
http://htmlfixit.com/tutes/tutorial_CSS_Generated_Faux_Pipe_Delimited_Unordered_List.php

Still fine tuning a bit ... but it works.
__
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] Pipe List

[Don - HtmlFixIt.com]

> Both of  the "conditional comment" fixes you provided will work. No 
> question about that.
> 
> I had hoped (and should have written)  to find a solution that would 
> /not/ require hacking IE7.0.
> 
> Anyone? Or is this a pipe dream?

Well you didn't say so David :-)

We hack ie6 in the existing solution, so why not ie7?  It's a hack 
solution to a problem -- that seems to work.  If you just use one 
conditional ie hack I think it works for both, so you aren't upping the 
hack index.  I think a non-hack true pipe solution is a pipe dream -- so 
that should spur someone to a solution -- saying it cannot be done.  The 
reason I suggest this is that ie7 won't work if you simply remove all ie 
specific code.  In many cases I find that ie7 can work properly without 
any hacks (not always pixel perfect, but often close enough), but it 
appears that ie7 won't recognize:
#navlist li:before { content: "| "; }
#navlist li:first-child:before { content: ""; }

Here's one that apparently works all three ways in ie6, ie7 and in ff 
using just borders ...
http://www.sitepoint.com/examples/pipe-delimiter/index.htm

Note that he is hiding the first pipe by using a negative left margin 
even though it actually exists.  One could of course argue that this 
isn't a pipe solution at all, it is a border solution or faux pipe perhaps?

Don



__
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] Pipe List

[Don - HtmlFixIt.com]

Ian Young wrote:
 >> From: [EMAIL PROTECTED]
 >> [mailto:[EMAIL PROTECTED] Behalf Of Ian Young
 >> Sent: 03 April 2007 17:21
 >> To: ~davidLaakso; CSS
 >> Subject: Re: [css-d] Pipe List
 >>
 >>
 >>> -Original Message-
 >>> From: [EMAIL PROTECTED]
 >>> [mailto:[EMAIL PROTECTED] Behalf Of ~davidLaakso
 >>> Sent: 03 April 2007 17:00
 >>> To: CSS
 >>> Subject: [css-d] Pipe List
 >>>
 >>>
 >>> Fat Erik 5s Simple Pipe List
 >>>  is 
missing its
 >>> pipes in IE7.0.
 >>> Suggestions?
 >>> Thanks.
 >>> Best,
 >>> ~dL
 >>>
 >> I commented out the border left stuff and it certainly works in
 >> IE6/7 on my
 >> machine.
 >> Now that is not a solution, I know but I guess it is something in IE 
hack
 >> that is messing up IE7
 >>
 >> Ian
 >
 > Belay that folks. I now have double pipes in FF.
 > So obviously not the solution. :->


Well, IE7 doesn't recognize the star hack, so the ie specific comments 
aren't reaching it.  You need an ie7 hack ...

I think you can just use a conditional IE ...

I did it thus:


But I think you can actually just make it if IE and remove the star hack 
from the main style sheet altogether and be good.  I don't have IE6 
handy to test it.
__
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] broken son of sucker fish menu

[Don - HtmlFixIt.com]

Ok so I managed to break it ... seems to work in ff just fine, but has a 
sticky problem in ie7.  If you hover slowly right over the left/right 
divider, it will sometimes hang so that the hover pop-up doesn't disappear.

http://ownersconnect.com/dev/index5.html

I am obviously doing something wrong as this works:
http://www.htmldog.com/articles/suckerfish/dropdowns/example/

Any help appreciated.

Don

__
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 a ul

[Don - HtmlFixIt.com]

[EMAIL PROTECTED] wrote:
>>> (Should I create a class to attach to the ul?)
>> The short answer is "yes", but a better (longer) answer is you should
>> use an ID, since there's only likely to be one instance of it per page.
> 
> Thank you, so then it would be (for instance)
> 
> 
>  
> 
> 
> and
> 
> .sub-menu-page {
>   border: none;
>   margin-left: 0px;
>   padding-left: 0px;
>   list-style-type: none;
>   list-style-position: inside;
>   list-style-image: none;
> }  (or whatever styles I want)
> 
> and I would attach this class to both ul id="sub-menu-page"
> class="sub-menu-page" and li id="sub-menu-page" class="sub-menu-page", is this
> correct?
> 
> thanks again, kd
Well sort of.  You are using both a class and an ID.  There may be times 
when you want to, but in this instance probably not.  If there will just 
be one of these elements ever, then ID is appropriate.

So if you will only have one submenu ul, ever, then ID is the way to go 
for the UL.

But if for example you may have a couple of ul submenus (one for each 
category of menu links or something), then you want a class as there can 
be more than one use of a class.

Conversely I presume you are using a list because you want to use 
multiple li tags in it.  So you would not give an id to that li tag as 
you will have multiples,  So you almost certainly want class and not id 
for the li tag.

Then to style an id you use #elementname versus to style a class you use 
.elementname.

You may also be able to simply refer to #sub-menu-page ul li {} to 
address the li tag within the submenu li.


http://www.tizag.com/cssT/class.php
http://www.tizag.com/cssT/cssid.php
might be helpful for example.

Don
__
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] Help me with this mess

[Don - HtmlFixIt.com]

I use a nice text editor called notetab (there is a free light version 
at http://notetab.com in addition to a low cost pro version) and it has 
a utility clip that will find every image tag with a missing alt and 
prompt you for the text to insert so that you can easily insert them. 
If you have a lot to do, this is a good move as you should always have 
alt tags.  This is probably soon off topic, so if you want more on that, 
write me off-list probably.

You will need this clip --
http://www.notetab.net/html/fixtags.htm
-- installed once you get notetab.

Don

snip
> Tidy Online  will correct your (his) problem.
> You will (he will) need to add alt's for each image like so:
>  onclick="alert('Remove');"  alt="" />
__
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] Help with line spacing

[Don - htmlfixit.com]

Michelle Tarby wrote:
> I'm hoping for some help or guidance with some text positioning issues 
> on a menu I'm working with.  I'm struggling to get some space between 
> list items that wrap onto a second line (If I'm not explaining that 
> clearly, you can look at http://wwwdev.lemoyne.edu/academics/index.asp 
> and see how "Registration & Course Information" runs right up above 
> "Continuing Education" without a space. 
> 
> I'm not sure how to modify my style sheet:
> 
> .menu {
> width:150px;
> height:175px;
> position:relative;
> margin:0;
> font-size:9px;
> margin:10px;
> z-index: 1500;
> }
> .menu ul li a, .menu ul li a:visited {
> display:block;
> text-decoration:none;
> color:#000;
> width:148px;
> height:30px;
> text-align:left;
> color:#fff;
> background-image:url("/images_admission/spacer.gif");
> line-height:15px;
> overflow:hidden;
> }
> .menu ul {
> padding:0;
> margin:0;
> list-style-type: none;
> }
> .menu ul li {
> float:left;
> margin-right:1px;
> position:relative;
> }
> .menu ul li ul {
> display: none;
> }
> 
> Or http://wwwdev.lemoyne.edu/css/academic_home.css if you want to take a 
> look at the whole thing.  Nothing I've tried has worked, so I'm guessing 
> that I just haven't found the right mix of changes.
> 
> Thanks in advance for any suggestions!
> 
> Michelle
> 

Michelle,

You have a TD attribute ... but not tables?
The footer menu is a few pixels short of the width.

Delete the set height from the menu list items:
height:30px;

Add bottom padding:
.menu ul li a, .menu ul li a:visited {
padding-bottom: 10px;

Check the right edge of that as it appears to me that your main menu 
items are being hidden from the pop-up divisions.

Lose all uppercase attributes in css.
BODY, TD {
should be
body, td {
although I don't think you ever use the td ... so you could delete that 
and the preceeding comma and space.

Don

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

Re: [css-d] gabs in my header

[Don - htmlfixit.com]

shawn a wrote:
> http://briandchandler.com/shawn/tara/
> 
> Firefox: 2 gaps. one gab above the horizontal nav bar. 2 or 3 pixels
> in height. And one below looking to be like 10px in height
> 
> 
> IE: one gab above the horizontal nav bar. 2 or 3 pixels in height

You haven't given anything a height? Giving the proper elements a height 
helps it for me in ff.

/*=header==*/
#header {
height: 80px;

/*===nav bar=*/
#header_nav {
height: 26px;

Next you need some empty space between your columns perhaps ...
__
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 column width problem

[Don - htmlfixit.com]

> The original site is www.a-wind-farm-too-far.com
> The new page is www.a-wind-farm-too-far.com/indexnew.htm
> 
> The original layout has a column ('sidebar') floated right with the main
> content in 'maincol' inside 'container' which is floated left.
> 
> The new layout has added 'infobar' inside 'container' and floated left
> with a left margin on 'maincol' to make space for it. This works in
> Opera and Firefox but in IE 'maincol' is displaced below 'infobar'.

This is very typical!  It happens with most designs that are tighly 
assembled and it is caused by differences in how ie6 calculates 
dimensions.  As usual, allow for padding and margin differences, add an 
ie 6.x only stylesheet and hum merrily on your way.  You almost always 
need to reduce the column width of either infobar or maincol inside of 
container for it to work.  The reason it drops one below is that the 
contents are too wide for the container by it's math.

I personally put my special ie only rules in conditionals like these 
nowadays (top one for 6 and below and bottom one for 7 and above if needed):




I have discontinued my use of the * and other similiar hacks.

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

Re: [css-d] removing underlines from images placed between anchor tags

[Don - htmlfixit.com]

> for now i'm playing with the main CSS here: http://silvasonic.com/ 
> temp/sandbox/css_test_00.html (the actual CSS is right on the file  
> for the time being). so here's my question:
> 
> how do i get rid of the underlining below the little calendar / clock  
> icon on hover? i've tried of sorts of rules, but the basic idea is  
> that an image, within the class .post_meta and placed between anchor  
> tags, should not have a bottom border (or even 'text-decoration').  
> i'd really appreciate any tips / pointers on how to control this.

.post_meta a:hover, .post_title a:active {
text-decoration: none;
}

If you do that the image and the other items will all lack a bottom 
border/text decoration.  The way I would do it is to create another 
pseudo class for my image links vs my other links.

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

Re: [css-d] Centre a Div

[Don - htmlfixit.com]

 > 
 >
 > #everything{
 > position: relative;}
 >
 > The learning curve for designing without tables is a steep one :)
 >
 > Joanne
Not really Joanne,

It does take a minute, but once you get it  you'll see it isn't that 
difficult.
http://www.maxdesign.com.au/presentation/center/
__
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] Calling different navigation colours for different divs

[Don - htmlfixit.com]

Richard Brown wrote:
> Hi
> 
> Is it possible to name different navigation colours for different divs  
> please? The site in question is:
> 
>  style.css>
> 
> If you notice the bottom set of boxes are surrounded by a colour. What  
> I would actually like to do is to get the colour to replace the inner  
> light brown colour box but for the text to stay light brown itself? Any  
> ideas please?
> 
> Thanks.

Sure Richard,

Use link pseudo classes:
http://www.w3schools.com/css/css_pseudo_classes.asp

http://www.westciv.com/style_master/academy/css_tutorial/selectors/p_class_selectors.html

Hint: keep them in the right order or it doesn't do what you expect ...

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

Re: [css-d] h1 bottom border missing in IE

[Don - htmlfixit.com]

Ann Adamcik wrote:
> Hi there,
>  
>  Could someone take a look at the header of this page and see what I'm doing 
> wrong?
>  In good browsers, the h1 at the top ("Engaged Encounter")  has a 1px teal 
> bottom border.
>  In IE, the bottom border doesn't show up.  Any clues?
>  
>  Page: http://indigopear.com/Clients/SFCEE
>  CSS: http://indigopear.com/Clients/SFCEE/style.css
>  
>  Thanks!
>  -Ann
Someone smarter will give you a good answer.  Meanwhile this appears to 
work ...
#header h1 {
line-height: 60%;
margin-left: 70px;
padding-bottom: 5px;
font-size: 34px;
font-weight: normal;
border: 2px solid white;
border-bottom: 1px solid #3aa0ac;
}

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

[css-d] how to specify mutiple selectors for a:link etc

[Don - htmlfixit.com]

I have this:
.header1, .header2, a:link {color: #881719; text-decoration: none;}
but that seems to treat it as:
.header1
.header2
a:link

I want it to be this:
.header1 a:link
.header2 a:link

Do I need to repeat the a:link part?

.header1 a:link, .header2 a:link {color: #881719; text-decoration: none;}

I am sure this is basic and yet I cannot find it.

Thanks.
__
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] Navigation Woes

[Don - htmlfixit.com]

Richard Brown wrote:
  > I am trying to build a navigation for this site:
> 
Following up on my earlier answer where your menu was dropping ... it is 
a total width issue that triggers the problem in ie6.
You can easily fix the width issue:
#sidebar{
/*width: 200px;*/
width: 180px;
}

I also added a text align to that in my example to make it match in ff 
and ie.

Seems to fix the dropping menu ... I updated my demo: 
http://bestfoot.com/temp/temp3.html
There is still a text jump that needs to be fixed on hover over the links.
__
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] Navigation Woes

[Don - htmlfixit.com]

> As you can see it is a bit of a mess! What I would like to do is to  
> produce a small photo with a word underneath. The whole to be contained  
> within a border and to be the link. Is it possible to do this please  
> and if so how?
> 
Here is the right direction ... perhaps.  I note that the menu drops 
down in ie6.  I suspect it may be a width issue or something.  I didnt' 
bother to look.  Here is my quick play at it:

http://bestfoot.com/temp/temp3.html

Note that I added br tags to all of these little picture/word links.  I 
added some embedded css to do what I am doing (changing the background 
color on hover and so forth.  Hope that makes sense.  So the answer is 
you can do it.
__
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] Border-line Crazy

[Don - htmlfixit.com]

[EMAIL PROTECTED] wrote:
> So, I'm trying to make a dashed bottom border for IE6-Win2K
> (captive audience). It won't do it. I know dotted appears as
> dashed in IE (at least that is what I read), but dashed is just
> appearing as a solid line. The relevant code (I think) is
> below (a little Java is included for completeness, just in
> case that's what's screwing me up).
> 
> table {
> border:none;
> border-collapse:collapse;
> font-size:100%;
> margin:0;
> width:800px;
> }
> thead th {
> border-right:none;
> background:#900;
> color:#fff;
> }
> th {
> border-right:1px #900 solid;
> padding:0 .5em;
> }
> .topLevelHeading {
> border-bottom:1px dashed #fff;
> }
> 
> 
> 
> 
> 
> Manah Manah
> 
> Do doo de doo 
> doo
> 
> 
> Manah
> Manah
> Doo
> Doo
> Doo
> Doo
> Manah Manah
> Do doo de doo doo de doo doo
> <%if(refinance.equalsIgnoreCase("5")) {%>
> de doo doo 
> <% } else {%>
> de doo doo doo doo doo doo doo doo doo
> <% } %>
> 
> 
> 
> TIA,
> 
Well I would start by putting table tags on the table ;-)
The java would not be messing anything up ... so that isn't helpful at 
all.  What could be messing things up is the output of the java, but I 
don't think so.  It appears to me that the output is either header a or 
header b... if refinance is 5, then you get de doo doo, otherwise de doo 
doo doo doo ... it doesn't matter if the syntax of the output is correct.

As you point out, dashed is really a solid line when displayed in ie6, 
but is dashed in ff.

The fix to my knowledge is to use a dotted image as shown here for 
example: http://bestfoot.com/temp/temp2.html
I admit I ripped off the dotted.gif ( 
http://bestfoot.com/temp/dotted.gif ) somewhere ... and I don't remember 
where, but I would make my own anyway if I was going to use the technique.


__
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] Arrangement Attempt

[Don - HtmlFixIt.com]

nouhad wrote:
> Hello again :)
> Here  is how the page
> looks after I applied my CSS Coding to it.
> CSS Source can be found here .
> HTML Source can be found here .
> My mock-up can be found
> here
> .
Add a couple of div's to contain the rows of content so to speak.

#contentmidwrap{
width: 100%
}

#contentlowerwrap{
width: 100%
}

and then float left the two columns in each of these

As regards the other, find one of the liquid rounded corner sites[1] and 
use that for the boxes with rounded corners, and then float the images 
(like the sticky on that).

[1] http://www.cssplay.co.uk/boxes/krazy.html

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

Re: [css-d] Table widths not the same with image in td

[Don - htmlfixit.com]

Scott Haneda wrote:
> 
> Top table, has an image in it 728px wide, with a 3px border
> 
> Bottom table is the same spec, but no image, yet it is narrower.  This seems
> to happen in Safari and FF on the mac, I can not test other browsers.
> 
> How can I make the bottom table match up to the top one?

Scott, you either need to make the image narrower by 6 pixels (the 3px 
border left and right take the cell beyond the 728 width allowed) or 
make the table wider by 6 pixels.

"All block-level elements also have the properties width and height. The 
margins, borders and padding you add to each element are then added on 
to these dimensions." [1]

This all begs the question: why are you using tables anyway?

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

Re: [css-d] simple problem?

[Don - HtmlFixIt.com]

Peter Lloyd wrote:
> Guys, thanks for the suggestions...
> 
> The problem with clear: left; used in the main content area is that  
> it not only clears the image, but also the bottom of the search box   
> in the left-had column!  So I guess the question then becomes can I  
> stop the interaction between the floated elements in the left column  
> and the clearing elements in the main content area?
> 
> Peter.

I don't think you are using it right.  If it is the contact info then 
name that a special paragraph that clears left.  Because it is contained 
in the content div it only clears on that div and should not be affected 
by/or affect the search box.
__
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] building page with 100% divs

[Don - HtmlFixIt.com]

Dear Georg, David and list,

Thank you for your help!  I have read carefully both of your emails and 
visited the pages recommended by both.  I need my solution to work in 
Safari eventually, so I used the latter of the solutions suggested in 
David's reference page and did most of what Georg said as well.

First two pages for history on the thread:
 >> First: http://bestfoot.com/dummy/test001.html
 >> Second: http://bestfoot.com/dummy/test002.html
 >
 > html {height: 100%;}
I did that ... helped significantly!
I suppose what I am going to want next is min-height rather than 
restricted maximum height as you anticipated below. I did add the 
display: table;  Where is there a good resource on display: [property] 
as I really want to get my head around that better.  I have to admit I 
use them regularly without comprehending fully why and/or if I should.

 > Adding...
 >
 > #bgwrapper{display: table;}
 >
 > ...will overcome that restriction in the good browsers

I added the next div called #wrapper to the mix.  That is intended to be 
the main page container for the page.  As you see, I want have it on the 
left edge of the #bgwrapper div so that the right edge of the gradient 
is hanging out on the right.  I also want to stop it about 80px short of 
the bottom of #bgwrapper, so I added bottom padding to bgwrapper.

It never occurred to me that the paragraph block was causing my problem. 
  I actually took that out at this point and just left the filler text 
without paragraphs for the moment.

I think I am making progress.
http://bestfoot.com/dummy/test003.html
I added bg color and borders to that just for reference, those will get 
removed shortly as I don't really want them in there.


I will now go on to the next step and that is to add two headers (one 
without background and one with background image.  I will then 
essentially create three columns in the body of the page.
http://bestfoot.com/dummy/test004.html

How do I get the right sidebar background all the way to the bottom of 
the page?  How do I get the middle column to have a height = 100% of the 
right sidebar?  Would containing them both in another div do it?  Is it 
bad to float all three side by side like that?  Am I about to have a 
float clear problem?

Thanks for the help so far!  You are helping me understand these 
concepts and I appreciate it.


__
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] building page with 100% divs

[Don - HtmlFixIt.com]

Don - HtmlFixIt.com wrote:
> I am trying to build a page ... with little current success.   Every 
> time I think I have it, it doesn't work.
> 

I decided that was a bit obtuse ... so let me see if I can build my page 
one step at a time and get feedback.

Step one is here: http://bestfoot.com/dummy/test001.html
Question: why does my blue gradient not extend from top to bottom of 
page?  There is a margin both top and bottom.  Where is that coming from?

As near as I can figure it is the width of the scroll arrow at the top 
and bottom.

If I add overflow:hidden it runs top to bottom in ff, but not in ie7 
(I'll worry about ie6 later), it works in ff (the overflow isn't hidden 
... there is a scroll bar) but in ie7, it chops off the extra content.

Last if you go to: http://bestfoot.com/dummy/test002.html
you will find that it doesn't stretch at all if there is insufficient 
content.

Tomorrow I may try to put a couple of div's inside of that.

I want the blue gradient to go top to bottom in all cases, period.  I 
cannot put it on the body div btw because I want it to be the right edge 
of an 800 px wide content column.

Thanks in advance.

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

[css-d] building page with 100% divs

[Don - HtmlFixIt.com]

I am trying to build a page ... with little current success.   Every 
time I think I have it, it doesn't work.

I want this:
1. a background image for the whole page
html{
background-image: url(bgtile.gif);
background-repeat: repeat;
}

2. a body ...
body {
margin: 0px 0px 0px 0px;
border: none;
padding: 0px 0px 0px 0px;
height: 100%;
}

Will that confine my body to 100% of the view port?  It seems to scroll 
even though I have it specified that way.

3. an outside wrapper that has a second background image in it ...
#outside_wrapper{
background-image: url(wrapperbg.jpg);
background-repeat: repeat-y;
background-position: right top;
height: 100%;
width: 800px;
margin-left: auto;
margin-right: auto;
}

Problem, I cannot get this wrapperbg.jpg to go to the bottom of the 
page.  I have some left floated columns (after a header) and it doesn't 
seem to repeat.  I have tried adding a second wrapper outside of that 
one "superwrapper" and then tried floating the outside wrapper inside of 
that for example ... doesn't work.  I have tired putting

just before the end of each div.

Where are the good resources for getting a grip on such issues?

I don't really have a clean site to refer to at this time as this is a 
project for someone else and I have their images on that site and cannot 
share them.

Thank you in advance.

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