PDA

View Full Version : The old Internet Explorer problem


WotNow
01-05-2011, 02:07 PM
I am working on a site and their are two boxes side by side, if I adjust the padding on the right hand side box then if it looks correct in Firefox, but becomes too long in Internet Explorer.

This is the wrapper div for the two boxes:

#FormArea {
width: 900px;
margin:20px 0 20px 0;
padding: 0;}This is the CSS code for the Left hand box:

#LeftSay {
width:380px;
border: #ff6600 2px solid;
padding:10px;}

#LeftSay p {
padding: 0 20px;}

#LeftSay h2{
padding: 0 0 10px 20px;}

#LeftSay input.email_button{
background: #0070c0;
margin:0px 0 0 0px;
padding:3px 4px 3px 4px;
color:#fff;}

textarea {border: #ff6600 2px solid;}

input {border: #ff6600 2px solid;}

This is the CSS code for the right hand box:

#LeftSay {
width:380px;
border: #ff6600 2px solid;
padding:10px;}

#LeftSay p {
padding: 0 20px;}

#LeftSay h2{
padding: 0 0 10px 20px;}

#LeftSay input.email_button{
background: #0070c0;
margin:0px 0 0 0px;
padding:3px 4px 3px 4px;
color:#fff;}

textarea {border: #ff6600 2px solid;}

input {border: #ff6600 2px solid;}
This is the html:

<div id="FormArea">

<div id="RightInformed">

<h2>KEEP INFORMED</h2>

<form action="..xxxx" method="post" name="addme">

<p>To be kept informed of progress and be sent updates and other information when it becomes available, please provide your email address:</p>
<p><input type="text" id="em2" name="email"></p>
<input type="hidden" name="project" value="xxxx">
<p><input type="button" value="Keep me informed!" onclick="addem();" class="email_button"></p>
</form>


</div><!--end of RightInformed-->

<div id="LeftSay">
<a name="say" id="say"></a>
<h2>HAVE YOUR SAY</h2>

<p>Please submit any comments or feedback relating to xxxx xxx.</p>

<form action="..xxxxxx" method="post" name = 'xxxx' >
<p><textarea name="comments" cols="40" rows="8" id='ms'></textarea></p>

<p>If you would like us to respond to your comments or questions, please provide your email address.</p>

<p><input type="text" id="xx" name="email" ></p>
<input type="hidden" name="xxx" value="xxxxxx">
<p><input type="submit" value="Submit" class="email_button" ></p>
</form>

</div><!--end of LeftSay-->

</div><!--end of FormArea-->If anyone has any suggestions .. it would be much appreciated. Its been driving me nuts! Thanks

Corrosive
01-05-2011, 02:24 PM
Please use code tags.

WotNow
01-05-2011, 03:04 PM
What do you mean please use code tags?

Corrosive
01-05-2011, 03:14 PM
See I have wrapped your code in tags. It makes it easier to distinguish. It is the # symbol when you post.

WotNow
01-05-2011, 03:28 PM
Ok sorry I see it .. any ideas why it is displaying longer in one browser than the other?

Corrosive
01-05-2011, 03:32 PM
No, sorry.

WotNow
01-05-2011, 03:40 PM
I hate Internet Explorer .. why doesnt everybody use firefox or other compliant browsers

Corrosive
01-05-2011, 03:49 PM
Because it comes with Windows. I still know people who think the little 'e' on their desktop IS the internet :(

gentleone
01-05-2011, 04:10 PM
I see the same CSS #LeftSay twice in your post.

d a v e
01-05-2011, 05:14 PM
and please, please state which version of explorer.

domedia
01-05-2011, 06:38 PM
WotNow, can you put the page on the web somewhere? This makes it really easy to troubleshoot.

WotNow
01-25-2011, 12:39 AM
Sorry I have taken so long to reply .. in Vietnam and internet not always available.

The CSS

#FormArea {
width: 900px;
margin:20px 0 20px 0;
padding: 0;}

#RightInformed {
width:380px;
float:right;
padding:10px 10px 180px 10px;
margin:0 40px 0 0;
border: #ff6600 2px solid;}

#RightInformed p{
padding: 0 20px;}

#RightInformed h2{
padding: 0 0 10px 20px;}

#RightInformed input.email_button{
background: #0070c0;
margin:10px 0 0 0;
padding:3px 4px 3px 4px;
color:#fff;}


#LeftSay {
width:380px;
border: #ff6600 2px solid;
padding:10px;}

#LeftSay p {
padding: 0 20px;}

#LeftSay h2{
padding: 0 0 10px 20px;}

#LeftSay input.email_button{
background: #0070c0;
margin:0px 0 0 0px;
padding:3px 4px 3px 4px;
color:#fff;}

The html

<div id="FormArea">

<div id="RightInformed">

<h2>KEEP INFORMED</h2>

<form action="****" method="post" name="addme">

<p>To be kept informed of progress and be sent updates and other information when it becomes available, please provide your email address:</p>
<p><input type="text" id="em2" name="email"></p>
<input type="hidden" name="project" value="****">
<p><input type="button" value="Keep me informed!" onclick="addem();" class="email_button"></p>
</form>


</div><!--end of RightInformed-->

<div id="LeftSay">
<a name="say" id="say"></a>
<h2>HAVE YOUR SAY</h2>

<p>Please submit any comments or feedback relating to *** process.</p>

<form action="****" method="post" name = 'comm' >
<p><textarea name="comments" cols="40" rows="8" id='ms'></textarea></p>

<p>Please provide your email address so that we can respond to your comments or questions.</p>

<p><input type="text" id="em" name="email" ></p>
<input type="hidden" name="project" value="*****">
<p><input type="submit" value="Submit" class="email_button" ></p>
</form>

</div><!--end of LeftSay-->

</div><!--end of FormArea-->

In firefox 3.6.13 displays perfectly in Windows 7 one side is slightly longer than the other.