[css-d] trying to learn to make css menu

[Holly Bergevin]

From: Scott Brasted 

>First, I would guess that I am not the first person to think that I can 
>do this at all. Is it possible? If so, does anyone know what combination 
>I would need to get the blank pretend space?
>
>Second, if it is possible, I am having difficulty figuring out where in 
>the menu css to put this. 

Here are some examples of what I believe you are asking about. There are other 
links from these pages that also might serve your purposes.

http://positioniseverything.net/css-flyout.html

http://positioniseverything.net/css-dropdowns.html

( demo of the above techniques with the padding "visible" - 
http://positioniseverything.net/css-dropdowns-red.html )

~holly 
 
   
__
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] disappearing text in IE6 and IE7 ( but maybe only IE6 )

[Holly Bergevin]

From: Erik Visser 

>> Tried it again. I still am not able to reproduce the behavior on 
>> http://www.daploosdrechtseweg.nl
>> in IE 6 or 7.
>> 
>> However, I am able to reproduce the behavior on 
>> http://beta.daploosdrechtseweg.nl but only in IE/7.0-- but not IE/6.0.

>can anybody else reproduce this?
>and maybe have a clue

I can reproduce David's results in IE6, meaning I'm not seeing any disappearing 
text. But I don't have IE7 available at the moment.

As for a clue, someone provided some suggestions earlier for possible 
consideration (they were links).

~holly 
 
   
__
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] Condensing BORDER-xxx-STYLE

[Holly Bergevin]

From: trevor bayliss 

 is it impossible to condense this code? (As the borders are different I 
imagine it is) Thanks:
>
>BORDER-RIGHT: #333 0px solid; 
>BORDER-TOP: #333 0px solid; 
>BORDER-LEFT: #333 0px solid; 
>BORDER-BOTTOM: #fff 5px solid;

If you are overriding previous borders, one way would be the following in the 
order specified.

element-selector {border: none;}

element-selector {border-bottom: 5px solid #fff;}

(where element-selector is whatever element you are selecting).

Otherwise, if no border has been previously specified for the element, you 
could simply use - 

element-selector {border-bottom: 5px solid #fff;}

with no reference to the other borders.

~holly 
 
   
__
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] Website help - CSS layout and Spry Menu Bar questions

[Holly Bergevin]

From: "Tarah - Dome Cleaning, Inc." 

>Also the site has "<%...@language="JAVASCRIPT" CODEPAGE="65001"%>" above the 
>header and the header bar is moved in firefox - but again not with explorer. 
>Help!

I'm not sure (other than removing it, what you should do about the bit of code 
that's above your HTML. I'm thinking it's being put in by your editor, and you 
need to change the preferences in your editor.
> I am having some troubles with an editable div region in my template. 
http://www.domecleaning.com/dev

>I am trying to get an optional sidebar 200 pix wide (same with as the current 
>side bar) to go below the current sidebar 

Based on your question, I expected to see that sidebar2 text in a div, but it 
is not, it's just raw text inside an "editable" comment area. 

Created the div surrounding sidebar2, float the div right, then clear the 
footer, and the element should at least be close to where you want it. Add 
other styles as needed.

~holly 
 
   
__
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 Image Rollover Problem

[Holly Bergevin]

From: Yazmin Media 

>http://www.slrgear.com/articles/is_1iswp/test3.htm

Re: Rollover not working.

On that page, you have an image displayed in the HTML, and then you have 
background images that you are hoping will display as rollovers? 

Try this:

Delete the image in the HTML and modify your selector in your CSS - 

a {
background: url(canon70-200f4L_70_shkFc.gif) no-repeat;
display: block;
height: 460px;
width: 500px;
}

I don't know if this will do what you want, but it seems to, in FF anyway.

~holly 
 
   
__
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] Image stretches vertically in (that's right) IE6

[Holly Bergevin]

From: Ian Piper 

>two photos on it that seem to be behaving peculiarly *only* in  
>IE6. 
>
>http://www.ruberyowen.com/rubery-owen-history.php

>the photos are stretched vertically. 

Below is where the problem is coming from, I believe. Was this hack applied for 
specific problems, or just on general principle? If it was specific, you'll 
want to find another way to give these images layout.

/* Various Holly hacks to address IE bad behaviour */
* html #content,
* html #content-wide,
* html #content .pictureleft,
* html #content-wide .pictureleft,
* html #content .pictureright,
* html #content-wide .pictureright {height: 1%;} /* <<< this is the problem for 
those images */

~holly :-) 
 
   
__
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: Can this DIV be vertically centered in theviewport?

[Holly Bergevin]

From: Stephen Tang 

>Yes, I am aware about enlarging the font.  Unfortunately, the center
>image is a fixed height and it didn't look good if the box became
>vertically longer as the font size increased.

> http://www.isadoratang.com/index.php

I'm kind of surprised at that thought because I would think that enlarging the 
box so that the text was still on the white background (when font size is 
increased) would be preferable to having the text shoot out the bottom of the 
fixed-height box, as it does now.

For what it's worth, I could not comfortably read your text as set, and HAD to 
increase the font size, causing the behavior described above. I have no idea 
what the text on that image says, it is too small to read. 

Page zoom in Opera (to 180%) allowed me to read some of the image text, but not 
all of it, as the font used is narrow and squished together. I have no idea 
what it says under "Sage College of Albany" because if I zoom the page much 
further the top of the image scoots out the top of the viewport and is 
unviewable, and the text does not become more readable anyway. The page 
navigation (portfolio, about, contact) begins leaving the viewport as well at 
this page zoom on my machine.

I realize that these "issues" depend on the size of someones monitor and 
browser, but perhaps they are worth considering. As a reference, most of the 
time I do not wear glasses, only for reading books and the like (not the 
computer screen).

~holly 
 
   
__
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] Image Slice not working?

[Holly Bergevin]

From: Christopher R 

>Hello, I need some help as in why this page
>http://www.thecreativesheep.ca/site/imagepage4.html
>dealing with the image slices and the id "logo" and "logo img" why the page 
>looks fine in IE7 but FF and IE6 it breaks?

Good Grief. One thread is enough. Perhaps no one has any ideas, that's why they 
don't have any suggestions. In my opinion, it's pretty unclear what you want.

IE6 will look better if you get rid of this - 

* html body {padding: 0 300px 60px 0;} 


Which FF are you having trouble with?  FF2.something is fine for displaying the 
slices, which is what you keep asking about. I can't view your page without a 
bunch of trouble, which I haven't bothered to go through.

Perhaps you might find some help if you provided an image of what you're going 
for, since what you've got there on that page, and in the CSS is pretty 
difficult to work with (in my opinion, anyway).

~holly, who is out of ideas. Sorry. 
 
   
__
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] Image Slices

[Holly Bergevin]

From: Christopher R 

> As you can see the image is still not in order it's like a jigsaw puzzle on 
> the page

>> > http://www.thecreativesheep.ca/site/imagepage3.html

Following are some suggestions that may, or may not be what you're looking for.

As was suggested, if you want the images to be the size specified in the HTML, 
you should resize them in a graphics program rather than letting browsers do 
the work.

That being said, here are my suggestions.

Remove all width and height attributes in the HTML for those three images. 
Alter the CSS as follows - 

#logo { 
background-color: transparent;
/*top: -7px;*/ /* remove */
left: 109px; /* change value */
/*width: 850px;*/ /* remove */
height: 250px;
position: relative;
text-align: center;
z-index: 1;
}
logo img {vertical-align: bottom; display:block;} /* remove - it's not doing 
anything anyway, despite the spelling correction */

#logo img {float: left;} /* add */

.navigationpanel {
background-image: url(navgraphic.png);
background-repeat: no-repeat;
top: -20px; /* change */
left: -250px; /* change*/
/*width: 400px; /* remove */
/*height: 75px; /* remove */
position: relative;
}

Perhaps these suggestions will give you a new place to start from.

~holly 
 
   
__
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] input type=image active area shift

[Holly Bergevin]

From: Ido dekkers 

>http://test3.dekkers.net/marriage.html

>the problem is with the arrow buttons on the bottom:

>in any standards compliant browser, the active
>area of the button seems not to be connected with the button itself?

> only the upper half of the button is clickable.

>does anyone here have an idea ?


Yes. Try the following changes and see if it makes things work for you. Only 
tried in FF, so no guarantees.

#content
{
float:right;
position:relative;
width:800px;
/* height:500px; */ /* remove */
margin:0;  
padding:0;
}

#footer
{
float:right;
position:relative;
width:800px;
margin:-18px 0 0 0;  /* change top value */
padding:0;
color:#000;
text-align:center;
font-size:12px;
}

~holly 
 
   
__
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] First element of list hiding for some reason

[Holly Bergevin]

From: Keith DiSarno 

>Something funny is going on here.  I can't see it either. I swear that I
>have never been to your site, nor ever remember ad-blocking or even visiting
>a site that had that logo on it. (I can see it if I put the .png location in
>the address bar.)
>
>Yet, to my amazement, it is listed in red as a blocked item in AB+.

I have the same phenomenon as Keith, here, and I think you need to try and find 
out why this particular thing is being blocked by AdBlock+. I, too, could not 
see the AdBrite image when I went to your site, regardless of whether you fixed 
it for your own display.

~holly 
 
   
__
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] Getting rid of layout tables using 100% width

[Holly Bergevin]

From: Olivier Sannier 

> I have trouble reproducing the top "frame" 
>buttons. Using divs, I got the result visible at this address:
>http://photos2.obones.com/


Do the following changes have close to the effect you seek?

.header_lang
{
  width: 60px;
  text-align: center;
  vertical-align: middle;
float: left; /* <<< add this */
}

.header_buttons
{
/* ### remove styles from this selector ### */
}

.header_button
{
  text-align: center;
  width: 23.4%; /* < change this value */
float: left; /* < add this */
}

.hbox {clear: left;} /*  add this selector, or add the declaration to an 
already existing selector (too many comments to figure out if it was "in play" 
or not) */

~holly 
 
   
__
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] Footer Issues

[Holly Bergevin]

From: sta...@aol.com

>I'm also, having a hard time getting my footer to work.
>http://doodlebugstudio.com/diadem_hq_site/web/competition.html
>http://doodlebugstudio.com/diadem_hq_site/web/css/diadem_sub.css

Assuming you want the footer at the bottom under the center content instead of 
under the navigation, remove the - height: 100% - from your - #center_container 
selector. 

#center_container {
position: relative;
background-color: #e6e6e6;
background-repeat: repeat-x;
margin-left: 210px;
margin-top:0px;
width: 742px;
padding-top: 0px;
/*height: 100%;*/ /* << remove this */
  }

Or you can use the code that Mustafa provided, as I didn't check the IE7 header 
issue.

~holly 
 
   
__
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] Drop Caps

[Holly Bergevin]

From: Ron Koster 

>http://css-discuss.incutio.com/?page=DropCaps
>
>...is the following recommended way to do up dropcaps...

Ron,

As with most things CSS, you'll need to test the effect you want in the 
environment it's going to be placed. Oh, and in a variety of browsers as well 
to see if the results are acceptable to you.

The wiki page you have cited was written before 2004 and apparently has not 
been edited since. In my opinion, it is doubtful that the author would suggest 
padding in ex units at this time, but I don't know. Douglas Livingstone was a 
contributer to this list, but I haven't seen him post for some time, so you 
might try emailing him and ask him the question directly. 
douglas-ts...@redmelon.net (I have no idea if that will work or not, it's from 
his oldish test site index page.)

You can search the archives of css-d from the following link to find more 
discussions (including the current one) on drop caps.

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

Another page that may give you an example is - 

http://www.gunlaug.no/contents/wd_additions_04.html 
 
The selector for the drop caps on that page - 

html body div #content div div.icon p:first-letter {
float: left;
color: #579;
background: transparent;
padding: 0 .1em 0 0;
font-size: 3.2em;
line-height: 0.7em; 
margin: .02em -.06em -.2em;
}

