PDA

View Full Version : IE display problem


tux
03-13-2009, 12:31 PM
Hello everyone,

I always struggle with this issue, darn IE.

I have a form that I got to display fine in all the good browsers but it displays C**P in IE.

I have attached 2 screen shots, one from Opera which displays correctly and the other from IE. I have also attached my CSS file as a txt file.

I struggle with CSS but do try so if anyone can also give it a look to see if I can improve it. It is probable a bit of a mess to all you CSS gurus, lol

Thanks in advance for your help everyone.

Regards, Paul

coloeagle
03-13-2009, 02:17 PM
Do you have a url to the actual page?

tux
03-13-2009, 02:31 PM
Here you go Coloeagle.

http://www.photographybydantucker.com/gallery_test.php

coloeagle
03-13-2009, 03:01 PM
You've not placed the inputs inside a paragraph or div.
As it is now it is read as being on a single line.

Try this out;
<div id="mail_list_form">
<form action="submit_mail_list.php" method="post">
<p><input name="submitted" id="submitted" type="hidden" value="1" />
<input name="confirm_link" id="confirm_link" type="hidden" value="http://www.photographybydantucker.com/confirm_mail_list.php?email=" /><br />
<input name="firstname" id="firstname" size="30" class="mail_list" value="First Name" onfocus="if (this.value==this.defaultValue) this.value='';" /><br />
<input name="lastname" id="lastname" size="30" class="mail_list" value="Last Name" onfocus="if (this.value==this.defaultValue) this.value='';" /><br />
<input name="email" id="email" size="30" class="mail_list" value="Email" onfocus="if (this.value==this.defaultValue) this.value='';" />
</p>
<div id="submit"><input type="image" name="Go" src="Images/Buttons/submit.gif" alt="Go" title="Go" class="mail_list2" />
</div>
</form>
As you can see I placed the form inputs inside a p tag and then gave line breaks after each input.

tux
03-13-2009, 03:16 PM
Thanks for that. I will give it a try.

So am I right in thinking that IE needs the <p> tags to display this correctly. It displays in other browsers fine!

coloeagle
03-13-2009, 03:25 PM
Not necessarily just an IE issue. Since IE is so weak on being a compliant browser there are more display issues with it.

By placing the inputs inside p tags or div's helps to insure that your styling is more consistent across different browsers. Also allows you to have specific form styling without affecting the rest of the page.

tux
03-13-2009, 03:25 PM
Coloeagle,

Doing that has put the display out on all browsers??

My way displays okay in all browsers except IE.

Would there be some sort of bug fix to satisfy the IE display.

coloeagle
03-13-2009, 03:30 PM
You may need to do some tweaking to your existing form div, possibly adding a div.

Let me get the page info and do some playing around with it in my editor.

coloeagle
03-13-2009, 04:10 PM
OK, sorry for the time,had a phone call take me away.

Changed some of the css for the form div's, and added a couple ie specifics.

#mail_list_form{
margin-top: -20px;
margin-left: 10px;
}

#mail_list_form input{
margin:5px 10px 0 0;
color: #0095D7;
font-family: arial;
font-size: 8px;
font-weight: bold;
}

.mail_list{
background-color: #FFFFFF;
border: #C3B5AB;
color: #000000;
font-family: arial;
font-size: 12px;
font-weight: normal;
text-decoration: none;
}

.mail_list2{
margin-top: 0px;
margin-bottom: -20px;
float: right;
}

#submit{
position: relative;
bottom: 30px;
right: 1px;
}<!--[if lte IE 7]>
<style type="text/css">
#wrapper {
width:expression( documentElement.clientWidth < 720 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 720 ? "720" : "auto") : "720px") : "auto" );
}
#submit{
bottom: 40px;
}
#mail_list_form{
margin-top: -30px;
}
</style>
<![endif]-->
I've not done a complete cross browser check but this should get you closer.

coloeagle
03-13-2009, 04:16 PM
If you are going to be placing this form on all your pages you may want to use an ie stylesheet call tag in the conditional statement rather than the actual styles. This will allow you to make further changes without doing it on every page.

tux
03-13-2009, 06:12 PM
Okay I've done some tweeking and have got the IE to display like the attached pic.

Have you any idea how I can correct the Last Name and Email fields. Also, I could do with a gap above the yellow text like it is in the Opera View thumbnail.

Here is my tweeked code.....

<!--[if lte IE 7]>
<style type="text/css">
#wrapper {
width:expression( documentElement.clientWidth < 720 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 720 ? "720" : "auto") : "720px") : "auto" );
}
#submit{
bottom: 22px;
}
#mail_list_form{
margin-top: -20px;
}
</style>
<![endif]-->

and....

#mail_list_form{
margin-top: 5px;
margin-left: 10px;
}

#mail_list_form input{
margin:5px 10px 0 0;
color: #0095D7;
font-family: arial;
font-size: 8px;
font-weight: bold;
}

.mail_list{
background-color: #FFFFFF;
border: #C3B5AB;
color: #000000;
font-family: arial;
font-size: 12px;
font-weight: normal;
text-decoration: none;
}

.mail_list2{
margin-top: 0px;
margin-bottom: -20px;
float: right;
}

#submit{
position: relative;
bottom: 20px;
right: 1px;
}

Cheers.

tux
03-13-2009, 10:36 PM
Okay I have managed to add and tweek things a bit more and have sorted the IE issue.

Thought I would post the changes in case it can help anyone else.

<!--[if lte IE 7]>
<style type="text/css">
#wrapper {
width:expression( documentElement.clientWidth < 720 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 720 ? "720" : "auto") : "720px") : "auto" );
}
#submit{
bottom: 24px;
}
#mail_list_form{
margin-top: -20px;
margin-left: 0px;
}
#mail_list_form input{
margin-left: 8px;
}
#mail_list{
padding-top: 5px;
}
</style>
<![endif]-->

The changes required were to add...

margin-left: 0px; to the #mail_list_form div

add margin-left: 8px; to the #mail_list_form input tag

and padding-top: 5px; to the #mail_list div to bring the yellow text down.

Hope this helps someone and loads of thanks to Coloeagle for pointing me in the right direction.

Regards Paul.