View Full Version : Need to get rid of gaps between navigation buttons.

04-30-2006, 01:19 PM
Hello folks,
I'm pretty new to CSS. Just taught myself about 2 weeks ago and I'm trying to overhaul my current website.
I've run into some problems with my navigation sidebar. I had to use gifs because there is a drop shadow involved.
See my original:
http://www.aliciastrose.com The original layout was done with tables.

Now my revamped css page looks like this:


See the gaps?

Here's my css code:


What's going on? What am I missing?
Am I allowed to eliminate a margin on inline elements?
I need to get rid of those gaps because the drop shadow looks pretty cruddy.


PS also discovered that on IE the gaps are there even on my current page which does [B]not/B] show the gaps in Firefox, Safari and Camino or Netscape.

04-30-2006, 03:46 PM
Hi there laughhearty,

and a warm welcome to these forums. :)

try adding this rule to your stylesheet...

#navbar img {


04-30-2006, 08:21 PM

and so does this forum.
That worked splendidly!


I can see I'm going to learn a lot from all of you!:thumbsup:


04-30-2006, 08:22 PM
Now work on getting the rest of your valid coding wise (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.aliciastrose.com%2Fz-mirror-site%2Fhome.html). You currently have 25 coding errors.

04-30-2006, 08:38 PM
That worked splendidly!If you're interested in knowing why that worked, there's an explanation here: http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps

05-03-2006, 12:02 AM
I'm down to 2 errors: "border="0" is not an acceptable attribute
and align="left" isn't acceptable

But these last two are tenacious. Here's what happens:


When I take out the border="0" from the first image in the navbar div I get a border around that image. I was able to take away that attribute from all the others and they look fine. I don't get it?

And the align="left" taken out affects the positioning of my letter el gif. It's too high and not left of the "ight".
Looks like I might have to absolute position it or is there something else I can do and still keep it in the same div?

Everything should look like this:



05-03-2006, 12:20 AM
They're not valid because they're deprecated (obsolete) thanks to CSS; use the equivalent CSS. The border property replaces the border attribute and text-align or float replaces the align attribute.

border: http://www.w3schools.com/css/css_border.asp
text-align: http://www.w3schools.com/css/pr_text_text-align.asp
float: http://www.w3schools.com/css/pr_class_float.asp

05-03-2006, 09:07 AM
Hello Folks,
just wanted to let you all know, I've passed validation with this page:


I figured out the last two bugs. Didn't know about a float within a float. Discovered it by accident. So got the first letter L positioned properly and put
"border: 0px" on the navbar img selector.

Couldn't have done it without you guys and others out there on the www.

Now can someone tell me how this looks on IE?
I'm using mac and IE abandoned us in January...
Is there somewhere on the net where I can get a simulation of what my site looks like in IE?

Thank you so much,

05-03-2006, 09:32 AM
Hmm what resolution did you design the site on? You do realize not everyone has the same resolution as you. I have about 300px of horizontal scroll in FF and IE. I'm on a 1024x768 res. In IE for PC there is an image in the top right corner that doesn't seem to match the colors of the rest of the site. Try www.browsershots.org it takes a few days for results but its free. www.browsercam.com isn't free but the results are almost instant. Your CSS is invalid.

#header1 {
float: right
width: 396px;
should have a ; after right but if you add it, that breaks your layout. Try this for the relevant CSS

body {
margin: 0px;
color: #851913;
font-family: Arial, Geneva, Verdana, sans-serif;
font-size: 85%;
line-height: 145%;
background: #FBF2E3 url(images/home/lines.png) repeat-x;
#header1 {
float: left;
width: 396px;
#header2 {
width: 354px;
z-index: 99;
That gets rid of the horizontal scrollbar in IE and FF. It was that 500px right padding you had causing the problem. You also don't need values on 0 units in CSS unless its line-height.

05-03-2006, 11:16 AM
I'm valid on the html side of things.
Forgot to check that CSS.
The 300 px horizontal scroll is intentional. See, my boyfriend wrote the code for my original site and he was so proud that the two horizontal lines seemed to go off in mock infinity no matter how far the browser window was stretched. I tried to simulate that affect. Because personally, I like the lines leaving the window.

So this is what I did:
I floated header 2 to the right.
Created a background image for header2 and had it repeat horizontally to the right, so that it would continue off into "infinity".
I think when I made the background image the colors were off. Created the image in Gimp, the others were created in Photoshop. Also saved it as a ping and not a gif. Don't know if this affects anything.
I managed to submit the page to browsershots.org and I'll be able to check it out...

I am viewing mainly in FireFox. I have Safari, Camino and Netscape and they all looked fine.

I had a feeling IE would cause a problem. Murphy's Law...


05-03-2006, 11:32 AM
now I know why there's no ";" after float right. I took it out in order to test my layout without the float and kept everything else just incase it didn't work.
I don't think that's a good idea in the future....

05-03-2006, 05:45 PM
Sighs. I gave you the fix for getting rid of the horizontal scrollbar AND having the horizontal lines repeat to infinity. Did you not even try the CSS I gave you? And yes IE displays the colors of pngs slightly darker than in other browsers.

05-04-2006, 09:20 AM
Hi, _Aerospace_Eng,
No sighs!
I'd love to try your code. I suppose I didn't quite get it that you were helping me to get what I was after!
I'll go try it right now...I personally don't like the scroll bar...
Thanks for the png info. I'll change the image to a .gif


05-04-2006, 09:52 AM

You are the man!
Thank you! it looks great.
But haven't checked it in IE. Waiting for browsershots.
Has has the png damage disappeared?


05-05-2006, 04:34 AM
Your page looks identical to me in Internet Explorer 6 and Firefox 1.5 except that there is less space between terracotta.jpg and st-rose-rgt.gif in Internet Explorer. Doesn't seem to be damaging though.

I didn't realize that PNG images looked different in various browsers either. Just one more thing to worry about. >_<

Resource ("PNG Is Crap: A Case Study"): http://attaboymedia.com/sandbox/png-is-crap/
edit: Parent Resource ("Dark alpha PNGs in Safari 2"): http://www.hicksdesign.co.uk/journal/dark-alpha-pngs-in-safari-2: has some interesting replies offering some solutions to the problem