[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 473
  • Last Modified:

Problem with form tag and div above the form(IE6 problem)

Hello experts
I have a test page with three div s with rounded cornes.
The second and the third are in a form.
The problem is that when i have the form tag than between the first and the second div i have a bigger distance than the 4 px i want to have (as it is in the css) in IE6.
here is the code and screenshots .
Any help?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />
<title>Untitled Document</title>
<style type="text/css">
 
.textPanelTopGreyN {
	background-image:url(fb25GreyN.gif);
	height:30px;
	
	font-size: 14px;
	font-weight: bold;
	color: #3b3a41;
}
 
 
.textPanelMiddleLeft {
	clear:both;
	width:100%;
	background-image:url(fb32.gif);
	background-position:right;
	background-repeat:repeat-y;
}
.textPanelMiddleRight {
	clear:both;
	width:100%;
	background-image:url(fb31.gif);
	background-position:left;
	background-repeat:repeat-y;
	padding:0;
	position:relative;
}
.textPanelBottom {
	background-image:url(fb28.gif);
	height:15px;
	clear:both;
}
 
.divcontainer {
	width:50%;
	text-align:left;
	padding-top: 4px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}
.divcontainerSmall {
	width:100%;
	text-align:left;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}
</style>
 
</head>
 
<body>
<!--- first --->
<div class="divcontainer"><div class="textPanelTopGreyN">
            <img alt="" 
				src="fb24GreyN.gif" hspace=0 vspace=0 style="float:left;"><img alt=""
				src="fb26GreyN.gif" hspace=0 vspace=0 style="float:right;">
</div><div class="textPanelMiddleLeft"><div class="textPanelMiddleRight">
   <!--- blablabla........ --->
</div><div class="textPanelBottom"><img alt=""
				src="fb27.gif" hspace=0 vspace=0 style="float:left;"><img alt=""
				src="fb29.gif" hspace=0 vspace=0 style="float:right;"> 
</div></div></div> 
<!--- end first --->
<form name="search" method="get">
<div class="divcontainer">   
          <div class="textPanelTopGreyN">
            <img alt="" 
				src="fb24GreyN.gif" hspace=0 vspace=0 style="float:left;"><img alt=""
				src="fb26GreyN.gif" hspace=0 vspace=0 style="float:right;">
				
          </div>
          
   <div class="textPanelMiddleLeft">
           <div class="textPanelMiddleRight">	
<!--- blablabla.....--->
	</div>
	      <div class="textPanelBottom"><img alt=""
				src="fb27.gif" hspace=0 vspace=0 style="float:left;"><img alt=""
				src="fb29.gif" hspace=0 vspace=0 style="float:right;"> 
	      </div>
		  
	      </div>
	    </div>
        <!--- end second--->
        <!--- start third --->
      <div class="divcontainer"><div class="textPanelTopGreyN">
            <img alt="" 
				src="fb24GreyN.gif" hspace=0 vspace=0 style="float:left;"><img alt=""
				src="fb26GreyN.gif" hspace=0 vspace=0 style="float:right;">
</div><div class="textPanelMiddleLeft"><div class="textPanelMiddleRight">
<!--- blablabla.....--->
</div><div class="textPanelBottom"><img alt=""
				src="fb27.gif" hspace=0 vspace=0 style="float:left;"><img alt=""
				src="fb29.gif" hspace=0 vspace=0 style="float:right;"> 
</div></div></div>
<!--- end third ---> 
</form>
</body>
</html>

Open in new window

withform.gif
withoutform.gif
0
Panos
Asked:
Panos
  • 5
  • 4
1 Solution
 
myderrickCommented:
Add

* { margin:0; padding:0} to your CSS

Try it and provide feedback.

MD
0
 
PanosAuthor Commented:
Hi myderrick:
It did solve the problem in IE6 but it has made problems to firefox now
Can i have an if  ...  to work only with IE6?
0
 
PanosAuthor Commented:
Is this OK?
<!--[if lt IE 7]>
* { margin:0; padding:0}
<![endif]-->
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
myderrickCommented:
No change it to IE6 (not IE7) or you can use *html {margin:0; padding:0}

MD
0
 
PanosAuthor Commented:
Neither the that:
<!--[if lt IE7]>
* { margin:0; padding:0}
<![endif]-->
or that
<!--[if lt IE6]>
* { margin:0; padding:0}
<![endif]-->
or *html {margin:0; padding:0} did solve the problem
The only way i found was to use two stylesheet
one f.e form.css and one form_IE.css
i add the :* { margin:0; padding:0} to the form_IE.css and on the head :
<link  href="../Stylesheet/form.css" media="all" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link rel="stylesheet" media="all" type="text/css" href="../Stylesheet/form_IE.css"/>
<![endif]-->
0
 
myderrickCommented:
You didn't need to put lt before the IE. It should have been if IE 6. Is it ok now? MD
0
 
PanosAuthor Commented:
It is working now.
I was waiting for your commenf.
I do not understand what you mean with ...did not need to put it before IE.I think i did try every possible way..
0
 
PanosAuthor Commented:
Thank you for your help
regards
panos
0
 
myderrickCommented:
Ok. What i was saying was that lt IE6 means lower than IE6 so remove the lt

<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]-->


This is how it should be:
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->

The following article can help you understand it better:
http://www.quirksmode.org/css/condcom.html

Regards

MD
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now