Strategy for sanely fixing CSS issues in IE

tadcan · 24-02-2011 12:01am #1

I'm relatively new to html/css, working on my first 3rd party project that will go live. Lots of hard work and learning and it looked like I was almost finished. When it was checked in IE, things were messy. I know I need to put an IF statement into the HTML and do an alternative CSS file. Mainly just want to figure out a sane way to fix it up.

Found IETester but its crashy in win7 and IE7 doesn't work. Tried UtliIE and IE7 isn't an option. IE8 and IE6 have different issues, so I guess I'll two CSS sheets, one for IE6 and one for IE7 and above. Any other options for testing in different browsers. Are IE7/8 close enough to use the same CSS file.

My main issues are alignment. I've read about this being down to the different way IE interprets the size of divs and margins, padding etc. That can just be changed with tweaking.

Have a slideshow powered by jquery, the photos appear in the webpage if activeX is not activated.

In IE6 have images repeating on some and not all, even though no-repeat was used.

Giblet · 24-02-2011 12:23pm

Don't use multiple stylesheets with a conditional. This can cause problems with blocking, and is a nightmare to maintain.

Use this in place of your html tag.

<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->

This will allow you to target styles to the different browsers within one style sheet

eg:

.myDiv
{
    width:100px;
    height:100px;
}

.ie6 .myDiv
{
    width:80px;
    height:80px;
}

Also, I use IE9, and change the IE mode to render in IE7, IE8, IE9 and Quirks (which is nearly like IE6 and should catch a lot of issues).

You can also use a Virtual Machine and load XP + IE6 on it, Windows 7 allows this for free.

IETester is balls frankly. You will get IE7 or IE8 stuff in there if you have either installed.

I find IE7 and IE6 will have a lot of the same issues, that IE8 won't have.

Padding adds to the width in IE6, but doesn't in later browsers.
width/height acts like min-width/min-height in IE6.
IE6 also has major stacking issues with position:relative and position:absolute

Also, go easy on the jQuery. It's lovely and nice and all, but IE6 will run like a dog. Try do most of your stuff in javascript only if it's not complicated!

tadcan · 24-02-2011 2:04pm

Thanks Giblet, some great advice there. Even thinking about multiple css files gave me a headache.

I'm confused about your code example .MyDiv and .ie6 MyDiv, since having a "." indicates a class. For a div it is normally #MyDiv, should it not be .ie6 #MyDiv?

Thanks for the tip about IE9, I did try the site in that on another machine, but it had minimal differences. When I compared IE8 in IETester and as a standalone browser I did see noticeable differences, which didn't inspire confidence.

I've used virtualbox , so I may just fire up an install of IE. Maybe I can sync my dropbox folder in virtual box to avoid having to manually make changes to the master file.

JQuery seemed like such an simple way out. It is only used on one section of the site, otherwise I've kept to the basics. Unfortunately there wasn't enough time to start learning javascript, I'll bear that in mind for the next project.

Liam Byrne · 24-02-2011 5:56pm

tadcan wrote: »

Thanks Giblet, some great advice there. Even thinking about multiple css files gave me a headache.

I'm confused about your code example .MyDiv and .ie6 MyDiv, since having a "." indicates a class. For a div it is normally #MyDiv, should it not be .ie6 #MyDiv?

That's just the detail of what is within the HTML (which the if statement marks as IEx as appropriate).

So if you have classes, you have .ie6 .MyDiv
If you have an ID, you'll have .ie6 #MyDiv
If you have no classes but style an element (say, LABEL) you'll have .ie6 label

Giblet · 25-02-2011 11:33am

tadcan wrote: »

Thanks Giblet, some great advice there. Even thinking about multiple css files gave me a headache.

I'm confused about your code example .MyDiv and .ie6 MyDiv, since having a "." indicates a class. For a div it is normally #MyDiv, should it not be .ie6 #MyDiv?

