CSS - Ie Causing Div To Form On Newline

Hi,

Pop along to www.themapcentre.com , using Internet Explorer. You should see a site that's fairly tidily arranged. Now take a look at it in Opera or Firefox, and you'll see it all goes to heck in a handbasket. A classic case of IE-itis. I have basically used layers of containers for each part of the site. Can anyone suggest a fix that would make this look right in firefox etc as well as IE? The div CSS is posted below:

Code:

body {
	background-color:white;
	font-size:x-small;
	font:Verdana;
	vertical-align:middle;
	}

#container{
	margin-top:0%;
	margin-left:15%;
	width:700px;
	height:550px;
	background-color:#C7E8FD;
	z-index:1;
	position:absolute;
	}

#bottomdetailbar{
	width:610px;
	height:10px;
	z-index:2;
	margin-top:446px;
	padding:2px;
	margin-left:6%;
}

#topbar{
	width:700px;
	height:56px;
	background-color:#3300CC;
	z-index:2;
}

#midbar{
	width:700px;
	height:10px;
	background-color:#96D6FF;
	z-index:3;
}

#textbar{
	width:650px;
	height:20px;
	z-index:20;
	margin:5px;
	margin-left:25px;
}

#globe{
	width:auto;
	height:auto;
	margin-top:-51px;
	z-index:4;
}

#mapcentretitle{
	padding-top:41px;
	margin-left:70px;
	width:auto;
	height:auto;
	z-index:5;
}

#imagecontainer{
	margin:0px;
	margin-right:-50px;
	width:460px;
	height:400px;
	float:right;
	z-index:6;
	position:static;
	margin-top:30px;
	}
	
#imagebox{
	width:100px;
	height:100px;
	margin:3px;
	padding:0px;
	z-index:7;
	text-align:center;
	vertical-align:middle;
	float:left;
	position:relative;
	display:table-cell;
	}
	
#leftcontainer{
	width:280px;
	height:300px;
	margin:3px;
	margin-top:25px;
	z-index:8;
	}
	
#lefttop{
	width:260px;
	height:80px;
	margin:3px;
	padding-top:15px;
	padding-left:15px;
	z-index:9;
	float:right;
	background-image:url(images/leftopbg.gif);
	background-repeat:no-repeat;
}

#leftinfo
{
	width:260px;
	height:125px;
	margin:3px;
	z-index:21;
	background-image:url(images/information.gif)
}

#leftmiddle{
	width:260px;
	height:80px;
	margin:3px;
	z-index:30;
}

#descriptiontext{
	margin-top:-555px;
	margin-left:390px;
	width:300px;
	height:100px;
	z-index:10;
	}
	
#dropdown{
	width:260px;
	height:80px;
	margin:3px;
	z-index:12;
	background-image:url(images/dropdown.gif);
	background-repeat:no-repeat;
	margin-top:0px;
}

#menuwork{
	width:260px;
	height:80px;
	z-index:13;
	margin-left:-165px;
	margin-top:-410px;
}

Hi to all,

I have a problem with an empty div. I have created an empty div as follows: Code:

<div id="more"></div>Hello

Now I set the height property of the empty div equals to 20px. On IE 7.0 it looks fine, with the hello under the empty div, however in FireFox and Opera Hello is being display nearly inside the empty div. What can i do to fix this and make it display always under the empty div?

Thanks and Regards,
Sim085

ps: I am using the Strick Doc Type. and I need the empty only to colour it in a different colour (for style that is).

100% height, floats, renders fine in FF but in IE I get a scrollbar and a bit of space underneath the wrapper div. I can put up a screenshot if needed. I've been trying to solve the issue for 2 days now. Thanks for the help.

CSS
Code:

@charset "utf-8";
/* CSS Document */
html, body {
	height: 100%;
}

body {
	background-color: #63aacf;
	margin-top: 0;
	margin-left: 0;
	padding: 0;
}

h1 {
	margin-top: 0;
	padding: 0;
}

#header {
	background-image: url(images/top.png);
	background-repeat: repeat-y;
	margin-bottom: 0;
}

#content {
	margin-top: 0;
}

#spacer {
	background-image: url(images/supra_02.png);
	background-repeat: no-repeat;
}

#wrapper {
	width: 800px;
	min-height: 100%;
	margin: 0;
	padding: 0;
	background-image: url(images/bg.png);
	background-repeat: repeat-y;
	overflow: hidden;
}

