Re: [css-d] works in IE but not mozilla or netscape
Melinda Odom wrote:
Can someone tell me why I see the graphic color that is in the left
menu in IE but not in mozilla or netscape:
http://www.designhosting.biz/neill/test.html
Standard compliant browsers need the right property/value from the
specs[1] to make them expand #container. IE expand it because IE/win has
a bug[2] - mis-interpreting some property/values that should not have
such an effect on rendering.
I suggest this addition for standard compliant browsers...
#container {display: table;}
...which will make them do what you wish - according to CSS specs.
regards
Georg
[1]http://www.w3.org/TR/CSS21/visuren.html#q15
[2]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
__
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] declarations and embedded items
I have this.
div id=header
div id=holder
ul id=mylist
li item 1/li
li item2/li
ul
/div
/div
what is the correct way to change the ul properties without effecting other
properties.
#header #holder #nav {
}
#header #holder #nav.ul {
}
#nav.ul {
}
#nav ul {
}
and what (if any). Is the difference between #nav.li and #nav li ?
thanks,
R.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari not piccking up a style
Ross Hulford wrote: I posted a question about this a while back. Safari ignores form styles and displays them in a standard macintosh format. Ross You'll probably be wanting javascript to modify standard form elements. __ 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] declarations and embedded items
On 27/10/06, Ross Hulford [EMAIL PROTECTED] wrote:
I have this.
div id=header
div id=holder
ul id=mylist
li item 1/li
li item2/li
ul
/div
/div
what is the correct way to change the ul properties without effecting
other properties.
#header #holder #nav {
}
#header #holder #nav.ul {
}
#nav.ul {
}
#nav ul {
}
and what (if any). Is the difference between #nav.li and #nav li ?
thanks,
R.
An ID is unique, so adding #header and #holder before #nav (though you have
set the id as #mylist) is more specific, but redundant. I'm not sure what
you mean about not affecting other properties, but doing #nav { } or ul#nav
(assuming the ul's id is nav) is fine.
#nav ul will not work because that is saying the ul which is a descendant
of the element with id 'nav' .
#nav.li specifies an element with the id nav and the class li (it
doesn't point to a li element)
#nav li specifies the li children of an element with the id nav (which
would normally be a ul)
Hope this helps,
Rafael
__
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] declarations and embedded items
Ross Hulford wrote:
I have this.
div id=header
div id=holder
ul id=mylist
li item 1/li
li item2/li
ul
/div
/div
what is the correct way to change the ul properties without effecting other
properties.
Change the properties for #mylist. You've tied that ID to your ul.
#nav.ul {
}
#nav ul {
}
and what (if any). Is the difference between #nav.li and #nav li ?
Consult the Selectoracle? I know that the second one selects all UL
inside the container with the ID of #nav. I don't know what the first
would select.
--
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
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] Why is only FF giving me a 1px gap?
This site is exhibiting what seems (to me) to be areally strange problem. FF is inserting what looks like a 1px gap between the #content-wrapper and the #footer. But here's the really strange bit - it only affects two of the pages even though the same sheet is styling all of them. The URL is www.joansironingservice.co.uk The affected pages are: www.joansironingservice.co.uk/prices.html www.joansironingservice.co.uk/customers.html The HTML validates. Any ideas? __ 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] declarations and embedded items
On Oct 27, 2006, at 3:17 AM, Ross Hulford wrote:
what is the correct way to change the ul properties without
effecting other properties.
I'll assume you meant to use the id nav instead of mylist on the
ul. Most of what you have here will do it, but it depends on other
circumstances. Follow:
#header #holder #nav {
}
This would apply the styles only to the element with the id of nav
when that element occurs inside an element with the id of holder
which in turn occurs inside an element with the id of header. If
this were an external file for a complex site, for example, it would
only apply to those pages where nav was inside header and holder, and
would not affect the style of nav elements in pages where that
particular bit of nesting doesn't occur.
#header #holder #nav.ul {
}
This would apply like the above, but also only when the nav element
had the class ul applied to it. I suspect you were looking for:
#header #holder ul#nav
which would also work like the top line, except the nav element in
question would also have to be the unordered list tag. It would not
apply, for example, to a paragraph tag inside header and holder.
#nav.ul {
}
This would apply to any element with the id nav and the class ul,
Again I suspect you wanted
ul#nav
which would apply to any unordered list with the nav id.
#nav ul {
}
This would affect any and every unordered list which was inside any
element with a nav id.
and what (if any). Is the difference between #nav.li and #nav li ?
#nav.li affects any element with the id nav and the class li.
#nav li affects any list item inside an element with the nav id.
You know, for questions like this, the place to go is the selectORacle:
http://gallery.theopalgroup.com/selectoracle/
which, for example, answers your last question with:
Selector 1: *#nav.li
Selects any element with an id attribute that equals nav and a class
attribute that contains the word li.
Selector 2: *#nav li
Selects any li element that is a descendant of any element with an id
attribute that equals nav.
Have Fun,
Arlen
--
In God we trust, all others must supply data
__
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] declarations and embedded items
It's a question of something called specificity, which only comes into play when you have a lot of classes, ids and elements within them. In your case, if this is all the html, just use the basic selector as you only have one list. Here's a good explanation: http://www.htmldog.com/guides/cssadvanced/specificity/ __ 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] IE6 and 7 vs Firefox and absolute poisitoning error
Hi, I have a header div #header is relatively positioned. Inside this is an absolutely positioned #menu_holder div that holds a suckerfish menu. The problem i when I use top:80px; on the menu holder it is perfect in both IE version and too low in FF. when I change it to 60px FF is the one that is perfect The thing that seems may difference is the way they react to a searchbox in the header... table width=198 border=0 style=position:absolute; top:0px; right:0px; tr td height=27div align=leftsearch this site for /div/td tdnbsp;/td /tr tr td width=149div align=right input name= type=text / /div/td td width=33input name=GO type=button value=GO //td /tr /table I have taken this out altogther and nothing moves so maybe not! Is there an absolute issue with FF or IE? Ross __ 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] Background Colors in IE 6 vs. FF 1.5
Rahul Gonsalves wrote: Well Mike, if you're clearing multiple elements, it might be easier to do with just a couple of lines of CSS, rather than updating the HTML all over the place. Right. This is why I never use the old-school clearing div method any more. I very quickly get these extra divs all over the place, that can very easily be inadvertently be removed by non-tech people editing my pages in DW or Contribute. The other way to do float clearing is to specify overflow: hidden, and a hasLayout trigger of your choice. http://www.quirksmode.org/css/clearing.html I would like to hear from people with more experience about whether this is a less than optimal way of doing things? I sometimes have problems with setting overflow. Sometimes it causes scrollbars to appear in IE or older versions of Netscape. Other times I can't use it because I don't want to establish a block formatting context. But most of the time, it works. I either use overflow or I use the Easy Clearing method. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] clearing a table
Ross Hulford wrote: I have some text above and below a table but the bottom text wraps around the table. How to I clear the table on both ends in the cleanest way possible- not clearing div or wapping the text in tags. It sounds like you want to add a clear to the text below the table, not to the table itself. But we need to see a page to be able to help you. Please send the list a URL. Thanks, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] suckerfish and using li's
Ross Hulford wrote:
Hi I am using the suckerfish with things like
li a:hover{
text-decoration:none;
color:#ACD9F4;
}
li ul {
display: none;
position: absolute;
top: 1.3em;
width:2em;
left: 16px;
}
but I want to use li's later on in the page and but when I try nd use them
they inherit some of these properties is there a way to ignore all
inheritance. When I try and define them specifically
#mydiv li {
color:blue;
}
i works but it inherits all the other values and places the li half way dwon
the page. I initially did define all the suckerfish values with #header
before them as they are in the header but changed it.
Why? I say change it back. :-) Give the list that forms the drop-down
menu an id of #nav or something and use descendant selectors starting
with this id to target just that one list.
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
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] Vertical menu not displaying in Safari
I apologize because I'm reading this in digest. But have you corrected this issue? I looked at it in 2.0.4 (419.3) and I think it looks really good. Bill __ 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] Background Colors in IE 6 vs. FF 1.5
On Oct 27, 2006, at 12:50 PM, Rahul Gonsalves wrote: The other way to do float clearing is to specify overflow: hidden, and a hasLayout trigger of your choice. http://www.quirksmode.org/css/clearing.html I would like to hear from people with more experience about whether this is a less than optimal way of doing things? It is a technique to contain floats - one of them. It has some problems, eventually: overflow:hidden can crop content and render it inaccessible to the user. You may have a larger data table in there that fits nicely at your font-size, but the user (the user is always wrong, right ?) decides that your chosen font-size is really to small and zooms in a bit. The table might not fit anymore, but is cropped by the overflow:hidden. Liquid designs are more sensitive to this problem, obviously. Other possibilities to contain floats: display:table or display:table- cell, 'hasLayout' triggers in IE windows. I do like the 'easy clearing' method, though. Easy to maintain, can be reused all over the site, pretty stable. I have a class near the top of my stylesheet, well documented for the maintainer, and that is it. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS table display for IE
Amy M Ostrom wrote: I am having the darndest time getting my image and text to sit next to each other. I finally just used the display:table and display:table-cell and have it working beautifully in Firefox, but of course these are not available in IE. Does anyone know a good fix for this? I will send a link, but please disregard the rest of the site outside the booklist box please (unless you think that is what is screwing with my booklist layout!). I really appreciate the help! http://www.jocolibrary.org/files2/test/teens2/careers/wages/ Amy, IE7 still doesn't support display: table, and there's no way you can force it to. All you can do is use totally different CSS to simulate the same effect. The effect that you appear to be going for is something I can teaser thumbnail lists, and I've written a number of articles about it (none of which use display: table). The first one is here: http://www.communitymx.com/abstract.cfm?cid=97480 Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] Why is only FF giving me a 1px gap?
i only took a quick look, but deleting the h2 declaration fixed the 1px gap for ff 1.5 on the prices page, and deleting the h1, h2, h3, and p declarations fixed the gap on the customer page. as to why or if it matters, i have no idea. i only took a quick peek. __ 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] FF1.5 slippage issue
I've got a strange problem in FF1.5 that I have trouble reproducing but it's definitely there. If you go to http://www.orchidsuites.net and click around to subpages you might hit a page where the main content area has slipped far down the page ... if this happens and you wait or refresh it will correct itself. It is as if there is a problem in one stylesheet and it gets corrected in another but there doesn't seem to be anything that clearly points that direction. Any thoughts? Tanya __ 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] Why is only FF giving me a 1px gap?
James Ward wrote:
FF is inserting what looks like a 1px gap between the
#content-wrapper and the #footer.
But here's the really strange bit - it only affects two of the pages
even though the same sheet is styling all of them.
The URL is www.joansironingservice.co.uk
The affected pages are:
www.joansironingservice.co.uk/prices.html
www.joansironingservice.co.uk/customers.html
The gap _may_ affect _any_ page on that site, and most sites on the web.
The whole thing is Mozilla's overprecise, high-resolution targeting,
calculations that sometimes happen to hit the wrong number of
screen-pixel on a low-resolution - but quite normal - screen.
More precisely: it is caused by non-pixel unit's deviation from exact
pixel-values - resulting in fractions when added up. The exact height of
containers - #content-wrapper in your case - doesn't add up exactly to
the last pixel, and you may get a gap since the following container -
#footer - does start at the correct (or full) pixel.
Declared font-size and applied font-resizing at the user-end is of
course also affecting the result.
There no perfect cure for it (other than to declare dimensions in
pixels, maybe, and that's not an option in most cases and certainly not
in yours.
The only _working_ solution is to create an overlap between
#content-wrapper and #footer, so the visible gap can't appear.
So, either...
#content-wrapper {margin-bottom: -1px;}
...or...
#footer {margin-top: -1px;}
...is enough to cover the gap.
Such a workaround must of course be in the global stylesheet - affecting
all pages, as it is easy to make the gap appear in Firefox in every
single one of them, simply by applying a bit of font-resizing at the
user-end.
regards
Georg
--
http://www.gunlaug.no
__
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] Background image not showing
Thanks for the pointer to the validating page francky- I added the closing div
but the problem continues with background image not being shown(except in
Internet Explorer and windows OS) Does anyone know why this is happening and
what I can do to make the background image show?
#navbar { Z-INDEX: 10; CLEAR: both; BACKGROUND: url(navtile.gif)
repeat-x left top; MARGIN: 0px; WIDTH: 760px; POSITION: relative
}
The link to the page is www.villa-corti.com/menus.htm
Here is a copy of the code:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd;
HEAD
TITLEExample/TITLE
STYLE type=text/css
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN:
0px; FONT: 11px Verdana; PADDING-TOP: 0px
}
#navimagel {
width:85px;
height:115px;
z-index:5;
float: left;
left: 13px;
top: 0px;
}
#navimager {
Z-INDEX: 9; LEFT: 250px; FLOAT: left; WIDTH: 186px; POSITION:
relative; TOP: 0px; HEIGHT: 90px
}
#logo {
Z-INDEX: 3; LEFT: 100px; FLOAT: left; WIDTH: 238px; POSITION:
relative; TOP: 46px; HEIGHT: 73px
}
#tabsH {
z-index: 6; FONT-SIZE: 93%; BACKGROUND: #fff; FLOAT: left; WIDTH:
100%; TOP: 160px; LINE-HEIGHT: normal
}
#tabsH UL {
PADDING-RIGHT: 10px; PADDING-LEFT: 94px; PADDING-BOTTOM: 0px; MARGIN:
0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none
}
#tabsH LI {
PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#tabsH A {
PADDING-RIGHT: 0px; PADDING-LEFT: 4px; BACKGROUND: url(tableftH.gif)
no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px;
PADDING-TOP: 0px; TEXT-DECORATION: none
}
#tabsH A SPAN {
PADDING-RIGHT: 15px; DISPLAY: block; PADDING-LEFT: 6px; BACKGROUND:
url(tabrightH.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 4px;
COLOR: #fff; PADDING-TOP: 5px
}
#tabsH A SPAN {
FLOAT: none
}
#tabsH A:hover SPAN {
COLOR: #fff
}
#tabsH A:hover {
BACKGROUND-POSITION: 0% -42px
}
#tabsH A:hover SPAN {
BACKGROUND-POSITION: 100% -42px
}
/* large navigation */
#navbar { Z-INDEX: 10; CLEAR: both; BACKGROUND: url(navtile.gif)
repeat-x left top; MARGIN: 0px; WIDTH: 760px; POSITION: relative
}
#navbar UL {
PADDING-LEFT: 1em; MARGIN: 0px; LIST-STYLE-TYPE: none
}
#navbar LI {
PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#navbar A:link {
BORDER-RIGHT: #c63 1px solid; PADDING-RIGHT: 6px; PADDING-LEFT: 6px;
FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 5px; COLOR: #ccc;
LINE-HEIGHT: 12px; PADDING-TOP: 5px; WHITE-SPACE: nowrap; TEXT-DECORATION: none
}
#navbar A:visited {
BORDER-RIGHT: #c63 1px solid; PADDING-RIGHT: 6px; PADDING-LEFT: 6px;
FONT-SIZE: 1.1em; FLOAT: left; PADDING-BOTTOM: 5px; COLOR: #fff;
LINE-HEIGHT: 10px; PADDING-TOP: 5px; WHITE-SPACE: nowrap; TEXT-DECORATION:
none
}
#navbar A.active:link {
TEXT-DECORATION: underline
}
#navbar A.active:visited {
TEXT-DECORATION: underline
}
#navbar A:hover {
TEXT-DECORATION: underline
}
#navimagel img,#navimager img {
margin-bottom: -100px;
position: relative;
}
/* layout */
#rightcolumn {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FLOAT: right; PADDING-BOTTOM:
10px; WIDTH: 155px; PADDING-TOP: 0px; TEXT-ALIGN: center;
position:absolute;
height:215px;
z-index:7;
left: 372px;
}
#maincontent {
position:absolute;
width:350px;
height:215px;
z-index:7;
left: 10px;
top: 250px;
}
#testimonials {
position:absolute;
width:350px;
height:73px;
z-index:3;
left: 10px;
top: 400px;
}
#points {
position:absolute;
width:178px;
height:73px;
z-index:3;
left: 350px;
top: 420px;
}
#points2 {
position:absolute;
width:138px;
height:73px;
z-index:3;
left: 550px;
top: 420px;
}
/STYLE
/HEAD
BODY
DIV id=navimagelIMG alt=lodgeadog src=images/lake3.jpg/DIV
DIV id=logoIMG alt=lodgeadog src=images/lodgeadog.jpg/DIV
DIV id=navimagerIMG alt=lodgeadog src=images/dog1.jpg/DIV
DIV id=tabsH
UL
LIA title=home
href=menus.cfmSPANhome/SPAN/A
LIA title=register
href=register.cfmSPANregister/SPAN/A
LIA title= href=SPANa aa/SPAN/A
LIA title=Longer Link Text href=SPANa aa aaa
a/SPAN/A
LIA title=Link 5 href=SPANabout us/SPAN/A
/LI/UL/DIV
DIV id=navbar
UL
LIA href=Search/A
LIA href=Insurance/A
LIA href=McKeef Foundation/A
LIA href=Dog Carers/A
LIA href=Shop/A
LIA href=Register/A
LIA href=Dog Mating/A
LIA href=Advertise/A
/LI/UL/DIV
/BODY/HTML
francky [EMAIL PROTECTED] wrote:
ed gooddy wrote:
Hi David and all,
OK hereis the link: http://www.villa-corti.com/menus.htm
Here are the problems:
With the following browsers and OSs the background image in the
navbar div doesn´t show-why oh why?! Thanks for any pointers:
[...]
(big ul)
[...]
Other problems with comments:
[...]
(small ul)
And here is the code:
[...]
Thank-you all for any help in my all div mission!!
Hi Ed,
First I did the security check: valid css and valid html?
Re: [css-d] [ADMIN - OFF TOPIC] Re: IE7 release
On 10/26/06, Mark J. Reed [EMAIL PROTECTED] wrote: On 10/26/06, Chris Ovenden [EMAIL PROTECTED] wrote: This is incorrect. It used to be true of other IE versions, but this time around Microsoft have provided a way to roll back the installation to IE6, using the Add/Remove Programs control panel. The functionality is there, but have you tested it? I admittedly haven't tried with the official IE7 release, but when I tried to roll back from the last release candidate it left me with no functioning IE at all. Deskside tech support wasn't able to get it working and we wound up reinstalling Windows. So you might be able to roll back, and if it really works, that's great - but I'm still sticking with the standalone installs. Fair point, and sorry to hear of your troubles. I successfully rolled back the beta a couple of times - haven't actually tried the final release, but I'm not worried that it won't roll back. When I installed, it automatically uninstalled the RC1 version which was on there at the time - which is the correct behaviour. It has to do this so that rolling back the final release results in IE6 not whichever test version. PITA though, as it rebooted my machine twice. If it hadn't done that, though, I would be worried. I didn't know there were standalone versions of IE7. I have to say, I have already started to see IE6 as a browser on which sites may degrade gracefully. -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] [ADMIN - OFF TOPIC] Re: IE7 release
I didn't know there were standalone versions of IE7. There probably are, but that's not what I meant. I was referring to using standalone versions of IE6, as opposed to trying to roll back to it. -- Mark J. Reed [EMAIL PROTECTED] __ 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] [ADMIN - OFF TOPIC] Re: IE7 release
On 10/27/06, Mark J. Reed [EMAIL PROTECTED] wrote: I didn't know there were standalone versions of IE7. There probably are, but that's not what I meant. I was referring to using standalone versions of IE6, as opposed to trying to roll back to it. Sorry I misunderstod. I thought you meant you were sticking with IE6. I too am happy to use a slightly defective version of IE6 for testing purposes. -- Chris Ovenden http://thepeer.blogspot.com Imagine all the people / Sharing all the world __ 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] Stretch Div to Bottom of Browser Window
Sample page from site in question (still in development - ignore obvious goofs!): http://208.112.27.110/index.cfm?action=cmf.about There's a repeating background image that starts right at the banner. This background-container div ends after the footer div at the bottom. I've been monking with this for some time now, but how can I force the background-container div to full browser window height so that the background image goes to the bottom of the page? There are several other divs that the background-container div is contained in. If they'd stretch to the bottom, the background-container div would seem to follow suite. Setting any of these to: height: 100%; min-height: 100%; has no effect. Ideas? __ 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] Background image not showing
ed gooddy wrote:
Thanks for the pointer to the validating page francky- I added the
closing div but the problem continues with background image not being
shown(except in Internet Explorer and windows OS) Does anyone know why
this is happening and what I can do to make the background image show?
#navbar { Z-INDEX: 10; CLEAR: both; BACKGROUND: url(navtile.gif) repeat-
x left top; MARGIN: 0px; WIDTH: 760px; POSITION: relative }
The link to the page is www.villa-corti.com/menus.htm
(code snipped)
Hi Ed,
Try adding overflow: auto to these #navbar declarations.
Works in Opera (view and edit source; reload from cache).
Cordially,
David
--
www.hucklesby.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] :hover in IE7
Anneke Wiering wrote:
I had a nice little layout thingy working in FF and - thanks to
csshover.htc - IE 6 (and 5 and 5.5). Then IE7 came along ...
What it should do (and does in FF and IE6) is change the z-index of a
layer in the page on hovering over the tabs and in this way display
different content per tab.
HTML expample (CSS included) can be found here:
http://www.xs4all.nl/~awiering/rest/hover/index.htm
It's not working in IE7.
According to the CSS 2.1 specifications that's perfectly OK: CSS 2.1
doesn't define if the parent of an element that is ':active' or ':hover'
is also in that state. (section 5.11.3)
My tabs are h4 inside a div. So in IE7 these divs (the parents) do not get
into the :hover state when the (child) h4 is :hover. In FF and
IE6-with-csshover.htc the divs do get into the :hover state.
A solution to get this working in IE7 would be to change the HTML coding
(put a class around the content-minus-tab) but I'd prefer a CSS solution.
Anybody any ideas?
give IE something to do on hover
#one:hover, #two:hover, #three:hover, #four:hover {
z-index: 4;
background-position: 0 0; /* Add */
}
Ingo
--
http://www.satzansatz.de/css.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] Two annoying problems with IE6 preview... unwanted characters etc.
David, Wow, thanks for that link. I will test the idea later. That is GREAT reading. I tried everything to remove these duplicated characters. Very frustrating and I would never have thought of this duplicate character bug in IE. Just when you thought you have seen every crazy thing that IE can do you stumble across another doozy! Max Maxwell Balmain wrote: I am working on a gallery site. All seems well in FF, Opera, Safari etc. However in IE6 there is some strange letter repetition happening with one of the footer text boxes. The letters ed show up below the rightfooter at the following URL:www.maxwellbalmain.com These letters will show when the text view in IE6 is set to normal. It may be the ie 'duplicate character' bug. Among the /sometimes/ fix is deleting comments within the markup. This http://www.positioniseverything.net/explorer/dup-characters.html is a very comprehensive article that deals with the cause and method of solution. Also my navigation is hanging too low and to the left in IE6 IE5 for the Mac. All other browsers render the page well (seemingly)... Sorry, can't help with the mac issue. Max Regards, ~dL __ 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] Odd float problem
I'm hoping that someone can help with the way I have to explain this. I can't post links to URLs with the issue, since I work for a government organization where the pages are protected. Sorry for the inconvenience. I have a div that contains several other divs which are floated left (the outer div has no float property, it is just a container.) Effective width of the container div is variable depending on browser window. Floated divs are 220px wide. Content in the floated divs varies, so heights vary. When the number of floated divs total width exceeds the width of the container div, they should wrap and start stacking floated left again. HOWEVER, that doesn't always happen. Say I have 6 floted divs - float1, float2, etc. 4 of these can fit across the page width before wrapping, so one would assume float5 and float6 would still be stacked to the left of the page. But that isn't what happens all the time. If float2 has content that makes it's height greater than float1, float5 and float6 are placed under float3 and float4, as if they don't want to interfere with the differing heights of float1 and float2. I hope I've explained this well. If no one can help in this way I may try and post an example later (can't do that until I get home, though. Stupid government regulations!) Thanks, Andrew __ 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] Apply hover effect to a element which is not the element itself or a descendant of the element
I've created a list with list items that have a heigth of 100px.
Inside the list items are links a which have a height of 30px.
If I hover over the list items a nested list appears.
What I would like to happen is that the nested list only appears if I hover
over the link area (30px).
I'm afraid this is not possible via CSS, because I think a hover effect can
only occur on the element itself or a descendant element. Correct me if I'm
wrong.
Part of the CSS file:
ul.level1 li:hover ul.level2 {
display: block;
background: silver;
}
ul.level1 li:hover ul.level2 li {
display: block;
}
If I replace the 'ul.level1 li:hover ul.level2' with 'ul.level1 li a:hover
ul.level2'
and the 'ul.level1 li:hover ul.level2 li' with 'ul.level1 li a:hover
ul.level2 li' the nested list does not show up.
How can I solve this problem? Hope someone can help me out.
Here is the link to the webpage: http://www.glassbox.nl/test/hover_link.htm
Thanks in advance.
Greetings, Dimpie
__
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] pseudo-class link problems
I am using pseudo-classes on my links. They all work as they should,
in all browsers, on text links, but I am having trouble with image
links.
The site is: www.lifeonwheels.com/beta2/index5.hml
Looking at the sponsor logos on the right side of the page, the
images should not have a border in their normal state or if they have
been visited. Hover should produce a blue border.
At the moment, the CSS is:
#rightcolumn #sponsorimages a {
border-color:transparent;
}
#rightcolumn #sponsorimages a:link {
border-color:transparent;
}
#rightcolumn #sponsorimages a:visited {
border-color:transparent;
}
#rightcolumn #sponsorimages a:hover {
border:3px solid #009;
}
1. In Safari/Mac nothing at all happens - no borders at all, even on
Hover.
2. FF/Mac Win works.
3. Netscape/Win works.
4. IE6/Win the blue border appears in normal state and on Hover
(therefore, no hover visual effect) AND visited links appear purple.
Obviously, my main concern is IE6/Win. Any ideas that will help me
fix the code?
Thanks, LindaQ
__
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] CSS styled fonts being ignored in IE
Hi - I just finished a really small site and everything works EXCEPT IE is not accepting the fonts as I have them styled - which look as they should in Firefox. Can someone figure out what my problem is? Here the CSS: http://www.kcsm.org/catalog/railroadsinamerica/railroadsinamerica.css Here's the site: http://www.kcsm.org/railroadsinamerica.htm Thanx Juanita __ 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] IE background image in div disappears with opacity
Hi all,
I've come across something I think I read about once but after
hunting the archive and googling, I can't seem to find an answer. I
have a png image as a background to a div that is, well, here's the
div css (this is post png processing for png on IE):
.right {
float: left;
width: 16px;
height: 30px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=scale, src='images/control_right.png');
opacity: 0.3;
filter: alpha(opacity=30);
border: 1px solid red;
}
The background image does not show up, but the border does. The other
interesting this is if I get rid of the opacity - comment it out
completely, not just set it to 100 - it shows up.
This div is inside an absolutely positioned div which is inside a
relatively positioned div. Maybe that has something to do with it. I
solved it by making the background image an inline image within the
div. Fortunately, I don't need to put anything in the div, but I just
want to know WHY it's doing this. Has any one come across this
problem before and fixed it?
Thanks,
Mark
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS styled fonts being ignored in IE
Juanita wrote: I just finished a really small site and everything works EXCEPT IE is not accepting the fonts as I have them styled - which look as they should in Firefox. Can someone figure out what my problem is? http://www.kcsm.org/railroadsinamerica.htm Those /*family*/ comments are the problem. font /*family*/: 100.01%/1.25 Verdana, Arial, /*Helvetica,*/ Geneva, sans-serif; ...should be written as... font: 100.01%/1.25 Verdana, Arial, Geneva, sans-serif; ...or else some versions of IE/win may simply ignore the entire font property - just as you experience. Those comments act as unintentional hacks the way you have them now. There are a few other errors and potential problems with your CSS, and it looks like most of those may also be the result of misplaced comments... http://jigsaw.w3.org/css-validator/validator?uri=http://www.kcsm.org/railroadsinamerica.htmwarning=1profile=css21 Generally: avoid comments between property and value in declarations, unless you want them to act as part of a deliberate hack. Put regular (non-hack) comments at the end of a property/value set, or between them - not inside (as part of) them. regards Georg -- http://www.gunlaug.no __ 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] Alternating row colors in table?
How to get alternating row colors in a table or a list? I know of solutions with Javascript but I am looking for something that would be done with CSS only, I don't want to have to have a class for the even rows (or odd). Now that we have CSS 2.1, with counter and content, does anyone have an idea? Thanks Fred __ 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] Remove the header footer when printing with IE 6?
I have an HTML page used for printing quotes and invoices on letterhead paper. It's very annoying to get the IE header footer on the page. If I remove the header and footer from the IE page setup, then I lose the header footer for all the other pages. I don't mind if it is a IE solution only, that's an internal app. And I don't think there is any standard way that would work for FF and NN as well... Thanks Fred __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] z-index and stacking order
I have a site at www.cromartyview.com. I would like the thistle image, which is a background image on #wrapper to appear over the main image, #headimage which is in div#container. I think my problem is in working out which stacking context each is in and how to use the z-index to change the stacking order. Hey Mike, A couple thoughts - 1) You can't stack a background image over top an image that sits on the HTML. The jpg in your HTML will always take precedence regardless of stacking order. (I think). And 2), are you sure you want the thistle image to sit over top the sea coast image anyway because the thistle image has the blue background, it wouldn't be just the thistles that overlap. And finally 3), one option may be to edit the overlap into your header1.jpg and then visually connect that with the background image by positioning?. My .02 -Tim -- * Tim Offenstein - Web Specialist - CITES - AHS - 244-2700 * A cheerful heart is a good medicine Proverbs 17:22 NRSV __ 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/
