Re: [css-d] Cascade confusion!
Thanks, Arian!
A little bit of fog has lifted from my CSS confusion:
Since li is not some list element under another element that has a
class of calendar. li itself has a class of calendar.
~Tracy
Arian Hojat wrote:
this rule:
#calendar .navbar .calendar li {
background:url(../graphix/round_corners/tab_right_yellow.gif)
no-repeat top right;
}
should be
#calendar .navbar li.calendar {
background:url(../graphix/round_corners/tab_right_yellow.gif)
no-repeat top right;
}
Since li is not some list element under another element that has a
class of calendar. li itself has a class of calendar.
Not sure of other problem maybe take a look later.
good luck,
Arian
The page in question is
http://depts.washington.edu/hortlib/test/news_eventsTabs.shtml
Thanks for any ideas!
~Tracy
__
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] Cascade confusion!
oh yeh for IE give that ul that contains the navigation, a float:left. then clear:both; for the breadcrumb element afterwards... i believe basically it does not 'contain' the float children, like draw a border around the ul be4 and after the rule change. I bet be4 the border doesnt wrap around the li, and after rule does. Since the ul doesnt 'contain' the li, it is basically empty. and the next thing (breadcrumbs) gets margins leaked through from previous in flow element, p_address? i dunno i am taking a big guess, without much effort. good luck. Arin __ 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] Cascade confusion!
this rule:
#calendar .navbar .calendar li {
background:url(../graphix/round_corners/tab_right_yellow.gif) no-repeat
top right;
}
should be
#calendar .navbar li.calendar {
background:url(../graphix/round_corners/tab_right_yellow.gif) no-repeat
top right;
}
Since li is not some list element under another element that has a class of
calendar. li itself has a class of calendar.
Not sure of other problem maybe take a look later.
good luck,
Arian
The page in question is
http://depts.washington.edu/hortlib/test/news_eventsTabs.shtml
Thanks for any ideas!
~Tracy
__
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] Cascade confusion!
I'm trying to implement Andy Budd's (CSS Mastery) tabbed navigation
bar. The home page tabs worked out fine (right corner graphic in the
li and the left corner graphic in the a).
Now I'm trying get my interior pages to use another color to show it's
the active tab.
I can get this to work with just background color (no graphics), but
when I try to override the default tab graphics with my section graphics
I can only get the a graphic to show, meaning the original li tab
graphic is still showing.
Another annoying thing is IE7 puts a gap between my nav bar and the main
content, all other browsers show no gap (FF/O/S) : (
The page in question is
http://depts.washington.edu/hortlib/test/news_eventsTabs.shtml
Thanks for any ideas!
~Tracy
#calendar .navbar .calendar li{
background:url(../graphix/round_corners/tab_right_yellow.gif)
no-repeat top right;
}
#calendar .navbar .calendar a{
background:url(../graphix/round_corners/tab_left_yellow.gif)
no-repeat top left;
cursor: default;
text-decoration:none;
}
.navbar {
background-color:#33;
}
.navbar ul{
margin: 0px;
padding: 0px;
list-style:none;
width: auto;
float:left;
}
.navbar li{
float: left;
background: url(../graphix/round_corners/tab_right.gif) no-repeat
top right;
list-style:none;
margin: .3em 0 0 0;
}
.navbar li a{
display: block;
padding: 0 2em;
line-height: 2.5em;
background:url(../graphix/round_corners/tab_left.gif) no-repeat top
left;
text-decoration:none;
color:#FF !important;
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.navbar a:hover{
color: #00 !important;
}
headers ...
body id=calendar
...
div class=navbar
ul
lia href=http://catalog.lib.washington.edu/search~b1a1/;
title=Search for booksCatalog/a/li
li class=usinga
href=http://depts.washington.edu/hortlib/using_library/hours_contact.shtml;
title=Hours, directions and FAQUsing the Library /a/li
li class=collectionsa
href=http://depts.washington.edu/hortlib/collections/collections.shtml;
title=What you'll find at the libraryCollections and Services/a/li
li class=resourcesa
href=http://depts.washington.edu/hortlib/resources/resources.shtml;
title=Recommended books, websites and tutorials Resources/a/li
li class=calendara
href=http://depts.washington.edu/hortlib/calendar/news_events.shtml;
title=Library news, programs and regional event calendarsNews and
Events/a/li
li class=homea
href=http://depts.washington.edu/hortlib/index.shtml; Home/a/li
/ul
__
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/