Thanks for the tip about IE9, I did try the site in that on another machine, but it had minimal differences. When I compared IE8 in IETester and as a standalone browser I did see noticeable differences, which didn't inspire confidence.

I've used virtualbox , so I may just fire up an install of IE. Maybe I can sync my dropbox folder in virtual box to avoid having to manually make changes to the master file.

JQuery seemed like such an simple way out. It is only used on one section of the site, otherwise I've kept to the basics. Unfortunately there wasn't enough time to start learning javascript, I'll bear that in mind for the next project.

You can use an id or class for any element. ID is used to define a unique element, and class is well, a class of elements and can be applied to mulitple ones.
A div can have either, there is no restrictions. An ID makes it easier to target an element with javascript, but on a small website you won't be running into many performance issues.

Use jQuery by all means!

Malice · 25-02-2011 12:17pm

Just a couple of additions to what's already been written:
I would recommend keeping the IE6/IE7 stuff in separate css files for readability.
If you're running Windows 7 then you can download and run a Windows XP virtual machine (start here). I've used that in the past when I had to support IE7.

tadcan · 25-02-2011 4:53pm

I'll try the single css file and I don't like it I'll copy make separate files when I'm finished.

Already tried virtual machine and have to say, I much prefer virtualbox.

tadcan · 28-02-2011 3:07pm

Almost finished the site, still small issues. The biggest thing is the photo slide show is not the same size as the box below. I think its some issue between jquary and css.

When there is not internet access the photos appear in the page.

In IE7 and below the copyright text gets put to the right.

In Ubuntu firefox, but not windows, the title is on two lines and the form at the bottom is bigger.

Embarrassingly when I put the css file in folder and changed the path to css/stylesheet.css the link doesn't work

I'm just doing the code first page, the php and design is someone else. It needs to go up on friday, even if there are a few problems. Suggestions, thoughts?

www.tadeuszcantwell.com/test.html

Giblet · 28-02-2011 5:10pm

Adding padding:0 to the P tag in CSS.
You are accessing jQuery remotely. Which means your slide show doesn't activate and hide the images. You should create a local copy and use it as a fall back

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="Scripts/jquery-1.4.2.js"%3E%3C/script%3E'))</script>

For the other issues, I haven't delved into them, but I can see you use position:absolute and margins, which can cause problems as you are moving elements around the page using them, instead of letting the page flow naturally. I rarely, if ever use position:absolute
unless I'm doing it for very specific reasons, and even then, only within a relative div or if I'm drawing a special element like a modal window or popup menu. For standard column layouts you should use floats + clears as well as display types to flow your document.

Try clear:left on the copyright

You have all your images in the slideshow wrapped in a P tag, you shouldn't need to do this.
<p> are for paragraphs.

tadcan · 28-02-2011 9:15pm

The clear left worked. I used the second line in the example and changed the jquery file to the one being used for that script. Just wondering at which end is it cashed?

When you talk about the natural flow of the page, do you mean using just top, left and float commands to structure a page. Anything I can read up to better understand this. Seems it would save time if its done right the first time.

Any more help appreciated.

Just saw your <p> comment. That was what was throwing off the images. Was just blindly following an old example I had.

While I don't use Dreamweaver much, I was wondering how reliable Design view is to show faults in the page layout.

Giblet · 01-03-2011 11:04am

I don't use Dreamweaver because I don't trust the design view too much. I just use notepad++ and press f5

As for layout. You should be nearly able to visualise the webpage just by looking at the HTML.

Generally, you have a wrapper to restrict the width of the page (the body tag should be used for this purpose actually).
Then you have your header, nav, main body which can be a few columns, footer and sub-footer (for copyright stuff etc).

Using a mixture of inline and block elements with the widths and heights set, and only using floats and clears, you should be able to create the flow of the page.
Remember that floating an element can take it out of the page structure, so you have to use clear afterwards to tell the browser to allow the page to continue to render beneath the element. Using position declarations (or top, left etc) shouldn't be used in most cases. In your site I probably wouldn't use them at all.

