|
CSS - Position/float Problem In Ie
I seem to have an issue with my positioning (or float) in IE (7 & 8).
Every other browser I tried renders the page properly (Safari, FF, Chrome). IE9 wasn't tested yet, so I don't know if it's screwed up too. Here's the link: www[dot]nintendrunk[dot]com/forum The content is all over the "header" in IE whereas it is neatly contained in the middle in other browsers. It only happens with the forum page, every other page's content is fine. Any help would be greatly appreciated. (I assume the problem is with a position/float tag somewhere, but I might be wrong) Similar TutorialsFirst off, every time I come back to try to institute CSS more in my site, the more I hate it. That said, my problem: I have a DIV box that stretches 100% across my screen. Inside of it I need two more DIVs, 'A' aligned to the left and 'B' aligned to the right. I need to be able to add another DIV (C) to the right of A under certain circumstances. The first problem comes into play that you can't just lay a DIV down without a stupid linebreak. I need to use DIVs and not SPANs because both B and C have multiple lines. I also can't do absolute locations because the page is PHP-generated and the items don't have a consistant location on the page, except as being under the same parent DIV. Now I've read around and it seems I want to use floats, and IE supports this to some degree. FF, however, seems to completely remove the children from the parent when a float is used-- despite literature stating that it should remain in the parent. This messes up my entire display as it then begins covering up other content. Question #1: Is there ANY way to avoid display corruption from the line break forced on by block elements, other than putting everything into a table? It would help many facets of my site greatly if I could create self-contained DIV objects which can be placed right after each other like images. And it would solve this problem as well. Question #2: Why would floating children be escaping the parent when w3c and w3schools, among others, all say it shouldn't? If my situation is confusing I can make up a diagram upon request. Thanks- Dave 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?) The code below displays the boxes i want but i do not understand why those that could be aligned to left are not aligned. I would like to have those boxes to be aligned to the left. Any help is appreciated. Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title></title>
<style type="text/css">
div {
position: relative;
width: 10em;
padding: 0.25em;
margin: 0.25em;
border: 1px solid black;
text-align: center;
overflow: auto;
float: left;
}
</style>
</head>
<body>
<div style="top: 0em; height: 2em;"> 8 pm</div>
<div style="top: 5em; height: 2em;"> 9 pm</div>
<div style="top: 10em; height: 2em;">10 pm</div>
<div style="top: 8em; height: 5em;">Box A</div>
<div style="top: 9em; height: 5em;">Box B</div>
</body>
</html>
Hello, I'm new to css layouts. I had to float:left every element so the heights stretch problem is if the image in "page_c_left" is wider than 45% then "page_c_right" will automatically go on the next line. (in Firefox, IE seems to wrap the text without moving the element). also, i wanted to have the content displayed first for non-css browsers, but the examples used position:absolute. when the impression i got was that float is preferable to position. i'm very confused on which method to use for layouts. what method would you use for complex css layouts? float, position or other? this is code with the text wrap problem Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
#main_c {
float:left;
width:770px;
padding: 10px;
border: 1px solid black
}
#header_c {
float:left;
border:1px solid brown
}
#page_c {
float:left;
width:100%;
border:1px solid red
}
#page_c_left {
float:left;
padding:10px;
border:1px solid blue
}
#page_c_right {
float:left;
width:55%;
padding:10px;
border:1px solid green
}
#footer_c {
float:left;
border:1px solid yellow
}
</style>
</head>
<body>
<div id="main_c">
<div id="header_c">
THIS IS THE HEADER
</div>
<div id="page_c">
<div id="page_c_left"><img src="../../photos/image.jpg" alt="image" /></div>
<div id="page_c_right">RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br />RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /></div>
</div>
<div id="footer_c">
THIS IS THE FOOTER
</div>
</div>
</body>
</html>
if you could help, thank you Hi, I have been beating my head against the wall here. My video position in firefox shows up over top of my other nested divs/classes. www.binaryshopper.com The site renders perfect in IE. When you spend more time on CSS than programming, something is wrong! I love CSS but it still doesn't do what it was intended to do. After years of CSS, you still have better control over layout using crappy tables!! Can someone please help me here before I start shooting Firefox developers? Hi all, After being away from the forums for some while I picked up the "webdesign-bug" again (it's raining during my summer holidays) but I'm having some troubles catching up with all new techniques/syntaxes at the moment. I did have a look at some tutorial sites and searched the forum for similar problems but somehow it's a bit overwhelming and I didn't find the solution I'm looking for yet. I do hope I didn't overlook something very basic or ask a frequently asked question (sorry then ) The goal I'm trying to make a (css-based) site with a central column with all 'normal' data. Below this central column I'd like to place some additional layers which are (partly) hidden underneath the main layer and which show themselves if you move with your mouse over the visible parts. The idea behind it is to create some 'desktop' where you have all kinds of things laying on eachother (like additional pieces of paper, some photographs, some money, ...). As an extra feature there would be another layer which makes sure there's a shadow from the 'main column' on the items below it. (Hope this is clear?) What I did so far To achieve this I thought I'd use different layers with different z-indexes and position them over and underneath eachother. So far I have the following code: html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test Layers</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link href="style.css" type="text/css" rel="stylesheet" /> <script type="text/javascript"> function show( obj ) { bla = document.getElementById( obj ); bla.style.zIndex += 10; } function hide( obj ) { bla = document.getElementById( obj ); bla.style.zIndex -= 10; } </script> </head> <body> <!-- CONTAINER --> <div id="container"> <h2 class="title">Quick Links</h2> <!-- SUBCONTENT --> <div class="subcontent1" id="subcontent1" onMouseOver="show('subcontent1');" onMouseOut="hide('subcontent1');"> Subtext1<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/> </div> <div class="subcontent2" id="subcontent2" onMouseOver="show('subcontent2');" onMouseOut="hide('subcontent2');"> Subtext2<br/><img src="/images/1pix.gif" width="400px" height="400px" alt=""/> </div> <!-- CONTENT --> <div class="content_shadow"> <div class="content"> <h1 class="title">Site Title</h1> <div class="content_white"> <h2 class="title">Content Title</h2> Maintext1 </div> </div> </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> css Code: Original - css Code * { margin: 0; padding: 0; } body { background-color: orange; } h1.title { display: none; } h2.title { display: none; } /******************************************************************** * CONTAINER ********************************************************************/ #container { border: solid 1px black; margin: 0 auto; width: 1000px; z-index: 1; /* background-color: lightgray;*/ /* filter: alpha(opacity=50);*/ } /******************************************************************** * SUB CONTENT ********************************************************************/ /* http://msdn2.microsoft.com/en-us/library/ms530301.aspx http://www.w3schools.com/htmldom/prop_style_clear.asp http://www.dynamicsitesolutions.com/css/layout-techniques/ */ #container .subcontent1 { background-color: lime; float: left; position: relative; top: 100px; width: 400px; z-index: 2; /* display: inline;*/ /* height: 200px;*/ /* left: 0px;*/ } #container .subcontent2 { background-color: lime; display: block; float: right; position: relative; top: 200px; width: 400px; z-index: 3; /* display: block;*/ /* height: 200px;*/ } /******************************************************************** * MAIN CONTENT ********************************************************************/ #container .content_shadow { background-color: gray; display: block; margin: 0 auto; opacity: .75; position: relative; top: 0px; width: 850px; z-index: 8; } #container .content { clear: none; margin: 0 auto; width: 800px; z-index: 9; } #container .content_white { background-color: white; display: block; height: 800px; margin: 0 auto; position: relative; top: 0px; width: 100%; z-index: 10; }
* {
The problem(s) Besides the (css)code probably being sloppy (and redundant at points?!?) since I experimented a lot with adding and removing of position-tags, floating-tags, etc etc.. it still fails to do what I'm aiming for. As can be seen on the attached screenshot most of it seems to be working (at least in FF2) (I had my mouse over the 2nd subcontent-layer btw) but the maintext1 won't start at the left of it's layer but instead starts on a x-coordinate where the 1st subcontent-layer finishes Can somebody point me to what I'm doing wrong? Also, if somebody has a relevant tutorial I'd appreciate it as well since I obviously need some extra exercise with this stuff (working on it already btw but you never know if there's another good one) Thanks for any help and if something isn't clear I'll try to explain it further! Hi, Have this web page with a lot of divs in it. I have specified that all divs should be float:left in my css-file so that they will be rendered next to each other. I have noticed that when my browser is smaller than the actual web page some of the divs are rendered below and not to the right. How can I force the browser to still render them to the right. I would like to scroll to the right rather than down. Can anyone help me with this problem? /H Hello, I have developed some very simple code. This code is working well on FireFox (and also netscape) and Operan but not well on IE6. The code is very simple. I have a div tag that containes two other div's. One div contains text to be aligned to the left (using float: left) and another div contains a list (ul) to be aligned to the right (using float: right). The following is the code I have so far: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
.leftText {
float: left;
}
.rightText {
float: right;
}
.top ul {
width: 100%;
text-align:center;
margin: 0;
padding-left: 0;
border: 0;
list-style-type:none;
}
.top ul li {
display: inline;
text-align: center;
float:left;
border-right:none;
background-image: none;
padding-left: 5px;
}
</style>
</head>
<body>
<div class="top">
<div class="leftText">
This is the text on the left.
</div>
<div class="rightText">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
</body>
</html>
Now I did some testing before posting here. First of all I tried to hack it. What I did is add *float: right; inside the .top ul li {...} element. This naturally was not cought by FireFox and Opera, and thus the website still looked fine on these browsers. However when I tried it on IE6 I had a surprose. The list was alligned to the right, but instead of writing "one two three", it wrote "three two one". I do not know how best to solve it, and be greatfull for any advise. thanks and regards, sim085 thanks in advance for the help! if you can take a look at the code below, you will see that all the subcontents are not aligned right. i am trying to display subcontent1, subcontent2 and subcontent3 in row1. then, repeat it for row2. so it will look like 3 cols X 2 row table. what i am doing wrong? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> #content { margin-left: 200px; border-left: 1px solid gray; margin-right: 200px; border-right: 1px solid gray; padding: 1em; } #subcontent2 {float:left; height:50px; margin:0 0 .2em .5em; background:#eee8aa; border:1px solid black; } #subcontent3 {float:right; height:50px; margin:0 0 .2em 0; background-color:#CCCCCC; border:2px dotted red;} #subcontent1 {margin-left:400px; border:1px solid blue; margin-right:150px; padding:1em; } #subcontent p {margin:0 0 .5em .5em; font-family:Verdana; font-size:11px; background-color:#CCCCCC; border:1px solid black; text-align:center } </style> </head> <body> <div id="content"><h2>Subheading</h2> <p>fg gdhoiuw eiouhe viouwbfu8igdofi goiwehviuh eropihpvoih epfiovhpoefvh fbv iopwehfviu teopiuhrguioh gfdg tgt wg</p> <p>afd dfouighoiweh oiehoiuehoiu iuashfoiuerfiugeroigriugh lirduivh lrehv ioperviuherviuo qouitrhvui tgvwre</p> <p>rg uwtdh guoiseh uisgoiunb oiutruighepguihgptuhg dfhgpeorhv oiuhgoihetoishgoi </p> <p>sdfgdf gwetguh reigqre uyreaiu qeroi er fdgfg thgwrtighuroiu og9hghgtuih wtpghwepipeg ptbsrthb </p> <div id="subcontent2">dfgdghureuererg uiruykerf fgsgs gsgh sdg sfg fdsgg</div> <div id="subcontent1"><p id="st3">zones:</p><select name="selZone" size="10" multiple class="sel1"> <option value="%%">* Select One *</option> <option value="1">Ferrari</option> <option value="2">Lamborghini</option> <option value="4">Porsche</option> <option value="5">Konigssen</option> </select></div> <hr align="right" width="276" id="dV"> <div id="subcontent2">dsfwuy rbefuyerwfy erg</div> <div id="subcontent1"> <textarea name="s" rows="10" cols="10"> fiyrqeyfreuyf uuyqfyu fgg tg sdgsgfdg teg tg tg wgtgtrg rgregfwregfwgwg wtgrtg rtghtrghg trgtrgtrg</textarea></div> <div id="subcontent3">this is subcontent3</div> </div> </body> </html> 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 I am trying to re-write a forum post box that is fully CSS and XHTML compliant. I have got this working successfully in Safari, Firefox and Opera on the Mac, but it fails on IE6 on the PC. I cannot work out what the problem is. Can anyone help? (URL fixed) http://centerstageproject.com/test/index2.html As you can see that box that contains the post flows to the same height whatever the content. Screen shot from Safari attached. In IE6 though the left content (ie member details) does not begin until the post content is finished on the right side of the box. 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 Hello, I'm new to CSS and I'm in the process of building my first table-less page. It is quite exciting, but I'm having one major problem. For some reason, I cannot get my main content div to float next to my side bar navigation. In the normal write up, it works in IE but not Firefox or Opera. I took just the essential parts of the code to create a test page for this forum, and now it doesn't even work in IE!!! Here is the code: Code:
<html>
<head>
<style TYPE="text/css">
#topNav {
margin: 10px 0px;
border: 1px solid #000;
width: 100%;
}
#sideNav {
margin-right: 10px;
border: 1px solid #000;
width: 150px;
}
#main {
margin: 0;
border: 1px solid #000;
float: left;
}
</style>
</head>
<body>
<div id="topNav">
Top Nav
</div>
<div id="sideNav">
Side Nav
</div>
<div id="main">
MAIN CONTENT AREA
</div>
</body>
</html>
Any help would be greatly appreciated!!! 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 Hey, Im using floats to position a few forms/form-elements horizontally. But the last form (the signout button), gets shifted on the next line. Can someone explain me why this happens? This is the code i use: php Code: Original - php Code echo '<div style="float: left;... blabla">'; echo '<form action="'.getRoot().'search_contact.php" name="search" id="search" method="post">'; echo '<div style="float: left; width: 35%; margin: 0%; padding: 0%;">'; echo '<input type="text" style="width: 50%" name="contact_name" value="'.$search_string.'" id="contact_name"> '; echo '<input type="submit" name="search_now" value="Search" id="search_now">'; echo '</div>'; echo '</form>'; echo '<form name="new_contact" id="new_contact" method="post" action="'.getRoot().'new_contact.php">'; echo '<div style="float: left; width: 22%; margin: 0%; padding: 0%; text-align: right;">'; echo '<input type="submit" name="add_contact_now" value="New Contact" id="add_contact_now"> '; echo '</div>'; echo '</form>'; echo '<form name="contact_list" id="contact_list" method="post" action="'.getRoot().'contact_list.php">'; echo '<div style="float: left; width: 22%; margin: 0%; padding: 0%;">'; echo ' <input type="submit" name="view_contact_list" value="Contact List" id="view_contact_list">'; echo '</div>'; echo '</div>'; echo '</form>'; echo '<form name="logout" id="logout" method="post" action="'.getRoot().'logout.php">'; echo '<div style="float: left; width: 21%; margin: 0%; padding: 0%; text-align: right;">'; echo '<input type="submit" name="logout_now" id="logout_now" value="Sign out"> '; echo '</div>'; echo '</form>'; echo '</div>'; echo '<div style="float: left;... blabla">'; Hey there, I have a problem I have 3 divs that are going to the top of my heading, and the right one just doesnt float into place. http://hookem.no-ip.org/Upload As you can probably see, the top of each box and to the right. This is my code in the CSS. PHP Code: .hr{ background-image: url(right.gif); width: 3px; height: 23px; background-repeat: no-repeat; } And the HTML part... PHP Code: <div class="hl"></div><div class="hm">Hello again</div><div class="hr"></div> I really really would like help please. Thanks for looking and helping! Hookem! 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 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. http://www.browsercam.com/public.aspx?proj_id=170622 You can see what it's supposed to look like along with the windows 98 version screwed up and the windows 2000 version screwed up. I can't figure out what's causing my navigation div and content divs to not float over. I have a master container or everything and a main div that holds my navigation and content div's to 760px PHP Code: #master{ width:760px; margin:auto; } #main{ float:left; width:100%; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } Can anyone give me any ideas what's causing the mess up? By the way the design works in all other browsers I test with. i have the following: .topDiv {background-image:url(images/topbg.gif); width:796px;height:60px; margin-top:1em; } .menuBar {background-image:url(images/menubar.gif); width:796px;height:30px; margin-top:-59px; } .compLogo {background-image:url(images/topleftimg3.gif); width:305px; height:123px; float:left; margin-left:1em; margin-top:-60px;} what i want is to float compLogo over menuBar and topDiv. however, compLogo floats over topDiv and then menuBar floats over compLogo. how can i force the menuBar to appear under compLogo div? thanks for the help in advance |
|||||||