7 replies [Last post]
nexusste
Offline
newbie
Manchester
Last seen: 10 years 51 weeks ago
Manchester
Joined: 2008-12-15
Posts: 4
Points: 0

Hi can anyone help Im putting together a page and im new to css, On the page i have a div "logobanner" which holds the sites logo's and a div "bannerbottom" Which is going to hold text links for navigation.

In IE the 2 divs sit nicely together but in FF theres is a vertical gap of around 10px this gap is not apparant when the text is taken out of the bannerbottom div so im sure its got to be something to do with a text property,

Can any one help? much appreciated

Heres the code The CSS has a lot of fat that needs trimming *sorry*

HTML

<html>
<head>
<title>
NexusTek Innovating IT
</title>
<link rel="stylesheet" type="text/css" href="style/style2.css" />
</head>
 
<body>
 
<div id="pagecontainer">
 
<div id="bannertop">
<form>
<fieldset id="searchbar">
<legend>Search NexusTek.co.uk</legend>
<input id="search" type="text" class="input-text" name="q" value="" />
 
            <input type="submit"/>
</fieldset>
 
<fieldset id="loginbar">
<legend>Login</legend>
<input type="text" name="username" value="Username" />        
<input type="password" name="password" value="Password" />
</fieldset>
</form>
</div>
 
<div id ="logobanner">
 
<div id="logoleft">
<img src="images/ntlogoleft.png">
 
</div>
 
<div id="logoright">
<img src="images/ntlogo.png">
</div>
 
</div>
 
<div id="bannerbottom">
<ul>
<li><a href="#"><span>home</span></a></li>
<li><a href="#"><span>services</span></a></li>
<li><a href="#"><span>testamonials</span></a></li>
<li><a href="#"><span>contact</span></a></li>
 
</ul>
 
</div>
 
 
 
 
 
<div id="maincontent">
 
<div id="navcontainer">
 
</div>
</div>
 
<div id="footer">
<p>Copyright NexusTek 2008</p>
 
</div>
 
</div>
 
 
 
 
</body>
 
</html>

and the css

body 
{
	font: 12px verdana,sans-serif;
	background-color:#333333;
	padding: 0; 
	margin: 0;
	}
 
 
#pagecontainer
 
{
	background-color:#164380 ;
	height: auto;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	border:1px solid;
 
}
 
#bannertop
{
	height:auto;
	width: 100%;
	background-image: url(../images/header.png);
	background-repeat:repeat-x;
	border-bottom:1px solid;
	font-size:xx-small;
	float:left;
}
 
#loginbar
{
	float:left;
	color:#FFFFFF;
	margin-left:10px
}
 
#searchbar
{
	float:right;
	color:#FFFFFF;
	margin-right:10px;
}
 
input
{
	color: #000000;
	border: 1px solid #000000;
}
 
legend
{
	font:Verdana, Arial, Helvetica, sans-serif bold;
	color:#FFFFFF;
	margin-left:10px;
	margin-right:10px;
}
 
fieldset
{
border:none
}
 
 
 
#logobanner
{
	height: 200px;
	width: 100%;
	clear:both;
	background-color:ffffff;
	background-repeat:repeat-x;
	margin-bottom:0px;
	border-bottom:1px solid;
 
}
 
 
#logoleft
{	
float:left;
}
 
#logoright
{	
float:right;
}
 
#bannerbottom
{
	height:auto;
	width: 100%;
	background-image: url(../images/header.png);
	background-repeat:repeat-x;
	border-bottom:1px solid;
	clear:both;
}
 
#sidebar
 
{
	width: 20%;
	height: auto;
	border-right: 1px solid;
	border-bottom: 1px solid;
	float:left;
	background-color: 35b3d1;
	margin-right:10px;
	margin-left:10px;
	margin-top:0px;
}
 
 
#maincontent
 
{
	width:100%;
	height: 300px;
	padding: 0px;
	background-color: ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	float:left;
	margin-top:0px;
	border:1px solid;
	display:block;
 
}
 
#footer {
	clear:both;
	width: 100%;
	height: 30px;
	color:#FFFFFF;
	background-image:url(../images/headerrev.png);
	text-align: center;
	font-size: xx-small;
	border-top:1px solid;
	margin-top:0px;
 
}
 
#navcontainer 
{
float:left;
width:auto;
margin-top:0px;
}
 
#bannerbottom
 
{ 
 
} 
 
#bannerbottom ul
{
list-style-type: none;
color:#ffffff;
 
}
 
#bannerbottom ul li
 
{
font-size:small;
display:inline; 
vertical-align: middle;  
}
 
#bannerbottom ul li a
 
{
color:#FFFFFF;
}

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 21 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Do you have a link so that

Do you have a link so that we can view the issue in our browsers?
Also, have you tried clearing all default margin and padding from anything with weird spacing?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

nexusste
Offline
newbie
Manchester
Last seen: 10 years 51 weeks ago
Manchester
Joined: 2008-12-15
Posts: 4
Points: 0

link to the site

Hi yeah sorry here it is http://development.nexustek.co.uk/nexuswebsite/ you can notice below the banner there is a space its blue because thats the color i set the bg to be, And in answer to your question I have set margin and spacing to 0 for the body of the document, thanks for the help, Ive been searching forums with no joy for a few days. :shrug:

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 21 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

nexusste wrote:I have set

nexusste wrote:

I have set margin and spacing to 0 for the body of the document

Okay, but I asked if you tried to reset the margins and padding for the div, not the body.

And after careful review that's exactly what the issue is, you have not reset the margins on your navigation UL and you have set a margin top to your maincontent div.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

nexusste
Offline
newbie
Manchester
Last seen: 10 years 51 weeks ago
Manchester
Joined: 2008-12-15
Posts: 4
Points: 0

Woohoo It worked THANKS

:jawdrop: :thumbsup:

Thanks so much that worked, I was under the impression if you reset the margin padding for the parent element eg "body" that all child elements would be reset eg "divs" as i say im new to css, thank-you very much for your help.

:thumbsup: :thumbsup: :thumbsup:

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 21 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Nope, doesn't work that

Nope, doesn't work that way.

I use this in all my CSS

/* GLOBAL RESET */
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr {
  margin:0;  
  padding:0;  
  border:0;  
  border-collapse:separate;  
  border-spacing:0;
}

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

nexusste
Offline
newbie
Manchester
Last seen: 10 years 51 weeks ago
Manchester
Joined: 2008-12-15
Posts: 4
Points: 0

NIce thanks

mind if I use that if i give yo a name check in the css doc call it the Deuce Reset :thumbsup:

thanks again

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 21 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

No need - public domain and

No need - public domain and all that.
Take it, use it, if you figure out a better way, come back and post it.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph