Solved

CSS.. Using first child selectors in Internet Explorer.

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

Three Reasons Why Backup is Strategic

Backup is strategic to your business because your data is strategic to your business. Without backup, your business will fail. This white paper explains why it is vital for you to design and immediately execute a backup strategy to protect 100 percent of your data.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS Style on Chrome 1 40
Anyone familiar with PhotoSwipe? 3 20
Table header must be on top 2 31
boostsrap 1 12
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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 …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

730 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