Website blues :(

[CLiNK]

Okay, so I've been working on a portfolio website recently and I've run into a little....problem. I'm sure we have some talented web designers here that might be able to help me out.


So here's the problem. I've begun creating using Dreamweaver as I don't know anything past some basic HTML. So I have my neat roll-over menu under way but I wanted small gaps between each menu item purely for aesthetic reasons. However, when previewing in Firefox and IE I receive two slightly different products.





As you can see, the IE version creates a larger gap between the two menu items Home and Illustration which kinda ruins the harmony of the navigation bar - not something I want on a website that is supposedly displaying my design talents. I can post up the code for this page so far if anyone needs to see but I'm just wondering if this a common problem or some freak code catastrophe due to my noob skillz.

Cheers.

[chluaid]

Excuse me while I take a wild stab in the dark: what if you add a spacer image between them? Theoretically that should lock the gap size to whatever dimensions you make the spacer, i.e. 1px width, 2px, etc.. regardless of browser. I could be wrong but that's near the limit of my Dreamweaver & HTML knowledge too.

(nice looking page btw!)

[Jaehl]

Theory 2:

If all of those buttons are divs, and are put in place using "float: left" and "margin-left: 1px", or something similar, then you've discovered the wonderful double-margin IE bug. All you've got to do is put "display: inline" on the first floated button (the illustration one, I'm guessing) to fix the problem.

[CLiNK]

Cheers guys, I'll look into these.

edit: You're not going to believe it...one of my table cells was simply 1 pixel too big *slaps forehead*
Strange that firefox displayed it differently still.
New previews see it consistent in both browsers now so I'm happy. Thanks anyway chaps.

[Cel]

Nah. FF is W3C standard. It's IEs fault.