• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 478
  • 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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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