3 replies [Last post]
yzhang12
Offline
newbie
Last seen: 6 years 42 weeks ago
Joined: 2007-11-02
Posts: 4
Points: 0

This page is a asp.net 2.0 page with css adapter 2.0 menu. I've modified the adapter to modify the html output to write a id tag for all elements so I can gain better control of applying css to the menu. Its a tedious process to style the whole menu, but i love the control I have using a sitemap and having unlimited css-styling. My problem lies in how IE6 and IE7 applies the #ctrl-X.AspNet-Menu-Selected and #ctrl-X.AspNet-Menu-ChildSelected styles, where X refers to the number of the control i want to apply the style.

I will simplify the problem to try to get some help:

html

<div id="a1" class="blue">1</div>
<div id="a2" class="red">2</div>
<div id="a3" class="blue">3</div>
<div id="a4" class="blue">4</div>
<div id="a5" class="blue">5</div>
<div id="a6" class="red">6</div>

I want to apply blue text style to the ID's that are 2,3,4,5 AND have a class of blue, and red text style to ID's that are 2,3,4,5 AND have a class of red. The class in my situation is dynamic and changes with user interaction and I want a constant set of ID's to change styles based on the class...

css


#a2.blue,
#a3.blue,
#a4.blue,
#a5.blue
{
    color:blue;
}

#a2.red,
#a3.red,
#a4.red,
#a5.red
{
     color:red;
}

The output from the above html and css should be/is:

Correct and FF:
1 2 3 4 5 6

Incorrect and IE6/7
1 2 3 4 5 6

i have tried doing .blue#2 and have had the same results. It works in FF, not in IE6 or 7. Addtionally, I found that changing the order of the css (in this case, movin the X.red css block above the X.blue); the first set of CSS encountered will be applied and the rest ignored. I believe that is the key problem..but its not the multiple classes bug aboriginal to IE6 (can't do .class.class1.class2.class3) . If anyone can confirm this and knows a fix for this in IE, please let me know.. the fix cannot involved wrapping extra elements... Sad

Here is the original, but abridged, html/css if it helps clarify my problem.

HTML:



......
usually html stuff etc etc, s
......


<div id="ctrl-1" class="mainMenu">
	<div id="ctrl-2" class="AspNet-Menu-Horizontal">
		<ul id="ctrl-3" class="AspNet-Menu">
			<li id="ctrl-4" class="AspNet-Menu-Leaf AspNet-Menu-Selected">
				<a id="ctrl-5" href="/Default.aspx" class="AspNet-Menu-Link AspNet-Menu-Selected" rel="nofollow">
					Home</a>
			</li>
			<li id="ctrl-6" class="AspNet-Menu-WithChildren">
				<a id="ctrl-7" href="/About.aspx?param=0" class="AspNet-Menu-Link" rel="nofollow">
					About</a>
				<ul id="ctrl-8">
					<li id="ctrl-9" class="AspNet-Menu-Leaf">
						<a id="ctrl-10" href="/History.aspx?param=0" class="AspNet-Menu-Link" rel="nofollow">
							Our History</a>
					</li>
					<li id="ctrl-11" class="AspNet-Menu-Leaf">
						<a id="ctrl-12" href="/Contact.aspx?param=0" class="AspNet-Menu-Link" rel="nofollow">
							Contact Us</a>
					</li>
				</ul>
			</li>
			<li id="ctrl-13" class="AspNet-Menu-WithChildren">
				<a id="ctrl-14" href="/Services.aspx?param=0" class="AspNet-Menu-Link" rel="nofollow">
					Services</a>
				<ul id="ctrl-15">
					<li id="ctrl-16" class="AspNet-Menu-Leaf">
						<a id="ctrl-17" href="/Services.aspx?param=1" class="AspNet-Menu-Link" rel="nofollow">
							Our Services</a>
					</li>
					<li id="ctrl-18" class="AspNet-Menu-Leaf">
						<a id="ctrl-19" href="/Order.aspx?param=0" class="AspNet-Menu-Link" rel="nofollow">
							Order Forms</a>
					</li>
					<li id="ctrl-20" class="AspNet-Menu-Leaf">
						<a id="ctrl-21" href="/RFQ.aspx?param=0" class="AspNet-Menu-Link" rel="nofollow">
							RFQs</a>
					</li>
				</ul>
			</li>

		
		</ul>
	</div>
