/    Sign up×
Community /Pin to ProfileBookmark

first child for ie6

Copy linkTweet thisAlerts:
Apr 10.2010

i have used the technique from this website
[url]http://mauzon.com/pseudoclasses-first-child-and-last-child-for-ie6/[/url]

whereby ie6 will support first child and last child

i would like to display a background image for the 1st list item i have tried different combinations however the background image that i want is not being displayed for the 1st list item it is working if i want a background color however what i need is a background image so i guess the issue is with the syntax or the quotes

can anyone look at the code and let me know how to fix this

my css code

.topmenu li {background-image: expression(this.previousSibling==null?url(‘absolute/path/to/topmenu_divider.jpg’):url(‘absolute/path/to/topmenu_divider1.jpg’));}

any help will be appreciated

thanks

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@letmehaveagoApr 10.2010 — Yes you need double quotes around your url('path').

It must be "url('path')"

See working example below:

[CODE]
<!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" />
<title>Untitled Document</title>
<style type="text/css">
body {
background: expression(true ? 'url(http://www.webdeveloper.com/forum/images/webdev-logo2.gif)': 'red');
}
</style>
</head>

<body>
</body>
</html>
[/CODE]

Note: expressions are not supported in ie8 http://msdn.microsoft.com/en-us/library/ms537634(VS.85).aspx
Copy linkTweet thisAlerts:
@sudhakararaogauthorApr 11.2010 — thanks for replying i have tried the following 2 methods but its not working the way i want

for the 1st list item i want the background at top left and for the remaining at top right

1.

<!--[if IE 6]>

<style type="text/css">

.topmenu li {

background: expression(true ? "url('website.com/topmenu_divider.jpg no-repeat top left')": "url('website.com/topmenu_divider.jpg no-repeat top right')");

}

</style>

<![endif]-->


2.

<!--[if IE 6]>

<style type="text/css">

.topmenu li {

background: expression(true ? 'url("website.com/topmenu_divider.jpg no-repeat top left")': 'url("website.com/topmenu_divider.jpg no-repeat top right")');

}

</style>

<![endif]-->
Copy linkTweet thisAlerts:
@sudhakararaogauthorApr 11.2010 — i have also used another method from this website

http://www.pathf.com/blogs/2008/04/hacking-the-fir/

please look at the example i have done at

http://sudhakargolakaram.co.in/files/list.html

only in ie6 the 1st list item is not showing a different background color rest of the browsers including ie7 are showing a different background color

i have followed the same steps as mentioned at

http://www.pathf.com/blogs/2008/04/hacking-the-fir/

but in ie6 i am not getting a different background color

please advice.

thanks
Copy linkTweet thisAlerts:
@letmehaveagoApr 11.2010 — I can't test your code because I don't have ie6. However, one issue I can see is with the following code:

[CODE]
"url('website.com/topmenu_divider.jpg no-repeat top left')"
[/CODE]

it should be:

[CODE]
"url('website.com/topmenu_divider.jpg') no-repeat top left"
[/CODE]

Note: the stuff inside an expression is simply javascript code. If you think of it that way it will be useful.

Please also try to understand the code. The code I posted was for illustration purposes it wasn't suppose to be a full working solution.

That is the code will set the body background to a webdeveloper image for ie less than 8 otherwise the background will be red. It isn't suppose to change a list's first item. For that you would need to combine some of your code with my prototype. i.e. you need to change true to this.previousSibling==null

------------------------------

In your link in which you are using jquery. You need to add the following css (please change the #ccc to what you need):

[CODE]
.firstChild{
background: #ccc;
}
[/CODE]

plus your javascript code is not complete, it must be:

[CODE]
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#wrapper > .topmenu ul li:first')
.addClass('firstChild');
})
</script>
[/CODE]

see the extra closing ) at the very end just before the closing script tag

http://www.pathf.com/blogs/2008/04/hacking-the-fir/ is making your life a little harder, it is much better if you go do some research on jquery your self.
×

Success!

Help @sudhakararaog spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...