Last-child in IE8

HTML & CSS
1

Hi

noborder does not work in IE8.

Is there a css/html work-around that can be included as a conditional in the head to get rid of the last vertical border in the navbar?

http://pintotours.net/TEST/NewPie.html

2

You could use IE conditional comments to target the id and remove the border. Or you could use first-child instead, which is supported in IE8.

3

Hi ralphm

That’s what I have been trying to do, but how?..

I tried this without success.

<!--[if lt IE 9]>

<style>

#noborder {
border:none;
}

</style>
 <![endif]-->

I’ve tried display:none; border-right: 0; nothing seems to affect it…

EDIT

There’s something else that’s confusing me: the html has

<li id="noborder"><a href="/Asia/India/India.php">India</a></li>

But there is nothing in the css regarding #noborder: besides further down I have .noborder as a class.

I also tried

#nav li: noborder{
    border:none;
}

I inherited some of this code and I’m totally lost!

4

A few things. Where are you adding that conditional comment? You already have one in the head of your document, so just add it there. However, you’ll need to make sure it has the highest specificity. The easy/lazy way to do that is with

#noborder {
border:none !important;
}

there is nothing in the css regarding #noborder: besides further down I have .noborder as a class.

So it obviously wasn’t used. Still, it’s handy to have it there. :slight_smile:

5 
#noborder {
border:none !important;
}

Perfect!

I had it in the right place, but forgot that when something logical doesn’t work, it’s time to try !important !!!

Ralph, I have one other problem (last one) in this page. In IE8 the width of the panels in the #left sidebar leave a much wider right margin than in modern browsers. I’ve spent all morning trying to work it out, to no avail. I’d like the look in IE8 be the same as in the other browsers.

if you have time…

6

Heh, not so much logic as the essence of CSS—“cascading” rules. The last one wins out, unless an earlier one has higher specificity.

Hm, I left IE8 behind long ago, deeming is basically a dead duck, so I have no way to test and investigate that.

7

Hi

many thanks for sorting out my unwanted vertical border.

One headache gone!

8

Would you mind posting that same page again or post a link to its real address?

9

Hi ronpat

Do you mean the solved vertcal border or the unsolved panel width in IE8.

If the latter, see http://pintotours.net/Asia/Japan/IbisShinjuku.html and compare to say, http://pintotours.net/Europe/Spain/CrowneBcn.html, whic has practically the same code for the "#left sidebar. This is in IE8.

I amtrying to work out hwy there is so much extra space (padding/margin?) on the right of the left sidebar

Thanks

10

The page that had the vertical border issue, please.

11

It’s the same as the two above.

12

Thanks, it sounds interesting.

13

FYI, if you are interested.

http://pintotours.net/Asia/Japan/IbisShinjuku.html

This is where the border-right is applied to the list items.

hotelUno.css (line 138)

#nav li {
    border-right: 2px solid #fff;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 9999px;
}

The following CSS was added to delete the border from the right-most list item in CSS3 compliant browsers.

hotelUno.css (line 145)

#nav li:last-child {
    border: medium none;
}

However, it is understood that the CSS pseudo-class :last-child is not recognized by IE8.

Therefore, adding a classname to the last list item would work with ALL browsers including IE8:

#nav li.noborder {
    border:0 none;
}

It could have been written without the !important modifier like this:

#nav li.noborder {
    border:0 none;
}

 

A different approach would have been to add the borders to the left side of the list item instead of using border-right in line 138 like this:

#nav li + li {
    border-left:2px solid #fff;
}

The advantage is that this is compatible with all browsers back to IE8, so no overrides, “band-aids”, or extra HTML classes are needed… and certainly no “wagon train” of IDs is needed.
(As @PaulOB has already mentioned, this is painfully bad practice: #header #section1 #title {)

Ralph’s bandaid is fine except that you have that stupid ID in the HTML for no one except IE8.

Personal bias: I dislike the promiscuous use of IDs. Classes are more flexible.

 

I will look at the left column now, FWIW.

14

Thanks!

I don’t have the XP computer here at the mom

I will look at what you sent me and see how it can be changed.

The fact that I did not see a “noborder” anywhere confused me. It is nice to know where I can add it!

15

I believe you can repair the panel width issue in IE8 with the following code correction.

hotelUno.css (line 423)

.blank1 img {
    display: block;  /* ADD Me */
    margin: 0 auto;  /* ADD Me */
    padding: 20px 10px;  /* DELETE ME!  or CHANGE to {padding: 20px 0} */
}

Why?

The horizontal padding plus the width of the image exceeds 190px (the designated width of the column).

The lesson?

Do not center boxes by relying on padding or fixed margins. They tend to crimp one’s style.

If you are interested in experimenting, you might go back and see if this was the problem when the “curvycorners” script was in use, too. I’m curious to know if I missed it.

16

Thanks ronpat

I have to wait for the XP to come home, to effect the changes

Many thanks

17

Hi ronpat

the #left has been sorted out! Many thanks.

Regarding the vertical border I added to the css

#nav li.noborder {
    border:0 none;
}

and as a conditional to the Shinjuku page

#nav li.noborder {
    border:0 none;
}

but the end vertical line returned. I left it on for you to see.

18

OK, please permit a short rant.

My code uses a classname of “noborder” (notice the preceeding dot?)
NOT an ID (no preceeding hash for me, thank you.)

The HTML shows an ID instead of class=“noborder”. Change to class= and see if that works with the CSS.

Having said all of that…

Why did you not consider the much simpler adjacent sibling selector method? Only one line of CSS covers everyone and NO changes to the HTML… too simple?

19

Hi

It’s getting late and the brain neurons getting sloppy…

However, your code above and in the css I have all in IDs; the same as in the HTML conditinal and in the HTML nav

 <li id="noborder"><a href="/Asia/India/India.php">India</a></li>

Although I understand where you are heading to, I am a bit lost

20

This code is very new to me and I prefer to stick to what I have as much as possible, for the time being,