Hi,

I have a dreamweaver page based on tables which renders find in Safari but not in Firefox (on Mac) and not in IE on Windows. The page is www.digitalbrit.com/cutting-edge-signs

The navbar on the left is a dreamweaver navigation bar between two graphics (one above and one below). When there is a large amount of body text to the right, a gap appears between the navigation bar and the two graphics. I think my solution lies with display: block. However if I attach this to the cell containing the navigation bar, whilst this resolves the gap above the navbar, doing the same to the bottom graphic does not remove the gap below the navbar.

The webpage above does not currently have the display:block set so it highlights the problem.

Again the problem does not occur in Safari, only Firefox (on Mac) and IE on Windows (not sure about Firefox on Windows?).

Any help would be appreciated.

Thanks
Tim

HI
I can see the issue you're talking about using FF Win XP. There can be a lot of issues with getting CSS to render properly across different browsers and systems. What I tend to do is use FF as my standard and develop for that, then check out in IE. Can I suggest that you get FF and install the developer toolbar. It's a really great bit of software because it allows you to edit the CSS dynamically, so you can tweak the styles and see the effect immediately and when you're happy with the result you can save it back to your local machine and upload it.

That saves me loads of time.

There is also an html checker you can use so it shows any erros when you view source.

Not a solution to the issue but hopefully a way forward.

Hi Alan

Thanks for the suggestion to get the developer toolbar - do you mean the one here chrispederick.com/work/web-developer/ - or a different one?

Cheers

An update ...

FF on Mac and Safari now render the same. I did not need to use Display:block - I believe that it was spurious cells affecting the layout but I am still seeing differences between Mac and IE on Windows.

My differences between on IE are:
1. the gap appearing between the navigation bar and the images above and below it
2. all text is centered
3. the fonts are being largely ignored (when the style sheet is external)
4. cell vertical alignment in the footer is being ignored

I have made the css in-line and republished the site to help with anyone kind enough to take a look.

I am new to a Mac and wasn't expecting such difficulties - but that was probably me being niaive! How do other people build on a Mac, test on Windows - are these sorts of issues common?

I'd appreciate any comments.

Regards Tim

Tim,
yes, that's the toolbar you want - I really like it <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>

Although I'm on a PC at the moment I used to be a Mac dealer, then got a teaching job where everything was pc so moved over - I am constantly battling with xp and will not get another pc with it or vista, my next machine is going to be a mac mini or a linux box.

I used to do all my development work on a mac using dreamweaver and didn't tell my customers, I just had a pc next to the mac so I could test and see what they were going to see.

It should not make any difference whether you have the css in-line or in a separate file, I like to keep it separate so that the content file is smaller. With the fonts, the issue is that you have only specified one font, like Tahoma, so if that's not present you will get the default font. Make sure that you have both mac and pc names in the list, so something like, Arial, Helvetica, sans-serif so that the browser has the option, it will start looking for Arial, if that's not there it goes for Helvetica etc. Have a look at the pre-set lists in DW so you get the spellings correct.

I took another look FF / win xp, your site looks really good now, no gaps at all, so whatever you did worked. Being a bit picky I would increase the height the dark red background just a little so that it lines up with the height of the Che images on the left. You also put some padding or margin on the main text I see, that's a help too.

Alan,

I'm a convert to the FF developer toolbar!! I am simply amazed at all the info it generates.

Yes, the site is settling down now having ironed out those teething problems, although I still get the odd diff. between Mac and Windows browsers. I'm guessing one is due to the font as you say, because it wraps differently in IE - so I need to sort that out. And the other is spacing between text areas and some alignment problems. I'll post back here if I really get stuck again.

Thanks for the feedback on the layout too. I am seeing the client tomorrow and will begin to incorporate peoples feedback and build the site out too.

Regards
Tim

good news <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>

IMHO MS makes life difficult for us and developers of other browsers by making IE slightly non-compliant with standards. I suspect this is deliberate but can't be proved. Because they have most users it means we have to tweak our pages to work with IE, then it might not look right in FF or Opera etc, so when people try out those browsers they don't look as good as they should so many will stay with IE.

The Mac / Win thing is probably fonts although they do use different screen resolutions (or used to), no doubt I will know soon enough as I just bought myself another Mac, I'll be back to developing on Mac and testing on both platforms.