Fri, 2012-08-10 20:20
Hi
I'm coding a slide out contact form and have everything in position and working well in browsers except IE.
See http://www.stevesims.com/index2.htm and look for the black "contact" button on the left hand side of the page. This triggers the script and a form appears, but in IE the trigger isn't aligned correctly.
Here's the css :
a:focus { outline: none; } .panel { position: fixed; top: 150px; left: 0; display: none; background: #000000; border:1px solid #111111; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; width: 330px; height: auto; padding: 30px 30px 30px 130px; z-index: 100; } .panel p{ margin: 0 0 15px 0; padding: 0; color: #cccccc; } .panel a, .panel a:visited{ margin: 0; padding: 0; color: #9FC54E; text-decoration: none; border-bottom: 1px solid #9FC54E; } .panel a:hover, .panel a:visited:hover{ margin: 0; padding: 0; color: #ffffff; text-decoration: none; border-bottom: 1px solid #ffffff; } a.trigger{ position: fixed; text-decoration: none; background:#333333 url(../images/plus.png) 85% 55% no-repeat; width: 60px; height: 20px; top: 380px; left: 0px; font-size: 13px; font-family: arial, helvetica, sans-serif; writing-mode:tb-rl; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform: rotate(90deg); color:#fff; padding: 10px 10px 10px 0px; font-weight: 700; display: block; z-index: 200; } a.trigger:hover{ position: fixed; text-decoration: none; top: 380px; left: 0px; background:#222222 url(../images/plus.png) 85% 55% no-repeat; width: 60px; height: 20px; font-size: 13px; font-family: arial, helvetica, sans-serif; writing-mode:tb-rl; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform: rotate(90deg); color:#fff; padding: 10px 10px 10px 0px; font-weight: 700; display: block; z-index: 200; } a.active.trigger { background:#222222 url(../images/minus.png) 85% 55% no-repeat; z-index: 200; }
I'm assuming I need to add something in to cater for IE, but I'm a bit stuck hence the post here.
Hope to read a solution from someone soon - Thanks for reading this.
Steve
Sat, 2012-08-11 03:53
#1
Hi Steve, Position:fixed
Hi Steve,
Position:fixed won't work for earlier versions of IE. What version are you having trouble with?
Sun, 2012-08-12 08:48
#2
IE8
IE8
Sun, 2012-08-12 17:38
#3
Proprietary prefix
When using proprietary properties, e.g. transform, use the proprietary prefix for each of the browsers, followed by the un-prefixed, W3C version.
a.trigger { … -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); … }
For some reason, in IE, the text rotates a second time. I haven't found the reason for that. I didn't see why it would rotate the first time, for that matter.
Not able to test fully, as your site was timing out; I couldn't retrieve the bg "+" image.
BTW, your formatting is very difficult to read for debugging purposes. I suggest setting a hard line-wrap at 72 characters. Indent using 2 spaces for nested elements, and do not use tabs. An empty line between sibling elements is helpful.
cheers,
gary
Mon, 2012-08-13 11:27
#4
Thanks Gary
Thanks Gary