[css-d] Help with Horizontal List in IE
I'm creating a horizontal unordered list that in most cases will be long
enough to wrap to more than one line. The li and a elements are set
to display:block and float:left. I do not have a set width or height on
either of these and prefer not to do so.
All works fine in Firefox; however, IE is expanding the height of the
last element on the initial line (prior to wrapping) rather than
floating the li down to the next line. What can I do to get IE to
behave like Firefox?
A screenshot can be seen here:
http://www.radiantconsultinginc.com/images/screen-menu.gif.
CSS currently in use:
div#submenu {
clear:both;
margin-bottom:30px;
}
ul.submenu {
list-style-type:none;
margin:0;
padding:0;
float:left;
width:575px;
}
ul.submenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
}
ul.submenu li a {
color:#B85122;
text-decoration:none;
display:block;
height:18px;
/* overflow:hidden; */
margin:0px 0px 3px 0px;
padding:0px 5px;
border-right:1px solid #B85122;
}
ul.submenu li.parent a {
padding-right:15px;
background: url(../images/arrow-down.gif) bottom right no-repeat;
}
ul.submenu li a:hover {
background-color:#BACEDA;
text-decoration:underline;
}
ul.submenu li#current {
background-color:#E7EEF2;
}
ul.submenu li ul {
padding:0;
display:none;
}
ul.submenu li:hover {
z-index:120; /* IE hack */
}
ul.submenu li:hover ul {
display:block;
position:absolute;
top:12px;
left:0px;
z-index:100;
}
ul.submenu li ul li {
float:none;
width:175px;
background-color:#BACEDA;
opacity:1;
filter: alpha(opacity=100);
}
ul.submenu li.parent ul li a {
border:none;
background-image:none;
}
Thanks in advance,
Denise
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Help with Horizontal List in IE
Bill Braun wrote: Wild hunch - try separating the words Exam Master Online with non-breakable spaces (nbsp;). Bill B Thanks Bill. I dismissed that initially since this involves a CMS, but decided to give it a try since the output is created by my own module ... it worked! Many thanks. Denise __ 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/
[css-d] Z-index and IE
I'm experiencing a problem with a left-hand menu that uses css to hide/display submenu items on a particular page which gives certain content items a z-index setting. The problem is corrected in Firefox by adding a higher z-index to the submenu uls. However, this does not work in IE. If someone could take a look and suggest a fix, I'd be very appreciative. Page in question: http://www2.usarice.com/~usarice/index.php?option=com_phocagalleryview=categoriesItemid=190 Site still under development with plenty left to do. :) Thanks, Denise __ 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] Expand containers etc
I'm a relative newbie to the finer art of using style sheets. I am currently converting look and feel for our website. I am having a couple of issues that I would love some assistance with. URLs to see what I've done are: http://www.medsimulation.com/example/HomePageTemplate.asp http://www.medsimulation.com/example/InteriorPageTemplate.asp Issues: General Note: All of out content and menu and navigation is generated dynamically - it can and does change from page to page so we do not have a pre-determined height. I am using XHTML strict and CSS 2. 1. I have a container called contentContainer (contained within bodyContainer). Within this container are navigation container (left) and content container (right). I want these to expand to the same height depending on the greatest height. For example, in InteriorPageTemplate, my content container (Lorem .) is greater than my navigation container (Recent News title). I want my navigation to expand to the same height as the content. In HomePageTemplate, my navigation container (Solutions title) is greater than my content container (Lorem ...). I want the content to expand to the same height as my navigation. I can use javascript to calculate the largest height and set the height on the other but wondered what is the better way to do it; can I do it based on css; etc. 2. When I display the page in IE 7, all the elements appear where they should. However, when displayed in Firefox or Safari (windows), it is like the contentContainer has become disembodied from the bodyContainer. I noticed that when I look at the layout of contentContainer (in Firebug) it has a 0 (zero) height and changing this height fixes the issue but we do not have fixed height (see General Note above). What have I done wrong - why isn't it determining its height from the elements that are contained with in it? I've tried things like height: auto. 3. The navigation container on the InteriorPageTemplate consists of top and bottom elements. When I display the page in IE 7, the bottom part of the navigation appears correctly. However, in FF and Safari, the left hand image appears above the right hand image. Wondering why... Thanks for help in advance. Denise Flinchbaugh Office: (303) 483-2861 MSC Support: (866) 246-8057 / (303) 483-3937 www.medsimulation.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Expand containers etc
I'm a relative newbie to the finer art of using style sheets. I am currently converting look and feel for our website. I am having a couple of issues that I would love some assistance with. URLs to see what I've done are: http://www.medsimulation.com/example/HomePageTemplate.asp http://www.medsimulation.com/example/InteriorPageTemplate.asp Issues: General Note: All of out content and menu and navigation is generated dynamically - it can and does change from page to page so we do not have a pre-determined height. I am using XHTML strict and CSS 2. 1. I have a container called contentContainer (contained within bodyContainer). Within this container are navigation container (left) and content container (right). I want these to expand to the same height depending on the greatest height. For example, in InteriorPageTemplate, my content container (Lorem .) is greater than my navigation container (Recent News title). I want my navigation to expand to the same height as the content. In HomePageTemplate, my navigation container (Solutions title) is greater than my content container (Lorem ...). I want the content to expand to the same height as my navigation. I can use javascript to calculate the largest height and set the height on the other but wondered what is the better way to do it; can I do it based on css; etc. 2. When I display the page in IE 7, all the elements appear where they should. However, when displayed in Firefox or Safari (windows), it is like the contentContainer has become disembodied from the bodyContainer. I noticed that when I look at the layout of contentContainer (in Firebug) it has a 0 (zero) height and changing this height fixes the issue but we do not have fixed height (see General Note above). What have I done wrong - why isn't it determining its height from the elements that are contained with in it? I've tried things like height: auto. 3. The navigation container on the InteriorPageTemplate consists of top and bottom elements. When I display the page in IE 7, the bottom part of the navigation appears correctly. However, in FF and Safari, the left hand image appears above the right hand image. Wondering why... Thanks for help in advance. Denise Flinchbaugh __ 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] Aural Style Sheets
Probably even more off-topic than a discussion of browsers: a screen reader isn't a browser at all. Of course, I never intended for this to be a discussion of various screen readers, but of whether creating aural cascading style sheets (ACSS) held value for those who use screen readers. As a few have pointed out, when ACSS are created by a sighted person with no experience in using screen readers, one could make the browser experience more frustrating rather than less. I've read that the downloadable free trial of JAWS is applicable for 40 minutes. After that time you must reboot your computer and then can run the program again. This apparently can be done repeatedly. This product can be found here: http://www.freedomscientific.com/fs_products/software_jaws.asp For the moment I'll be focusing on following the W3C guidelines as much as possible with a primary focus on adding keyboard accessibility, skip navigation links, etc. For those who are interested, I found the following site to have the most complete information on making your pages accessible: http://www.webaim.org/. Thanks to all for your feedback, Denise __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Aural Style Sheets
Good day list, I am preparing to begin work for a client whose site must meet Bobby compliance, particularly to accommodate their blind visitors. Along with digesting the W3C accessibility guidelines, I've discovered Aural Cascading Style Sheets (ACSS). From the handful of more recent articles I found on this subject, it appears that it still is not well-supported in speech readers. I would appreciate any advice (and links) from those of you familiar with designing for this audience. Additionally, recommendations for commonly used speech reader browsers that I could download for testing the site would be great (i.e., Emacspeak). Thanks, Denise __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] csshover.htc not working in IE6
I have a dropdown menu that is functioning fine now in IE7 but not at all in
IE6. Can someone assist me in getting this fixed? (It is for an intranet
site, so I don't need to worry about other browsers like Safari or Opera,
etc.)
Page can be viewed at: http://www.unicornhosting.com/ncc/index.php
Relevant CSS:
#menu {
margin:10px auto;
padding-left:20px;
}
#menu ul {list-style-type:none; margin:0; padding:0;}
#menu li {
display:block;
padding:0px 13px;
}
#menu li a:hover {text-decoration:none;}
#menu ul.outer li {
background:url(../images/menu_mid.gif) repeat-x;
height:50px;
float:left;
}
#menu ul.outer li a {color:#fff; display:block; margin-top:15px;
text-transform:lowercase; font-size:16px;}
#menu ul.outer li a:hover {color:#363636;}
#menu ul.inner {
position: absolute;
margin-top:10px;
display:none;
}
#menu ul li:hover ul {display:block;}
#menu ul.inner li {
position:relative;
background:#3E6A93;
height:20px;
width:140px;
border-bottom:1px solid #529AA7;
float:none;
text-align:left;
padding-left:5px;
}
#menu ul.inner li a {margin-top:0; text-transform:none; font-size:14px;
font-weight:normal;}
#menu ul.inner li:hover {background-color:#529AA7;}
#menu ul.outer li.left {background:url(../images/menu_lt.gif) no-repeat top
left; width:20px; padding:0;}
#menu ul.outer li.right{background:url(../images/menu_rt.gif) no-repeat top
right; width:20px; padding:0;}
Thanks,
Denise
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] List menu - gap in IE
Can someone point me in the right direction for closing the gap that appears
in the dropdown LIs when viewed in IE?
Page can be viewed at: http://www.unicornhosting.com/ncc/index.php
Relevant CSS:
#menu {
margin:10px auto;
padding-left:20px;
}
#menu ul {list-style-type:none; margin:0; padding:0;}
#menu li {
display:block;
padding:0px 13px;
/* width:95px; */
}
#menu li a:hover {text-decoration:none;}
#menu ul.outer li {
background:url(../images/menu_mid.gif) repeat-x;
height:50px;
float:left;
/* text-align:center; */
}
#menu ul.outer li a {color:#fff; display:block; margin-top:15px;
text-transform:lowercase; font-size:16px;}
#menu ul.outer li a:hover {color:#363636;}
#menu ul.inner {
position: absolute;
margin-top:10px;
display:none;
}
#menu ul li:hover ul {display:block;}
#menu ul.inner li {
position:relative;
background:#3E6A93;
height:auto;
/* width:60px; */
border-bottom:1px solid #529AA7;
float:none;
text-align:left;
padding-left:5px;
}
#menu ul.inner li a {margin-top:0; text-transform:none; font-size:14px;
font-weight:normal;}
#menu ul.inner li:hover {background-color:#529AA7;}
#menu ul.outer li.left {background:url(../images/menu_lt.gif) no-repeat top
left; width:20px; padding:0;}
#menu ul.outer li.right{background:url(../images/menu_rt.gif) no-repeat top
right; width:20px; padding:0;}
Thanks,
Denise
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Centering an inline list?
I am using ul and li to create a horizontal navigation menu in the
header area and would like the links to appear in the center of the
enclosing div. Currently they align to the left.
Relevant markup is as follows:
#mdmenu {
width:800px;
height:30px;
margin:5px auto 20px auto;
background:url(../images/menu.gif) repeat-x;
border:1px solid #e0e0e0;
}
#mdmenu ul {list-style:none; margin:0px auto;}
#mdmenu li {
display:block;
text-align:center;
padding:5px 10px;
float:left;
}
#mdmenu li a { color:#7F7F7F; font-size:12px; }
An example can be viewed at:
http://www.unicornhosting.com/md1076/index.php?theme=passman
Thanks,
Denise
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering an inline list?
Excellent! That did the trick. Thank you.
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Behalf Of cj
Sent: Thursday, August 03, 2006 1:13 PM
To: Denise
Cc: css-d
Subject: Re: [css-d] Centering an inline list?
the reason it's not centering with the (correct for what you're trying
to do) margins you have is because the ul is 100% width. if firefox
actually had inline-block, you could set the display to that and be
done, but alas... :'(
to be cross-browser, try something like
#mdmenu ul {list-style:none; margin:0px auto;width: 40em;}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Gap In IE
Try removing the whitespace between the closing /ul and /div and possibly also the space between that closing /div and the next div. IE is very sensitive to whitespace. Denise __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Final link not working in IE
This problem is only occuring where there is a link as the last item in a div. In IE, the link is not correctly recognized as a link at all; it is simply shown as text (although with the correct coloring as if it were a link). If I add 2 br /'s after the link, the IE renders the link correctly. I am using one of the fixed footer methods that I found on the wiki and don't know if this may be contributing to the problem. Can someone give me a clue as to the real CSS problem that is preventing IE from dealing with the link correctly? (I'd rather not have to check all 200+ pages on the site again!) A sample page can be found at http://www.pepperlaw.com/pracarea/doverid/id_speaking.cfm. It is a live site. Notice the link that begins Return to Kitzmiller v. ... The footer links work fine. CSS file is http://www.pepperlaw.com/style_new.css. Thanks, Denise __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] image suckerfish
Hi,
I am having a problem with a suckerfish dropdown I am trying to place into a
website. It looks fine in IE 6+, but it is doing a weird tiered thing in
firefox.
http://www.hawksheadlinks.com/index-drp2.html
The menu area dropdown css is:
.menuhor {
background-color: #840431;
width: 536px;
position: relative;
}
.menuhorz {
color: #CC9900;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 0px 0px 0px 18px;
font-size: 12px;
font-weight: bold;
text-align: center;
background-color: #840431;
}
.menuhorz img {
padding: 4px 0px 4px 0px;
float: left;
}
ul {
padding: 0;
margin: 0;
list-style: none;
display: inline;
width: 150px;
}
ul li {
position: relative;
width: 150px;
}
li ul {
position: absolute;
top: 34px;
left: 0px;
display: none;
padding: 0px 0px 4px 4px;
}
ul li a {
display: block;
text-decoration: none;
color: #CC9900;
font-weight: bold;
padding: 5px;
background-color: #840431;
text-align: left;
}
ul li a:visited {
display: block;
text-decoration: none;
color: #CC9900;
font-weight: bold;
padding: 5px;
background-color: #840431;
text-align: left;
}
ul li a:hover {
display: block;
text-decoration: none;
color: #EE;
font-weight: bold;
padding: 5px;
background-color: #840431;
text-align: left;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul {
display: block; }
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
.dot {
width: 20px;
background-color: #840431;
padding: 4px 0px 4px 0px;
display: block;
}
Can anybody help?
Thanks,
Denise
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Hyphens in class names
First post to the list ... I've been pulling my hair out trying to get a simple div of menu links to center on a page using class=Adm-Menu. On a lark, I removed the hyphen from the name and poof all was well. I found it odd that a hyphenated class name applied to h1 worked fine, but not for a hyphenated name on a div. While I think it's easier to just avoid hyphens, the team I'm developing with is using them extensively in CSS naming conventions. Does anyone have a resource for which elements are adversely affected by hyphens in the name. Does this apply to id's also? Thanks in advance, Denise __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Hyphens in class names
Thanks. It may have more to do with the template engine for this CMS. I
hadn't had issues with hyphens before, but thought I ought to check here.
Denise
-Original Message-
From: cj [mailto:[EMAIL PROTECTED]
Sent: Friday, June 16, 2006 3:18 PM
To: Denise
Cc: css-d
Subject: Re: [css-d] Hyphens in class names
i use hyphens all the time in my css, for headers and divs as well as
everything else. just to make sure i'm not blowing steam, i made a
tiny little test page with a class of test-hyphen on an h1 and a
div and both worked fine in ff/ie/op.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=content-type content=text/html; charset=utf-8 /
style type=text/css
.test-hyphen {
color: blue;
}
/style
/head
body
h1 class=test-hypheni should be blue/h1
div class=test-hyphen
i should be blue too
/div
/body
/html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Positioning in Opera
Hello, I was trying to be tricky and I created a site with both a border, then an image of a line that faded from the border color to black over it for illusion sake. I absolutely positioned the line over the part of the border I wanted to fade out. It works in IE, Firefox, but it is off a few pixels in Opera. www.amongthievesmovie.com Anybody know why? Thanks, Denise __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] widths - ie 6, 5.5, 5.0
I hope this has not been covered over an over, but I want to know about the width discrepancy I am encountering in different versions of IE. Why is 600px wide more narrow in 5.0 than it is in 6.0? Thanks for the help or direction to a source of info, Denise __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Content not allowd in prolog validation error
Quoting Prabhath Sirisena [EMAIL PROTECTED]: What could the reason be for this error? (I/O Error. Stream closed). The site is: http://nidahas.com Try validating the CSS. The content is served as application/xhtml+xml. Thanks, Prabhath http://nidahas.com I/O Error: Stream closed. Looks like the validator has started chocking on CSS. The CSS validator is in good health. Prabhath http://nidahas.com Best, David Laakso -- http://www.dlaakso.com/ I am not getting the same validation errors when I used the W3C HTML validator and its CSS validator. The page validates as XHTML 1.0 Strict. The CSS came back with the following errors and warnings: Errors URI : http://nidahas.com/wp-content/themes/nidahas/style.css * Line: 23 Context : body Parse Error - ;*/ text-align: center; * Line: 28 Context : h2 , h3 Parse Error - : #333; background: url(images/nidahas_bk.png) #FFF no-repeat 50% 0; } h1 Warnings URI : http://nidahas.com/wp-content/themes/nidahas/style.css * Line : 82 Property cursor doesn't exist for media * Line : 82 help might not be supported by the medium atsc-tv Hope this helps. DeniseC __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Make it Stop!
Hello, Okay, how do I make a div id=anything/div stop??? I have 4 floated images inside the div, I have given it a white-space:nowrap; and the images still drop down when the window is compressed in IE (they overlap each other in firefox). Is there a trick??? Thanks, Denise __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
