Stylesheets - Problems with Nested Divs and Firefox

Author

Problems with Nested Divs and Firefox

jwwest@gmail.com

2007-03-14, 7:18 am

Hello all,

I've been building a simple site based on XML, XSL and CSS in order to
help me learn those technologies better. However, building a tableless
page is brand new to me so I've run into a large amount of problems.

The biggest seems that Firefox wants to put a line in between two of
my nested tags for some reason. However, this is only in the XML
version. To design the page, I first made an HTML version, then I
created a XSL file from that.

The HTML file: http://www.penguinwired.org/wuffi/test.html

The XML file (with styling): http://www.penguinwired.org/wuffi/index.xml

Finally the stylesheet: http://www.penguinwired.org/wuffi/layout.css

I would like to point out that my design is completely wrong in IE and
I haven't even started to debug that monster yet. Also, I know my
title bar needs a DIV of it's own.

Any help would be appreciated. Thanks!

- James

jwwest@gmail.com

2007-03-14, 7:18 am

Whoops, CSS is at: http://www.penguinwired.org/wuffi/style.css

On Mar 14, 2:11 am, jww...@XXXXXXXXXX wrote:
> Hello all,
>
> I've been building a simple site based on XML, XSL and CSS in order to
> help me learn those technologies better. However, building a tableless
> page is brand new to me so I've run into a large amount of problems.
>
> The biggest seems that Firefox wants to put a line in between two of
> my nested tags for some reason. However, this is only in the XML
> version. To design the page, I first made an HTML version, then I
> created a XSL file from that.
>
> The HTML file:http://www.penguinwired.org/wuffi/test.html
>
> The XML file (with styling):http://www.penguinwired.org/wuffi/index.xml
>
> Finally the stylesheet:http://www.penguinwired.org/wuffi/layout.css
>
> I would like to point out that my design is completely wrong in IE and
> I haven't even started to debug that monster yet. Also, I know my
> title bar needs a DIV of it's own.
>
> Any help would be appreciated. Thanks!
>
> - James

Gus Richter

2007-03-14, 7:18 am

jwwest@XXXXXXXXXX wrote:
> Hello all,
>
> I've been building a simple site based on XML, XSL and CSS in order to
> help me learn those technologies better. However, building a tableless
> page is brand new to me so I've run into a large amount of problems.
>
> The biggest seems that Firefox wants to put a line in between two of
> my nested tags for some reason. However, this is only in the XML
> version. To design the page, I first made an HTML version, then I
> created a XSL file from that.
>
> The HTML file: http://www.penguinwired.org/wuffi/test.html
>
> The XML file (with styling): http://www.penguinwired.org/wuffi/index.xml
>
> Finally the stylesheet: http://www.penguinwired.org/wuffi/layout.css
>
> I would like to point out that my design is completely wrong in IE and
> I haven't even started to debug that monster yet. Also, I know my
> title bar needs a DIV of it's own.
>
> Any help would be appreciated. Thanks!

It doesn't in the HTML one because it's in Quirks Mode.

In the XML version, it's in the Standards Mode.
You can use wither of these:

img{vertical-align:bottom;}
or
img{display:block;}

--
Gus

jwwest@gmail.com

2007-03-14, 7:18 pm

That fixed it. Thank you!

Gérard Talbot

2007-03-16, 11:16 pm

jwwest@XXXXXXXXXX wrote :
> Hello all,
>
> I've been building a simple site based on XML, XSL and CSS in order to
> help me learn those technologies better. However, building a tableless
> page is brand new to me so I've run into a large amount of problems.

Table-based webpage design versus CSS-based webpage design: resources,
explanations and tutorials
http://www.gtalbot.org/NvuSection/N...sCSSDesign.html

> The biggest seems that Firefox wants to put a line in between two of
> my nested tags for some reason. However, this is only in the XML
> version. To design the page, I first made an HTML version,

Your HTML version
- has validation markup errors
- should have a doctype declaration
- should choose a doctype declaration which will trigger standards
compliant rendering mode in modern browsers

Please visit+bookmark:
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/doc..._your_Web_Pages

Why are there gaps between image rows in tables when the layout engine
is in the Standards mode?
http://www.mozilla.org/docs/web-developer/faq.html#gaps

Images, tables and mysterious gaps
http://developer.mozilla.org/en/doc...Mysterious_Gaps

Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/doc..._your_Web_Pages