Weird little CSS issue - Chrome vs IE ....

[cornell2 0]

In my custom code, I have the line: .fboxtitle p {border:1.5px solid; border-color:#484848;} all this does is allow me to add a nice line under a box title, if I put the

tag at end of the box title ... and it works like a charm - everywhere in Chrome. In IE 9 ... they appear as double lines. I cannot figure this out. Is it really a browser issue or is there something wrong with the code? (Sorry- I can't give you a link since the site is not public yet - but you can try it by adding that line to your custom code, and then adding a

to any box title. Insights? Thanks!

[netprotector31 0]

I have only been working with CSS for a little while now, but have noticed the differences between IE and Chrome / Firefox. It can definitely be frustrating. Have you tried applying the rules to only the .fboxtitle and not .fboxtitle p?

[cornell2 0]

yes, and there is no change. I'd prefer not to just to throw darts at a board and try different things: seems that is the standard approach I've had to try when trying to get even the simplest things to work on pagelines - like ummm... getting the sidebars *not* to appear, or getting them to appear, umm, on the side of box pages ... Anyway - no change. I was hoping there was someone around with first hand knowledge of this quirky phenomenon. thanks!

[catrina 103]

It might have to do with it being a 1.5px value. I think IE9 just interprets that as 2px rather than 1 and half of a pixel thickness. Try replacing it with 1px to see if it makes a difference.

[cornell2 0]

Nope. No change. Thanks

[Danny+ 1,327]

Hi Cornell2, Would it be possible for you to take a few screenshots, as I am unable to recreate your problem. Can you post a screenshot of the follow: Screenshot of what the boxes look like on Chrome and IE Screenshot of what your boxes title looks like (with the p at tht end) So is what you're trying to achieve, a small space under the title of the boxes and the boxes text ?

[cornell2 0]

1. I am trying to "achieve" a line underneath the title of any box that I specify the

tag 2. to be clear - I am wanting to know why this CSS looks different in IE than in Chrome or firefox ---> I am *not* looking for the 200 alternative ways of creating a line under these titles ... I get that there are other ways to do it. 3. I took screenshots of each but using this forum - I cannot see how i can attach or embed a screenshot. there seem to be no options for doing this. If so, someone please let me know how I can do it... thanks

[Kate 3]

You would have to post the images elsewhere and then link to them. About the CSS, try this instead: [code].fboxtitle p {border:1px solid #484848;}[/code] See if that helps, and we can go from there.

[cornell2 0]

Nah. That's pretty much the same solution that someone else initially suggested. And yes I did try that CSS line specifically and there is no change.

[cornell2 0]

PS - I finally learned how PL forums likes images posted: Here is the image example: http://imgur.com/VdXFu (Note - this behaves as expected in Chrome and Firefox - but not IE)

[Jenny 33]

Maybe try it without the shorthand CSS, meaning: [code].fboxtitle p { border-width: 1.5px; border-style: solid; border-color: #484848; }[/code]

[cornell2 0]

that was my original code. all of these exhibit the same issue.

[Jenny 33]

Maybe this will help. I see multiple things that may be the IE culprit. http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/

[cornell2 0]

hmmmm .... that lends a little insight (perhaps the double-line that IE is displaying is in fact a bordered-box with the ends cut off) Well, the important part for me is that this is probably an IE bug (that might one day be fixed), as opposed to some syntax error in my CSS. Now I can sleep at night ; ) Thanks!!

[Jenny 33]

You're welcome! :)