Inconsistancy between IE and Firefox, pls help!

janmars · 2007-03-31 12:31:17

Please take a look at the following two links, with FireFox and then with IE v6:

http://www.thethoughts.co.uk
http://www.thethoughts.co.uk/awareness

I have spent hours this morning trying to sort this problem out – and to be honest I don’t have a clue where to begin.

The two problems are firstly the Google Ads are in the wrong location in IE – they appear at the bottom of the page. In FireFox and Opera the ads appear to the right of the main site content, which is exactly where I want them.

The other problem is on the “awareness” page the two boxes “mediations” and “dreaming” are not lined up with each other in IE. Whilst in FireFox and Opera they both appear on the same level, which is again how I want them to appear.

I would be really really grateful if anyone could help me out on this as it is driving me to my wits end about now…

Thanks

Last edited by janmars (2007-03-31 12:32:27)

maniqui · 2007-03-31 16:19:30

Hi.

I would start by fixing the code. The HTML Tidy extension for Firefox is telling me that the awareness page has got 32 warnings.

About the problem of the misaligned boxes, they look fine in IE7 but I see the problem in IE6.

Also, your CSS rules for #left, #right and #smalllisttop, #smalllist, #smalllistbottom doesn’t look very solid (at least, for me) at all.
For sure, you can achieve what you are looking for by rewriting all those rules from the beginning with a different approach.

First: those two boxed will have variable width/height? If not, you can avoid having those three images to create a box, and replace all of them with just one image of a complete box.

But as I’m writing this, I can see that you haven’t use the best semantic structure at all.

For example, you have:

<div id="left">
<div id="smalllisttop"></div>
<div id="smalllist">
<div id="meditation" align="center"></div>
<p><a href="http://www.thethoughts.co.uk/thoughts/binaural-beats" title="Permanent link to this article">Binaural Beats</a>
</p><p>
</p></div><!--smalllist-->
<div id="smalllistbottom"></div>
</div><!--left-->

First, you are creating the div#meditation just to put a background image in that div, but where is the word “meditation” in your code? That’s not beneficial for the semantics of your site, and so, for your visitors, especially those that “eat” content, like Google, Yahoo, etc.

i should rewrite the above code just to:

<div id="left">
<h3>Meditation</h3>
<p><a href="http://www.thethoughts.co.uk/thoughts/binaural-beats" title="Permanent link to this article">Binaural Beats</a></p>
</div><!--left-->

I would bet that with that using that minimal mark-up, a rewriting of your CSS and a rethinking of the images you are using for create the box, you can easily achive what you are trying to do.

For example, I would use just one image for the “body” and the bottom of the box. That image will include both the bottom and the side borders of the box. That image should be tall enough if that box would vary in height.

Then, for the top of the box, you can use the same image you are using now, but applying it to the @<h3>Meditation</h3> element.

Then, about positioning those boxes, I will try to avoid abusing of paddings and margin (well, maybe you will need to use some margins to separate #left and #right from the borders of the container).

Some few advices to get to your goals:

I would apply a width just to #left and #right. That width should be exactly the width of the background-images (that I strongly recommend you to use the same width for the “body” and the top images).
If you apply paddings to #left and #right, take in account that those will be added to the total width of the #left and #right boxes. Some easy mathematics will help you here.
If you want to avoid that, you can apply margins or paddings just to the inner elements (h3, p) and then you won’t need to take care about the total width.
Try to not abuse of empty elements (divs, or spans) just for using them for aesthetics purposes. That isn’t a good practice at all.
Look for a image replacement technique for your headings.

Well, that’s all for now, I think you will have some frustration, but then, some fun too, and your knowledge about CSS and HTML will become more solid.

Last edited by maniqui (2007-03-31 16:19:49)

janmars · 2007-03-31 20:13:54

Thanks for the extensive reply it is very helpful. I was thinking about doing a re-write anyway – so I will give it a go…

Tinshack · 2007-04-01 05:11:06

I found that it’s easier to develop in Firefox (a standards complient browser) and then change the code so that it works in the other browsers. This way your code is more standards compliant from the start and you might find it a little less frustrating when getting it to work in something clunky like IE. (This tip came from a website or forum or website somewhere but I can’t remember where).

Textpattern CMS

Textpattern CMS support forum

#1 2007-03-31 12:31:17

Inconsistancy between IE and Firefox, pls help!

#2 2007-03-31 16:19:30

Re: Inconsistancy between IE and Firefox, pls help!

#3 2007-03-31 20:13:54

Re: Inconsistancy between IE and Firefox, pls help!

#4 2007-04-01 05:11:06

Re: Inconsistancy between IE and Firefox, pls help!

Board footer