* html #wrapper {
	height: 100%;	
}

#sidebar {
	width: 200px;
	float: left;
}

#mainContent {
	width: 600px;
	float: right;
}

#clearfloats {
	height: 0;
	clear: both;
	overflow: hidden;
}

HTML
Code:

<div id="wrapper">
	<div id="header">
    	<h1>boogy</h1>
        <div id="spacer">&nbsp;</div>
    </div>
    <div id="content">
    	<div id="sidebar">
        Link <br /> Link <br /> Link        </div>
        <div id="mainContent"> Hello World</div>
        <div id="clearfloats"></div>
    </div>
</div>

I am having a problem unique to IE 8. The right most nav button jumps down a bunch of pixels. This does not seem to be happening in any other browsers, except IE 8.

Some code involving said elements:
Code:

         #nav {
		right: 10px;
		top: 45px;
		position: absolute;
		background-color: black;
		height: 50px;
		width: 640px;
	}

	ul {
		text-overflow: clip;
		display: inline;
		border-bottom: 25px solid black;
	}

	li {
		list-style-type: none;
		float: left;
		margin-top:25px;
	}


	#aboutButton {
		display: block;
		height: 20px;
		width: 93px;
		background-image: url(images/nav/about_button2.gif);
		margin-left: 40px;
		clear: both;
	}

	#aboutButton:hover {
		display: block;
		background-position: 0px 20px;
		height: 20px;
		width: 93px;
		background-image: url(images/nav/about_button2.gif);
		clear: both;
	}

message me for a link to the site if you would like to see it in action. any help is appreciated. thanks!

Hi,

I am finishing up my site and I have decided to add to footer image to each page but when I attempt to add it on a page that has padding whether it be after the text with padding or not the image is detached by approx the padding size from the bottom.

I have been toying around for hours but with no success.
I have also been reading some of the tutorials given to me by the members here which have helped greatly but I am stumped.

The image in question is Code:

<img src="images/footer.jpg" alt="For more information, please visit the FAQs or the forum." name="footer" id="footer" />

If you need me to upload the pics I can do that (website down atm hence the code instead of a url)
(With how great you guys are, I can nearly guarantee that It will only require an extra line added to the css)

Code:

<!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=utf-8" />  <link rel="stylesheet" type="text/css" href="./index.css" media="all" />  <link rel="shortcut icon" href="http://torquesro.info/favicon.ico" />  <meta name="verify-v1" content="RhiSLQkMtmAKlbQN7TUe1DnWYD/Mxl0ROy7UiZlDGCU=" />  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  <title>TorqueSRO - FAQ</title>  <meta name="description" content="We offer tools for Silkroad Online in order to provide advanced functions, automate game options and deliver new functionality."/>  <meta name="keywords" content="Silkroad, Silkroad Online, Torque, TorqueSRO, tClientless, silkroad clientless, silkroad walkthrough, silkroad tools, Mmorpg, silk, sr33, cheat, hack, sro"/>  <meta name="copyright" content="Copyright TorqueSRO - 2009"/>  <meta name="author" content="UrbanGrafix"/>  <meta name="Distribution" content="Global"/>  <meta name="Rating" content="General"/>  <!--[if IE]>  <style type="text/css" media="all">.borderitem {border-style:solid;}</style>  <![endif]-->  </head>  <body>  <div id="container">  <div id="main">  <a href="/index.html"><img src="images/HomeButton.jpg" id="HomeButton"  alt="TorqueSRO" /></a>  <a href="/tclientless.html"><img src="images/clientless.jpg" id="clientless"  alt="tClientless" /></a>  <a href="/faq.html"><img src="images/FaqButton.jpg" id="FaqButton"  alt="FAQs" /></a>  <a href="/videos.html"><img src="images/VideosButton.jpg" id="Links"  alt="Videos" /></a>  <a href="/forum"><img src="images/ForumButton.jpg" id="AboutButton"  alt="Forum" /></a>  </div>    <div id="ad">  </div>    <div id="main1">  <img src="images/mainlogo.jpg"  alt="TorqueSRO" name="Domi2" id="Domi2" /><img src="images/Main2ndBannerSRO.jpg"  alt="" name="Main2ndBanner" id="Main2ndBanner" /></div>      <div id="Content">  <div id="ContentMain">  <p style="text-align: left"><a href="#a">Q. I’m getting an error when  I run tClientless, it says the side-by-side configuration is incorrect.</a></p>  <p style="text-align: left"><a href="#b">Q. How do I login multiple  accounts?</a></p>  <p style="text-align: left"><a href="#c">Q. tClientless crashed! Why  did this happen?</a></p>  <p style="text-align: left"><a href="#d">Q. How can I make a  character a master for every character logged in through tClientless?</a></p>  <p style="text-align: left"><a href="#e">Q. I want to delete an  alias, how can I do that?</a></p>  <p style="text-align: left"><a href="#f">Q. tClientless says the  authentication failed and/or cannot connect to the server.</a></p>  <p style="text-align: left"><a href="#g">Q. I missed out on the BETA,  will I be able to use tClientless?</a></p>  <p style="text-align: left">&nbsp;</p>  <p style="text-align: left">&nbsp;</p>  <p style="text-align: left">&nbsp;</p>  <p style="text-align: left">&nbsp;</p>  <p style="text-align: left">&nbsp;</p>    <p style="text-align: left"><strong><a name="a" id="a"></a>Q. I’m getting an error when  I run tClientless, it says the side-by-side configuration is incorrect.</strong><br />    A.  Download and install this: <a href="http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf&displaylang=en">http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf&displaylang=en</a> </p>      <p style="text-align: left"><br />    <strong><a name="b" id="b"></a>Q. How do I login multiple  accounts?</strong><br />    A.  Simply type the account information and hit login again, tClientless will  handle everything.</p>      <p style="text-align: left"><br />    <strong><a name="c" id="c"></a>Q. tClientless crashed! Why  did this happen?</strong><br />    A.  Well, first you should note that tClientless is only in the BETA (development)  stages. The reason it crashed it likely due to incorrect parsing, send the  “lastpacket.txt” file to bot90210 so that I can fix this issue.</p>      <p style="text-align: left"><br />    <strong><a name="d" id="d"></a>Q. How can I make a  character a master for every character logged in through tClientless?</strong><br />    A.  Go to File->Master Manager and enter the character’s name. They will be  saved as a global master and will be able to use master commands for every  character.</p>      <p style="text-align: left"><br />    <strong><a name="e" id="e"></a>Q. I want to delete an  alias, how can I do that?</strong><br />    A.  Go to File->Alias Manager and delete the alias entry.</p>      <p style="text-align: left"><br />    <strong><a name="f" id="f"></a>Q. tClientless says the  authentication failed and/or cannot connect to the server.</strong><br />    A.  This could happen for various reasons, the most common are that our server is  experiencing issues or you are not registered with the BETA test.</p>      <p style="text-align: left"><br />    <strong><a name="g" id="g"></a>Q. I missed out on the BETA,  will I be able to use tClientless?</strong> <br />    A. Possibly.  We’ve limited the users that can join the BETA because we don’t want to  overload the server, if the server can handle 300 users comfortably then you  will increase the limit. We’ve made tClientless connect to our servers because  we’re sick of people posting it elsewhere.</p>  </div>  <img src="images/footer.jpg" alt="For more information, please visit the FAQs or the forum." name="footer" id="footer" />  </div>        <form action="http://www.google.com/cse" id="cse-search-box" target="_blank">  <div align="right">    <input type="hidden" name="cx" value="partner-pub-4151060843783741:adaty3-25z5" />    <input type="hidden" name="ie" value="ISO-8859-1" />    <input type="text" name="q" size="20" />    <input type="submit" name="sa" value="Search" />  </div></form><script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>    <a href="http://validator.w3.org/check?uri=referer"><img          src="http://www.w3.org/Icons/valid-xhtml10-blue"          alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>  <a href="http://jigsaw.w3.org/css-validator/check/referer">      <img style="border:0;width:88px;height:31px"          src="http://jigsaw.w3.org/css-validator/images/vcss-blue"          alt="Valid CSS!" /></a>      </div>  <script type="text/javascript">  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));  </script>  <script type="text/javascript">  try {  var pageTracker = _gat._getTracker("UA-10605650-1");  pageTracker._trackPageview();  } catch(err) {}</script>  <!-- Piwik -->  <script type="text/javascript">  var pkBaseURL = (("https:" == document.location.protocol) ? "https://torquesro.info/piwik/" : "http://torquesro.info/piwik/");  document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));  </script>  <script type="text/javascript">  try {  var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1);  piwikTracker.trackPageView();  piwikTracker.enableLinkTracking();  } catch( err ) {}  </script><noscript><p><img src="http://torquesro.info/piwik/piwik.php?idsite=1" style="border:0" alt=""/></p></noscript>  <!-- End Piwik Tag -->  </body>  </html>  