We all have to test for the look we desire, and settle on what works best for 
the given situation. I don't think anyone will say you *must* use a certain 
amount of padding for every situation, even the author of the wiki page you 
cited. The nature of web pages and browsers is not static like print, and there 
are a variety of variables that can come into play on any given page. If you 
don't like the look of the padding, take it out, or adjust it until you do like 
it. That's one of the beautiful parts of CSS

As an aside, the wiki has been written over the years, by a number of different 
people who posted for a time on css-d and may or may not still be around 
answering questions or even lurking. There is no one specifically "assigned" to 
maintain it with the most up-to-date methods, so you may indeed find something 
that is out-of-date to current best practices. Feel free to edit a page 
yourself if that is the case, adding what worked for you. 

The wiki is, or should be, dynamic, not static, and is not meant to be 
unchanging. CSS itself changes, as does support for any given level of CSS. 
"Best practice" is all well and good, until it doesn't work in a given 
situation. In my opinion, all CSS examples, whether in the wiki or in the 
"wild" on the net are open to experimentation, and indeed problably should be 
experimented with so that the user/developer understands what various 
adjustments can and will do.

Good luck, Ron, and keep experimenting.

~holly  
 
   
__
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] The CSS Overlords

[Holly Bergevin]

From: Bill Brown 

I, too, am surprised that there are still such strong feelings toward 
maintaining tables for layout.

>As a boy, my father had this pair of channel lock pliers that he used 
>for everything. 

>He used the pliers because he always knew where they were, not because 
>they were the right tool for the job. Sometimes, I get the sense that 
>people are using tables for layout are a lot like my dad used his pliers 
>-- they know where the tables are.

In my opinion you've written a very good analogy, Bill, and I'm sure that no 
one "from the outside" could tell that a nail had been reset by a pair of 
pliers instead of a hammer. 

>CSS requires a change in thought process, a re-envisioning of a website 
>from a different perspective. 

Exactly, at least for those who learned to create web pages without the 
benefits of CSS.

>If you haven't been able to get your head 
>around the benefits of CSS, I don't think you'll ever understand the 
>syntax and basic guidelines behind its usage, particularly with regard 
>to positioning.

Many of us, perhaps most, resist change, at least at the beginning. For someone 
who has been using channel-lock pliers to put his or her websites together, 
using a variety of tools instead of just the one is certainly daunting, 
especially when you have to learn how to use the new tools and how to get the 
most out of them. 

As one who "grew up" in web coding using CSS instead of tables to layout 
websites (almost nine years now), I personally am not struggling with the 
variety of tools, but I still see many new websites that do not follow the 
standards of construction that I learned.

>Layouts done in CSS are in my experience, more robust, easier to 
>understand, easier to code, easier to javascript and easier to manage in 
>nearly every other way.

For long-time static sites, with material that isn't going to change or need 
updating, I can certainly see the the temptation to maintain table layouts that 
have been working for years. A few changes in typography or updating colors 
might be all that's necessary to keep a site "fresh." This it not generally the 
type of site that the corporate and business world wants as their web presence, 
however. 

>This rebuttal is ridiculously incomplete, but I don't even know where to 
>begin in explaining the benefits of CSS over tables, or how to fit it 
>all into one read-able email.

I agree, that task of explaining is difficult, and I'm not going to try to do 
it either. However, CSS itself is moving toward allowing the types of benefits 
table-layout aficianados promote, so we all may merge into one big happy family 
some day. :-)

Cheers,

~holly 
 
   
__
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] Layout-problem

[Holly Bergevin]

From: "Ib Jensen" 

>Link : http://ikjensen.dk/test/>

>Second problem.
>The menu in the left sidebar works ok on the Index-page, but not on a
>second page.
>
>Menu : Genealogy -> Kings of Denmark

Can you explain what you mean when you say it doesn't work? I see hover 
effects, and if you click on a menu item, the page responds (by taking you to a 
non-existent page).

If this is what you mean by not working, then the problem is in your HTML with 
the paths for the links. On the index page, they go back up a level (out of the 
test folder), but on the second page, they don't make it out of the test 
folder, so the browser shows a page not found.

~holly 
 
   
__
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] 100% height?

[Holly Bergevin]

From: "Aubrey Benasa" 

>html: http://aubreybenasa.com/height/
>css: http://aubreybenasa.com/height/styles.css
>
>I can't figure out how to make the the full background-image appear on this
>page. When you open the page at a height less than the height of the
>background image (810px) and use the scrollbar to page down, the background
>image and background color is cut off. 

See if the following changes to your CSS do what you want.


html {
height:100%;
/*overflow:scroll;*/ /* delete */
}

div.bg {
margin:0 auto;
width:1000px;
min-height:100%;
background:#22112d url(images/bg_purple.jpg) no-repeat;
padding-top: 127px; /* add */
}

div.container {
margin-left:auto;
margin-right:auto;
/* position:relative;
top:127px; */ /* delete these two, also */
width:830px;
}

~holly 
 
   
__
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] !important declaration on print.css

[Holly Bergevin]

From: Angela French 

>I am creating a print style sheet (media="print").  Most of the declarations 
>in the style sheet are requiring !important in order to take effect.

>  Can anyone tell me why it is necessary for me to add the !important 
> declaration in order for the style to take effect?

Can you provide a clickable link to your page so we can check it out directly 
instead of guessing what the problem may be?

~holly 
 
   
__
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] drop down menu off-center?

[Holly Bergevin]

From: Kitty Garrett 

> Can anyone help me with why the drop downs are not centered  
>under the links? They are off to the right. They are supposed to be  
>centered.

>http://www.prettygoodwebsites.com/phchelp/index.htm

>http://www.prettygoodwebsites.com/phchelp/phc_stylin.css

Try adding:

ul ul {padding: 0;} 

and see if that fixes things up.

~holly 
 
   
__
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] What IS it with IE???? Font and text display problems

[Holly Bergevin]

From: "Ambient Glow" <[EMAIL PROTECTED]>

>Having a couple of problems with these pages in IE 

>1.  font display in the  and   should be the same as in
>the body, but in IE it is not (it's very large)

This seems to be because you have IE in quirks mode due to the comment in front 
of the doctype that DW put in your page. Remove the comment and the text should 
shrink to the tinytype you have locked IE users into (by setting the font-size 
in pixels).

>2.  Navigation menu text appears inconsistently or not at all in IE. I
>know IE 6 doesn't like "#" as a link, but it's not showing on the
>"real" links either.
>
>http://ambientglow.com/garage/manz/index-html
>...and click through to any of the interior pages
>
>css: http://ambientglow.com/garage/manz/_css/citymanz.css

Actually, IE is doing exactly what you have asked. From the citymanz.css -  

a:visited {
  color: #000; /* <<< This sets visited links to black. */
  font-weight: bold;
  text-decoration: none;
}

Remove that color declaration and the links will show up as whiteish.

Other changes you can make in your spry.css that may normalize things between 
old and newer browsers (test to see if the changes are to your liking).

ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 14%; /* 98px; */ /* < change */
float: left;
}

ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 100%; /* 98px; */ /* < change */
position: absolute;
left: -1000em;
}

ul.MenuBarHorizontal ul li
{
width: 100%; /* 98px; */ /* < change */
}

And despite the comment to the contrary, the left value below is not set to 0. 

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: 0; /* auto */ /*  change */
top: 0;
}

>My eyes are going buggy from looking at this 

Sorry to hear about your eyes.

~holly 
 
   
__
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] 2nd request -- help with IE issue on Navigation

[Holly Bergevin]

From: "Ambient Glow" <[EMAIL PROTECTED]>

>I'm having a problem with the display on the navigation for this page in
>IE6:
>
>http://ambientglow.com/garage/jfogg/sample-home.html
>css: http://ambientglow.com/garage/jfogg/_css/home.css
>menu css:
>http://ambientglow.com/garage/jfogg/SpryAssets/SpryMenuBarHorizontal.css
>
>The menu bar appears outside of the footer div which contains it, and
>the style below is not recognized -- instead the font displays as
>black.
>
>ul.MenuBarHorizontal a
>{
>   display: block;
>   cursor: pointer;
>   color: #EBEBEB;
>   text-decoration: none;
>}

Not seeing the menubar outside the footer, but once you put REAL href addresses 
in the links instead of the "#", IE6 will play along and show your light 
colored text.

~holly 
 
   
__
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 Nav Bar and IE6

[Holly Bergevin]

From: John Sutton <[EMAIL PROTECTED]>

> I'm really curious about the behavior of the top navbar in IE6 and
>Opera of the following site. Firefox and IE7 don't seem to have issues.
>
>http://www.tenhenstudio.com
>
>In IE6 the navbar renders as it should on the 'home' link, but at all the
>other links the horizontal bar drops down a pixel or two.

I agree with David, I don't see behavior as you've described in IE6 (or Opera, 
for that matter).

What I do see is the navbar expanded beyond what it should be and things 
(arrow) out of place. 

My suggestion is to ditch completely the IE6.css file you have and let IE6 just 
go with the regular css and the menu css. There is one addition you can make to 
the tenhenstudio.css (regular) and one hack you can add that will match IE6 up 
like FF. Opera is almost the same (as far as I can tell).

add:
#branding img {vertical-align: bottom;} /* this will remove the extra space IE 
leaves for descenders in the inline display of the image. Alternately you can 
use {display: block;} for the same selector (which you don't have at the 
moment) */

add: 
* html #navmarker-index {top: 226px;} /* to the regular style sheet. This will 
snug the arrow up to the horizontal nav as it is in FF. If you don't care (I 
kind of like the space) then don't add the selector. */

I didn't download and check any of the other pages, but you might want to start 
with them without the IE6.css file, and see if you really need all those 
selectors with their itty bitty changes. I also didn't look at IE7 or its 
separate style sheet.

~holly
  
 
   
__
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] Off Topic -Fony Dropdown List - How?

[Holly Bergevin]

From: "Lou Hernsen" <[EMAIL PROTECTED]>

>What should I be looking at to have my website offer a drop down list (or
>ANY list) of fonts available on the users computer so they can choose a font
>they want to see on my website? Javascript? PHP? is there a certain name for
>this?

To allow a user to use their "favorite" font on your website, simply do not set 
a font family anywhere in your style sheet. The user's browser preferences will 
prevail without any need for scripting.

~holly 
 
   
__
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] Recommended lists for Javascript, PHP, MySQL, Apache?

[Holly Bergevin]

-- Original Message --
From: "Keith DiSarno" <[EMAIL PROTECTED]>

> we can't even (publicly) help people anymore!  Yes, this may be
>classified in the strict OT rules, but Hedley has a VALID question about
>where to get good support/help. 


While I certainly don't know if you actually checked out the wiki page that was 
linked in the response to this topic from another poster, the link was a 
completely valid one, and not negative, in my opinion. 

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

In addition to a brief rundown of the list policies regarding Off Topic posts, 
*_there are links to other recommended lists covering some if not all of the 
original poster's questions._*

The wiki is editable, so if anyone has further information to expand or improve 
the links on that page and make it more useful to people searching for other 
lists, feel free to update the page.

~holly 
 
   
__
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] shifted text cut-off on ie6

[Holly Bergevin]

From: Daniel Kessler <[EMAIL PROTECTED]>

>That worked  for the one bit of text.  However, oddly, it created a  
>couple of pixel gap across the right side of the page.  It only shows  
>up on one of the URLs:
>http://sph.umd.edu/events/wellness2/about_acupuncture.html
>Additionally, if I delete the top half of the content, the gap goes  
>away.  Very odd.  I didn't see
>
>The solution wasn't what I expected.  

The width you had added to #content triggered 'haslayout' [1] in IE6, 
contributing to the problem you were having. There were probably other ways to 
ultimately fix the problem, but what I suggested may reduce other potential 
problems as well.

Now, if that solution wasn't what you expected, neither will the next one be 
expected. The issue you're seeing in IE6 with the expanded content on - 
http://sph.umd.edu/events/wellness2/about_acupuncture.html - is the result of a 
bug due to the content you have emphasized (em element) [2]. 

One solution you can try, that should fix things up is to add a small negative 
margin on the right side of your content. I didn't check this on other pages, 
only the acupuncture one, so you'll need to test it out.

