PDA

View Full Version : FireFox ignoring Div Order

Ryltar
02-21-2005, 11:16 PM
Hi, I am working on a page and firefox is currently ignoring the order of the divs at the very top. This works in IE but not FF... could someone take a look at the attached code and help me figure this out...


<html>
<head>

<title>Test Page</title>
<meta name = "Description" content = "Test Page" />
<meta http-equiv = "imagetoolbar" content = "no" />
<meta http-equiv = 'content-type' content = 'text/html; charset=utf-8' />

</head>

<body onload = "window.defaultStatus = 'TESTING';" >

<div style = "padding: 0px; background-color: #ffffff; width: 762px; height: 100%; margin-left: auto; margin-right: auto;">


<div style = "background-color: #000000; width: 760px; height: 1px; vertical-align: top;">
<!-- Black Sperator -->
</div>

<div id = "BWTitle">

<a href = '/main.php' onmouseover = "statusIn('Aerospace and Engineering Home'); return true" onmouseout = "statusOut();">Olathe Northwest Aerospace and Engineering</a>

</div>

<div style = "background-color: #000000; width: 760px; height: 1px;">
<!-- Black Separator -->
</div>

<div style = "background-color: #999999; width: 760px; height: 1px;">
<!-- White Separator -->
</div>

<div id = 'topMenu'>

<a class = 'topMenuA' href = '/about.php' onmouseover = "statusIn('About'); return true" onmouseout = "statusOut();">About</a>
<a class = 'topMenuA' href = '/news.php' onmouseover = "statusIn('News/Events'); return true" onmouseout = "statusOut();">News/Events</a>
<a class = 'topMenuA' href = '/images/' onmouseover = "statusIn('Multimedia'); return true" onmouseout = "statusOut();">Multimedia</a>
<a class = 'topMenuA' href = '/staff/staff.php' onmouseover = "statusIn('Staff'); return true" onmouseout = "statusOut();">Staff</a>
<a class = 'topMenuA' href = '/links.php' onmouseover = "statusIn('Links'); return true" onmouseout = "statusOut();">Links</a>

</div>

<div style = "border: 1pt solid black; width: 759px;">

<div style = "float: left; background-color: #ffffff; width: 185px; height: 231px; verticle-align: top; text-align: center;">

<div id = 'leftMenu'>

<a class = 'mainMenu' href = '/classes/AE_CAD/' onmouseover = "statusIn('AE CAD'); return true" onmouseout = "statusOut();"><span class = 'leftMenuHead'>AE CAD</span><br /><span class = 'leftMenuSubHead'>Computer Aided Design</span></a>
<a class = 'mainMenu' href = '/classes/AE_Chem/' onmouseover = "statusIn('AE Chemistry'); return true" onmouseout = "statusOut();"><span class = 'leftMenuHead'>AE Chemistry</span><br /><span class = 'leftMenuSubHead'>Chemical Engineers</span></a>
<a class = 'mainMenu' href = '/classes/AE_Math/' onmouseover = "statusIn('AE Math'); return true" onmouseout = "statusOut();"><span class = 'leftMenuHead'>AE Math</span><br /><span class = 'leftMenuSubHead'>Rockets, Flyers, and Towers</span></a>
<a class = 'mainMenu' href = '/classes/AE_Physics/' onmouseover = "statusIn('AE Physics'); return true" onmouseout = "statusOut();"><span class = 'leftMenuHead'>AE Physics</span><br /><span class = 'leftMenuSubHead'>The Mechanics of Things</span></a>
<a class = 'mainMenu' href = '/classes/Senior_Project/' onmouseover = "statusIn('AE Senior Project'); return true" onmouseout = "statusOut();"><span class = 'leftMenuHead'>AE Senior Project</span><br /><span class = 'leftMenuSubHead'>BattleBots IQ</span></a>

</div>


</div>

<div style = "float: right; background-color: #ffffff; width: 570px; height: 231px; vertical-align: top; text-align: center;">

<a href = '/main.php' onmouseover = "statusIn('AE Home'); return true" onmouseout = "statusOut();" style = "display: block; height: 231px; width: 100%;">

<img src = '/std_images/aelogo.gif' alt = 'ONW Aerospace and Engineering Home Page' />

</a>

</div>

</div>

<!-- These three separators are the messed up ones... -->
<div style = "background-color: #000000; width: 761px; height: 1px;">
<!-- White Separator -->
</div>

<div style = "background-color: #999999; width: 761px; height: 1px;">
<!-- White Separator -->
</div>

<div style = "background-color: #000000; width: 761px; height: 1px;">
<!-- White Separator -->
</div>


<div style = "background-color: #ffffff; width: 100%; text-align: center; vertical-align: top;">

<div id = 'classHeader'>

