|
CSS - Small Float Problem In Ie
im making a panel with rounded corners
just 4 divs , topLeft, topRight etc... i have them inside 1 container div that is 80% width, the 4 corner div's are all 50% width and 50% height it's all floated left and theres a <BR> between the top en bottom section but it works only in firefox...in IE they just line up below eachother unless i make the width of them 49%....so wheres the 1 ****ing % ? Similar TutorialsThe underline is on the contact page (the google map has been freaking out on IE, so try FF). I want "Hours" to be underlined, but it isn't showing up. It's an h1 with a class of "comment" and the CSS is Code: h1.comment {
text-decoration: underline;
}
The float problem uses this CSS. The page in question shows all the previous presidents . There's a 0 margin and it does float, it just is aligned wrong. The CSS for both columns is Code: #pastpres table {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .8em;
border-collapse: collapse;
margin-bottom: 1em;
margin-right: 0;
}
#pastpres tr {
border-bottom: 1px solid #775b36;
}
#pastpres2 table {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .8em;
border-collapse: collapse;
margin-bottom: 1em;
float: right;
margin-top: 0;
margin-left:0;
}
#pastpres2 tr {
border-bottom: 1px solid #775b36;
}
Hi, I'm new to using forums, and need a little help trying to fix an IE6 problem. My code is all valid, and i'm using xhtml strict. my page works fine in all the main browsers (including ie:7/8) just not ie6. Here is the problem i have. I have a div (links) which is 956px wide and i am floating 5 other divs (1-5) within the links div. The widths and padding for all of the 5 divs equals 956px's But for some reason the last div (lower5) is dropping out of alignment, it looks like ie6 thinks there is not enough room for all of the 5 divs to fit within the outer div. As you can see i have tried using line height:0; and that did not help. Here is my code...........Any idea's HTML: <div id="lower-links"> <div id="lower1"></div> <div id="lower2"></div> <div id="lower3"></div> <div id="lower4"></div> <div id="lower5"></div> </div> CSS: #links { margin:0; padding:0; background-color: #FFFFFF; width: 956px; height:374px; float: right; line-height:0; } #lower1,#lower3 { background-color: #FFFFFF; width: 161px; height:308px; float: left; padding-top:33px; padding-left:15px; padding-right:15px; line-height:0; } #lower2,#lower4 { background-color: #FFFFFF; width: 162px; height:308px; float:left; padding-top:33px; padding-left:15px; padding-right:15px; line-height:0; } #lower5 { background-color: #FFFFFF; width: 160px; height:308px; float: right; padding-top:33px; padding-left:15px; padding-right:15px; line-height:0; } Well I got sick of reading through tons of <td> and <tr> tags today so I sat down and tried to write my first CSS script ever. I got the basic idea of it and tweaked it using Firefox/Firebug to get it working great. The problem was I checked back in IE (since most people use it =/...) It looked all messed up and I tried changing a lot of things around and I just got frustrated. Since I am new to this whole thing with CSS, I don't know what to look for or change. I know that the top links are messed up but I will fix those after I get my layout working in both browsers. Can anyone help me out? www.etwcweb.com/ETWC.html Here is the CSS code also: Code: /* Main Part */
body {
font-family: Arial, Helvetica, sans-serif;
background: #333333 url(Images/mainbacknew.png) repeat-y;
font-size: 14px;
margin: 0px;
}
h1 {
font-size: 115%
font-weight: bold;
color: #000000;
}
p, ol, ul {
line-height: 145%
}
a {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #CCCCCC;
font-weight: bold;
text-decoration: none;
}
ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-left:0pt;
padding-left:0pt;
}
ul li {
list-style: url(Images/bluearrow.png);
padding-left:15px;
}
img {
border:medium none;
}
img.left {
float:left;
margin:5px 9px 0pt 0pt;
}
img.right {
float:right;
margin:5px 9px 0pt 0pt;
}
hr {
display:none;
}
/* Floating part of Page */
#main_content {
width: 800px;
margin: 0pt auto;
background: url(Images/bg_content.jpg) repeat;
}
#main_content a {
color: #000000;
text-decoration: underline;
}
#main_content a:hover {
color: #666666;
}
/* The Top Picture */
#top_area {
background: url(Images/CSSHeader.png);
height: 433px;
width: 100%;
}
#top_area li {
display: block;
}
#top_area a {
color: #FFFFFF;
display: block;
float: left;
padding: 40px 20px 0pt;
text-decoration: none;
}
/* Search Form */
.search {
float: right;
padding-right: 20px;
margin-top: 50px;
margin-bottom: 50px;
}
.search h1 {
color: #FFFFFF;
font-size: 150%;
}
/* Top Links */
#main_links {
/* background-color: #000000;
opacity: 0.7; */
width: 800px;
margin: 0pt auto;
}
#main_links ul {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-left: 0pt;
padding-left: 0pt;
}
/* Right Side of Floating Page */
#stories {
background: transparent url(Images/bg_content.jpg) repeat;
width: 535px;
padding: 30px;
float: right;
margin: 0pt auto;
}
#stories h2 {
padding-left: 20px;
padding-top: 15px;
}
/* Left Side */
#left_bar {
background: transparent url(Images/bg_content.jpg) repeat;
float: left;
width: 205px;
margin: 0pt auto;
}
.left {
padding-right: 10px;
padding-top: 0px;
}
.left_list {
padding: 20px;
}
.left_list ul li {
border-top: 1px solid #CCCCCC;
padding: 10px 15px;
}
#left_bar h1 {
background: url(Images/LeftHeaders.png) repeat-x;
padding-left: 20px;
padding-top: 5px;
color: #FFFFFF;
}
/* Message */
#top_footer {
width: 800px;
margin: 0pt auto;
background-color: #666666;
color: #FFFFFF;
font-size: 90%;
font-weight: bold;
padding-top: 4px;
padding-bottom: 4px;
text-align: center;
line-height: 150%;
}
/* Bottom Links */
#links {
width: 800px;
margin: 0pt auto;
text-align: center;
background: #000000;
color: #FFFFFF;
font-size: 90%;
line-height: 160%;
padding-top: 8px;
padding-bottom: 3px;
}
#links a, #links a:hover {
text-decoration: none;
font-weight: bold;
}
#links .contact {
}
#links .contact a, #links .contact a:hover {
text-decoration: underline;
color: #0000CC;
}
Thanks in advance guys and sorry if this is already posted here, but my brain is frazzled and I couldn't find it with a quick search or three Hi everyone, I am new to the forum. I am new to CSS and just trying to learn as much as i can as i go. I am currently working on a website and having a small problem with my drop down menus. It works great in Firefox, but in Safari when i hover over the drop down, it shifts to the left by a few pixels. I haven't added the IE workaround yet because i wanted to get this sorted before doing that so it won't work in IE yet. I would post a link but can't because i'm too new. I'm new to this, so be kind on my coding The code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Center test - "text-align: center" set for body, "text-align: left" for containing div</title>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
text-align: center;
}
div#container
{
width: 100%;
background-color: #EAFBFF;
width:760px;
height:220px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #0066FF;
border-right-color: #0066FF;
border-bottom-color: #0066FF;
border-left-color: #0066FF;
}
div#container2
{
width: 760px;
background-color: #ddd;
width:760px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #0033FF;
border-right-color: #0033FF;
border-bottom-color: #0033FF;
border-left-color: #0033FF;
padding-top: 15px;
padding-bottom: 15px;
}
div#container3
{
width: 760px;
background-color: #666666;
width:760px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #0033FF;
border-right-color: #0033FF;
border-bottom-color: #0033FF;
border-left-color: #0033FF;
padding-top: 13px;
padding-bottom: 10px;
}
#container {
}
#Layer1 {
position:absolute;
width:760px;
height:115px;
z-index:1;
left: 405px;
top: 102px;
background-color: #0000FF;
overflow: scroll;
}
#container2 {
}
#Layer2 {
position:relative;
width:760px;
height:600px;
z-index:1;
left: 405px;
top: 102px;
background-color: #0000FF;
overflow: scroll;
}
#container4 {
font-family: Arial, Helvetica, sans-serif;
width: 500px;
font-size: 14px;
font-style: normal;
color: #DDDDDD;
text-decoration: none;
text-align: left;
margin-right: 110px;
margin-left: 125px;
background-color: #999999;
border: thin solid #999999;
padding-left: 15px;
}
#Layer3 {
position:relative;
width:200px;
height:600px;
z-index:1;
left: 405px;
top: 102px;
background-color: #0000FF;
overflow: scroll;
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style2 {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#navbar {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
background-color: #666666;
margin: 0px;
padding: 0px;
height: 20px;
}
#navbar ul {
padding: 0;
margin: 0;
list-style: none;
}
#navbar li {
float: left;
text-align: center;
background-color: #666666;
position: relative;
width: 130px;
}
#navbar li ul{
position: absolute;
display: none;
text-align: center;
line-height: 25px;
padding-top: 7px;
}
#navbar li > ul {
top: auto;
left: auto;
}
#navbar li:hover ul {
display:block;
text-align: center;
text-indent: 0;
}
#content {
clear: left;
}
#mainphoto {
padding: 0px;
float: right;
border: 1px solid #0066FF;
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 30px;
}
#container6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
padding-right: 30px;
padding-left: 30px;
}
.style3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.style4 {color: #000000}
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; }
a {
font-size: 12px;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #CC6600;
}
a:active {
text-decoration: none;
color: #CCCCCC;
}
</style>
</head>
<body>
<div id="container">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="(URL address blocked: See forum rules)=7,0,19,0" width="760" height="220">
<param name="movie" value="(URL address blocked: See forum rules)">
<param name="quality" value="high">
<embed src="(URL address blocked: See forum rules)" quality="high" pluginspage="(URL address blocked: See forum rules)" type="application/x-shockwave-flash" width="760" height="220"></embed>
</object>
</div>
<div class="style2" id="container3">
<div id="navbar">
<ul>
<li><a href="(URL address blocked: See forum rules)">Home</a></li>
<li>About the Office
<ul>
<li><a href="">Meet Dr. Toolson
</a></li>
<li><a href="">Meet the Team</a></li>
<li><a href="">Office Tour</a></li>
<li><a href="">Location</a></li>
</ul>
</li>
<li>About Orthodontics
<ul>
<li><a href="">Adults</a></li>
<li><a href="">Children</a></li>
</ul>
</li>
<li>Life with Braces</li>
<li>Contact Us
<ul>
<li><a href="">Contact Information</a></li>
<li><a href="">Request Appointment</a></li>
<li><a href="">Location</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container2">
<div id="container4">
<p class="style3">Contact Information Form</p>
<form action="(URL address blocked: See forum rules)" method="post" class="style4">
<span class="style1">
<label>Name
<br>
<input type="text" name="Name">
</label>
</span>
<span class="style1">
<br>
<br>
<label>Email
<br>
<input type="text" name="Email Address">
</label>
</span>
<span class="style1">
<br>
<br>
<label>Phone Number
<br>
<input type="text" name="Phone Number">
</label>
</span>
<span class="style5">
<br>
<br>
<label><span class="style4">Description (if neccessary)</span> </label>
</span>
<span class="style4">
</span>
<label><br>
<textarea name="Description" rows="5"></textarea>
</label>
<label>
<br><br>
<input name="Submit" type="submit" class="style1" value="Submit">
</label>
<label>
<input name="Reset" type="reset" class="style1" id="Reset" value="Reset">
</label>
<input name="recipient" type="hidden" id="recipient" value="jeff@dinorestoration.com">
<input name="redirect" type="hidden" id="redirect" value="(URL address blocked: See forum rules)">
</form>
</div>
</div>
<div class="style1">
Copyright Toolson Orthodontics 2009 </div>
<p> </p>
</body>
</html>
hey just got a small problem i dont know hw to fix, take a look at my site http://funnyguys99.tripod.com/index.htm if u hover over the links on the left side of the page, the border around them is not even. I want the border to end at the same spot when u hover over them, no matter how many more letters there are in the link. Here's the Css for the left bar, please fix it [CODE] div#menubar { padding-right: 0.5em; padding-left: 0.5em; padding-bottom: 20%; margin: 120px 0px 0px 0px; padding-top: 0.5em; left: 0px; width: 8em; top: 0px; height: auto; position:absolute; background:#FFFFFF; border-right:1px solid black; border-bottom:1px solid black; border-top:1px solid black; } div#menubar ul { padding-left:0px; padding-top:0px; list-style:none; line-height: 85%; margin:0px; } div#menubar a { font-weight: bold; text-decoration: none; font-size:0.6em; padding-right:7.5em; padding-top:0px; padding-bottom:0px; } div#menubar a:link { color: #ffa500; } div#menubar a:visited { color:dark red; } div#menubar a:active { font-weight: normal; } div#menubar a:hover { color: white; background:#999999; border:1px solid black; } [CODE] Hi, I've been a close watcher of this forum for some time now, and it's now that I've run into a problem I can't figure out. http://donimusic.com/test/ In the above site (currently in progress), I have made the #ctop and #cbottom divs a height of 2px, yet in IE it displays the height much more and thus creates the image to repeat itself. I can't figure out how to fix this (for view wanted - view in FF). Thank you kindly for your help. Stacey Building a online store website... If you go here, you can see my problem. My problem is, when the product title is longer than a single line, then it moves the transparent box down. I need the transparent box to move up. If anyone can help, thanks! Ok, I have a two column layout. And I'm trying to get the base of the div stacks to match eachother. Here's the stripped down code I've been playing with to try to create this behavior. Code: <div style="width:600px;">
<div style="width:50%; background-color:#66C; float:right; text-align:center;">
<img src="#" width="150" height="300" alt="Fake Content"/><br />
</div>
<div style="width:50%; height:150px; background-color:#0F0;">1</div>
<div style="width:50%; height:30px; background-color:#C96;">2</div>
<div style="width:50%; height:50px; background-color:#CCC;">3</div>
<div style="clear:both;"></div>
</div>
So the size of div #1 is always fixed, #2 contains dynamic content, and #3 is fixed content but I would like the height of #3 to stretch to match the right column when needed. For the right column, the content is dynamic, and I would like it to stretch to match the bottom of #3 when needed. So basically, the height of both column will vary and I'd like the shorter of the 2 to stretch. I looked around and experimented a bit with some success, but not exactly the behavior I was looking for. The things that have been giving me the most trouble, is that the left column consists of 3 divs, and the right column is floated. From the left, I could probably get away with removing the content from #1 from it's div and let it hang out in the parent div, but the other two really need their own containers. Also, I don't know how else to put the right column on the right side other than to use a float or absolute position (and absolute won't expand the parent div) because both columns are dynamic... Anyhow, I'm searching for suggestions. One thing that sucks is I know this would be a non issue using tables, but this is a page layout and I'm not about to cave now. thanks I'm having trouble with overlapping clickable areas when the line height is set smaller than 1em. i.e. Code: <ul style="line-height:0.825em;font-size:60px;"> <li><a href="#">TOO</a></li> <li><a href="#">BIG?</a></li> <ul> live example at: http://www.beechersmithstackhouse.info/buggs.html the buginess being that when you mouse over the lower portion of "TOO" , the "BIG?" is in it's hover state and is clickable. ... ... setting line-height for each item doesn't work. ... help? Hey Everyone, I would greatly appreciate any help. I created a drop down menu and it works perfectly on all browsers except for Internet Explorer. The ONLY issue is that it centers the text on the drop down. It should be LEFT aligned. If you see the menu on any other browser EXCEPT for Internet Explorer, you can see how its supposed to look. The drop down menu items should just be left aligned. See: ratemodifiers.com/menu.htm Thanks for all help!! Id appreciate all help! thank you so much subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) Hi all, I am in a rush, and stumped, check out this page (in Internet Explorer 7): http://72.167.22.172/new/programs.php?t=8 See the footer? Any insight? (works fine in firefox etc.) I usually never have problems with CSS layouts but whatever reason I'm struggling with this one... I have a container div and inside it I have 4 divs (2 on the left stacked on each other and two on the right stacked on each other). Code: #container {
height: 604px;
width: 920px;
}
#container_left {
height: 604px;
width: 597px;
float: left;
}
#container_right {
height: 604px;
width: 323px;
float: right;
}
#left_top {
background-image:url(images/001.jpg);
background-repeat:no-repeat;
height: 501px;
width: 597px;
}
#left_bot {
width: 597px;
height: 103px;
}
#right_top {
width: 323px;
height: 308px;
background-image:url(images/002.jpg);
background-repeat:no-repeat;
}
#right_bot {
background-image:url(images/003.jpg);
background-repeat:no-repeat;
width: 323px;
height: 296px;
}
all the divs are empty at the moment (just a bg image) except for #left_bot....HTML below... Code: <div id="container">
<div id="conrainter_left">
<div id="left_top"></div>
<div id="left_bot"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Get Started','','images/start_rollover.jpg',1)"><img src="images/start.jpg" alt="Click here to Get Started" name="Get Started" width="597" height="103" border="0" id="Get Started" /></a>
</div>
</div>
<div id="conrainter_right">
<div id="right_top"></div>
<div id="right_bot"></div>
</div>
</div> <!--end container-->
The results I'm getting...The container left div looks good. The container right div is not to the right of the page, but instead to the left of the page below the left div. Instead of floating it right its pushing down to the next line. Any help would be appreciated. Thanks. I've been working on this project for over a month and for some reason cant get my tic-tac-toe container to float in the middle of the page in IE6. The container that is causing the problem is called "<div id="tic-tac-toe">". It centers perfectly in Firefox and IE7 but stays far off to the right in IE6 no matter what I do. Please help if you can help me figure this out your a genius!! Here is a link to to the site: http://dev.blackstonemedia.net/dfh/products.html Hi all i have a problem with a website i am building. It is very annoying. I have a masterpage with a float left menu, a contentplaceholder and a float right element. It used to work correctly but now it floats right OK but when I zoom in the left menu and content zoom correctly but the right float overlaps the content as though it is stuck. I have tried all sorts of things but nothing I can find works. Here is the css : body { height:100%; } #div.row span.left { float: left; text-align: left; font-weight: bold; color: #fff; width: 49%; } #div.row span.right { float: right; text-align: right; font-weight: bold; color: #fff; width: 49%; } #container { width: 100%; margin: 10px auto; background-color: #fff; color: #333; border: 1px solid gray; line-height: 100%; } #top { padding: .5em; background-color: #FFFFFF; border-bottom: 0px solid gray; height: 46px; font-family: Arial, Helvetica, sans-serif; font-size: 2.5em; color: #006000; text-align: center; } #top h1 { padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; background-color: #FFFF66; } #leftnav { float: left; width: 167px; height: 483px; margin: 0; padding: 0; height: 409px; list-style: none; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 1em; } #link { } ul#navigation { width: 9.2em; float: left; margin: 0 0px 0 0; padding: 1em; height: 497px; font-family: Arial, Helvetica, sans-serif; font-size: 1em; color: #0207f6; } ul#navigation li { list-style:none; background-color:#ECEEFA; border-top: solid 1px #ECEEFA; text-align: left; margin: 0; } ul#navigation li a { display:block; text-decoration: none; padding: .25em; border-bottom: solid 1px #39f; border-right: solid 1px #39f; height: 21px; width: 141px; } #rightnav { float: right; width: 160px; margin: 0; padding: 1em; height: 399px; font-family: Arial, Helvetica, sans-serif; text-align: center; right:0; } #content { margin-left: 203px; border-left: 0px solid gray; margin-right: 0px; border-right: 0px solid gray; padding: 1em; width: 100%; height: 20px; font-family: Arial, Helvetica, sans-serif; font-size: 1em; text-align: center; margin-top: 0px; width: 619px; } #h2 { color:#ff0000; font-weight: bold; text-align:center } any ideas anyone? Andy Hello, Not so long time ago I had a problem in firefox when i placed float content in another div. Basically the parent div did not want to wrap my float div's. Thanks to Kravvitz I solved this by following the url over here http://css-discuss.incutio.com/?page=ClearingSpace However today I tried doing the same thing, and I realized that now, my screen is showing fine on FireFox, but not on IE6.0! here I placed some html to show my problem: Code: <html>
<head>
<style>
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
div.myBox{
border: 1px solid red;
display: inline-table;
}
div.myBox:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
div.dofloat{
float:left;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="myBox">
<div class="dofloat">
float1
<br />
<br />
</div>
<div class="dofloat">
float2
<br />
<br />
</div>
</div>
</body>
</html>
If you open this html page in firefox you will notice that a red border is wrapping two green boxes. However opening it in IE6.0 shows a red line in top, and the two green boxes under it. I know that this is because the float objects are not wrapped automatically, however the hack i have placed in the above html solved it for fire fox. What would be the best way to make it work in IE6.0 as well? I did find a hack, that is to place height: 1px; in the div.mybox body: Code: div.myBox{
border: 1px solid red;
display: inline-table;
*heght: 1px;
}
However I am not sure if this is the best way to tackle this problem... thanks for any comments Regards, Sim085 Page: http://dev.donmyersministries.com/test.html Ok, time is money, I decided to change my design a little bit because the way I was headed wasn't working. Now this isn't, I'm fixin to just go back to tables, this is retarded. Anyway, my problem. In FireFox/Opera my right hand column is fine (2 column layout), in IE however, it is pushed down below the left hand column. The left hand side is floated left. An image if it helps at all: Please help, before I abandon CSS layouts, again. later I have the following pretty straight forward and simple layout borders For some reason the "right" floated div "Add Account" is not going to the right in FF3. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Borders</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
form
{
margin:0px;
}
.container
{
position:absolute;
top:0;
left:0;
}
.outer
{
float:left;
margin:10px;
background-color:#FFFFFF;
border:1px;
border-style:solid;
border-color:#990000;
}
.inner-left
{
float:left;
padding:10px;
}
.inner-right
{
float:right;
padding:10px;
}
</style>
</head>
<body>
<div id="container" class="container">
<div class="outer">
<div class="inner-left">
<form>
Filter
<input type="text" name="filer" id="filter" value="" size="20" />
<input type="submit" name="go" value="Go" />
</form>
</div>
<div class="inner-right">
<form>
Add Account
<input type="submit" name="go" value="Go" />
</form>
</div>
</div>
</div>
</body>
</html>
It renders correctly in FF2, IE6 and IE7, but I just can't figure how why it won't display correctly in FF3 (version 3.0.5 to be precise) - just when I thought I'd finally "mastered" most css issues! Any help greatly appreciated. |
|||||||