Change the declarations in your content selector, again - 

#content {
padding : 10px 15px 60px 0;
min-height:445px;
margin-left: 180px;
margin-right: -3px; /* add this */
}

and you should see the space disappear.

~holly

[1] http://www.satzansatz.de/cssd/onhavinglayout.html

[2] http://www.positioniseverything.net/explorer/italicbug-ie.html - Bruno's 
explanation and suggestions 
 
   
__
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] shifted text cut-off on ie6

[Holly Bergevin]

-- Original Message --
From: Daniel Kessler <[EMAIL PROTECTED]>

>I have a two column layout.  In the right column, I have a paragraph  
>that I want to hop out and overlap the right column too.  This works  
>other than in IE6:
>http://sph.umd.edu/events/wellness2/condtions_treated.html (url corrected)


See if the following changes work for you.

#content {
/* float : right; */ /* delete */
/* width : 500px; */ /* delete */
padding : 10px 15px 60px 0;
min-height:445px;
margin-left: 180px; /* add this property, adjust value to suit */
}

~holly 
 
   
__
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] text-transform both lowercase AND capitalize?

[Holly Bergevin]

From: Chang Huang <[EMAIL PROTECTED]>

>Thanks all. It would be nice to have the option 'text- 
>transform:lowercase capitalize;' though.

I guess I'm missing the point here, but when I type, I "automatically" type 
words with capital letters at the beginning and lowercase ones following as 
needed. 

And It Seems To Me That It's Not That Hard To Do It For Every Word If Needed. 

Though for the most part, that looks a bit strange. I guess it might be useful 
for a headline or something like that.

Anyway, my $.02 USD

~holly 
 
   
__
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] Search tab

[Holly Bergevin]

From: good one <[EMAIL PROTECTED]>

>> > In the search tab I changed the size of the input text to make the tab 
>> > close up
>> >  against the red navigation in IE but in firefox I get a gap.
>> > What do I need to do to get rid of it? Thank you 
>> >  http://tinyurl.com/5w4b2g

Try changing the padding in your #searchform fieldset selector and adding a new 
selector as below - 

#searchform fieldset {
color: #fff;
float:left; 
border: 0;
padding: 2px 15px 2px 0px;/* adjust the bottom padding here */
margin: 0;
background: url(images/nav/tabsearch.gif) no-repeat right top;
}
#searchtext {margin-top: 3px;} /* add this selector */

This fixes things in FF2, I think. I didn't test in any IE, but if you need to 
use different values for those browsers, you can use your favorite technique to 
send the different CSS only to IE.

~holly 
 
   
__
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] Space between Border and Padding

[Holly Bergevin]

From: Christopher <[EMAIL PROTECTED]>

>I have tried almost everything, I just would like a space between the 
>border and the padding so they don't touch.

Sigh. I see you forgot how to bottom post. 

Christopher. In the scheme of building boxes with CSS, the border and the 
padding ARE right next to one another. In any individual element, if you have 
both border and padding, they will share an edge, so to speak. You will 
probably need to add a separate element with a border surrounding the element 
with the padding (and use margin on the inner element) to accomplish what you 
want.

David's link is a good one for learning these type of basics. The CSS 
specification can also be useful.

http://www.w3.org/TR/CSS21/indexlist.html

Again, Good luck.

~holly  
 
   
__
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] Background graphic on {body}

[Holly Bergevin]

From: Christopher <[EMAIL PROTECTED]>

>See what I did and what I need to change, to hopefully fix it by taking 
>a look at the updated page.
  
>>> The gap is still there.
>>> http://www.walkfar.ca/test/productionsite7.html
>>> 
>> ~holly wrote:
>> Replace your CSS for that page with the following -  [snipped CSS]

I'm sorry, but since the CSS on your updated page is not changed as I 
suggested, I don't have any further time to re-debug what you've got there. 
Perhaps you could just try replacing your CSS with mine? 

Good luck.

~holly

This is what's called BOTTOM POSTING, posting after the post you're replying 
to. Please observe this list convention. 
 
   
__
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] Background graphic on {body}

[Holly Bergevin]

From: Christopher <[EMAIL PROTECTED]>

>The gap is still there.
>http://www.walkfar.ca/test/productionsite7.html

Replace your CSS for that page with the following - you don't need the HTML 
comment in your embedded style sheet.

body {
margin: 0px;
padding: 0px;
background: #006 url(backdrop.jpg) left bottom repeat-x;
font-size: 100%;
}

#toplogo {
height: 100px;
background-image: url(header.png); /* this graphic does not appear to 
exist */
background-repeat: no-repeat;
}

#topbar { 
background-color: #99;
padding: 152px;
}

#aboutme { 
background-color: #0099FF;
width: 250px;
height: 325px;
padding: 0 50px 0 60px;
margin-left: 50px;
margin-top: 70px;
}

.aboutmeheader {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #99;
font-weight: bold;
width: 200px;
height: 45px;
line-height: 110px;
margin: 0 -12px -12px -34px;
}

.aboutmepara { /*In this area is the paragraph where I will have a summery 
about myself */
left: 72px;
width: 319px;
padding: 15px 0 60px 42px;
top: 538px;
height: 236px;
color: #33;
position: absolute;
text-align: left;
font-size: 16px;
font-weight: normal;
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 16px;
margin: 0 -3px -12px -35px;
}

.csboldtext {
font-weight: bold;
}

#flashbox {
height: 410px;
width: 430px;
margin-left: 500px;
margin-top: -325px;
background-color: #0033CC;
z-index: 3;
position: relative;
}

#flashbarelements {
height: 120px;
margin-top: -50px;
padding-top: -12px;
z-index: 2;
position: absolute;
top: 4px;
}

.one {
color: #FF;
}

.cstext {
color: #FF;
}

#flashbarelementstwo {
background-color: #00;
height: 30px;
margin-top: -28px;
width: 430px;
margin-right: 0px;
margin-left: 500px;
position: absolute;
left: 0px;
top: 881px;
}

p.one:first-letter {
color:#FF;
font-size:50px;
float: left;
}

p.two:first-letter {
color:#FF;
font-size:50px;
float:left;
}

.cstext {
color: #02023C;
}


For the elements you have /On That Page Right Now/ the above CSS should take 
care of the gap, and not disrupt much of anything else. Tested in some Firefox 
version, but not FF3.

~holly

please bottom post.  
 
   
__
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] Background graphic on {body}

[Holly Bergevin]

From: Christopher <[EMAIL PROTECTED]>

>I removed the negative top margin from .aboutmepara and put it to "0" 
>the space is still there.
>
>Holly Bergevin wrote:
>> From: Christopher <[EMAIL PROTECTED]>
>>
>>   
>>> If #flashbarelementstwo is causing the extra spacing can that not be 
>>> removed so that the background image on the body won't have that space?
>>> 
>>>>>> http://www.walkfar.ca/test/productionsite6.html
>>>>>>   
>>
>> If you remove the negative top margins on #topbar and .aboutmeheader, the 
>> space will disappear. However, your positioning will not be what you want. 
>>
>> If you also remove the negative top margin from .aboutmepara, things come 
>> back into shape. 
>>
>> By the way, negative padding does not exist. Also, there is no real point in 
>> declaring default values on properties that aren't "in play" on an element. 
>> For example, unless you have previously told all divs to float: left (or 
>> right), declaring float: none; for a div is simply an added bit of code that 
>> can add to confusion. The same goes for border properties on elements that 
>> don't have default borders. 
>>
>> There are other things in your CSS that you might consider removing or at 
>> least simplifying by using shorthand properties. Then perhaps you can see 
>> what is causing what.

Christopher,

I suggest you reread what I wrote. There are two negative top margins that 
you'd need to remove to get rid of the space. You didn't remove either of 
those, according to what you stated, but instead just removed the negative top 
margin on the paragraph that would allow it to go back into place after 
removing the other two top margins.

You have a very "fragile" setup when tiny things like this can throw your 
layout off. You might want to consider starting over.

~holly

please bottom post. 
 
   
__
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] Background graphic on {body}

[Holly Bergevin]

From: Christopher <[EMAIL PROTECTED]>

>If #flashbarelementstwo is causing the extra spacing can that not be 
>removed so that the background image on the body won't have that space?
 http://www.walkfar.ca/test/productionsite6.html

If you remove the negative top margins on #topbar and .aboutmeheader, the space 
will disappear. However, your positioning will not be what you want. 

If you also remove the negative top margin from .aboutmepara, things come back 
into shape. 

By the way, negative padding does not exist. Also, there is no real point in 
declaring default values on properties that aren't "in play" on an element. For 
example, unless you have previously told all divs to float: left (or right), 
declaring float: none; for a div is simply an added bit of code that can add to 
confusion. The same goes for border properties on elements that don't have 
default borders. 

There are other things in your CSS that you might consider removing or at least 
simplifying by using shorthand properties. Then perhaps you can see what is 
causing what.

~holly

http://www.positioniseverything.net/articles/mys-bug.html - debugging 
suggestions  
 
   
__
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] Need Help with CSS Table 3 column

[Holly Bergevin]

> Original Message 
>From: "Holly Bergevin" <[EMAIL PROTECTED]>

>> >[EMAIL PROTECTED] wrote:
>> 
>> http://www.utahredrockcanyonmotorcycletours.com/css3col.html
>> 
>> Question, Randall,
>> 
>> Why do you have all those links opening in new windows/tabs? Most people 
>> know how to use the back button, 

From: [EMAIL PROTECTED]

>Your question made sense and I have since removed the target attributes from 
>the links.
>
>What do you think of putting a back button (history -1) on the pages instead?


Again, my question is Why? 

I personally never use back buttons on any page I visit, as my browsers have 
that capability already built in and I am quite familiar with how it works. 

Personally, I don't believe it's necessary to build "functionality" into a web 
page that web browsers already have, such as back buttons, return to top (of 
page) buttons, close buttons. I think /most/ people know how to do those things 
with their browsers, unless a web page coder takes those basic fundtionalities 
away from the user by javascript (or other script) widgets or coding. 

Serve good content, make it accessible (and no, I don't mean font-size 
adjusting widgets), make the web page usable in a variety of browsers, and make 
it easy to access the things people want and need from the website (good 
navagation system). You will have done well. 

~holly 
 
   
__
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] Need Help with CSS Table 3 column

[Holly Bergevin]

>[EMAIL PROTECTED] wrote:

http://www.utahredrockcanyonmotorcycletours.com/css3col.html

Question, Randall,

Why do you have all those links opening in new windows/tabs? Most people know 
how to use the back button, and probably prefer being able to use it. Your 
target="_blank" attributes will, in my opinion, make the site annoying to use 
as they manage to defeat this basic browser functionality.

~holly 
 
   
__
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 margin, padding, and .png issues

[Holly Bergevin]

From: "Daniel Hammond" <[EMAIL PROTECTED]>

>| > URL: http://www.objectivedesigns.com/amittius/white/index.htm
>| > CSS: http://www.objectivedesigns.com/amittius/white/index.css
>| > 
>| > On Windows XP Pro... FF3, Opera 9.51, and Safari 3.1.2 
>| > display the site correctly. IE7 and IE6 don't. IE7 shows 
>| > everything right except the padding on the links in the 
>| > footer (it doesn't put padding on the bottom of the links, 
>| > only the sides and the top). IE6 has this same problem, but 
>| > it also doesn't correctly execute the margins of the light 
>| > blue boxes that are within the body text. It pushes them too 
>| > far away from the sides of the container.

Add - display: inline - to both .l_box and .r_box to take care if IEs double 
float margin bug [1], and add the following selector - 

#footer a {zoom: 1;}

to see if that takes care of the IE issues in your footer [2]

~holly

[1] http://positioniseverything.net/explorer/doubled-margin.html
[2] http://www.satzansatz.de/cssd/onhavinglayout.html 
 
   
__
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] image background question

[Holly Bergevin]

From: "Kelly Moore" <[EMAIL PROTECTED]>

>tried, but without much luck.

>http://yakmaster.net/test/arrowtest.html

Please bottom post and leave/include the links so people responding later don't 
have to go hunt them down.