<a class = 'classHeaderA' href = 'Sophomores' onmouseover = "statusIn('Sophomores'); return true" onmouseout = "statusOut();">Sophomores</a>
<a class = 'classHeaderA' href = 'Juniors' onmouseover = "statusIn('Juniors'); return true" onmouseout = "statusOut();">Juniors</a>
<a class = 'classHeaderA' href = 'Seniors' onmouseover = "statusIn('Seniors'); return true" onmouseout = "statusOut();">Seniors</a>

</div>

<div style = 'text-align: center; vertical-align: top; width: 100%; border: 0px; padding: 0px;'>
CONTENT GOES HERE
</div>

<div style = "height: 10px;">
<!--Spacer-->
</div>

</div>

<div style = "background-color: #999999; width: 100%; height: 1px; vertical-align: top;">
<!-- White Separator -->
</div>

<div style = "background-color: #000000; width: 100%; height: 1px; vertical-align: top;">
<!-- Black Separator -->
</div>

<div id = 'footer'>

<div id = 'footerContents'>

<strong>Index Page</strong>
<br />

Page Editor: Matt<br />
Page Last Updated: January 26, 2005<br />

<a href = '/contact.php'>Contact Us</a>

</div>

<div id = 'bottomMenu'>

<a class = 'bottomMenuA' href = '/main.php' onmouseover = "statusIn('Home'); return true" onmouseout = "statusOut();">Home</a>
<a class = 'bottomMenuA' href = '/about.php' onmouseover = "statusIn('About'); return true" onmouseout = "statusOut();">About</a>
<a class = 'bottomMenuA' href = '/news.php' onmouseover = "statusIn('News/Events'); return true" onmouseout = "statusOut();">News/Events</a>
<a class = 'bottomMenuA' href = '/images/' onmouseover = "statusIn('Multimedia'); return true" onmouseout = "statusOut();">Multimedia</a>
<a class = 'bottomMenuA' href = '/staff/staff.php' onmouseover = "statusIn('Staff'); return true" onmouseout = "statusOut();">Staff</a>
<a class = 'bottomMenuA' href = '/links.php' onmouseover = "statusIn('Links'); return true" onmouseout = "statusOut();">Links</a>

</div>

</div>


</div>

</body>
</html>


I am working on the strictness of it so that is why there is no DTD yet. Once I get this working I will add that depending on what I have to do to get it to work...

Thanks!!
JamieR
02-22-2005, 02:13 AM
What do you mean? You want firefox to display all the divs in the html?

Put in a DTD, something like XHTML 1.0 Transitional and then put all your CSS in a external file....then try it. I haven't tried it myself, but did notice a difference when I tried you code in IEvil and Firefox.

Jamie.
Ryltar
02-22-2005, 02:40 AM
Yah... I am working on the CSS... looks really messed up in FF... thats what I get for using IEvil for debug... So I am rewriting the CSS its just you would think that the divs would be seperate in this mode... oh well.
ronaldb66
02-23-2005, 09:05 AM
In the development phase it's quite alright to use an internal style sheet in the head for easy debugging, but get rid of all the inline styles; it's hard to get a complete picture of what is going on there, style-wise.
If all the styles are in an internal style sheet, once you finished debugging and everything works as intended, it's just a matter of cutting and pasting to make it external.

Also, pick a suitable doctype and add it; then, validate your markup. If you're missing a div end tag somewhere, it may throw off FF, while IE -being designed for sloppy markup- still manages to swallow it.

Lastly: there's a whole lot of divs in there... :( It almost feels like a table layout with all the td's and tr's replaced by divs. Divs for menus (ever try a list?), divs for separators... I for one am really curious what this layout looks like; if you can get a tryout version online somewhere, we could take a peek and maybe come up with some ideas to make it simpler.
rmedek
02-23-2005, 11:23 AM
Hi, I am working on a page and firefox is currently ignoring the order of the divs at the very top.

First of all, what they said... but especially what Ronald said. :)

Second, I'm not sure I understand what divs you are referring to, as the first few on the page are nested and therefore wouldn't be in any order... can you be a little more specific as to which divs you are having the problem with?
Aurelain
03-19-2005, 05:02 PM
Sorry to resurect a seemingly dead thread, but curiosity and frustration made me register and ask a question. Maybe the following code is a bit clearer than Ryltar's:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Why?</title>
<style type="text/css">
#d1 {background-color:yellow; width:100px; height:100px;}
#d2 {background-color:red; width:90%; height:10px; position:absolute;}
</style>
</head>
<body>
<div id=d1>
<div id=d2>
</div>
</div>
</body>
</html>
It's two nested divs. Shouldn't d2 have 90px, since it's parent is 100px? Instead, in FF it has 90% of the viewport.

I'm in my first week of css, so be kind :).