Contact form CSS not working in IE

  • cage108 · Member ·

    Hi,

    On my new RSVP page I have used CSS to create a layout that I wanted. However what I notice in testing is that as soon as I try to complete the form in IE the CSS is practically forgotten and the page does not look right at all.
    The page in question is here

    I am using Windows 7, IE 11
    Please help if possible.
    My CSS is as follows: 

    @media screen and (min-width: 992px) {
	body.page-id-3648 #main {
		padding: 30px;
		border-radius: 30px;
		background-image: url('https://bbt108.files.wordpress.com/2016/03/bsl_rsvp_20161.jpg');
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: top;
		text-shadow: none;
		font-size: 24px;
		color: #000;
		padding-bottom: 0 !important;
	}

	.page-id-3648 #footer {
		clear: both;
	}
}

.page-id-3648 #main {
	max-width: 1156px;
	margin: auto;
}

.page-id-3648 .contact-form {
	padding: 20px;
	margin-top: 39%;
	max-width: 350px;
	background: rgba(255,255,255,0.5);
	border-radius: 12px;
	text-shadow: none;
	font-size: 16px;
}

    The site works normal in Firefox and Chrome.

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    Given the way you have constructed the rsvp page (using the background image on #main), this is very tricky and sort of hard to figure out. I tried the following in IE11 on Win7 and it seems to fix the issue. Add this at the very bottom of your CSS and test and let me know. 

    #post-3648 {
    max-width: 350px;
    margin-top: 26%;
}
  • cage108 · Member ·

    thank you @sacredpath … it is very strange that this only happens on IE …
    I have done what you suggested with a minor tweak for the percentage and it does help. Basically each time you try capture info into the form when open in IE, the form moves up till its overlapping the header text in the image. The workaround does affect my layout ever so slightly but at least now it is legible.
    Thank you for taking the time to come up with a solution… truly appreciated.

  • thesacredpath · Member ·

    IE is a challenge. When I tried out the form, I saw it jump up, but couldn’t figure out why that was happening. You are welcome.

  • The topic ‘Contact form CSS not working in IE’ is closed to new replies.