PDA

View Full Version : DIVS Overlapping, Please Help!



Donno24
Mar 10th, 2008, 07:15 PM
Hi Everyone,

I'm trying to create a simple header structure but in Firefox the Divs are overlapping. It works as I want it in IE7.

Hope you can help.
Paul

Here are the links
http://www.pauldonnellydesigns.com/help/index.php
http://www.pauldonnellydesigns.com/help/stylesheet.css


body{
background-image: url(images/topbar.jpg);
background-repeat: repeat-x;
background-position: top;
margin: 0px;
}

.containter{
height: auto;
width: 700px;
margin-top: 0;
margin-right: auto;
margin-left: auto;
}
.header{
background:transparent none repeat scroll 0%;
height:60px;
width:100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

.header A:link {color: #FFFFFF; text-decoration: none;}
.header A:visited {text-decoration: none; color: #FFFFFF;}
.header A:active {text-decoration: none;color: #FFFFFF;}
.header A:hover {text-decoration: none; color: #FFFFFF;}

.search{ text-align: right; float:right;
height:28px;
margin:0px;
padding:0px 0px 0px 0px;
vertical-align:top;
width:100%;
display:inline;}

.search p{margin-top:2px;}

.links{
float:right;
height:20px;
width:100%;
text-align: right;
display:inline;
margin-top:2px;
}
.links li{display:inline;}



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>NI Nitelife - Northern Irelands Ultimate Entertainment Guide</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="containter">
<div class="header">

<div class="links">
<ul><li><a href="index.php">Home</a> | </li>
<li><a href="contact.php">Contact Us</a> | </li>
<li><a href="sitemap.php">Sitemap</a></li>
</ul>
</div>

<div class="search">
<form method="post" action="assets/search.php">
<p><input type="text" name="search" size=25 maxlength=25></p>
</form>
</div>
</div>

</div>
</body>
</html>

jcdevelopment
Mar 10th, 2008, 07:22 PM
add this to your css



* {margin:0px; padding:0px;}

Donno24
Mar 10th, 2008, 07:26 PM
I added it as you typed in but unfortunately it didnt change anything.

jcdevelopment
Mar 10th, 2008, 07:31 PM
try replacing this also




.search p{position:relative;}/*take out margin*/


that should move it, im not sure

Donno24
Mar 10th, 2008, 07:39 PM
Hey Thats great it worked,
THANK YOU!

altho... now there is a bit more space above the links from top of page compared to IE7.

I have uploaded new versions

http://www.pauldonnellydesigns.com/help/index.php
http://www.pauldonnellydesigns.com/help/stylesheet.css

jcdevelopment
Mar 10th, 2008, 07:40 PM
well, you can take out the position:relative and do margin again and set it at 5 px or something, its easily adjusted, let me know about anything else!!

Donno24
Mar 10th, 2008, 07:43 PM
Thank you so much, I really appreciate it. I got it working now.

Glad to finally find a forum with good support.

Thank you.

jcdevelopment
Mar 10th, 2008, 08:04 PM
no problem, good luck with it, it looks like you have a ways to go!!