13 replies [Last post]
precar
Offline
Regular
Last seen: 11 years 43 weeks ago
Timezone: GMT-6
Joined: 2008-10-31
Posts: 25
Points: 0

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.

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 30 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

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)?

precar
Offline
Regular
Last seen: 11 years 43 weeks ago
Timezone: GMT-6
Joined: 2008-10-31
Posts: 25
Points: 0

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.

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 30 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

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.

precar
Offline
Regular
Last seen: 11 years 43 weeks ago
Timezone: GMT-6
Joined: 2008-10-31
Posts: 25
Points: 0

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.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 2 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Code does not validate

:bigoops:

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 30 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

<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>

Quote:

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.

precar
Offline
Regular
Last seen: 11 years 43 weeks ago
Timezone: GMT-6
Joined: 2008-10-31
Posts: 25
Points: 0

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.

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 30 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

I am going to take a look at

I am going to take a look at your css now.

precar
Offline
Regular
Last seen: 11 years 43 weeks ago
Timezone: GMT-6
Joined: 2008-10-31
Posts: 25
Points: 0

Thanks!

I appreciate your help.

Precar.

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 30 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

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.

Saracen
Offline
Regular
Last seen: 11 years 45 weeks ago
Joined: 2004-06-25
Posts: 14
Points: 0

% 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 %.

precar
Offline
Regular
Last seen: 11 years 43 weeks ago
Timezone: GMT-6
Joined: 2008-10-31
Posts: 25
Points: 0

Wow

That was easy. Thanks a lot. Such a small thing!

Precar.

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 9 years 30 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

Lol I didn't even notice

Lol I didn't even notice that Tongue

I'm not on the ball like I used to be Wink