Here's my example - 

http://members.dslextreme.com/users/cssjedi/css-d/arrowtest.html

~holly 
 
   
__
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] image background question

[Holly Bergevin]

>>http://yakmaster.net/test/arrowtest.html
>
>Kelly,
>
>Have you tried setting the arrow image as a background image on the h3 instead 
>of that span and tried to work things out that way?

Delete the non-breaking spaces from your HTML and change your CSS to the 
following - 

h3 {
color:#25427c;
font-size:0.9em;
background-image: url(images/orange_indicator.png);
background-repeat: no-repeat;
}

h3 span.orangearrow {
height: 15px;
width: 24px;
margin: 0 10px 0 0;
font-size: small;
text-align: center;
display: block;
float: left;
color:white;
}

~holly 
 
   
__
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] image background question

[Holly Bergevin]

From: "Kelly Moore" <[EMAIL PROTECTED]>

>hmm, well here is my test page.  it seems to work, but this is
>stand-alone.  i had to add a bunch of   's for the full arrow to
>work.  is there a better way to do this?
>
>http://yakmaster.net/test/arrowtest.html

Kelly,

Have you tried setting the arrow image as a background image on the h3 instead 
of that span and tried to work things out that way?

~holly 
 
   
__
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] Different body backgrounds

[Holly Bergevin]

Kimi wrote:
>What might be a good way to get the body bg on this page white. The 
>default body for the site's home page is yellowish.
>
>http://thewei.com/culture/princeton04july08.php

For any page that you need to have just one or a few elements do something 
different, without changing the page structure, you can place an ID attribute 
in the opening body tag of the HTML page, and use that to write targeted 
selectors. 

For example, on your page, you might edit the HTML - 

< body id="july4" >

and then in your style sheet you might write - 

#july4 {background-color: #fff;}

This will target only that page. If you'd rather, you can use the element name 
with the ID

body#july4 {background-color: #fff;}

If you need to address any other elements for just that page, just add the 
#july4 ID to any selector and you'll be able to target only the elements of 
that page. For example - 

#july4 li {list-style-type: square;}

Note that this last selector is a descendant selector and will select any LI 
that is in an element with an ID attribute of july4, which would limit it only 
to the page you had so identified.

~holly 
 
   

__
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] extra right padding/margin in IE6

[Holly Bergevin]

From: Andrew Gaffney <[EMAIL PROTECTED]>

>I've got a weird issue with a site that I'm working on.
>
>URL: http://www.fathertime.com/dev/
>CSS: http://www.fathertime.com/dev/StyleSheet.css
>
>I've got DIVs that are a specific width with specific padding/margin and a 
>background image (the "Auctions", "Contact Us", and "Your Account" boxes). In 
>Firefox 3 and IE7, these DIVs are exactly as they're specified.
>
>In IE6, it's a different story. The boxes extend 10px or so farther to the 
>right 
>than they're supposed to. 

The problems are basically the widths on tables declared in your HTML. Remove 
instances of width="100%", and perhaps other widths in the HTML page until IE6 
lines up more closely to what you want.

Your CSS can be simplified. One suggestion - you don't need to repeatedly 
declare the font family. State it once at the beginning of the style sheet, and 
only declare a change if necessary.

~holly 
 
   
__
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] ie6 - long border on two page, not on rest

[Holly Bergevin]

>On Tue, Jun 17, 2008 at 9:04 AM, Holly Bergevin <[EMAIL PROTECTED]>
>wrote:

>> The reason you're seeing the problem on some pages and not others is that
>> you have style sheets on each page, and there are different values for some
>> things, depending on the page being viewed.

>> Do you really want to maintain a style
>> sheet for each page?

From: "Stuart King" <[EMAIL PROTECTED]>

>Style sheets - This is a problem I am struggling with. What do you do when
>different pages have slightly different layouts and positioning? Do you have
>one style sheets that you maintain externally or several? Are there any
>articles on this or do you have some insight?

Stuart,

Uniquily identifying each page by using an ID attribute in the opening body 
tag, will allow you to write selectors for individual pages that require slight 
differences, without requiring separate style sheets for each page.

Your individual pages are identified in the HTML:
< body id="about" >
< body id="wines" > 
etc. for the individual pages.

Then in your style sheet you can write:

#about p {margin: 0 0 12px;}
#wines p {margin: 0;}

and so on, for any element that needs some different styling for only a single 
page. If it's needed on more than one page, you'd write something like:

#about #left_center, 
#wines #left_center {top: 99px;}

to target more than one page with the same change.

This way, you can have one basic external style sheet (as opposed to embedded 
style sheets on each page as you have now) that will have styles covering most 
things, with a few special selectors that target only the things that need to 
be different on one page, but not another.

~holly 
 
   
__
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] ie6 - long border on two page, not on rest

[Holly Bergevin]

From: "Stuart King" <[EMAIL PROTECTED]>

>http://www.phiferpavittwine.com
>
>On the index.htm and wine>>tasting notes pages the line that separates the
>about and wine column with the mailing list and contact column is much
>longer that it should be. It is fine on all the other pages, hm. 

The reason you're seeing the problem on some pages and not others is that you 
have style sheets on each page, and there are different values for some things, 
depending on the page being viewed. (For example: paragraph margins, widths, 
top property offsets, align attributes in the HTML.) 

Georg has supplied you with the hasLayout fix. It's missing on the problem 
pages, but exists on the other ones. Do you really want to maintain a style 
sheet for each page?

~holly 
 
   
__
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] pull out menu being overwritten by menu underneath

[Holly Bergevin]

From: Carol Swinehart <[EMAIL PROTECTED]>

>http://www.spacetransitions.com/

>I changed the z-index as an inline element, nothing seems to work to 
>keep the lines from showing up in the pull out in addition to some text.

As pointed out by another poster, remove the HTML from your style sheet 
including the style elements. Style sheets should not have those. Remove all 
references to z-index in your style sheet and remove inline z-index styling 
from your HTML as well. Add the following to your style sheet.

.level1 {z-index: 2;}
.level2 {z-index: 1;}

This is all that is needed

Something that comes later in the HTML (.level2) will automatically have a 
higher intrinsic z-index than something that comes earlier (.level1). Your 
submenus are dependent on their parent's z-index, regardless of how high you 
make the submenu's z-index. Since the z-indexes of the parents are the same, 
you get the behavior you are seeing, since source order will then come in to 
play. 

You must override the natural (HTML source) order to get nested elements (your 
submenus) to show over the following parent elements.

~holly 
 
   
__
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] Space between topper and content

[Holly Bergevin]

From: Kim Brooks Wei <[EMAIL PROTECTED]>

>http://njlada.com/
>
>I have a small space between my topper and contentwrap which I can't 
>find the source of . . . help, please . . .

Try this selector - 

#topper img {vertical-align: bottom;} /* or display: block, either will work */

Since images are inline elements by default, browsers leave room for text 
descenders, which is the space you're seeing.

~holly 
 
   
__
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] Spry Menubar Problems

[Holly Bergevin]

From: "Amber  Kreter" <[EMAIL PROTECTED]>

>  http://nyc.your-site.com/kretersata.com/Header2.php

Amber,

I only took a look at your source code for that page. Assuming that that header 
is in a page with a valid doctype to begin with, the problems you are 
encountering are probably due to improper dropdown construction. You have 
closed LIs and inserted ULs between them. If I were trying to correct the 
problem, I'd start with validating the dropdown list construction first.

Good luck.

~holly 
 
   
__
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] IE6 Issue

[Holly Bergevin]

From: "taestrada" <[EMAIL PROTECTED]>
> In the
>navigation, "Portfolio" is smaller and higher than the other links. But the
>CSS and code is exactly the same as for the other words.  Any ideas???

>> www.webstudio180.com

I guess you forgot about the following selector.

/***PORTFOLIO***/
  #portfolio  {
margin-top: 0px;
font: 0.9em Verdana, Arial, Helvetica, sans-serif; /* The font size 
here is what is in effect on your page for this ID */
padding: 80px 0 0;
margin-bottom: 0px;
}

~holly 
 
   
__
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] Fwd: alignment in netscape

[Holly Bergevin]

From: Melinda Odom <[EMAIL PROTECTED]>

>> the flash file not aligning to the top 
>> http://www.eddieandalice.com/

Does adding the following help?

#flashWelcome object {margin-left: -8px;}

~holly 
 
   
__
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] Top Border on Fieldset gone AWOL in IE

[Holly Bergevin]

From: Peter <[EMAIL PROTECTED]>

>http://www.kuroiweb.com/forms/
>
>This performs exactly as expected in FF, but in IE6 and IE7 the top 
>border (the only one set) on all fieldsets except the last one is not 
>visible 

Hi Peter,

In your ie_styles.css, remove the width from the legend ruleset and IE should 
play along.

legend {
  position: relative;
  left: -7px;
  top: -0.75em;
  /* width: 100%; */ /* remove this */
}

Side benefit (tee hee) - the horizontal scroll bar goes away, too. 

~holly
 
 
   
__
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?

[Holly Bergevin]

From: Erik Harris <[EMAIL PROTECTED]>

>> 
>
>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. 

Just for the record, in a "native installation" of IE6, the above example works 
fine.

~holly 
 
   
__
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] Banner Font to big (Take 2)

[Holly Bergevin]

From: "Hayden's Harness Attachment" <[EMAIL PROTECTED]>

>CSS http://www.choroideremia.org/css/crf_css1.css

Angus,

You have an HTML comment that starts your style sheet. You should change that 
to a CSS comment structure, with the /* */ instead.

~holly 
 
   
__
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] List reply method

[Holly Bergevin]

From: "Alan K Baker" <[EMAIL PROTECTED]>

>I know that I've only been here '5 minutes' but I would like to respectfully 
>ask the List Owner if the settings can be changed to a similar method used by 
>Yahoo Groups, so that clicking the email client's Reply button, sets up the 
>return address as the List and not the individual Sender. 

Please see - http://css-discuss.incutio.com/?page=CssDiscussListHeaders - for 
links to information about your request and the owner's reasons for having the 
headers set the way they are.

>If it is changed as I suggest, there wouldn't be the huge amount of duplicate 
>messages, 

*You* can set your preferences for this list not to send you duplicate copies. 
Go to - http://www.css-discuss.org/mailman/listinfo/css-d - log in, and set the 
preference not to receive duplicate copies. Not everyone is bothered by 
duplicate copies.

> replies wouldn't go just to the Sender by mistake, 

Seems to me that's up to the replier to take a moment to remember to push Reply 
All for CSS-D. I don't have any problem with it.

Alan, and other new members, welcome to the list. It's been around for quite a 
few years now, and has somewhere around 8000 members. 

There are a few "list conventions" that have come into use, and it is much 
appreciated if new members will at least make an attempt to follow those 
conventions. Why not try and follow what this community has established as its 
preferences? It's really not that difficult. 

One of those preferences is the list headers. Another, in case you haven't 
guessed, is top posting. I won't give my opinion of top posting here, but 
you'll note, I did not do it. It goes along with trimming your replies, which 
is discussed in the list policies page - http://css-discuss.org/policies.html

Again, welcome to the list. And may all your CSS problems be small ones.

Cheers!

~holly 
(who speaks in no official capacity, but who has been here from the beginning) 
 
   
__
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] Button displace issue

[Holly Bergevin]

From: "corey deep" <[EMAIL PROTECTED]>

>Spans involve less work with graphics editor, but it is alot of markup for a
>single button no ?

Well, what I had thought was - 

Submit Me

with the CSS - 

.btn {
position: relative;
background:transparent url(btn_grn_submit.gif) no-repeat scroll left top;
border:0;
cursor:pointer;
width:98px;
height:26px;
margin:0;
padding:0;
/* text-indent: -px; */ /* remove this */
overflow:hidden;
vertical-align:middle;
}

Add - 

.btn span {text-indent: -px;}

~holly 
 
   
__
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] Button displace issue

[Holly Bergevin]

From: "corey deep" <[EMAIL PROTECTED]>

