Regarding Mozilla

Problems with rendering under mozilla

[blackjudas]

Maybe I'm just too green around the edges when it comes to CSS, but I started creating a page with pure CSS in mind. After unsucessful attempts on putting my graphic display together properly, I resorted to putting the whole thing back to pure HTML.

To my dismay, the layout still didn't work. Although it works as intended in IE.

Please check out the following link:

** removed url as per request ** msg me if you want it.

Let me know if this is a common problem and if so, what is the workaround/fix I must apply for this to render correctly in the Netscape family of browsers?

[edited by: blackjudas at 6:36 am (utc) on July 16, 2002]

[Nick_W]

Welcome to WebmasterWorld!

Put this in your css:

td img {
display: block;
}

You might want to remove that url, they don't like it here. It's a very cool place however so have fun! ;)

Nick

[DrDoc]

Dang you, nick .. you beat me to it! :)

Also, you might want to remove the space between the <td> tag and the <img> tag, as well as between <img> and </td> ..

[Purple Martin]

Hi blackjudas.

URLs are not allowed, a mod will snip yours soon. Put it in your profile instead ;)

You're using tables to arrange the graphics. In particular, there's a table with 9 cells for the "Welcome to QuantumNova" bit. You could consider using 3 positioned DIVs instead - one at each end for the curvy end graphics, and one long one in the middle with the text, and a small repeating background image.

[blackjudas]

Thanks for the tips, I apologise for the URL, didn't know it wasn't allowed. I will go try your suggestions immediately.

And thanks for the warm welcome!

[blackjudas]

Purple Martin, could you possibly post an example of what you mean regarding the <div> tags?

[Nick_W]

<div id="leftimg"><img src="/gif.gif" alt="" /></div>
<div id="middleimg"><img src="/gif.gif" alt="" /></div>
<div id="rightimg"><img src="/gif.gif" alt="" /></div>

CSS:

div#leftimg {
position: absolute;
top: 50px;
left: 100px;
}
div#middleimg {
position: absolute;
top: 50px;
left: 125px;
}
div#rightimg {
position: absolute;
top: 50px;
left: 200px;
}

Or you could just give the img's id's. I don't do much gfx work so you may have to experiment but I think that's what purplemartin had in mind?

Nick

[blackjudas]

OK, tried the:

td img {
display: block;
}

And it made it worse (as if that's possible) :)... so off I go on trying the <div> tag solution...

[MCookie]

It sounds like there's <br /> tags between your images.

[Nick_W]

Yes, that's exactly the problem. I just tested it here and removing the <br />'s fixes it.

The next problem you have is that the text in the yellow box pushes the top and bottom img's out making it look rather ghastly. You might want to rethink this design element as it's just asking for trouble as it is.

If I take the text out it's fine. So maybe you should just make it one gfx if it's very important to you?

Nick

[blackjudas]

Nick_W, in the <div> example how woud one overlay text in the middle exactly? I'm interested in making all of the text on the page as pure text, to allow for templates (auto-built) and for theming, auto-translation etc. I'm starting to go nuts with this thing, I've done it for other clients but this time this table's biting me hard :).

Thanks for the help so far!

[Nick_W]

Well, I'm afraid I just wouldn't do it.

I'd go for a headline positioed where you need it like this:

<h2 id="welcome">Your text here</h2>

#welcome {
background-color: yellow;
color: black;
font-size: 1em;
padding: .2em;
border: 1px solid #000000;
}

A much neater text solution, you just lose the curvey corners is all....

Nick

[DrDoc]

td img {
display: block;
}

.. is supposed to be ..

td img {
display: inline;
}

[Nick_W]

No, actually it's not.

The reason img's get extra space in table cells when using some DTD's on recent browsers is that the img sits on the theoretical 'baseline'. Images are already inline so setting them to inline does nothing.

The trick is either to lose the DTD or to change them to blocks. Though the best solution is to stop using tables for graphical layout.

This article by Eric Meyer explains in more detal: Tables, images and mysterious gaps [developer.netscape.com]

Nick