Navigation Menu pictures have unexplained gaps between them

Hi,

I'm actually abit new in html and made a few landing pages for my business and now i'm working on building a website.

After creating the menu pictures and setting them up in the html and of course in the css, I got a strange problem that I wasn't able to solve .

The menu pictures have some unexplained gaps between them (at least I can't figure it out) and I can't get the pictures to get together.

The header picture is width 500 px, the total width of all the menu pictures combined is 500 px, I just want them to be exactly next to each other.

the code that I have for the menu css is :


#mainMenu div {
height: 35px;
margin: 0;
padding: 0;
}

#mainMenu img {
margin: 0;
border: none;
padding: 0;




and the code for the HTML part :


<tr><td id="mainMenu">
<div>
<img src="images/current_maestro.png" width="90" height="35" alt="مركز مايسترو"/>
<a href="personal.html"><img src="images/menu_personal.png" width="86" height="35" alt="تدريب شخصي"/></a>
<a href="learning.html"><img src="images/menu_learning.png" width="81" height="35" alt="تأهيل مدربين"/></a>
<a href="workshops.html"><img src="images/menu_workshops.png" width="80" height="35" alt="ورشات تدريبية"/></a>
<a href="students.html"><img src="images/menu_students.png" width="82" height="35" alt="تدريب للطلاب"/></a>
<a href="business.html"><img src="images/menu_business.png" width="81" height="35" alt="تدريب للأعمال"/></a>
</div>
</td>
</tr>



it's almost all the file but thats what i'm having problem with - the rest is pretty similar to regular single pages.

there are a couple of things that I should notice:

1. The language of the website is Arabic, so the difference from regular "English" websites is the Direction = Right .

2. Link to site (Html code) :
http://www.elham4u.com/tryout/home.html

3. Link to the css code :
http://www.elham4u.com/tryout/css/main.css

4. I believe I fulfilled all the forum posting requirements so hope to get a solution to my problem :)

Thanks in advance

hmmm strange. I'm not seeing where the gap is coming from either. I'm brain dead!

A dirty solution could be to add a -4px right margin to your img styles. But someone else may see where the gap is coming from and offer a better fix.

thanks for the offer though indeed i would prefer to even learn from this - as i'm still somehow in the learning process .

though I must ask, how did you know it's 4 px ?? ( i don't)

thanks either way :)

thanks for the offer though indeed i would prefer to even learn from this - as i'm still somehow in the learning process .

though I must ask, how did you know it's 4 px ?? ( i don't)

thanks either way :)

I guessed...lol well somewhat.

You should download firebug, if you haven't already, and learn to use it. Its a free plug in for Firefox and its very useful for inspecting page elements and styles. It does much more as well, like javascript inspecting and line by line debugging, dom, box model inspecting. Anyway, I could see your issue using firebug and then change the margin until it "fit". Hope this helps.


btw, you might want to consider reworking your code in favor of using lists for your menu, since that's what they are. You dont seem that far along in your design phase, and so reworking things wouldn't be a huge task at this point.

You can read about how lists are coded and how they can be styled here (http://www.w3schools.com).

now as for the "margin" your table that houses all of this has the attribute border-spacing:2px which 2+2=4 and could be the culprit... not sure... chrome dev tools wouldnt let me disable it for some reason o.O

Edit: After reading ur post i went and did math and they do all "just fit" my bad... idk where the border-spacing attribute was coming from but i saw it in chrome... good job getting it working though

hmm I'm not seeing a border spacing style.


btw, I also wanted to mention in addition to the list coding, you should know why tables for layouts are bad (http://www.hotdesign.com/seybold/). Again, you're not that far along that you cant go back and code a proper document. ;)

First I would really like to thank you for your offers and the references that i will just start looking at..

Second I found a solution if anybody is interested to know :

The problem was whitespaces so if i connect them together it's fine ( tried on my notepad and it worked :

<div><a href=...><img src=... alt=...></a><a href=...><img src=... alt=...></a><a href=...><img src=... alt=...></a><a href=...><img src=... alt=...></a><a href=...><img src=... alt=...></a><div>

As for lists and not tables, I'm open to hear any better suggestions :) - which i will do after going to the links you provided.

till now I only saw a lynda html course and all the time my reference is wc3school (source) , there its allot of info and no direction, so if you say lists and give me a reference i'm looking ;)

You can read about how lists are coded and how they can be styled here (http://www.w3schools.com).

lools, seems its the same reference but to a specific page for a change :)