|
| |
|
|
Jordan
Posts: 117
Joined: 1/8/2002
From: Maine
Status: offline
 |
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>
< Message edited by Jordan -- 3/1/2007 18:24:48 >
_____________________________
|
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
rdouglass
Posts: 9167
From: Biddeford, ME USA
Status: offline
|
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.
_____________________________
Don't take you're eye off your final destination.
ASP Checkbox Function Tutorial.
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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!
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Jordan
Posts: 117
Joined: 1/8/2002
From: Maine
Status: offline
|
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
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
