Display content acording to browser

HTML & CSS
1

hi

i know we can write conditional statements in <head></head> to write browser specific css stylesheet.

But if i want to display content inside the <body></body> then what do i have to do ?

My below code show both lines in IE7.

i want to show only IE7 Specific content in IE7


<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<p>here comes content for mozilla firefox</p>
<!--[if IE]>
<p>here comes content for internet explorer</p>
<![endif]-->
</body>
</html>

vineet

2

Conditional comments work anywhere in the document so that should work fine.

You can target IE7 specifically with <!–[if IE 7]>

You can also use this form for targeting non-ie browsers.
<!–[if !IE]> –>
FF, Chrome, Safari, Opera…
<!-- <![endif]–>

3

Another option would be to give each paragraph a special class, and hide one paragraph from all browsers except IE7 with display: none and show one paragraph to all browsers but IE7. You could do this via conditionals styles or via a hack that only IE7 recognizes. E.g.


.all {display: block;}
.ie {display: none;}

* + html .all {display: none;}
* + html .ie {display: block;}
4

Thanks Mark and Ralph

Both of your solutions will do my task

vineet