CSS - Alright...
ok, i've totally given up compatibility for IE. so suggest anything! ok, i have a page that has a horizontal header, to columns below that side by side, and then a footer. now, the page is perfect all the time EXEPT once the left column is shorter than the right, then the container only sizes to the left column and the right one goes right threw it. hmm....
heres the css: Code: <style type="text/css"> /*-- basic dude, basic --*/ body {background-color:#fff; text-align:center; font: 75% Helvetica, Arial, sans-serif; padding: 0; margin: 0;} a, a:visited {color:#5fbcff; font-weight:bold;} a:hover {color:#6c65d5; font-weight:bold;} h1 {color:#fff; text-transform:lowercase; font-size:1.5em;} h2, #comments h4 {font-size: 1em; color:#7b8186;} h3 {font-size:10px;} h4, h5 {font-size:.9em; text-transform:lowercase; letter-spacing:2px;} h5 {color:#78b186;} img, form {border:0; margin:0;} .table {border-width:solid 1px; width:404px; align:left;} /*-- it still goes on --*/ #content {width:700px; margin:0 auto; padding: 0; text-align:left; background:url(newdiagdestraight.gif); border:solid 1px black; position:absolute center; height: 100%; clear:both;} #login {width:700px; height:100px; position:absolute;} #main {float:left; width:404px; padding: 8px; background-image:url(newdiagdes.gif); border-top:solid 1px #fff; margin-top:30px; clear:none;} #sidebar {margin-left:428px; background:url(diagdesop.gif); text-align:left; padding: 4px; border-top:solid 1px #fff; float:right; position:absolute; width:264px;} /*#sidebar {margin-left: 428px; border-top: solid 1px #fff; padding: 4px 0 0 7px; background: #fff url(http://www.blogblog.com/snapshot_tequila/bg-sidebar2.gif) 1px 0 no-repeat;}*/ #header {background-color:#d8dadc; text-align:left; border:0; margin:0;} #header a {color:#fff;} #header h1 {padding:4px;} #header a:hover {color:#5fbcff;} #header div {background: transparent url(thinkscottv3.gif) bottom left no-repeat; height:123px; padding:0; line-height: 1;} #sidebar ul {list-style:none; margin:0 auto; padding:0;} h3.post-title {font-size:12px; margin-bottom:0; background:url(bg3.gif) bottom right no-repeat; color:#314142;} .post {clear:both; margin-bottom:4em; text-decoration:none;} .post-footer em {color:#b4babe; font-style:normal;} #sidebar h2 {font-size:1.3em;} h2.date-header {background:url(bg2.gif) top left no-repeat;} #footer {clear:both; border-top:solid 1px; font-size:9px;} .clr {clear:both; height:0; width:0;} </style> and heres the page: Code: <center> <div id="content"><div id="header"><div> <h1><? include("titlerandomtext.php3") ?>think scott</h1> </div></div> <div id="login"><form name="form2" method="post" action="astrodude.php"><input type="text" name="usr" value="usernam[here]" style="font-family: verdana; font-weight: normal; font-size:9px; background-color: #99ccff"><input type="password" name="pwd" style="font-family: verdana; font-weight: normal; font-size:9px; background-color: #99ccff"><input type="submit" name="Submit" value="Submit"></form> register</p><br /> <br /> <br /></div> <div id="main"> <?php $pbg = "newdiagdes.gif"; $ptdbg = "#126E9E"; $ptdbgtd = "newdiagdeso.gif"; $ptbg = "newdiagdesb.gif"; $dtbg = "newdiagdesbl.gif"; $cbg = "newdiagdesg.gif"; echo("<form name=\"form1\" method=\"post\" action=\"blogaction.php\"> <p>Date: <input type=\"text\" name=\"date\"> </p> <p>A-Name: <input name=\"aname\" type=\"text\" id=\"aname\"> </p> <p>Time: <input name=\"time\" type=\"text\" id=\"time\"> </p> <p>Title: <input type=\"text\" name=\"title\"> </p> <p>Post: <textarea name=\"post\"></textarea> </p> <p> <input type=\"submit\" name=\"Submit\" value=\"Submit\"> </p> </form>"); ?> </div> <!-- End #main --> <!-- Begin #sidebar --> <div id="sidebar"> <p id="description"><? include("links.php3") ?> <br> <? include("randomtext.php3") ?> <br> <br> <? include("randommusic.php3") ?></p> <h2 class="sidebar-title">Previous Posts</h2> <ul id="recently"> <li><?php $naname = @mysql_query("SELECT * FROM blog ORDER BY date DESC LIMIT 7;"); if (!$naname) { echo( "<p>couldnt find teh aname</p>" ); } while($row = @mysql_fetch_array($naname)) { extract($row); echo("<a href=\"#$aname\">$title</a><br>"); } ?></li> </ul> <h2 class="sidebar-title">Archives</h2> <ul class="archive-list"> <li>06.2004</li> <li>07.2004</li> <li>08.2004</li> <li>09.2004</li> <li>10.2004</li> <li>11.2004</li> <li>12.2004</li> </ul> <div id=""><a href="https://www.mozillastore.com/donations/?campaign=newspaper&user=23762"><img src="http://www.spreadfirefox.com/community/themes/phptemplate/spreadfirefox/avatar_ff_paper_donate.png" alt="dude"></a><br> <a href="http://www.spreadfirefox.com/?q=affiliates&id=23762&t=86"><img alt="Get Firefox!" title="Get Firefox!" src="http://spreadfirefox.com/community/images/affiliates/Buttons/125x50/takebacktheweb_125x50.png"/></a><br> <a href="http://www.forumer.com"><img src="http://www.forumer.com/banners/forumer4.gif" alt="dude2"><br><font size="1" face="verdana">Free Forum Hosting</font></a><br /></div> </div> <div id="footer"> <center><?php $ncon2 = mysql_connect("somehost", "usnam", "pass"); $ncondb2 = mysql_select_db("database"); $footer = mysql_query("SELECT * FROM site_info"); while($nfooter = mysql_fetch_array($footer)) { extract($nfooter); } if(!footer) { echo("<p>preciousness lost</p>"); } else { echo("<p>$futer</p>"); } ?></center> </div> <!-- End #footer --> </div> <div class="clr"> </div> </center> Similar TutorialsYou can check this problem in the pink square with curvy corners that I have in the url metatradersoftware com(I cannot mention it because of forum fules). How I am supposed to show you my code if you do not know the url where it is?This post is just for asking a question. Thus, I hope there is nothing wrong with it. If you check the site with firefox, opera or safari everything will be alright, though. Do you have any idea why internet explorer 6 above all and 7 make this mess? For the time being, I still do not have any concrete idea about the reasons of this different behavior in these browsers from Microsoft. I would appreciate any suggestion. Thanks in advance |