>> I have an odd button element issue specific to IE6. When I create a button
>> element and set text-indent ( to displace the value text ) the button
>> disappears in IE6.
>> If I add a non-breaking space , or line break or character before the
>> button it displays fine. 

>> http://thevenusflytrap.org/button_trials/index.html

Thank you for the online example. I didn't find any further trigger than the 
text-indent for the problem. Adding the space appears to be a good way of 
fixing it. But then again, it adds a space into the layout. 

There's an option to adding the non-breaking space, which takes more markup, 
but perhaps it's preferable to you. If you wrap the text for the submit button 
in a span, and then apply the text-indent to the span instead, then IE6 will 
play along.

~holly  
 
   
__
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] Image/Map? sliding doors effect

[Holly Bergevin]

From: "Phoebe Taylor" <[EMAIL PROTECTED]>

>oh, okay.. I see now.  My other site had the css and html files all in
>one directory.  I didn't even think about the path there.
>
>Okay, so now i see the background, so half the battle won.  Now I just
>need to get it to slide over to see the right half on hover.

> http://www.cgraytaylor.net/sullivan/index3.html 

 a.events:hover active {
   background-position: 0 -166px;
 }

That selector selects an element called active, that is inside an anchor with 
the class name "events" the anchor is hovered. I suspect that since there isn't 
an element type "active" that your selector isn't going to select anything. Did 
you mean - 

 a.events:hover, a.events:active {
   background-position: 0 -166px;
 }

??? creating a selector for both the hover and active states?

~holly 
 
   
__
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] Image/Map? sliding doors effect

[Holly Bergevin]

From: "Phoebe Taylor" <[EMAIL PROTECTED]>

>I put a dashed blue border around where the sliding doors -
>transparent gif should be showing.
>The .html validates -- I do have one parse error in CSS, that I think
>is due to a hack for IE.
>
>http://www.cgraytaylor.net/sullivan/index3.html

Phoebe,

Have you checked that the path is correct for your sliding image? It appears to 
be the same path as the one that's in the HTML, but that wouldn't be the 
correct pathway from the CSS file, since you have that in a different spot.

~holly 
 
   
__
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] wrapper width and IE

[Holly Bergevin]

From: Elle Meredith <[EMAIL PROTECTED]>

>1. Same page: http://mesfiji.org/about/mes-staff
>In IE7 (and I would assume the same in IE6), the text in the  gets  
>pushed down below the image.

Add {display: inline;} to your #navcol selector to defeat IE6's doubled float 
margin bug (which is dropping the entire main column below your nav column in 
IE6).

#navcol {
width:15em; 
margin-left:5em; 
text-align:right;   display: 
inline; /* add this */
}

To fix the problem in the question, remove the width declaration from the CSS 
file 

.team dd.pic {
/* width:90px;*/ /* delete this */
 margin-left: 0;
}

and put the widths into the image tags in the HTML page. For IE6, that fixes 
the problem.

~holly 
 
   
__
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] CSS faux columns not working in IE6

[Holly Bergevin]

From: Ian Piper <[EMAIL PROTECTED]>

>>> http://www.tellura.co.uk/index.php
>>
>>> As you can see, the image used for the background for the left  
>>> sidebar doesn't display in three-column mode and the content column's
>>> white background doesn't fill the space unless the content is longer
>>> than the sidebars. But only for IE6, and only when there is no right
>>> sidebar.

Ian, is it possible that the problem is the images for the faux columns? They 
are .png; do they have 32-bit transparency applied? 

It looks to me (and I could be all wet) like when the right side is "painted," 
since the image is as wide as the container, then  the background of the left 
side of the page (everything left of the right blue column) gets covered by the 
image, which shows gray on my machine, and reminds me of .png transparency 
issues in IE.

Have you tried 8-bit transparency, or a .gif for those faux columns instead of 
the .png?

~holly   
 
   
__
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] Creeping form controls in IE6/7

[Holly Bergevin]

From: Gunlaug Sørtun <[EMAIL PROTECTED]>

>Scott Sauyet wrote:
>> http://scott.sauyet.com/issues/2008-03-04a/
>
>> In IE7, IE6, and IE5.5, all on XP, I'm seeing something bizarre.
>
>> When you hover onto or off of the top menu item, the text box and 
>> button move down the page.  They keep doing this; it's not a one-time
>>  behavior.  In IE7 they will go on indefinitely.  In IE6 and IE5.5, 
>> they eventually disappear when they fall off the real estate owned by
>>  the menu.
>
>> Has anyone seen this behavior?  Any suggestions for how to get rid of
>>  it?
>
>Alternative solution (in case one is ever needed)...
>
>...based on the effect well-placed 'hasLayout' triggers have on elements
>in IE/win. Otherwise no changes from the original.
>It's perfectly stable in IE6/7, but I can't check in IE5/5.5

Checking Scott's original in IE5.01, I note that it did not have the problem 
that IE5.5 and up had.

I can confirm that the problem is fixed in IE5.5 with your solution, Georg, and 
does no harm in IE5.01 (actually tightens up the display as it does in IE6).

Display in the IE5s is also improved by the addition of 

#main-menu li, #main-menu .menu-group {
margin-left: -16px; /* fix for IE5s */
ma\rgin-left: 0; /* resets it for other browsers */
}

(or these can be placed in the respective selectors already in existence)

~holly 
 
   

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

[css-d] Creeping form controls in IE6/7

[Holly Bergevin]

From: Scott Sauyet <[EMAIL PROTECTED]>

>Hi, I haven't been around these parts much lately, but some of you might 
>remember me from a few years ago.  ("Anyone?  Anyone?  Bergevin?")

Ahem!  You rang? ;) 

Hi Scott! 

It's great to see your name back on this board.

> http://scott.sauyet.com/issues/2008-03-04a/

>In IE7, IE6, and IE5.5, all on XP,
> When you hover onto or off of the top menu item, the text box and 
>button move down the page.  They keep doing this; 


It seems I've come late to the bug-squashing party. Darn.


>Has anyone seen this behavior?  

Yes, probably, based on your description only. I may have even kept the page 
somewhere. I don't think there was ever a solution found for the other case 
I've seen. I will have to hunt around my computer and see what I can find, and 
see if Alan's fix works for that version (assuming I have it, that is).

I'm glad you got a solution for your problem. Now don't be a stranger!

~holly

 
 
   
__
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/5x ap ::

[Holly Bergevin]

From: David Laakso <[EMAIL PROTECTED]>

>> IE/5x is not honoring the absolute position of the ul in #page.
>> What to do?
  
>Yikes...
>

Tee hee ;-)

You're probably going to need to move that UL out of the #page wrapper to the 
the IE5s to place it where you want. Just move it below the closing div tag 
that follows it.

Also, change {display: inline;} to {float: left;} for the LI selector and 
you'll get IE5.01 to put space between those links. Actually, you can leave the 
display property if you want, it doesn't seem to hurt.

Checked in IE5.01, IE5.5, IE6, and a couple of other gecko thingies. My IE7 
machine doesn't work at the moment (and my computer-building guru is away at 
college - sigh).

~holly 
 
   
__
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] ie6 float problem in list (extra space)

[Holly Bergevin]

From: vwf <[EMAIL PROTECTED]>

> a problem with ie6
>remains. There are unwanted spaces in the horizontal list (navigation bar).

>http://opeform.nl/test/
>http://opeform.nl/test/screen00.css

I don't know about the Konqueror issue, but the easiest way to solve IE6's 
problems it to get rid of the xml declaration at the top of your HTML page. If 
you do, the images of the navbar will then line up.

~holly 
 
   
__
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] problem with borders

[Holly Bergevin]

From: vwf <[EMAIL PROTECTED]>

>The page: http://www.opeform.nl/test/
>The CSS: http://www.opeform.nl/test/screen00.css

>My questions are: 
>How can I get rid of the white borders between the navigation images?
>Why do my background images no shift on hover?

The "borders" are white space between the LI elements. Eliminate the white 
space and you eliminate the appearance of borders.

As for the background images, I think you need to alter your hover selector 
slightly, try adding img at the end of it - 

#navbar ul li a:hover img {background-position: -52px 0px;}

That at least gives me some action. I don't know if it's what you desire, 
however.

~holly 
 
   
__
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 Order - Problem not expected

[Holly Bergevin]

From: Christopher <[EMAIL PROTECTED]>

>http://www.walkfar.ca/test/index.htm
>
>I don't know what went wrong but when I uploaded my page to the server 
>you don't see the style sheets that have background graphics at all, I 
>wanted to
>show what I was having problems with now all you see is text.

Christopher, your images/graphics are not in the location the style sheet is 
looking for them. They appear to be in the same file as the style sheet, not in 
a folder called graphic files.

When I edited the graphic files part out of the URL (in Firefox - Web developer 
toolbar, Edit CSS), two images appeared on the page.

I hope that helps.

~holly 
 
   
__
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] Text refusing to be bold in Firefox and IE

[Holly Bergevin]

From: Pat Veriepe <[EMAIL PROTECTED]>

>I thought I had figured this out with Firebug, but the text is still not 
>bold. It's a nested ul ul.
>
>The linked text saying "THIS SHOULD BE BOLD" is bold in Safari but not 
>in Firefox or IE. Could this be a problem because of a bug in both 
>browsers with nested lists?
>
>Please check out this url: http://veriepe.com/TEST222.html

Personally, I don't think that there is a bug at all. You have set the 
font-size in your body selector to be 70%. On my computer, that makes the lines 
that make up the glyphs of the font only one pixel wide. When I changed the 
font-size to 80% (or simply increased the font size in the browser), it was 
clear that the text is bold. At 80%, the browser makes the lines 2px wide.

What's a browser to do to make something bold when it has nothing to work with? 
(only one pixel, in other words).

Using the Web Developer toolbar in Firefox, and editing the CSS to to switch 
from bold to normal, that browser *does* change something between the two 
font-weights. Try it and see. 

Apparently Safari draws the font differently than Firefox if you can clearly 
tell that the text is bold in that browser. 78% for the body font-size is the 
smallest percent that I could use on your page to get Firefox to clearly show 
what I would call bold text. This is where the gliph's lines went from being 
1px wide to being 2px wide.

I have noticed in the past, when using very tiny type, that browsers show bold 
text by increasing the width of the glyphs themselves (not just the lines). 
This is what is happening with your bold text. When bold is applied, a lower 
case "o" for example, is 4px wide from one side to the other. When bold is 
applied, it is 5px wide. 

So, if you want the text to "look" bold, you're going to have to increase the 
font-size, I think.

I hope this is useful.

~holly 
 
   
__
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] Odd IE6 issue

[Holly Bergevin]

From: "[EMAIL PROTECTED]" <[EMAIL PROTECTED]>

>http://www.abbeyrentssf.com/party-rentals/rentals-overview.html
>
>You'll notice that the word "overview" is not there in IE6.  

>http://www.abbeyrentssf.com/ie6.css

Assuming that the problem is only in IE6, you can put the fix in that style 
sheet. You need to add a "layout trigger"[1] to your h1 selector - 

h1 {
position:relative;
text-align:right;
margin-right:60px;
right:0;
top:-38px;
margin-bottom:-1.2em;
height: 1%; /* <<< add this */
}

IE6 should show your text.

~holly

[1] http://www.satzansatz.de/cssd/onhavinglayout.html 
 
   
__
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] list-style problem on IE 7

[Holly Bergevin]

>> From:  Big Moxy
http://www.woodstone-homes.com/communities/red-oak-farm-test/?id=5

From: "Rick Faircloth" <[EMAIL PROTECTED]>

>So, add "padding-left:-20px;" to both the
>.rightcommunity ul and .rightcommunity li
>styles and your menu should move to the left
>20px and be centered.

Please don't do this. The padding property does not take negative values, and 
thus is invalid CSS.

The actual 'extra space' problem for IE is in the following selector - 

.rightcommunity li {
list-style: none;
list-style-position: outside; /*inside;*/ /* change this value to outside */
list-style-image:none;
}

~holly 
 
   
__
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 5, 6, dropdown display issue

[Holly Bergevin]

From: "Rebecca Richter" <[EMAIL PROTECTED]>

