View Full Version : Gaps between menu headings

Dec 6th, 2006, 09:47 PM
Hi guys,

Just a quick one today. Im trying to code a site in css. Now I have managed to do most of it now. I just have one problem with the menu navigation on the left hand side.

I have used a 'Unordered List' to make the menu but I am getting gaps between each one. Im just wandering if i can - and how I would get rid of the gaps between the menu headings. I need the images to sit directly on top of each other.

I cant seem to figure it out ? :confused:


If you would be so kind as to have a look for me.


Dec 6th, 2006, 09:50 PM
You do know you can't just make up your own tags right? As for your problem remove the parts in red.

div#leftcol ul, div#leftcol li {
margin: 0;
display: inline;
list-style: none;
padding: 0 0px;
line-height: 0em;
You need to validate your page as well. You have 26 coding errors. See them here: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.turbobounce.com%2F

Dec 6th, 2006, 10:49 PM

Thanks alot Aerospace for pointing that out for me. Realy appreciate it. Didnt notice that for some reason ! ha. Maybe its time to go sleep.

Anyway that has fixes it perfectly !:)

I have also fixed all those errors now so it validates to XHTML 1.0 Strict :)


Dec 7th, 2006, 02:49 PM
Hi again everyone,

Just after one more little bit of help. On my page something seems to be forcing a horizontal scroll bar to appear. I cant figure out what it is though ? :confused:

Need a fresh pairs of eyes basically.



Dec 7th, 2006, 03:07 PM
Remove the width on #bottomhead.

Here is a tip. Get Firefox. Then get these three extensions

EditCSS (https://addons.mozilla.org/firefox/179/) (allows you to edit CSS on the fly)

Web Developer (https://addons.mozilla.org/firefox/60/) (has many useful tools like the ability to outline block level elements)
Using the extension above I was able to spot what was causing the horizontal scrollbar.

I then used an extension called CSS Viewer
CSS Viewer (https://addons.mozilla.org/firefox/2104/) (this shows the CSS information of whatever element is below the mouse cursor)

Dec 7th, 2006, 03:43 PM
Ah thanks Aerospace,

You hit the nail on the head there again :thumbsup:
Thanks really do appreciate it.

I have downloaded all those add ons now so i shall be using them in the future for sure :)

Dec 7th, 2006, 05:09 PM
Goodmorning wap3,
That looks pretty nice!
I just thought I'd let you know that div#rightcol is dropping down when I look at the site with IE7.

Dec 12th, 2006, 07:56 PM
Hi excavator,

Yer you are right there. I a just checking to make sure it looks ok in the most popular browsers.
The background seems to be doing strange things 2 ?

Well lets see if I can sort it out. If I cant I will be back for some more help. :D



Dec 13th, 2006, 08:09 PM
Hi everyone,

Im stuck ! :confused: lol

Umm I have three little problems with this website i am doing and wondered if you could try to help me sort them out. I have managed to fix a few clitches but am abit stuck right now.

Anyway the problems I have relate to IE and they are:

1. The 'rightcol' div is dropping down the page below my 'leftcol' div. It needs to sit next to my 'leftcol' div.

2. My menu sitting in the 'leftcol' div is shopping gaps between each line. I want to get rid of the gaps so the menu icons sit neatly on top of each other.

3. The links on the bottom of my page. I want these to have a blue background with white text when the user hovers on them with there mouse. It is only coming up with the blue bakground right now, with no white text ?

If you could try to help me out with these snags it would be great ?

Thanks alot.


The page is http://www.turbobounce.com

Dec 13th, 2006, 08:22 PM
Fixed number 2 now :thumbsup:

Just need some help on number 1 and 3 from above now. :)

Dec 13th, 2006, 08:37 PM
Hello wap3,
This fixes #1:

div#rightcol {
height: 100%;
/*take out width: 566px;*/
color: #333333;
padding-top: 13px;
padding-left: 190px;

You already fixed #3?

Dec 13th, 2006, 08:44 PM
Hey excavator,

I tried taking out the width but 'rightcol' is still dropping down the page? Im looking at the page in IE 6 if that makes any diffenece.

Also number 3 is not fixed. When I hover over the links only the background goes blue - i also want the text to go white ?

:) :confused:

Dec 13th, 2006, 09:03 PM
Looks like that bouncing.gif is too big. When you resize it(I didn't resize the actual image) like this:

<LI>:- No cancellation fee if due to bad weather. </LI></UL>
<img src="Welcome To Turbo Bounce - South West Bouncy Castle Hire_files/happy.gif" width="300" height="61">
</DIV><!--- Bottom div containg menu links, copyright info and background image --> it works.

(Took out the extra </img> tag too)

As for #3, on hover I see links with a square blue background and white text. I checked in IE6, IE7 and FF2. Wonder if your caching an old version of the page?

Dec 13th, 2006, 09:13 PM
Hmmm this is real strange ! :confused:

I took out the image completey instead of resizing it for a minute. And now my right div is still dropping down the page.

Also I have cleared out my cache and history etc etc and the bottom links are not right in mine still.

Excavator could you do a screen shot for me now I have taken that image out so I can see what it looks like in your IE ?? much appreciated if you could.

I wondering if it is my IE that is really playing up ? I does crash now and again. Maybe it needs re-installing of something.

:) :confused:

Dec 13th, 2006, 10:01 PM
Remove padding-left from #rightcol and float #rightcol to the left. Be sure to clear your floats: http://www.positioniseverything.net/easyclearing.html

Dec 14th, 2006, 01:25 AM
Hit the button to post this but it never went:

One quick reply before I head out the door.
Looks like we are having version differences...it's dropping for me again.

DIV#rightcol {
PADDING-LEFT: 204px; COLOR: #333333; PADDING-TOP: 13px; HEIGHT: 100%
because I think your having box model problems.

I'll get a screencap if your still having problems tonight.

Dec 14th, 2006, 02:14 AM
margin-left should be what you use not padding left but if you put the width back on and remove the left padding and float it to the left it will work fine.

Dec 14th, 2006, 07:25 PM

It seems to be displaying as it should now in both IE and FF etc.
I use a mix of your ideas guys and also fiddled with the 'width' values of the divs.

Is it displaying ok for you now ?


Dec 14th, 2006, 07:42 PM
Page looks good now but the menu works differntly in every browser. It's not so good in IE7.

Here's that screencap:

Dec 14th, 2006, 08:00 PM
Ok cheers excavator.

Appreciate the screen shot. I have tried downloading IE 7 but i dont have the latest service pack on this pc.

Do you mind telling me whats wrong with the menu in IE 7 ? Are the sub-menus misaligning ?

Maybe I should try to create a different kind of menu.