CSS Forum

**scorpioserve** · 11-23-2011, 12:57 PM

Hi Guys, please help me out, I have tried every permutation or method I can think of to fix this site in IE7, it works on most pages BUT not some and I do not know why???????

The site is http://www.thomasmore.co.za

one of the offending pages are http://www.thomasmore.co.za/Thomas-M...l-Extra-Murals

basically I think it has something to do with the pictures because this is one of the few pages where I have used a small pic with another on the side and a large pic too.

there is another odd issue that I have just conceded can not be fixed and that is that in firefox the virtual tour button is at the bottom, but on all other browsers it is at the top as it should be.

**serandfae** · 11-23-2011, 08:39 PM

Well, unfortunately you have more problems on these pages than you realize.

First, your DOCTYPE declaration isn't 100%, which will throw all versions of IE into quirks mode. This is a proper HTML 1.1 transitional DTD:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD  	XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Then, a validator check, which shows multiple errors.

You're using tables for layout, a ton of deprecated code and none of it's organized in such a way that it's easy to troubleshoot.

You're also trying to use a lot of inline conditional comments to "fix" this or that for IE, when you should just be coding it once, right, for standards compliant browsers, then checking for what IE's done to mangle it, and have one stylesheet with fixes. Proper organization is key here, and I mean that, because going through all that is going to take you a really long time.

I'd almost say forget IE 7 users, except where you are you're likely to have more of them. And I hate to tell someone to start from scratch, but friend, these pages are a mess.

tim

**Mystical Pippin** · 10:53 PM

Just curious but why are you using IE7? Because they're at 9 now, most likely to release a 10 soon and it was IE8 when Microsoft really became more design/development friendly.... they added more support for CSS, fixed some HTML bugs, etc...

**scorpioserve** · 11-24-2011, 02:28 AM

Quote:

Originally Posted by Mystical Pippin

Just curious but why are you using IE7? Because they're at 9 now, most likely to release a 10 soon and it was IE8 when Microsoft really became more design/development friendly.... they added more support for CSS, fixed some HTML bugs, etc...

I agree with you, however because of the the target audience of this website, I have had to accomodate the IE7 user, as I am sure you could see by looking at the site that it is a school website, and the school has most of their own internal computers on IE7, therefore I have had no choice. But I agree with you under normal circumstances.

Quote:

Originally Posted by serandfae

Well, unfortunately you have more problems on these pages than you realize.

First, your DOCTYPE declaration isn't 100%, which will throw all versions of IE into quirks mode. This is a proper HTML 1.1 transitional DTD:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD  	XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Then, a validator check, which shows multiple errors.

You're using tables for layout, a ton of deprecated code and none of it's organized in such a way that it's easy to troubleshoot.

You're also trying to use a lot of inline conditional comments to "fix" this or that for IE, when you should just be coding it once, right, for standards compliant browsers, then checking for what IE's done to mangle it, and have one stylesheet with fixes. Proper organization is key here, and I mean that, because going through all that is going to take you a really long time.

I'd almost say forget IE 7 users, except where you are you're likely to have more of them. And I hate to tell someone to start from scratch, but friend, these pages are a mess.

tim

Thanks for the helpful advice, I will try and alter the doctype and see what it does for me, to be honest I have not used tables for layout in many years, however this particular site was giving me such troubles with positioning that I could not sort it out without them, look that is no excuse I am actually an AS3 coder so CSS is still something I have struggled to wrap hy head around, after about 3 lynda.com video tuts on the subject I am still confused by CSS layout

The inline conditional statements are there because of all the issues with various browsers, are you suggesting that these are not required if you code the site to standards only. Or are you saying that they are required but I should have additional style sheets that are there only for the problematic browsers.

Are the pages really such a mess they need to be redone, can you be more specific as to what is a mess, is it because of the tables that need to be removed and replaced with only CSS positioning??

Thanks for the help everyone. I am honestly only having an issue with IE7 and only on about 8 of the pages, and if I could just figure out what is causing those pages to go out I would be very happy.

**scorpioserve** · 11-24-2011, 05:55 AM

I think the reason for the problem is that I have told one image to align left and the other to alight right, this then makes the text go next to the left hand image and push everything over, how else do you think I could do this.
This is the problem code I assume

HTML Code:

<div id="bottomtextimages">
	<img src="images/Thomas-More-College-Senior-Primary-Academics-Drama.jpg" alt="Thomas More College Senior Primary Academics Drama" width="250" height="195" align="left" />
	<img src="images/Thomas-More-College-Senior-Primary-Academics-Art.jpg" alt="Thomas More College Senior Primary Academics Art" width="250" height="195" align="right" />
</div>

**Kelpie** · 11-24-2011, 07:01 AM

Lose the align attribute, it's deprecated anyway.
float: right; the first image, and add overflow: auto; to #bottomtextimages

**Mystical Pippin** · 08:03 AM

oh I see what you mean. You have to accomodate your target users.

**serandfae** · 11-24-2011, 09:10 AM

Quote:

Originally Posted by scorpioserve

The inline conditional statements are there because of all the issues with various browsers, are you suggesting that these are not required if you code the site to standards only. Or are you saying that they are required but I should have additional style sheets that are there only for the problematic browsers.

Are the pages really such a mess they need to be redone, can you be more specific as to what is a mess, is it because of the tables that need to be removed and replaced with only CSS positioning??

Regarding conditional comments, they're usually only used in the head calling for an IE-specific stylesheet just for the fixes for that browser; only in extreme cases do I see it used inline. Once you fix the DOCTYPE some of what you've put in may not even be necessary.