>Still having trouble with the dropdown display in IE 5. IE 6 it looks just 
>fine! My ie.css file has the following rules:

.nav {
margin-top: -3px;
}
.topnav {
margin-top: 0px;
}
.nav a {
height: 1%;
vertical-align: bottom;
}
.dropdown li {
margin-left: -16px;
margin-left: 0;
}

>Any more ideas?  Thanks :)

No more ideas, just the same one. You missed a backslash (escape) character in 
your .dropdown li selector. See below from my previous suggestion - 

.dropdown li {
margin-left: -16px;
ma\rgin-left: 0; /* this line needs the escape character before the letter 'r' 
*/
}

~holly
 
 
   
__
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] Problem adding border to selected image - live test page

[Holly Bergevin]

From: Big Moxy <[EMAIL PROTECTED]>

>Please go to http://www.woodstone-homes.com/gallery/test.asp  
>>  The problem is that after 
>> selecting a thumbnail the margin between images increases and 
>> overflows the width of the cell.
 Tim

Try changing your CSS as follows - 

.gallerypic {
float:left;
/* margin-left:5px; */ /* remove this, horizontal margins don't collapse */
margin-right: 6px; /* altered value */
/* border:none; */ /* remove this */
}
.gallerypic img {
border: 1px solid #945a40; /* change to add a border initially that is approx. 
the color of the surrounding area and thus very hard to see, which is what you 
want */
}
.gallerypicSelected {
float:left;
/* margin-left:4px; */ /* remove this */
margin-right: 6px; /* alter this value to be the same as the unselected value */
}
.gallerypicSelected img { /* no changes needed here */
border-color:#FF;
border-style:solid;
border-width:1px;
}

I narrowed the margin between the images and added a border to take up the 
space of the white one you want when the thumbnail is selected. This means that 
there is only a change of color when that happens, not a change of position, 
too. 

See if this works for you. Tested in Firefox.

~holly 
 
   
__
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] Background inheritance

[Holly Bergevin]

From: J <[EMAIL PROTECTED]>
>>> The URL is
>> > http://www.stainlessband.com/index2.html

>I have it specified here:
>
#body {
background-color: #33;
margin-top: 0;
padding: 0;
text-align: center;
}

Jason, 

Try removing the # from in front of body and see if that gets you what you 
want. You don't have an element with the ID of body, which is what that 
selector is selecting.

~holly 
 
   
__
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 5, 6, dropdown display issue

[Holly Bergevin]

From: "Rebecca Richter" <[EMAIL PROTECTED]>

>That took care of the extra padding issue in IE 6, but not 5. Anything I can 
>do to correct that?

>>> http://www.makemyhousegreen.com/index1.html 

Hi Becca,

Ammend your ie.css file to include the following - 

.nav a {
 height: 1%;
 vertical-align: bottom;
}

.dropdown li {
margin-left: -16px;
ma\rgin-left: 0;
}

And you should find happiness with the IEs

~holly 
 
   
__
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] Three Column advice needed

[Holly Bergevin]

From: "Richard Brown" <[EMAIL PROTECTED]>

>> > 

>as I can tell it now works. Except for the header. Why do I have a
>large gap at the top in some browsers and none in others please?

Different implementations of escaping/collapsing margins. To eliminate the gap, 
set the top margin of your h1 element to zero. (This is one way to solve the 
problem, there are others). - 
http://www.w3.org/TR/CSS21/box.html#collapsing-margins

~holly 
 
   
__
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] IE7 problem

[Holly Bergevin]

From: "John Lockerbie" <[EMAIL PROTECTED]>

>there is at least a problem with IE7 and Windows
>XP.
>
>Please would somebody have a look at
>http://www.catnaps.org/20071217/index.html -
>http://www.catnaps.org/20071217/catnaps.css - and suggest what I might
>do about it.

In your style sheet you have the "easyclearing" construction as follows - 

.fix:after {
content:".";
visibility:hidden;
display:block;
clear:both;
height:0;
}
* html .fix {
height:1%;
}
.fix {
display:block;
}

Unfortunately, this is not a complete instance of the code (as given on PIE 
[1]), and thus is actually missing the very part that IE7 needs to do the 
clearing you've asked for.

If you will change your construction to the following, I think you will have 
success with IE7. Tanfa (Claire Campbell) has an explanation [2].

.fix:after {
content:".";
visibility:hidden;
display:block;
clear:both;
height:0;
}
.fix {display: inline-block;}
/* \*/
* html .fix {height:1%;}
.fix {display:block;}
/* */

I hope that helps.

~holly

[1] http://positioniseverything.net/easyclearing.html
[2] http://www.tanfa.co.uk/archives/show.asp?var=300 
 
   
__
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] Menu not displaying well in IE 6

[Holly Bergevin]

From: Lisa Wilcox <[EMAIL PROTECTED]>

> http://www.familyfirstdocs.com. In IE6 with WinXP, the scrolling
>seems to be disabled on the dropdown menus. 

There are probably several places you can apply this, here is what I did. In 
your menuh.css, add to the following selector, #menuh a - 

#menuh ul li, #menuh a {height: 1%;}

And IE6 should cooperate for you.

~holly 
 
   
__
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] create expandable banner

[Holly Bergevin]

From: "Rebecca Richter" <[EMAIL PROTECTED]>

> but how do you do it if the banner has a non-uniform 
>background, like on this site: http://www.myersonassociates.com/

Hi Becca, ;)

This construction is two part (for the right, expanding side of the header), 
with a main image placed in the HTML and a background image set to repeat that 
gives the illusion of a wider image than is actually there when the page 
expands.

I hope that helps,

~holly 
 
   
__
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] Direction: rtl inverting an image?

[Holly Bergevin]

From: "Anne E. Shroeder" <[EMAIL PROTECTED]>

>Right, well I've just figured out the fix - just don't know WHY it made the 
>graphics behave that way. By removing
>margin: 10px 2px 0 0;
>from the code I mention below, the graphics right themselves.  Anyone 
>encountered this strange behavior before, and is there a rational 
>explanation for it?

http://www.ddiv.com/clients/voa/final_builds_modified_110107/screencaps.htm

Simply based on your screen shots alone, I'd say that the images weren't being 
turned inside out, but were instead positioned differently, and repeating. 
Since the area they were to display in was so small, you got the repeat in the 
middle of the image in that browser, and thus saw the end of one repetition and 
the beginning of the next, which made them look rather odd.

Just a guess, though.

~holly 
 
   
__
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] Error in my mail Problems with a div

[Holly Bergevin]

From: Joaquim Font <[EMAIL PROTECTED]>

>http://www.cgibuenosairesbpba.org/index.php

>The problem is with EE5. The div problem is “derecha” 

The problem is that the IE5.x browsers have a broken box model [1]. Padding and 
borders are not added to a given width, but contained within that width. You 
will need to give those browsers a different width than the others, but it's 
easy to do using two width properties in one rule set, and an "escape" 
character that the IE5.x browsers cannot read.

>and the code CSS is: (from your online style sheet, not the one you pasted 
>into your email)

#main #centro { width: 
349px; /* this is the value to set for the IE5.x browsers. It includes the 
amount of padding and border you have set below */
w\idth: 338px; /* this is the reset value for all other browsers. The backslash 
character is not read by IE5.x */
float: left;
padding-right: 10px;
padding-left: 0px;
border-right: 1px solid silver;
margin: 0;
}

#main #derecha {
float: right;
width: 151px; /* same as above */
w\idth: 130px; /* same as above *
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #7695B7;
margin-top: 0;
overflow: hidden;
}

These small accommodations should make the IE5.x/Win browsers look just about 
like the other browsers.

~holly

[1] http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41 
 
   

__
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 rendering issues

[Holly Bergevin]

From: Lisa Goettel <[EMAIL PROTECTED]>

>I have a few issues in IE with a new site:
>www.bigsurarts.org/newsite
>CSS:
>www.bigsurarts.org/newsite/public/css/main.css
>(with some IE specific sheets in that directory as well)
>
>Primary issues:
>
>- In IE 5.5 the site is not rendering at all
>
>- In IE 6 the two images above the content (with the menu) are not  
>displaying inline

Hi Lisa,

The thing I see that is causing you the most problems on your main page is the 
xml declaration that comes before the doctype.  If/since you are not serving 
the page as xml, you do not need that. What it's doing is throwing IE6 into 
quirks mode [1], and it may be what is preventing IE5.5 from displaying the 
page at all. 

I suggest you remove it.

After that, you can make some small changes in main.css that will make IE6 look 
very much like FF (2.0.0.9) and therefore will probably get you at least 
started on fixing any other issues. Following are the 
changes/additions/deletions you will want to try (all of them at together fix 
the issues, though individually they correct little things).

You have a number of elements that you have given a {width: 100%;}. While most 
of them do not seem to cause problems, this following one does. Adding a width, 
or a height to a block element, fundamentally changes the way IE browsers view 
that element. The dimension you use gives the element "layout" [2] and while 
sometimes this can be useful, sometimes it is most definitely not. The 
following is one of those times.

.content .container {
float: left;
padding: 11px;
/* width: 100%; */ /* remove */
}

Add the following selector, which will clear up a couple of misunderstandings 
IE6 (at least) is having about images.

.content .frame-left-top img,
.content .frame-right-bottom img {margin-right: 0;}

Add {display: inline;} to the following selector to overcome IE's margin 
doubling bug [3] - 

.content .frame-right-top {display: inline; other: styles;}

Change the padding value in the following selector - 

.content .cont-fr-l {
float: left;
width: 465px;
padding: 22px; /* change from 23px */
padding-top: 8px;
}

Note: With the removal of the xml declaration at the start of the page, there 
is likely no longer a need for a specific IE6 stytle sheet, at least for the 
page I looked at. Indeed, all my suggestions above are made without that 
ie6.css style sheet "engaged." I did not test in IE7, though its specific style 
sheet may not be needed either, depending on the page.

None of the changes I've suggested need to be placed in a separate style sheet. 
The main.css sheet is fine. 

>- In IE 6 & 7, on the sub pages ( www.bigsuarts.org/newsite/ 
>about.html ) the text is not wrapping around the right-floated green  
>box.

I did not look at any pages other than the main page, but it's possible that 
the changes I suggest above will solve some of the issues, as long as there is 
no xml declaration at the beginning of those pages.

What you describe in the above paragraph *sounds* like it might be a case where 
an element 'has layout' and that "property" is causing problems. I don't know 
for sure, as I didn't check.

>I've tried the basic IE fixes that I know of to no avail.  Help is  
>much appreciated.

"Basic IE fixes" are not always useful, as you have found, when their addition 
actually causes a problem or two (or more). Sometimes the only way to discover 
what is causing the problem is to cut chunks of the style sheet out until the 
display resembles the display in another browser and then put the styles back 
little by little, observing the changes (in both the targed and comparison 
browsers) and thus discovering which styles are actually causing the problems. 
You can find more information in this technique in the "Mystery Bug" article on 
PIE. [4]

I hope that this helps,

~holly

[1] http://www.communitymx.com/content/article.cfm?cid=E2F258C46D285FEE (see 
page 2 under Caution! specifically)
[2] http://www.satzansatz.de/cssd/onhavinglayout.html
[3] http://www.positioniseverything.net/explorer/doubled-margin.html
[4] http://www.positioniseverything.net/articles/mys-bug.html 
 
   
__
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] Dropdown Issues...

[Holly Bergevin]

-- Original Message --
From: Kevin Evans <[EMAIL PROTECTED]>

>Hello,
>
>I am working on a suckerfish type menu at http:// 
>robotics.pmhclients.com/index.php
>
>But I am having some problems with the dropdown appearing to the  
>right of the button, such as Robotics button on top left. Does anyone  
>know how to fix that?

Hi Kevin

In the following selector, try changing the margin-left property value to 
something like -40px and see if that works as you desire.

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover 
ul {
margin-left: -40px;
other: styles }

I hope that helps,

~holly 
 
   
__
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] content little off in FF

[Holly Bergevin]

From: [EMAIL PROTECTED]

>There is only one more thing, the first paragraphe/sentence stays 'off', see
> http://www.cmamali.org/koutiala.html 

