Help looks ok in IE but naff in Moz

www.nemark.neue.co.uk

anyone help me debug this? it looks fine in ie but damned nasty in mozilla
(xhtml 1 strict)

thanks

mark

mark | r

mark | r wrote:

> www.nemark.neue.co.uk

Not sure, but I think your problem is that you're relying on quirks mode
in IE.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

On Wed, 7 Jan 2004 09:27:16 -0000, mark | r declared in alt.html:

> www.nemark.neue.co.uk
>
> anyone help me debug this? it looks fine in ie but damned nasty in mozilla
> (xhtml 1 strict)
>
> thanks
>
> mark

You have a couple of errors in your XHTML, but I doubt they are related
to the layout problems.

It could be your CSS, but the validator won't check that until your
XHTML validates.

Hmmm....beyond that:

Seems to be a fixed-width layout.
http://www.allmyfaqs.com/faq.pl?AnySizeDesign

The actual structure of the code looks good - no tables for layout,
seems to be appropriate use of lists, your have used fieldset and legend
for your form, etc.

Why are you doing the hover changes on the links with Javascript? Why
not do it in CSS? Without Javascript, the text changes to white, but the
background doesn't change - makes the text disappear.

--
Mark Parnell
http://www.clarkecomputers.com.au

"mark | r" <> wrote in message
news:3ffbd147$0$7006$. ..
> www.nemark.neue.co.uk
>
> anyone help me debug this? it looks fine in ie but damned nasty in mozilla
> (xhtml 1 strict)

It looks pretty ordinary in IE as well:
http://users.bigpond.net.au/rf/test/neue.jpg

A quick look at your CSS reveals two things:

It is far too complex.

You are trying way too hard to defeat the browsers build in layout engine.

It really looks like you have been given a design on a peice of paper and
are trying to reproduce it exactly in a non-paper medium.

Take for instance the div that your first lot of services live in. You give
this a predefined background (like every other div on the page).

http://www.nemark.neue.co.uk/images/servicesbg.gif

As soon as anything changes, like font size or the exact way the browser
likes to lay things out or even the DPI setting of the viewers computer
(something over which you have no control) then this design will break

I suspect you hand crafted this page for IE. I would not expect it to work
on any other browser. On the other hand, if you had hand crafted the page
using Mozilla then it would work in Mozilla but then I would not expect it
to work in IE, or any other non-gecko based browser.

Suggestons:

Simplify the CSS dramatically.

Don't use background images. To achieve those boxes, use CSS borders on the
divs. That way if the layout changes then the borders will change as well.
Never rely on content fitting exactly into a background image, it wont.

You *can* use a non-repeating background for that arrow in a circle thing
but why bother, just plonk the image in with the content.

You also seem to be using background images just to colour things in:

http://www.nemark.neue.co.uk/images/topnavbg.gif

or worse,

http://www.nemark.neue.co.uk/images/topnavdiv.gif

Don't do this. use background-color: Every time you specify an image in your
CSS there is another round trip back to the server to get the image (the
first time anyway). This really slows down the loading of your page.

Cheers
Richard.