4 replies [Last post]
steve55
steve55's picture
Offline
newbie
UK
Last seen: 4 years 28 weeks ago
UK
Joined: 2012-08-10
Posts: 4
Points: 6

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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 21 hours 20 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi Steve, Position:fixed

Hi Steve,
Position:fixed won't work for earlier versions of IE. What version are you having trouble with?

steve55
steve55's picture
Offline
newbie
UK
Last seen: 4 years 28 weeks ago
UK
Joined: 2012-08-10
Posts: 4
Points: 6

IE8

IE8

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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);}
If you use MSOffice to generate the html, the prefix will likely be -mso-.

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

steve55
steve55's picture
Offline
newbie
UK
Last seen: 4 years 28 weeks ago
UK
Joined: 2012-08-10
Posts: 4
Points: 6

Thanks Gary

Thanks Gary