Try the following changes to your CSS - 

#content {
font-family:arial, verdana, serif;
font-size:12px;
background:url(http://www.cmamali.org/images/pattern.jpg) no-repeat top left;
width:710px;
padding:0;
text-align:left;
margin:0 auto; /* this is a sufficient margin declaration */
/*margin:0;
margin-left:auto;
margin-right: auto;*/ /* these 3 are redundant and not needed */

padding-left: 75px; /* < add this << */
}   

table {
font-family:arial,verdana,serif;
font-size:12px;
width:500px;
/*margin-left:75px;*/ /* < Remove this < */
padding:1px;
vertical-align:right;
text-align:left;
}

table.spec {
font-family:arial,verdana,serif;
font-size:12px;
width:500px;
/*margin-left:80px !important; 
margin-left:75px; */ /* < Remove these < */
padding:1px;
vertical-align:right;
text-align:left;
}

So, the idea is to pad the content div to make room for the background image. 
Everything else will be moveed over without using any margins. 

Also, the vertical-align property does not take the value "right". See - 
http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

and when you use a two-or-more word font family, such as Courier New, it must 
have quotes around it in your string

font-family: Georgia, "Courier New", serif; /* < note that the trailing 
comma comes _after_ the quote < */

Scroll down to see paragraph starting "If an unquoted font family name..." - 
http://www.w3.org/TR/CSS21/fonts.html#propdef-font-family


I hope that these suggestions help,

~holly 
 

 
   
__
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] IE6 will not drop down a list.... please help

[Holly Bergevin]

>-Original Message-
>From: Holly Bergevin 

>>From: "Roelf D. Kuitse" <[EMAIL PROTECTED]>

>> IE6 will not drop the list down when you hover over it.  Any Ideas???

>>www.autodata.com/test/test

>Well, I could not find the csshover.htc file, (which may be what you are
>using to control the dropdowns in IE6) so perhaps the browser is having
>the same difficulty. Check the path to the file and make sure that it's
>really there.

From: "Roelf D. Kuitse" <[EMAIL PROTECTED]>

>I actually don't have a csshover.htc file.. I run the hovers and the
>drop downs with a file called menuh.css

Exactly. As I said, I couldn't find the .htc file. But to make IE6 obey :hover 
on an element other than an anchor, which you do have a number of instances in 
your menuh.css [1], you will need the csshover.htc file that is called for in 
your HTML document. See the conditional comment in the head of your document 
for the following (snipped other parts of the CC) - 

body{behavior:url(/css/csshover.htc);

If you don't want to use the .htc file, you will need to find another way to 
get those menus to display in IE6.

~holly

[1] from your menuh.css style sheet - 

/* Begin non-anchor hover selectors */

/* Enter the more specific element (div) selector
on non-anchor hovers for IE5.x to comply with the
older version of csshover.htc - V1.21.041022. It
improves IE's performance speed to use the older
file and this method */

div#menu h2:hover{
background: #ff no-repeat -999px -px;
}

div#menu li:hover{
cursor:pointer;
z-index:100;
}

div#menu li:hover ul ul,
div#menu li li:hover ul ul,
div#menu li li li:hover ul ul,
div#menu li li li li:hover ul ul
{display:none;}

div#menu li:hover ul,
div#menu li li:hover ul,
div#menu li li li:hover ul,
div#menu li li li li:hover ul
{display:block;} 
 
   
__
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] Trouble with display of background in IE

[Holly Bergevin]

From: Paul Menard <[EMAIL PROTECTED]>

> why IE 7 & 6 are cutting  
>off the first line of text in the quotes display. Here is the page
>http://staging.williscoatings.com/

Try adding the two properties below -  

#l_sidebar #wp_quotes .wp_quotes_quote {
background: url(images/quote.png) repeat-y;
padding: 0px 15px;
text-indent: 45px;
text-align: left;
margin-top: -15px;
line-height: 140%;
position: relative; /* add this */
z-index: 2; /*also add this */
}

To help IE get the stacking order right.

~holly 
 
   
__
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] IE6 will not drop down a list.... please help

[Holly Bergevin]

From: "Roelf D. Kuitse" <[EMAIL PROTECTED]>

> IE6 will not drop the list down when you hover over it.  Any
>Ideas??? 

>www.autodata.com/test/test

Well, I could not find the csshover.htc file, (which may be what you are using 
to control the dropdowns in IE6) so perhaps the browser is having the same 
difficulty. Check the path to the file and make sure that it's really there.

~holly 
 
   
__
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] Missing content in IE6, it doesn't scroll al the way down...

[Holly Bergevin]

From: "Sido van Gennip" <[EMAIL PROTECTED]>

http://www.paardenverzekeringvergelijker.nl/ 

> in IE6, the bottom
>of the page seems to be missing... 

In - /* reset.css */ - remove the position: relative from the universal 
selector's declarations. Automatically declaring that property value for 
everything can have unpredictable and, as you've discovered, undesirable, 
consequences. Set it only where needed.

/* reset.css */
*
{
font-family: inherit;
font-size: 100%;
font-style: normal;
font-weight: normal;
line-height: 1.2em;
margin: 0;
padding: 0;
position: relative; /* this is the offending property */
text-align: left;
}

I hope that helps,

~holly

ps - the only "technique" used to discover the problem here is described on 
this page - 

http://www.positioniseverything.net/articles/mys-bug.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] Help! IE6 issues - mostly backgrounds

[Holly Bergevin]

Note: I basically "just looked" and didn't get involved in playing with this 
site. You've got so many style sheets and scripts, both embedded and external, 
that I kind of got "the willies" about trying to set up a local page and didn't 
do it.

From: "Amy Drayer" <[EMAIL PROTECTED]>

> http://new.jocolibrary.org/
>
>1.  Overflow issues on the home page.  I am using rounded corners on the
>maincontent and content divs, but when I use overflow:hidden for IE6's
>additional background fill, I lose my navigation.  Is there another
>technique I can use, or do I have to remove the rounded corners?

Don't know which navigation you're speaking of here, as I believe I'm seeing 
all of them in IE6.

It looks like something is pushing that rounded box wider in IE6 than in the 
other browser I compared it to. Check things that have {width: 100%;} within 
that box, and see if removing the width helps. You can also "mystery bug" it - 
http://www.positioniseverything.net/articles/mys-bug.html - cutting out parts 
of the HTML or CSS to see if you can locate what it is that's pushing things 
wider (assuming it is getting wider). Additionally, check any IE-specific hacks 
you have added to see if they are causing the problem.

>2.  What is going on with the "page update" at the bottom (big blue
>stripe)?  I cannot get the background to be white (can't find an element
>that will take it, the update is written with javascript from what I can
>tell).  It looks like it's pulling the background color from "container",
>but the "page update" isn't in the container... any ideas??

#pageupdate {background-color: white;} - (or #fff) should target that 
paragraph, that is, assuming that's the paragraph you want to target.

>3.  IE6... for some reason it won't make a straight line!  Can anyone tell
>me why it is rendering my XML feed on
>http://new.jocolibrary.org/default.aspx?id=2121
>slightly crooked?  It seems to move 1 or 2 pixels left with each xmlitem.
>>From what I can tell, it's okay in all the other modern browsers, and it's
>not using floats.  It wasn't doing it before, I don't think... any ideas?

It looks like a manifestation of the "Magik Creeping Text" bug -  
http://www.positioniseverything.net/explorer/creep.html - again, I didn't test, 
just looked.

I hope a little of this helps, and sorry that I wasn't able to test.

~holly 

ps - there is also some strange javascript error that occurs on the - 
http://new.jocolibrary.org/ - page. No matter where I click on the page, when I 
release the mouse button, I get an alert box saying that there is an error on 
the page. I'm pretty sure it's interferring with some aspects of using the 
page, such as using those dropdowns. Yes, I have IE tell me about script 
errors.  
 
   
__
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] ie7 margin bug

[Holly Bergevin]

From: "Tobbe Lundberg" <[EMAIL PROTECTED]>

>http://tlundberg.com/ie7.html 
>
>There is a 40px margin below #box. It shouldn't be there. The 40px
>margin comes from #wrapper, but since #wrapper is much shorter than
>#box that margin shouldn't make any difference. Firefox 2 and Opera 9
>gets it right.

Ah, but if you put more content in your #content div, enough to actually extend 
the content below the level of #box, then all browsers should imitate what IE 
is doing right now. 

I think that, since #box begins within #content, even though IE has let it 
'stick out' and not actually expanded #wrapper visibly,  (due to the lack of 
"layout" on that div), IE thinks you still want that bottom margin to extend 
below *where wrapper would have extended to if it had layout* and does so. 

If your actual content will extend below the level of #box, then that margin is 
something you will have to deal with in all browsers, and not something to 
worry about just in IE. If you really don't want that margin, eliminate it from 
#wrapper. The display likely won't change in other browsers, but it will be 
"fixed up" in IE.

Hope that helps,

~holly  
 
   
__
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] Top nav-please ignore last navigation post

[Holly Bergevin]

From: trevor bayliss <[EMAIL PROTECTED]>

>I am having a problem with my top nav http://216.219.94.105/trevor.htm
>   
>  The width of the ul that I have id="topnav" doesn´t fit accross the whole 
> header div and is centred in firefox and aligned to the left in IE:

You have:

#topnav {border-top: #d8e1e9 4px solid; margin: 9px 0px 0px; width: auto;}
#topnav ul {width: auto;}
#topnav li { display: inline; background: #849eb3 no-repeat left top; float: 
left; width: auto; height: auto}

Add: {padding-left: 0;} to #topnav as some browsers have default padding values 
on ULs, and some have default margins. 

#topnav ul {width: auto;} selects notihing, as you don't have any ULs /inside/ 
#topnav.

Change: #topnav li {width: auto;} to {width: 10%;} since you have ten LIs

These will get you pretty close, I think, in Gecko browsers anyway. You may 
have "issues" when browser text size is increased. Be sure to test.

~holly 
 
   

__
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've still got a problem...

[Holly Bergevin]

From: "John Lockerbie" <[EMAIL PROTECTED]>

>somebody can now help by telling me what I'm doing wrong in not being
>able to get the same menu at the bottom of the page as there is at the
>top on:
>
>http://www.catnaps.org/newlayout/index.html
>css: http://www.catnaps.org/newlayout/islamic2.css

Assuming, since you didn't really say, that what you want is the "box" around 
the bottom nav as the top one has, you'll need to add the appropriate element 
to your HTML. 

In your style sheet you have - 

#contentcol, contentcol2 {
color: #333;
background: #e7fbee;
margin: 0px 0px 0px 0px;
padding: 0px;
height: 160px;
width: 724px;
float: left;
border: 1px solid #ff;
}

Note that the second part of that selector selects absolutely noting. Even if 
you put a leading #, it will still select nothing because that element - 
#contentcol2 - does not exist in your HTML. 

So, to get what you want, you'll need to fix your HTML to include that element, 
and fix your CSS so that it targets the element -

#contentcol, #contentcol2 {etc}

You may find you want to add the following selectors and properties as well.

#contentcolnav2 {
position:relative; 
float: left; 
left: 10px; 
margin-top: 0px;
}

#contentcol2 {margin-left: -10px;}

Regards,

~holly  
 
   
__
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've still got a problem...

[Holly Bergevin]

From: "John Lockerbie" <[EMAIL PROTECTED]>

>http://www.catnaps.org/newlayout/index.html 

>The lower menu sits on top of the footer and I can't separate them.
>The css is: http://www.catnaps.org/newlayout/islamic2.css

In your lower menu, the three ULs are absolutely positioned (AP). So even 
though you've cleared the footer, the floated #contentcolnav2 isn't really 
taking up much space, and the AP lists are hanging out of it, overlapping the 
following content (the footer). 

You can see this by adding background colors to the four elements and noting 
that #contentcolnav2 does not expand to hold the three lists. The heading is 
the only thing taking up any space.

Try the following changes to your CSS and see if they help. Tested in FF only.

