Divs and Browsers

[dog]

Hey,

I was only previewing this site in IE and in Firefox it has numerous problems.

If anyone could look at the differences between the two and let me know where I'm going wrong... well that would be really cool.

Thanks,

dog

http://www.futuretechnology.com.br/g...Untitled-2.htm

[Twey]

I don't have IE... could you post a screenshot of what it's supposed to look like?

[mwinter]

I was only previewing this site in IE [...]

That would be your problem. IE is broken in too many ways to mention[1], and basing anything around it will produce problems in other, decent browsers.

Your best bet would be to reimplement your design using Opera or Firefox as your benchmark, and ensuring that you stick to valid markup and style data. Afterwards, fix any problems that you encounter with IE (which may include foregoing features that it is too decrepit to support).

If anyone could look at the differences between the two and let me know where I'm going wrong... well that would be really cool.

It wouldn't be practical to 'fix' it in Firefox, because it's being displayed correctly (it's just as broken in Opera). However, some tips for the rewrite:

• The meta element is superfluous: your server is sending the same information, and it takes precedence.
• There should be no reason to use the Transitional document type anymore. The transition ended a few years ago. Use Strict.
• You're using XML-like empty element start-tags for your link elements, and a few images. Don't.
• There is no need to 'hide' script and style element content. Omit the comment declarations.
• Despite using style sheets, there is an enormous amount of inline style data, and much of it is useless chaff. For example,
  
  

  position: relative; top: 0; left: 0;

  appears in several style attributes. Though in some cases (but definitely not all), the position declaration establishes a new containing block for nested, absolutely-positioned elements, the top and left declarations are unnecessary.
• On the subject of absolute positioning, be very careful with it. Your use of it has certainly lead to some of your current problems, and absolute positioning can easily produce fragile documents. Consider using floats, instead.
• Once you've eliminated the style junk, export it all to an external style sheet.
• Stick to semantic markup; you're using heading levels purely for convenience, not because they're appropriate. There are several level 3 and 4 heading, but not a single level 1 or 2 heading. Heading levels should be nested.
• Because you're using em lengths, rather than percentages, to define font size, your document suffers from a bug that I described recently.

This list isn't exhaustive, but it should give you something to think about.

Good luck,
Mike


[1] This isn't IE or Microsoft bashing, but an unfortunate truth.

[jscheuer1]

All good, Mike. Except that floats will do the same thing with this markup that absolute positioning does, namely not expand the containing element This was a double post however, so see also:

http://www.dynamicdrive.com/forums/s...3649#post33649

To dog - Please do not double post.

[dog]

Many thanks go out to Mike for his advise.

Just one thing i don't really understand...

- You're using XML-like empty element start-tags for your link elements, and a few images. Don't.

- There is no need to 'hide' script and style element content. Omit the comment declarations.

...yup! i just don't understand this. What is "XML-like"? What is a "comment declaration"?

I guess there may be some problems regarding what i've done to create flexible images...

I've defined containing divs with ems for flexibility and then made images to fill them. Is this a problem? Do you know a better way to achieve the same flexability?

Re. the "pinkBox"s. I know there must be a better way to create coloured boxed but I don't yet know what it is.

Thanks again for all the help!

dog

[Twey]

What is "XML-like"?

<img src="image.jpg" />

What is a "comment declaration"?

<!--
...
-->

[dog]

cool thanks!