Mon, 2008-11-03 20:51
Hi everyone,
I wanted to avoid using tables for this design and use CSS and JS instead. I've validated the CSS and tested it in various browsers. It works fine everywhere except Firefox 2, where if you try to resize the window it messes up.
I'd appreciate your input on this issue and the CSS on the site in general.
http://pranshuarya.com/test/html
Thanks,
Precar.
Mon, 2008-11-03 20:57
#1
Am I right in thinking it is
Am I right in thinking it is the trees at the bottom of your page that go funny when you zoom out in FF (The same happens in 4 aswell as 3)?
Mon, 2008-11-03 21:12
#2
Trees are fine for me
Hi Josh,
The trees look fine to me, in both Firefox 2 and 3. It's the resizing of the content space that's mismatched in FF 2. In other browsers it works fine. You can see a screenshot of what I mean at:
http://pranshuarya.com/test/html/ff2.jpg
Precar.
Mon, 2008-11-03 21:20
#3
Ahh ok I see the problem are
Ahh ok I see the problem are you setting your widths with percentages or pixels, ems etc. ?
Also validate your page as you have a couple of divs inside spans. Including your header. This may just fix it.
Mon, 2008-11-03 21:43
#4
Divs inside spans?
Sorry but I don't see it. Where do you see divs inside spans?
The code validates at the W3C validation service website.
Precar.
Mon, 2008-11-03 21:47
#5
Code does not validate
:bigoops:
Mon, 2008-11-03 21:58
#6
<table
<table class="content_table" cellpadding="0" cellspacing="0"> <tr> <td class="menu"> <a href="#">One</a> <a href="#">Two</a> <a href="#">Three</a> <a href="#">Four</a> <a href="#">Five</a> <a href="#">Six</a> <a href="#">Seven</a> </td> <td><span class="product"> <div id="product_header">Product header</div> <div id="product_main"> {=Content=} </div> </span> <div id="product_bottom"></div>
Document type does not allow element ... here; missing one of ... start-tag
Cause:
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
There are 2 types of elements in the body of a HTML file, inline and block elements. One possible cause for this message is that you have attempted to put a block-level element (such as "
" or "") inside an inline element (such as "", "", or "").
In the following sample, the tag is an inline tag which can only contain other inline tags. But the
tag is a block tag. So a
tag can not be contained in a tag.
Example:
Good
abc
Good
abc
Good
abc
Solution:
Move inline tags into block elements.
References:
* W3 validator: http://validator.w3.org/
Heres a direct link if your having trouble validating it.
Mon, 2008-11-03 22:03
#7
Span to div
Thanks for pointing that out!
I changed that to a div so now there's no inline element containing a block element, but FF2 is still rendering the same as before.
Any other suggestions?
Precar.
Mon, 2008-11-03 22:07
#8
I am going to take a look at
I am going to take a look at your css now.
Mon, 2008-11-03 22:17
#9
Thanks!
I appreciate your help.
Precar.
Mon, 2008-11-03 22:46
#10
It may be that you are
It may be that you are setting your widths with pixels try setting the widths of both the content and the actual logo div as percentages. This usualy scales everything together.
Mon, 2008-11-03 23:23
#11
% padding
The %padding seems to be causing the problem. Try replacing the left padding with a fixed amount rather than a percentage. As it is the left padding anyway I don't think you gain much from setting it in %.
Tue, 2008-11-04 03:43
#12
Wow
That was easy. Thanks a lot. Such a small thing!
Precar.
Tue, 2008-11-04 13:51
#13
Lol I didn't even notice
Lol I didn't even notice that 
I'm not on the ball like I used to be 