#contentcolnav2 {
/*width: 408px; - remove the width */ position:relative; float: left; left: 
10px; margin-top: 0px; 
}
/* float these instead of AP - left/top aren't needed */
#navcol4 { 
float: left; list-style:none; width: 33%;
}
#navcol5 {
float: left; list-style:none; width: 33%;
}
#navcol6 {
float: right; list-style:none; width: 33%;
}

This seems to hold up under a couple of text resizings. You might consider 
changing the top one in the same fashion, as it does not hold up under text 
resizing.

I hope that helps,

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

Re: [css-d] How do I position a floated div and its descendantsover other divs when they overlap?

[Holly Bergevin]

From: "Josue Martinez" <[EMAIL PROTECTED]>

>Still, I'd like to understand why the page/menu doesn't render correctly in
>IE/Win
>
>URL: http://www.ic.sunysb.edu/clubs/phiota/test/
>CSS: http://www.ic.sunysb.edu/clubs/phiota/test/base.css

I cannot find the - csshover.htc - file that IE6 needs to make your menu work. 
According to your style sheet, it ought to be here - 
http://www.ic.sunysb.edu/clubs/phiota/test/assets/csshover.htc

But it is not. Perhaps the path to that file is different than the one you 
specified? Your images reside in the spots their paths indicate, so there's 
probably just a path error here. 

~holly 
 
   
__
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] Strange Print Issue

[Holly Bergevin]

From: Robbert van Andel <[EMAIL PROTECTED]>
> In particular the text appears outside the borders of the containing 
> division. 

>Can any suggest what I can do to fix this?

>http://www.salemhospital.org/clinicalresearch/print.php

IE needs "layout" [1] on at least two elements. Add {zoom: 1;} to the - 
div.trials_title, div.trials_treatment, div.trials_eligibility - selector (only 
tested in IE6, by the way). Note that this will not validate. 

You might consider placing a complete doctype on your page as well, though it 
doesn't seem to make a difference with the printing issue. See [2] for more 
information about doctypes.

~holly

[1] http://www.satzansatz.de/cssd/onhavinglayout.html
[2] http://www.communitymx.com/abstract.cfm?cid=E2F258C46D285FEE 
 
   
__
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] Content spacing is REALLY off in IE6

[Holly Bergevin]

From: "Juanita" <[EMAIL PROTECTED]>
> IE6 - that's the
>biggie. Not sure why the spacing is like it is.
>
>Here's the link again 
>
>http://test.kcsm.org/jazz91/programs.php

It doesn't appear that you'll currently be able to target the correct element 
from within one of your style sheets, but the div that holds all the h3, h4, 
and h5 elements needs "layout" [1] for IE6 to behave. I tried both zoom and 
width, and the problem seemed to be resolved.

For location - 





Jazz 91.1 Programs

You may want to give it an ID and apply the width (or {zoom: 1;}, I'm not sure 
which is better) in the style sheet. 

~holly

[1] http://www.satzansatz.de/cssd/onhavinglayout.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] CSS-only hover menu obscured by other elements in IE 6

[Holly Bergevin]

From: "David Wilson" <[EMAIL PROTECTED]>

>I'm trying to make a javascript-free hover menu for some images 

>in IE 6 the menu
>for the top images is hidden by the images below. I've tried setting
>the menu's and images' z-indexes, and while this works in firefox it
>has no effect in IE 6.

>http://devshare.rsd.co.za/leftboxdiscuss.html

The z-index of a parent element that displays a hover behavior must be higher 
than the z-index of a following parent element, in order for IE6 to get the 
stacking order right. While you have added a z-index, it's not on the correct 
element.

I have put up a page for you to look at [1], rather than just give you the 
solution here, because your HTML page is poorly formed and I wanted to make 
sure my suggestion would work with what you have in a "proper" setting. 
Briefly, you page has no doctype or charset, and the style element exists 
outside of the head element. 

I'm not sure what all those conditional comments are doing hanging around 
(other than apparently writing improperly nested elements for the IE browsers) 
but I didn't change them. I guess that's one way to solve problems.

[1] http://members.dslextreme.com/users/cssjedi/css-d/hover-test.html

I hope that this information helps,

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

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

[Holly Bergevin]

From: trevor bayliss <[EMAIL PROTECTED]>

> However, even though I have avoided ems in my present code it seems 
> impossible to get IE to resize text. I know that IE has a bug but I was told 
> it would work with anything other than px. Here´s the offending css and a 
> link to the page http://216.219.94.105/ 
  
>body {padding-right: 0px; padding-left: 0px; background: #ff repeat-x 50% 
>top; padding-bottom: 0px; margin: 0px; font: 100% tahoma, arial, sans-serif; 
>color: #4d4d4d; padding-top: 0px}

>h1 {font-size: 19%}
>h2 {font-size: 15%}
>h3 {font-size: medium; font:tahoma, arial, sans-serif}

The above selectors and with the font property showing as percents are not what 
I find at the link you provided. What I did find is below - 

body {padding-right: 0px; padding-left: 0px; background: #ff repeat-x 50% 
top; padding-bottom: 0px; margin: 0px; font: 11px tahoma, arial, sans-serif; 
color: #4d4d4d; padding-top: 0px}

h1 {font-size: 19px}
h2 {font-size: 15px}
h3 {font: 11px tahoma, arial, sans-serif}

Notice that the font property for the body shows the font-size value as 11px, 
not 100% as your example suggests you have written it. This, and the other 
pixel values, is what is causing your stated problem of not being able to 
resize the text in IE.

You have some other issues in your CSS, such as incorrect font declarations (in 
the example you gave, for the h3, you have no font-size listed, therefore 
should be using the font-family property instead of font) and you could use 
some shorthand CSS properties to reduce some of the "clutter" within your style 
sheet. [1]

I hope this information helps.

~holly

http://www.communitymx.com/abstract.cfm?cid=A43B828960590F55 
 
   

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

Re: [css-d] Selected LI in navigation (one image)

[Holly Bergevin]

From: Matt <[EMAIL PROTECTED]>

>This works, but I don't like this solution:
>
>CSS
>***
>ul#nav-top li#t1 a {width:56px;padding-left:5px;background-position:0 0;}
>ul#nav-top li#t1 a:hover {background-position:0px -42px;}
>ul#nav-top li#t1 .selected a { background-position: 0 -86px; }
>
>XHTML
>***
>ONE
>TWO
>
>
>I'd like to have the selected class withing the LI element. So the selected LI 
>will look like this:
>
>ONE
>TWO

Matt, I think you are running into a couple of issues here. 

As James pointe out, you won't be able to change the background position of a 
non-existant background image. If your LI does not have a background associated 
with it, no amount of positioning is going to move the image from the link 
(which you are apparently wanting to remove for the selected LI) to the LI 
itself.

You could write a selector that, in addition to the background position, also 
provided the URL for the background image in that LI. Since there will be no 
link in that LI, the background image for the anchor will not be there anyway.

Additionally, I'm pretty sure you are running into specificity problems, or 
will if you haven't. 

ul#nav-top li#t1 {anything here} 
Will be more specific than 

ul#nav-top .selected {something else here} 
no matter how much you want it to be different. The following construction may 
work, however.

ul#nav-top li#t1.selected {a bit of stuff here}
though I have a vague recollection that IE browsers (at least IE6) might have a 
problem with that. 

However, perhaps you can change how the beginning of the selectors are written. 
Do you have more than one _set_ of LIs in your ul#nav-top? If not, even if the 
IDs are needed for another reason, don't use the - li#t1 - part, and just use - 
ul#nav-top .selected, - for less code.

~holly  
 
   
__
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] One bug left - Suckerfish Menu hides

[Holly Bergevin]

From: Jörn Kretzschmar <[EMAIL PROTECTED]>

>http://loens-realschule.de

A usability question/comment:

This is not something I necessarily need the answer to, but something for you 
(and others) to consider.

I find the use of the title attribute in your navigation bar and dropdowns to 
be rather distracting. When I hover one of the main links, the little title box 
pops up, giving me no new informaion, just restating the text in the link. If a 
dropdown has been activated, I have to wait for the title box to disappear 
before I can read the text underneath. When I move my mouse, even slightly, the 
title box pops up again, requiring more waiting to see any text I might be 
interested in.

Do you really need the title attribute, or can you let the text of the 
navigation buttons stand on their own? My suggestion is to get rid of the title 
attribute where it provides no new information, and especially where it gets in 
the way. Also, if an image needs a caption, provide a caption, though I'd be 
more inclined to keep the title attribute on your images than on your 
navigation menu text. 

~holly 
 
   

__
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 needed with couple of problems

[Holly Bergevin]

From: Tango <[EMAIL PROTECTED]>
> I really
> need to contain the content inside the #map  .
> http://thetangos.com/tango/map_listing.html

Then you really need a clearing element to be inserted right before the close 
of that div. With your current markup, that would be the next to last thing 
before the closing body tag.

~holly
 
 
   
__
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] Box Model Problems, I'm not getting it!

[Holly Bergevin]

From: Robert Lane <[EMAIL PROTECTED]>

>The link you sent me is giving a 404 not found. 

http://chelseacreekstudio.com/ca/cssd/lane.html

Came through just fine for me, so you might try it again. :-)

> > Robert Lane wrote:
> > > I have an example here: http://tinyurl.com/3axpuo

> > > I
> > don't understand what I am doing wrong, but I am getting totally
> > > different results in IE6, IE7 and FireFox 2


As David said, hang in there. In additon to what he's sent you, add the 
following selector to close up the gaps you're seeing - caused by images being 
inline elements and IE leaving space for text descenders. Other browsers have 
an "almost standard" mode they apply for transitional doctypes which takes care 
of just this issue. IE6 does not. 

#logo_box img, #slides img {display: block;} /* or {vertical-align: bottom} if 
you prefer */

Cheers,

~holly  
 
   
__
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

[Holly Bergevin]

From: "Allison Bloodworth" <[EMAIL PROTECTED]>

>All my *text* (not just links) is underlined on mouseover in FF 1.5.0. 

>here: http://www.ischool.berkeley.edu/~allisonb/OHA/
>http://www.ischool.berkeley.edu/~allisonb/OHA/stylesheets/styles.css

>what
>would be causing this.

Others have made suggestions that will allow you to fix this, but you asked 
what would be causing this. 

The method you chose to close your anchor element is what is causing this. 
Firefox doesn't appear to accept the single tag with the closing slash (which 
is missing a space before the slash, by the way). So, it "computes" that you 
must have made a mistake, and puts in an actual closing tag for that element.

(continuing to assume what the browser is "thinking"...)
Then, since you _hadn't_ closed the tag in a way that FF recognized, it 
suspects you intended to enclose the paragraph in an anchor. Since that's not 
"legal," FF then places a replacement anchor element inside the paragraph, 
surrounding the text, and closes it, because that's what it thinks you intended 
to do. Thus, the text is all a link.

I realize that this is not the HTML that you wrote, but it's what is being 
"computed" by the browser. (extra spaces added in  tags to prevent the HTML 
from displaying in my email client)

What you wrote -

< div id="oha_mainContent" >
< a name="mainContent"/ >
< p >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.< /p >

What Firefox displays/computes - 

< div id="oha_mainContent" >
< a name="mainContent" >
< /a >< p >< a name="mainContent" >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.< /a >< /p >

I hope that helps the understanding part, anyway.

~holly  
 
   
__
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 6 sticky bug

[Holly Bergevin]

From: "Jed Arnold" <[EMAIL PROTECTED]>

>The images are squashed, 

>The site can be viewed here,
>http://the1912gallery.ehc.edu/music/newsite/textlinktest.html. 

You have told the images to be 50px high. And that's what they are. 

.joverbox .preview
{
border-color: #000;
width: 300px;
height: 50px;
}

Assuming your images will all be the same height when you upload the 
site-specific ones, change the height value and you should solve the squishy 
problem.

~holly

ps - one brief note - 

br .clear {
clear:both;
}

will select any element with the class of "clear" inside a < br > element. Are 
you sure you're going to have any of those?

Perhaps you meant -

br.clear {
clear:both;
}

without the space between br and .clear ? 
 
   
__
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/