</div>

CSS


/* Menu position */
.mainMenu .AspNet-Menu-Horizontal
{
    position:absolute;
    right: 0px;
    top: -27px;
    z-index: 300;
   	font-family: Arial, 'Trebuchet MS', Tahoma, verdana,  sans-serif;
	font-size: 13px;
	font-weight:bold;
	color:White;
	letter-spacing: normal;
	display:inline;   
	
}


/* Spacing between the menu tabs*/
.mainMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li 
{
	margin-left:2px;
	position:relative;
	width:86px;
}


/* Left rounded corner menu tab*/
.mainMenu #ctrl-4,
.mainMenu #ctrl-6, 
.mainMenu #ctrl-13,
.mainMenu #ctrl-22,
.mainMenu #ctrl-31
{
	background-repeat:no-repeat;
	background-image: url(/images/b-tableft.gif);
	background-position:0px 0xp;
	background-color:#7EAAD1;
	padding-left:10px;	
	
	
}

/* Right rounded corner menu tab*/
.mainMenu #ctrl-5,
.mainMenu #ctrl-7, 
.mainMenu #ctrl-14,
.mainMenu #ctrl-23,
.mainMenu #ctrl-32
{
	background-repeat:no-repeat;
	background-image: url(/images/b-tabright.gif);
	background-position:right 0px;
	background-color:#7EAAD1;
	padding-right:10px;
	padding-top:3px;
	padding-bottom:3px;
	
}


/* Left rounded corner childselected menu tab*/
/* id:class multiple bug or some other retarded IE bug.. only applies the first of the 
two classes of either childselected or selected*/
.mainMenu #ctrl-6.AspNet-Menu-ChildSelected,
.mainMenu #ctrl-13.AspNet-Menu-ChildSelected,
.mainMenu #ctrl-22.AspNet-Menu-ChildSelected,
.mainMenu #ctrl-31.AspNet-Menu-ChildSelected
{
	background-repeat:no-repeat;
	background-image: url(/images/g-tableft.gif);
	background-position:0px 0px;
	background-color:#39A403;	
}

/* Right rounded corner childselected menu tab*/
.mainMenu #ctrl-7.AspNet-Menu-ChildSelected,
.mainMenu #ctrl-14.AspNet-Menu-ChildSelected,
.mainMenu #ctrl-23.AspNet-Menu-ChildSelected,
.mainMenu #ctrl-32.AspNet-Menu-ChildSelected
{
	background-repeat:no-repeat;
	background-image: url(/images/g-tabright.gif);
	background-position:0px right;
	background-color:#39A403;
}

/* Left rounded corner selected menu tab*/
.mainMenu #ctrl-4.AspNet-Menu-Selected,
.mainMenu #ctrl-6.AspNet-Menu-Selected,
.mainMenu #ctrl-13.AspNet-Menu-Selected,
.mainMenu #ctrl-22.AspNet-Menu-Selected,
.mainMenu #ctrl-31.AspNet-Menu-Selected
{
	background-repeat:no-repeat;
	background-image: url(/images/g-tableft.gif);
	background-position:0px 0px;
	background-color:#39A403;
}

/* Right rounded corner selected menu tab*/
.mainMenu #ctrl-5.AspNet-Menu-Selected,
.mainMenu #ctrl-7.AspNet-Menu-Selected,
.mainMenu #ctrl-14.AspNet-Menu-Selected,
.mainMenu #ctrl-23.AspNet-Menu-Selected,
.mainMenu #ctrl-32.AspNet-Menu-Selected
{
	background-repeat:no-repeat;
	background-image: url(/images/g-tabright.gif);
	background-position:0xp right;
	background-color:#39A403;
}


Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 17 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

do you have a valid doctype

do you have a valid doctype and does your code validate?

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

yzhang12
Offline
newbie
Last seen: 6 years 42 weeks ago
Joined: 2007-11-02
Posts: 4
Points: 0

it does validate except for

it does validate except for the server elements, css is fine.

my doc type is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

=/ even the simple example i created won't work properly.. im looking for a fix; i know its a bug with IE.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 1 week 6 days ago
Milton Keynes
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

IE doesn't grok thinks like

IE doesn't grok thinks like #a2.blue, it's unfortunately the nature of the beast.

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

have a look under "multiple #id.class bug"

and:

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

Verschwindende wrote:
  • CSS doesn't make pies