The code is what's the mess. Look at www.e-gads.org, for instance, and do a ctrl+u to see the code. It's organized. If there's a problem it's easy to look through it and track what it is. Now look at yours.

The tables for layout with all the deprecated code like width and align are the cause of most of your validation errors, which also makes it difficult to pinpoint other problems because they're buried. I think that by the time you go through and fix what's wrong with it you could have redone it with current coding.

Quote:

Originally Posted by Mystical Pippin

oh I see what you mean. You have to accomodate your target users.

Yeah, I had already guessed he was going to have a lot of IE7 users, or my advice might have been different.

tim

**scorpioserve** · 11-24-2011, 12:51 PM

Quote:

Originally Posted by Kelpie

Lose the align attribute, it's deprecated anyway.
float: right; the first image, and add overflow: auto; to #bottomtextimages

I am just wanting to confirm something here, add the float right to the first image in other words the left hand image?

Quote:

Originally Posted by serandfae

Regarding conditional comments, they're usually only used in the head calling for an IE-specific stylesheet just for the fixes for that browser; only in extreme cases do I see it used inline. Once you fix the DOCTYPE some of what you've put in may not even be necessary.

The code is what's the mess. Look at www.e-gads.org, for instance, and do a ctrl+u to see the code. It's organized. If there's a problem it's easy to look through it and track what it is. Now look at yours.

The tables for layout with all the deprecated code like width and align are the cause of most of your validation errors, which also makes it difficult to pinpoint other problems because they're buried. I think that by the time you go through and fix what's wrong with it you could have redone it with current coding.

Yeah, I had already guessed he was going to have a lot of IE7 users, or my advice might have been different.

tim

Thanks for the information, honestly I think my code is very neat in it's raw form, it is just that in "view source" mode it looks terrible because of the way that the site has been done. I have a bit of a different idea on how to code an html site, I do not know if it is correct or not but here is my theory, it will either be very enlightening or worth a very very good laugh.

Lets say that I have a website that has a massive background image and a fairly large logo, and a complex navigation and all this stuff take multiple seconds of load time. Now lets say that I have a 10 page website and every page has the exact same common elements as described above.
I have a choice at this stage to either duplicate all this code for every page I have on my site, this will in theory use the web browsers cache to get the common elements each time they are called for in my understanding, and it would be fine.
However I prefer using a slightly modified method, the site detailed above http://www.thomasmore.co.za is all in one index.php file, yes all 80 pages odd.
I use php and use of a .htaccess file to put this all in action.
Part of the reasoning is to have urls like this
http://www.thomasmore.co.za/Thomas-M...mary-Academics
as opposed to
http://www.thomasmore.co.za/Thomas-M...-Academics.htm

I have no idea why but it seems to help my seo, do not know why??

Secondly like with this site there is a complete custom CMS backend to it that the client uses to make edits, it is hidden under a keyboard command of CTRL + SHIFT + 2, this calls up an ajax stye username and password area and once the correct credentials are entered it opens a complete cms relative to only that single page that was being viewed at the time of authentication.

Lastly because I use AS3 as my main line, I have to accommodate non flash enabled users and devices while still keeping serps happy by way of using alternate content though javascript, this is possible; however when using multiple pages it makes for lots of duplicate code and this metod gets around that entire issue.
Also if my website is indexed correctly by google and has 10 pages then each page has a custom url, what if a user that has a flash enabled device clicked a link that was not the homepage link, then it would cause an issue with my flash site and give the user a strange looking site, whereas with this way the .htaccess file makes the switch then javascript takes over and hands it off to the swf file if and when required depending on the users browser capabilities.
For an example of this take a look at http://www.livingstonesadventure.com with and without Flash enabled to see what it is doing.

I hope this sort of explains why the code does not look very neat, as far as the antique style of tables I have used that is purely because I can not for the life of me figure out CSS to the degree that I can code a site with multi browser support without using them, I have tried and failed many times.

**serandfae** · 11-24-2011, 07:15 PM

I understand perfectly about the difficulty in switching away from tables for layout; I had to do it a few years back and had trouble myself. But you seem to be the kind of person who should be able to get it fairly quickly. There are several resources just here in the stickies that can get you started. The one on floats and clearing them is where I'd start. It'll also answer your float question.

It's just a matter of understanding how the document flow works and looking at content as dynamic rather than blocks to be fit like a game of Tetris. If you can get on with that, you're that much closer to being able to doing responsive designs that can resize and look good on mobile devices, etc. without having multiple versions of the site.

tim

**scorpioserve** · 11-25-2011, 04:04 AM

Thanks for all the helpful comments from everyone, what fixed it in the end of the day was this

HTML Code:

<div id="bottomtextimages">
	<img src="images/Thomas-More-College-High-School-Extra-Murals-Hockey.jpg" alt="Thomas More College High School Extra Murals Hockey" width="250" height="195" align="left" />
	<img src="images/Thomas-More-College-High-School-Extra-Murals-Netball.jpg" alt="Thomas More College High School Extra Murals Netball" width="250" height="195" class="goright" />
</div>

Then in the stylesheet

Code:

.goright {
	float: right;
}

And that has fixed the entire issue.

Honestly all the help here was invaluble, I appreciate it.

**Mystical Pippin** · 09:03 AM

Paul

You have an unusual way but you seem to know what you're doing for the intent and purpose of it so hats off to you. I know what you mean about CSS. I have a hard time with it too but I just started learning it so hopefully - eventually I might get it..... I don't know anything at all about ajax, php - very little java - its still very intimidating. I'm just grateful Tim's a personal friend who's very knowledgeable & helpful in this area.