Code:

html, body {  	margin:0;  	padding:0;  }    body {  	background-image: url(images/bglong209.png) ;  	background-repeat: repeat-x;      text-align:center;  	padding:0px;  }  .p {  	margin:0px;  	padding:0px;  	font-size: inherit;  	font-family: inherit;  	font-weight: inherit;  	text-align: inherit;  	color: inherit;  	line-height: inherit;  	vertical-align: top;  }  #container {  	width:654px;  	margin:0px auto;  	top: 0;  }  #ad {  	  }  p {  	padding-top:0px;  	margin-top:0px;  	color: #000;  	background-color: #FFF;  }  img {  	border:0px;  }  .AbsWrap {  	position: relative;  	left: 0;  }  .rowWrap {  	width: 100%;  }  .clearfloat {  	clear:both;  	height:0px;  }  #main {  	width:654px;      margin:0px auto;  	border: 0px none #f0f0f0;  	top:0;  }  #main1 {  	width:654px;      border: 0px none #f0f0f0;  	margin:0px auto;  		  }  #main2 {  	width:654px;      border: 0px none #f0f0f0;  	margin:0px auto;  }  #Content {  	background:#fff;  	clear:both;  	width: 654px;  	font-family: Arial, Helvetica, sans-serif;  	font-size:10px;  }  #ContentMain {  	padding-left: 10px;  	padding-right: 10px;  	padding-top: 20px;  	margin:0px auto;  	border: 0px none #f0f0f0;  	}    #HomeButton {  	margin:0px auto;  	margin-top:0px;  	width:163px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #clientless {  	margin-left:0px;  	margin-top:0px;  	width:164px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #FaqButton {  	margin-left:0px;  	margin-top:0px;  	width:101px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Links {  	margin-left:0px;  	margin-top:0px;  	width:99px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #AboutButton {  	margin-left:0px;  	margin-top:0px;  	width:127px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Domi {  	margin-left:0px;  	margin-top:59px;  	width:320px;  	height:272px;  	margin-bottom:0px;  	float:left;  	display:inline;  	font-size: 9px;  }  #Domi1 {  	margin-left:0px;  	margin-top:59px;  	width:334px;  	height:272px;  	margin-bottom:0px;  	float:left;  	display:inline;  	font-size: 9px;  }  #Domi2 {  	margin-left:0px;  	margin-top:59px;  	width:654px;  	height:271px;  	margin-bottom:0px;  	float:left;  	display:inline;  	font-size: 9px;  }  #tClientlessBanner {  	margin-left:0px;  	margin-top:59px;  	width:333px;  	height:192px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #MainBlueBanner1 {  	margin-left:0px;  	margin-top:0px;  	width:59px;  	height:83px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #colwrap3 {  	float:left;  	width:273px;  	margin-top:0px;  	margin-left:0px;  }  #DownloadButton {  	margin-left:0px;  	margin-top:0px;  	width:47px;  	height:48px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #colwrap5 {  	float:left;  	width:226px;  	margin-top:0px;  	margin-left:0px;  	border: 0px solid #f0f0f0;    }  #Downloadlatestversionbanner {  	margin-left:0px;  	margin-top:0px;  	width:226px;  	height:25px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #colwrap7 {  	float:left;  	width:89px;  	margin-top:0px;  	margin-left:0px;  	border: 0px solid #f0f0f0;    }  #BlueTinyBanner {  	margin-left:0px;  	margin-top:0px;  	width:7px;  	height:11px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Bluelongbanner3 {  	margin-left:0px;  	margin-top:0px;  	width:89px;  	height:11px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Bluelongbanner2 {  	margin-left:0px;  	margin-top:0px;  	width:137px;  	height:23px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #MainBlueBanner2Long {  	margin-left:0px;  	margin-top:0px;  	width:274px;  	height:35px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Main2ndBanner {  	margin-left:0px;  	margin-top:0px;  	width:654px;  	height:87px;  	margin-bottom:0px;  	float:left;  	display:inline;  }  #interface {  	margin-left:0px;  	margin-top:0px;  	width:654px;  	height:615px;  	margin-bottom:0px;  	float:left;  	display:inline;  }  #footer {  	margin-left:0px;  	margin-top:0px;  	width:655px;  	height:93px;  	margin-bottom:0px;  	float:left;  	display:inline;  }  #Version {  	font-size:9px;  	color: #FFF;  	font-weight: bold;  	font-variant: small-caps;  	background-color: #416F7C;  	font-family: Verdana;  	text-align: left;  }  #container #Content #ContentMain p a font {  	color: #0000FF;  }  