Also use semantic mark up when possible. Use list items for lists, tables for table data etc. Also, you don't need a <div> for everything!

Try to visualise the below HTML based on the structure I've laid out. Then copy, save it and view it. It's pretty basic, but you get the idea. The HTML structure is so simple too, so it works more-or-less cross browser as I had less to maintain. (I put the style tag in there so you don't have to create two files, but I'd use an external style sheet usually)

<html>
	<head>
		<title>
		</title>
		<style>
		html { height:100%;min-height:100%;width:100%; background-color:#fff; }
		body { height:100%;min-height:100%;width:960px; margin:0 auto; background-color:#ccc; }
		h1   { width:500px; height:40px; line-height:40px; margin:0; padding:5px; }		
		ul,h2   { margin:0 }
		.menu { width:500px; height:50px; background-color:#0f0; }
		.menu li { float:left; width:100px; list-style:none; line-height:50px; }
		#main         { height:80%; }
		#mainContent  { width: 680px; background-color:#f00; height:100%; float:left; }
		#main ul     { width: 265px; background-color:#00f; height:50%; float:left;margin:0;padding-left:15px;}		
		#footer       { width:960px; clear:left; background-color:#FFFF00; height:20%;text-align:center}
		#footer h2{ text-align:left } 
		#footer ul    { width:300px; margin:0 auto;padding: 0;text-align:center; }	
		#footer li { list-style:none; float:left; width:100px; padding:0; margin: 0 } 
		</style>
	</head>
	<body>
	<div id="header">		
		<h1>My Header Content</h1>	
		<ul class="menu">
			<li>Menu 1</li>
			<li>Menu 2</li>
			<li>Menu 3</li>
			<li>Menu 4</li>
		</ul>		
	</div>
	<div id="main">
		<div id="mainContent">My Content</div>		
		<ul>
			<li>Side Menu 1</li>
			<li>Side Menu 2</li>
			<li>Side Menu 3</li>
			<li>Side Menu 4</li>
		</ul>		
	</div>	
	<div id="footer">		
		<h2>My Footer</h2>	
		<ul>
			<li>Footer Link 1</li>
			<li>Footer Link 2</li>
			<li>Footer Link 3</li>
		</ul>
		
	</div>
	</body>
</html>

tadcan · 01-03-2011 11:41am

Thanks, I'll have a good look over that when I get home. I may redo the site later to practice using that example. Supposed to be studying mcse, not html/css

The people who asked for the site want it to be dynamic, as in fit the browser page. I tried to explain via the designer, that its difficult because of the use of images as backgrounds and photo's, which is difficult to expand cleanly. Am I correct that this isn't as simple as 'just writing a few lines of code'.

Will the caching still work that jquery 1.2.6?

Can you have a look at the frameset in the form on the bottom right. Wondering if their is a problem with that. Or maybe its just inheriting problems because of the structure.

I'll bear that in mind about the div's. It seemed to fix all my problems, instead of being a fix for the layout.

Also using notepad++ in windows and gedit in ubuntu. At least I was taught to hand code and understand what you are doing. I'll get their eventually.

Giblet · 01-03-2011 11:52am

Dynamic width sites are difficult to maintain, 960px is generally what I use. Images can be scaled by setting their width + height as %'s and using large images as source images, but something like IE7 has a horrible default scaler! It might be a good exercise if it's for a project, but a lot of designers wouldn't go near it unless they got to design the site from scratch themselves. I have seen some cool sites though that scale amazingly well (from 2048 to 320), but it's more an exercise in HTML trickery than something that's really useful for most sites.

At this stage, I'd push for a concise layout that works cross browser.

tadcan · 01-03-2011 3:30pm

thanks for the answer, any chance you can look at the other questions, as well? Sorry if I'm be to pushy.

Strategy for sanely fixing CSS issues in IE

Comments