Hi,

 

Problem fixed Thanks a lot Ade

 

I've found a sort-of-fix for my original problem, but now I also want to have text inside the header, but if I add padding or a margin to h1, it displaces the nav bar. This is probably a simple fix by adding a separate div, however I've tried this, probably wrongly though haha, but yea..

 

If anyone could help me that would be great, thank you

 

In Chrome and IE (surprisingly) it shows as I expect it to, but in Safari and Firefox there is a small gap or border in-between the header and navigation.

 

URL: REMOVED

 

Anyone got any ideas as to how to remove this gap?

 

CSS

#header {
background:#0a0a0a url('headerbg.png');
position:absolute;
top:0;
left:0;
right:0;
width:100%;
min-width:100%;
height:140px;
min-height:140px;
}

#nav {
background:#ffffff url('navbg.png');
height:48px;
min-height:48px;
margin-top:82px;
font:bold 0.82em Arial, Helvetica, sans-serif;
color:#0a0a0a;
border-bottom:1px solid #cccccc;
}

#nav ul {
width:100%;
min-width:100%;
height:28px;
min-height:28px;
position:absolute;
list-style:none;
margin:0;
padding:0;
}

#nav ul a {
display:block;
margin:0 25px;
padding:16px 40px;
color:#0a0a0a;
text-decoration:none;
}

#nav ul a:hover {
color:#ffffff;
background-image:url('headerbg.png');
background-position:bottom;
text-decoration:underline;
}

#nav ul li {
float:left;
display:inline;
}

#nav .current a {
color:#ffffff;
background-image:url('nav-bg.png');
text-decoration:none;
}

 

HTML

<div id="header">
<h1>Header</h1>
<div id="nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Mail</a></li>
</ul>
</div>
</div>

The gap is easy to fix. Change your header declarations to:

#header {
background-image:url('headerbg.png');
background-color:#0a0a0a;
width:100%;
height:140px;
}

 

Also, don't use min-width or min-height with width and/or height on the same element if the values are the same type. Click here. Just have width and/or height or min-width and/or min-height, or width and min-height..... You get the idea.

Thanks, but it's still got the gap/border, any ideas?

 

EDIT: Nevermind, I added margin-top:-2px; to #nav ul and it works cross browser now Haven't checked in IE 6 yet though, theres bound to be some problems there though, haha.

 

Anyone have an idea how to sort out the text in #header div?

Thanks, but it's still got the gap/border, any ideas?

 

Not when I edited it! I tested it before posting.

Oh, maybe my ftp connection timed out, and it didn't upload to server... I'll try it your way again

 

EDIT: nope, still the border

 

Safari: http://i41.tinypic.com/anhfsh.png

Firefox: http://i39.tinypic.com/2vwb3aw.png

Are you using a "css reset", i.e. removing all padding and margin at the top of your style sheet (assuming the attached style sheet is not your full style sheet).

 

If not, remove the minus margin and add the following to the top of your css file:

* { margin:0; padding:0; }

 

If that works and removes the space then I would advice you to read about css reseting since using the wildcard (*) is not a good way to do it.

Thanks JohnNerush, that's fixed it

Excellent, using a reset like that will fix a large portion of cross brouser issues since all brousers provide a defult padd/margin to some elements.

 

The best way to use it is by defining each element to reset, using * will do everything.

 

I use:

 

body, html, div, blockquote, img, label, p, h1, h2, h3, pre, ul, li, dl, dt, dd, form, a, fieldset, input, th, td

 

but it would obviously change depending on what elements you use.

Ok, so I'm a little confused now, using what you told me somehow doesn't keep the height of the div "header" not sure if that makes sense... but the height is defined as 140px but now is only 120px, have any idea why?

I just looked at your CSS again and you still have absolute positioning in there: you mentioned that you had uploaded my suggested change, but it looks like you hadn't. I think that might explain why you saw no change. Unless you have since re-uploaded the previous version, of course.

Hmm I cant tell by looking at the code currently, I dont have the facilitys to test the code at the moment.

 

I will post again as soon as i can test the code unless somone else gets it first.

 

EDIT:

 

As said above, the absolute pos could be cause issues, It might be advisable to float everything and also remove the <div> wrapping the <ul> and use the <ul> as you are currently using the <div> wrapping it.

I just looked at your CSS again and you still have absolute positioning in there: you mentioned that you had uploaded my suggested change, but it looks like you hadn't. I think that might explain why you saw no change. Unless you have since re-uploaded the previous version, of course.

 