I haven't seen this one before. And I can't for the life of me figure out what could be causing this.
Take a look at This Page
To see what I'm talking about, you'll need to view it in a good browser first (Mozilla, Netscape, Opera) Then look in IE.
Basically there's an H3 that also serves as a link to my RSS Feed page.
You don't see it in IE unless you actually hover the mouse over it. Even then, if you move the mouse over the menu on the left, the heading disapears again. At first I thought it could be because it was a heading, but on another page a regular link does it too.
I've got two stylesheets, and it does it on both.
Any thoughts or suggestions?
Here's the main stylesheet

If you look at http://jordanmeeter.com/new/about.php and http://jordanmeeter.com/new/about/cd-collection.php you will see that the latter pages moves to the left and I believe stretches the pages. I removed the list, and sure enough the problem went away. But what is causing this? It's just a simple list...

BTW, the CSS is http://jordanmeeter.com/new/includes/x.css.

Hello CSS gurus,

When I add an italic font style to my web page, it causes a vertical shift in IE6. Everything is fine in Firefox.

Can anyone tell me what is happening with this?

Vertical Shifted with Italics:
http://www.innovations-online.com/t...ch_news_it.html

No Italics is Fine:
http://www.innovations-online.com/t.../tech_news.html

The same problem occurs with oblique.

Thanks in advance!

Darin

Hi,

I'm having a strange problem in IE7 and IE8 with CSS and toggle functionality. I'm using some simple jquery script to show/hide a div when a user clicks on a button. However, there's a strange issue happening that in IE7 and 8 the expanded content overlaps the content below. It should push all the content below it down instead. I'm completely perplexed by this. It works fine in Firefox and Safari.

Here is a sample page: http://easytrip.ie/client-services

Any help would be much appreciated!

Hello, I have a problem that hopefully someone has seen before and found a solution.

I have some text being displayed. When the text includes a image, in IE, it will repeat the last line of the text twice. so if I have this html

Code:

<div id="dorm_room_article_text">
<strong>HI</strong><br />
<br />
<br />
<img alt="image" src="some_image" width="525" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
I love this game!
</div>

and this as the css
Code:

#dorm_room_article_text {
	float: left;
	clear: both;
	width: 100%;
	font-size: 95%;
	margin: 0 0 20px;
}

it will display:
I love this game!
I love this game!

at the end, only in IE.

I assume it has something to do with floats and displays but can't figure it out.

Any ideas?

Thanks.

Here's the page which loads fine in Firefox

The search box doesn't load correctly in IE, any suggestions, have spent ages tinkering and haven't found a solution which works for all browsers.

Thanks

I am creating a CMS system that will be implementing nested drop down menus. It being a CMS, the clients will be able to adjust what menu items are to be displayed. Hopefully, I can explain my problem here clearly.

The drop down menu works as follows. When a user moves his mouse over the menu item, the menu item is highlighted and the children of that menu item are displayed. Then if the mouse is moved over one of the children, the child menu item is highlighted and any children of that menu item are displayed, etc. To do the highlighting I am using Javascript to change the element's class from 'menuitem' to 'menuitem_highlighted' using onMouseOver and onMouseOut. Now to my problem: I want to use <a> tags for the menu items on the menu, not just onClicks. So I have used CSS to assign a class definition to 'menuitem a' and 'menuitem_highlighted a' Now this works fine for the top level menu, however, when you get to the nested menus, CSS causes all of the children <a> tags to use the 'menuitem_highlighted a' class even when the mouse is not over top of them.

A simplied example of the problem that I have run into is this:
Code:

<!--- CSS --->
  .tableinfo {
	width: 200px;
	padding: 0px;
	margin: 0px;
  }
  .tableinfo .menuitem { 
  	background-color:#666666;
	color:#FFFFFF;
	text-align:left;
	border: 1px solid #FF0000;
  }
  .tableinfo .menuitem a { 
	color:#FFFFFF;
	text-decoration:none;
  }
  .tableinfo .menuitem_highlighted { 
  	background-color:#FFFFFF;
	color:#666666;
	text-align:left;
	border: 1px solid #FF0000;
  }
  .tableinfo .menuitem_highlighted a { 
	color:#666666;
  }

Code:

<!--- HTML --->
<table class="tableinfo">
  <tr>
    <td class="menuitem_highlighted">
      <a href="index.html">Text</a>
      <table class="tableinfo">
        <tr>
          <td class="menuitem">
            <a href="index.html">Text</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

In the example, I expect the first link to use the 'menuitem_highlighted a' class, however, I was hoping that the second would use the 'menuitem a' class, but no such luck.

If you need any further informatoin, please let me know. Thanks for your help!

Mitchell Killian (II Cor. 12:9)
Integrity Design and Coding
http://www.integritydc.net
"Except a man be born again, he cannot enter into the kingdom of heaven." John 3:3

IE6,IE7,Opera,Safari OK
FF,FF2 Broke

I have three sections on a page

Code:

<div id="Page">

 <div id="Content">
  ...
 </div>

 <div id="Menu">
  .
 </div>

</div>

DIV's Content and Menu are both floated left and have set widths so that they both fit on one line. All is fine.

I can put anything in the Content DIV apart from a <select> box. If I put a <select> box in it forces the Menu DIV to drop to the bottom of the page, as if there is no more room on the line (which is empty).

As above, this works in IE, but fails in FF and FF2, any ideas?

Thanks.

Hi,

I've searched the forums and seen where others had a similar problem, but the suggested solution has not worked for me.

What I'm doing: using div tags to create the appearance of a 4 column form.

For some reason, after I use the tag <div id='2col_right'>

Form fields contained in my next div tag (<div id='2col_left'>) are un editable.

If I use my tab key, I can get to them in tab mode. And if they already contain data they can be edited, but the blank fields (see Trustee) will not allow me to click into.

My code snippet, with the style sheet included, looks like this:


Please see my code snippet:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#pagecontainer {position: relative; top: 0pt; right: 0pt; margin: 0pt;}

#maincontent {position: relative; clear: both; margin: 0pt;}


#2col_left {margin: 0pt 10pt 10pt 4pt; float: left; padding: 4pt; clear: left;}
#2col_right {margin: 0pt 10pt 10pt 4pt; padding: 4pt; clear: right;}

.formcouple {margin: 0pt 5pt 5pt 5pt; font-size: 8pt;}
.formlabel {width: 100pt; border: 1pt solid #003366; font-weight: bold; font-size: 8pt; padding: 2pt; margin: 0pt 0pt 6pt 0pt; background: #ECF5FD}
.formvalue {border: 0pt solid black; font-weight: normal; font-size: 10pt; padding: 2pt; margin: 0pt 0pt 6pt 0pt;}

</style>

</head>

<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" bottommargin="0" margin="0">
<div id="pagecontainer">

  <div id="maincontent">

    <form name="fCustForm" action="default.cfm?fuseaction=custCreate" method="post">
    
    <div id="2col_left">
      <span class="formcouple">
      <span class="formlabel">Customer Name</span>
      <input type="text" name="name" value="john doe" size="30" maxlength="60">
      </span>
      
    </div>
    
    <div id="2col_right">
    
      <span class="formcouple">
      <span class="formlabel">Address</span>
      <input type="text" name="address" value="126 Some Rd " size="30" maxlength="255">
      </span>

    </div>
    
    <div id="2col_left">
    
      <span class="formcouple">
      <span class="formlabel">Trustee</span>
      <input type="text" name="trustee" value="" size="20" maxlength="25">
      </span>
    
      <br>
      <span class="formcouple">
      <span class="formlabel">City2</span>
      <input type="text" name="city2" value="" size="30" maxlength="30">
      </span>
      <br>
    </div>

  </div>

</div>

</body>
</html>
  

BTW - I am doing this in IE6.x

Hi guys,

I've applied a clearfix to contain two floating elements (the checkbox and submit button - see below), unfortunately, this doesn't seem to work too well with the rounded corners technique I'm using.

Before adding floating elements and clearfix
http://www.soapshoe.co.uk/testa.php

After adding floating elements and clearfix
http://www.soapshoe.co.uk/test.php

Anyone got any advice on what's going wrong?