Solved

CSS.. Using first child selectors in Internet Explorer.

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

Use Case: Protecting a Hybrid Cloud Infrastructure

Microsoft Azure is rapidly becoming the norm in dynamic IT environments. This document describes the challenges that organizations face when protecting data in a hybrid cloud IT environment and presents a use case to demonstrate how Acronis Backup protects all data.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
extend monitor issues 6 29
Html5 Index on a table 7 26
Porbably easy CSS question about overlapping and offset images 21 26
css selector 1 17
This article discusses four methods for overlaying images in a container on a web page
When you start your Windows 10 PC and got an "Operating system not found" error or just saw  "Auto repair for startup" or a blinking cursor with black screen. A loop for Auto repair will start but fix nothing.  You will be panic as there are no back…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Two types of users will appreciate AOMEI Backupper Pro: 1 - Those with PCIe drives (and haven't found cloning software that works on them). 2 - Those who want a fast clone of their boot drive (no re-boots needed) and it can clone your drive wh…

777 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