Solved

CSS.. Using first child selectors in Internet Explorer.

Posted on 2007-04-03
5
1,181 Views
Last Modified: 2012-06-27
I am curious if there is a way to reference first-child attributes in CSS for Internet Explorer. It seems to work well with Firefox but not with any version of IE. Currently the code looks like this:

CSS code:

#bodyText > div:first-child {
      border:none;
}

HTML code:

<div id="bodyText" visible="true">
      
      <div><a href="#">link1</a></div>

      <div><a href="#">link2</a></div>


The border still shows up in IE 6 and 7 but not FF. Maybe there is some kind of small hack to get it to work?
0
Comment
Question by:dgelinas
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
5 Comments
 
LVL 14

Expert Comment

by:xberry
ID: 18844642
The first-child attribute cannot be used with IE versions up to IE 6, see this diagram:

http://www.css4you.de/browsercomp.html
0
 
LVL 14

Expert Comment

by:xberry
ID: 18844776
Apart from that: >> The border still shows up ...

which border ?
0
 
LVL 6

Author Comment

by:dgelinas
ID: 18844817
<style type="text/css">

body {
      font-family:Arial, Helvetica, sans-serif;
      font-size:12px;
}

#bodyText div {
      float:left;
      margin-right:10px;
      display:block;
      border-left:1px solid #000;
      padding-left:10px;
}

#bodyText > div:first-child {
      border:none;
}

#titleText {
      font-size:17px;
      margin-left:auto;
      margin-right:auto;
      margin-bottom:8px;
      position:relative;
      font-weight:bold;
      width:600px;
      text-align:center;
}

#bodyText {
      margin-left:auto;
      margin-right:auto;
      position:relative;
      width:600px;
      text-align:center;
      left:78px;
}

</style>

<div id="titleText">Get your degree fast!! Browse 648 degrees in Information Systems</div>

<div id="bodyText" visible="true">
      
      <div><a href="http://">Associates</a></div>

      <div><a href="http://">Bachelors</a></div>

      <div><a href="http://">Doctorate</a></div>

      <div><a href="http://">Masters</a></div>

      <div><a href="http://">Professional Certificates</a></div>

</div>
0
 
LVL 14

Accepted Solution

by:
xberry earned 500 total points
ID: 18845282
Ok, see it now.
Actually, I strongly refrain from considering any hack for the first-child CSS attribute.
Reason is, from information I found about the problem of IE 7 being able
to process any first-child hacks: it seems that first IE 7 versions can't process
hacks made for IE 6, but if you would create any hack exclusively for IE 7, then
in any modified IE 7 version (which is likely to happen) it could be that that version
would again go blind about the hack you inplemented. So risk is that any future IE version
would simpl not be able to handle any hack implemented here. Preventing any risk
for IE users, simply solve it the 'simple' way here:
style area

div#first_child{
      border:none;

....

<div id="first_child"><a href="http://">Associates</a></div>

<div><a href="http://">Bachelors</a></div>

and so on . . .

...

Sure not as elegant as you'd like, but safe
and working and since you want to make use of <div> around your <a>'s
why not use them for your exclusive first-child purpose in a 'moderate' semantic way
that can be used by all browsers? ; )
0

Featured Post

How Blockchain Is Impacting Every Industry

Blockchain expert Alex Tapscott talks to Acronis VP Frank Jablonski about this revolutionary technology and how it's making inroads into other industries and facets of everyday life.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article provides a convenient collection of links to Microsoft provided Security Patches for operating systems that have reached their End of Life support cycle. Included operating systems covered by this article are Windows XP,  Windows Server…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

635 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question