Reply To: Trouble creating multiple borders with pseudo elements.

[Anonymous]

Greetings Paulob,

Good to hear from you again!

Why have you repeated the same selectors 3 times?

The answer to that is simple. It’s because I don’t know what I am doing! LOL

I did manage to get it down to this

}
#main:after,#main .after {
    content:" ";
    position:absolute;
    left:11px;
    top:0;
    bottom:10px;
    border-left:1px solid #ff0000;
    border-right:1px solid #ff0000;
}
#main:after,#main .after {
    content:" ";
    position:absolute;
    left:11px;
    right:11px;
    bottom:9px;
    border-bottom:1px solid #ff0000;
}

but didn’t realize it could be simplified even more to what you put. These pseudo elements and positioning of elements are proving to be the most difficult for me to understand.

Note that the pseudo elements :before and :after will place generated content inside the specified element and not before or after the element.

I think I understand what you are saying although it sounds contradictory at first read.

There is an issue here with the coding in that it prevents the dropdown menu from working in Firefox, but still works in IE. It has to be the #main:after,#main .after { because I removed .logo,.header{z-index:2} and tried the menu and nothing. Removing the #main:after,#main .after restores the function. Why?

Is there a way to get the pseudo line at the right to go under the right_column_bkg.png in the right of the <div id="inner">?

Best Regards.