DIVs overlapping when they're not supposed to! (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message


Jordan -> DIVs overlapping when they're not supposed to! (3/1/2007 18:07:14)

This is my first attempt at laying out a site completely with an external style sheet. My efforts look great in IE7, but when I view it in Firefox or Opera my DIVs (stacked horizontally) overlap where they should not or I have gaps. Does anyone have some experience with this? Any advice? I'm driving myself nuts with this!
~Jordan

This is the link of the test site.

Here's the pertinent CSS code.

BODY {
background-color : #484f7f;
margin-top : 0;
margin-left : 0;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#header {
position: absolute;
left : 0px;
top : 0px;
}

#flash{
position: absolute;
left : 0px;
top : 158px;
}

#header-menu {
font-size: 11px;
color: White;
position : absolute;
left : 700px;
top : 10px;
font-weight : bold;
}


#menu-home {
position : absolute;
left : 200px;
top : 317px;
}

#blue-spacer {
position : absolute;
left : 0px;
top : 100px;
}

#home-text {
margin-left: 200px;
margin-top: 365px;
font-size: 12px;
color: white;
}

Here's the pertinent page code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Bett Solutions :: People, Performance, Purpose</title>
<link rel="stylesheet" type="text/css" href="style-main.css">
<script type="text/javascript" language="JavaScript1.2" src="_pgtres/stmenu.js"></script>
</head>

<img ID="header" src="images/Header.gif" width="800" height="159">

<div id="header-menu">
<p><a class="menu" href="http://www.bettsolutions.com/index.htm">HOME</a><br>
<a class="menu" href="http://www.bettsolutions.com/contact.htm">CONTACT</a></p></div>

<div id=home-blue-spacer><div id=flash><object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="800" height="159">
<param name="movie" value="intro.swf">
<param name="quality" value="High">
<embed src="intro.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="800" height="159"></object></div></div>

<div ID=menu-home><!--webbot bot="Include" U-Include="menu.htm" TAG="BODY" --></div>

<div id="home-text">
<p><b>BettSolutions works with your organization
to Build People and Organizational Capabilities through the
establishment and implementation of Human Capital Strategies.<br>
<br>
</b>We provide consulting services on the <b>Lominger
International’s LEADERSHIP ARCHITECT®</b>
Suite of tools as well as work with organizations to design and
implement customized leadership development, competency-based
and human capital initiatives.<br>
<br>
Our mission is to help organizations maximize the potential
of their <b>PEOPLE</b>, their <b>PERFORMANCE</b> and the overall
<b>PURPOSE</b> of the organization.
</p>
</div>


</body>

</html>




Tailslide -> RE: DIVs overlapping when they're not supposed to! (3/2/2007 3:05:05)

The problem will stem from using absolute positioning to position your divs. Although it's perfectly possible to use this technique to lay out a page - it's very hard to get it right and it will make your page very easy to break. I'd only use AP for very small bits of a page (something like a search box for instance).

I'd stick with normal positioning and floats.

I'm just on my way out so I don't have time to check what you're trying to do with your page so I can't give you a non-AP alternative just now, but I do notice that you don't have a DOCTYPE which you really really need for a CSS layout otherwise you're up against cross-browser issues. Also you don't seem to have a body tag after the closing head tag.




rdouglass -> RE: DIVs overlapping when they're not supposed to! (3/2/2007 12:38:12)

My suggestion for trobleshooting stuff like this in FireFox is use the Javascript window. It will tell you a lot about what's wrong most times. I have found that invaluable when dealing with layout discrepancies.

Hope it helps.




jaybee -> RE: DIVs overlapping when they're not supposed to! (3/2/2007 13:13:08)

Errrr, OK you lost me completely there.




rdouglass -> RE: DIVs overlapping when they're not supposed to! (3/2/2007 14:32:14)

quote:

Errrr, OK you lost me completely there.


Was that for me? If so, the JS Console in FF points out many syntaxt and other css faux pas to me. Doesn't everyone use that? [;)]




jaybee -> RE: DIVs overlapping when they're not supposed to! (3/2/2007 18:57:54)

Errrr ummmmm errrrrrr yeeees of course they do. [sm=whistling.gif]




Tailslide -> RE: DIVs overlapping when they're not supposed to! (3/3/2007 3:27:06)

I had noticed that before... but not really taken it in. Probably because if I'm looking at the JS console I'm trying to sort out a JS problem not a CSS one. Good idea though Roger!





jaybee -> RE: DIVs overlapping when they're not supposed to! (3/3/2007 7:12:37)

Do you know, I've never even looked at it. I rarely use js.




Jordan -> RE: DIVs overlapping when they're not supposed to! (3/5/2007 10:29:34)

Thanks for the feedback everyone! I'll play around a bit with these suggestions today.
Jordan




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875