Ah, you're right, sorry I assumed the absolute positioning wouldn't make a difference, but the thing is, I'd much prefer if it was positioned absolutely at the top, left and right.

 

EDIT: JohnNerush, thanks alot I'll be back tomorrow Thanks a lot to you too Ade

It doesn't need to be positioned absolutely. Not if you get the rest of your mark up right.

 

BTW: Your HTML has a closing </head> tag where it should be </html>.

It doesn't need to be positioned absolutely. Not if you get the rest of your mark up right.

 

BTW: Your HTML has a closing </head> tag where it should be </html>.

 

Haha, what am I doing rofl. Thanks a lot for that Started this last night when I was tired... wasn't the best idea seeing as I only know the absolute basics now anyway.

I downloaded your site, as it was a few minutes ago. I hope you don't mind.

 

Here's how your header and nav divs can be arranged, with the navigation sitting below the header:

<div id="header">
<h1>Header</h1>
</div>
<div id="nav">
<ul>
<li class="current"><a href="http://limee.co.uk/">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Mail</a></li>
</ul>
</div>

This is easier to manage and more stable. If you want the nav inside the header for a particular reason, that can be done.

 

Now your CSS:

#header {
background:#0a0a0a url('headerbg.png');
position: relative;
width:100%;
height:140px; /* or whatever you want */
}

#nav {
background:#ffffff url('navbg.png');
position: relative; 
width: 100%;
height:48px;
font:bold 0.82em Arial, Helvetica, sans-serif;
color:#0a0a0a;
border-bottom:1px solid #cccccc;
}

#nav ul {
height:28px;
}

#nav li {
display: block;
float: left;
}

#nav ul a {
display:block;
margin:0 25px;
padding:16px 40px;
color:#0a0a0a;
text-decoration:none;
}

 

Important points: I was testing this with Eric Meyer's reset, which I always use, and I removed the unnecessary conditional formatting for IE. If you arrange the header and nav like this, you would have to be doing something weird elsewhere for it to go wrong. Be very careful if you intend to use conditional style decs. And finally, remember that there is always the possibility that you may use some code or stylesheet that I didn't download.

I downloaded your site, as it was a few minutes ago. I hope you don't mind.

 

Here's how your header and nav divs can be arranged, with the navigation sitting below the header:

<div id="header">
<h1>Header</h1>
</div>
<div id="nav">
<ul>
<li class="current"><a href="http://limee.co.uk/">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Mail</a></li>
</ul>
</div>

This is easier to manage and more stable. If you want the nav inside the header for a particular reason, that can be done.

 

Now your CSS:

#header {
background:#0a0a0a url('headerbg.png');
position: relative;
width:100%;
height:140px; /* or whatever you want */
}

#nav {
background:#ffffff url('navbg.png');
position: relative; 
width: 100%;
height:48px;
font:bold 0.82em Arial, Helvetica, sans-serif;
color:#0a0a0a;
border-bottom:1px solid #cccccc;
}

#nav ul {
height:28px;
}

#nav li {
display: block;
float: left;
}

#nav ul a {
display:block;
margin:0 25px;
padding:16px 40px;
color:#0a0a0a;
text-decoration:none;
}

 

Important points: I was testing this with Eric Meyer's reset, which I always use, and I removed the unnecessary conditional formatting for IE. If you arrange the header and nav like this, you would have to be doing something weird elsewhere for it to go wrong. Be very careful if you intend to use conditional style decs. And finally, remember that there is always the possibility that you may use some code or stylesheet that I didn't download.

 

Ok, great. I'll start editing it a bit now, then I'll post again when I'm done Thank you.

 

EDIT: Ok, so problems which I'm going to try and fix. Using position:relative on #nav and not absolute means it doesn't stretch the width of the screen, which is what I wanted, but I suppose I could cope Also now all is well apart from in IE (Arrghh ) Going to have a little play around and try and fix it.

 

EDIT2: Arrghh!! I'm too tired to be doing this, keep missing things haha. Didn't have

* {
margin:0;
padding:0;
}

 

Working well so far thank you very much!

Thanks a lot to both of you - I've learnt a lot Glad it's finally working

It filled the full width of the screen for me during my testing because, as you found before your second edit you have to be careful with resets. Use Eric Meyer's (mentioned earlier): link to follow in a mo'.

 

Found it:

Click

That will set you off on the right foot from the beginning.