Solved

CSS.. Using first child selectors in Internet Explorer.

Posted on 2007-04-03
5
1,167 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
  • 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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
When you start your Windows 10 PC and got an "Operating system not found" error or just saw  "Auto repair for startup". After a while, you have entered a loop for Auto repair which does not fix anything and you will be in a  panic as all your work w…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

746 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now