on the Windows PC at work. It’s based on Template #6, but I’ve monkeyed with the code to the point that IE for Window’s peculiarites render it unreadable. All my Mac browser tests passed—and Mozilla for Windows renders it just fine. Is it too much work for someone to look at two pages, plus the CSS files? Anyway, I’d appreciate any help from the brave souls who deal with IE CSS quirks every day. Here’s the first page and here’s the first CSS file for it.
If you’re not nauseated yet, here’s the second page I’d like to get advice about and the second CSS file that goes with it.
You will see that it tanks on IE for Windows. Is it because of my liberal abuse of negative margins? Thanks for any input.
I’m no expert but I had a look at your code and it was a bit scary. This is going to sound harsh but if I were you - and I have been in this position before - what I would do is download template number 6 again or find another decent 3 column layout. Paste them in as a fresh set and start again. I think you will find this much easier than tidying up your code and I also think you’ll find you can come up with the same layout but with a much simpler structure.
I will make a couple of comments also. You have retained the strict doctype of the template but you are using many deprecated tags (the font tag is the most obvious) and there are many uses of tags that are not allowed in the strict doctype. You’re also using a combination of absolute positioning and float in some rules, which, although I don’t know this for certain, seems as though they contradict each other and may break your layout in some browsers. You also use padding in some fixed width elements, which is fine, but IE interprets padding in some of these elements differently to other browsers and you have to allow for that. There are various box-model hacks to get around this but my own practise is to avoid using padding in fixed width container elements altogether if I can or avoid using a fixed width for nested elements and apply padding to those elements if I can. There is a good summary of the box model in IE here
If you want to go down the road of tidying up your existing code, you should run it through the w3c validator and fix all of the errors that it finds.
Personally, I would start again, using a fresh layout and cutting and pasting your EE tags (only your ee tags to start) and when you get your layout looking good, then start to style it.
I hope this is helpful and I hope you get things up and running soon, ‘cause I for one will be wanting to read some of your content. Looks interesting!
Thanks, Tim, for the feedback. The code may be scary not only because I’m not a trained Web designer but because I used GoLive for Mac to code a lot of it, especially the second page. I really need to check the site on IE for Wiindows as I code it. What’s the standard procedure for Mac-based designers, anyway? Do they all have PCs or Virtual PC to check their code? So now I have to buy a PC, I guess. Like I said, the site looks great on all Mac browsers and Mozilla for Windows. GoLive for Mac supposedly has a preview function that simulates IE for Windows, but I can’t get it to work—it makes the page look as if it’s fine when it’s not.
I’ll try the validator first, then think about starting from scratch. Too bad IE for Windows is what 96% of the Universe will see it on.
Browsercam is an excellent service because you can check on a lot of different browsers and configurations. That is possible to do on a local machine but apparently difficult to get a bunch of different versions of the same browser to run. Personally, I prefer to check them on a local computer though and I have been looking at a solution for myself recently. I looked at Bochs on OS X which is an emulator and is free and it works but it is woefully slow. I used Virtual PC back when I was on OS 9 and it was good, but a little clunky. No doubt it has improved by now. However, I think a great solution is the following (and it comes from Microsoft believe it or not), it doesn’t involve an emulator and it is what I intend to take up.
Buy a cheap PC box (you can get them new from just a few hundred dollars/pounds or second hand for a lot less), no monitor/keyboard needed. Then get Microsoft’s Apple remote desktop client. This is basically an OS X remote desktop program which will let you connect to a PC on a local network and access everything through the OS intalled on the PC (not an emulator). You can use any PC applications, use your Mac peripherals with the PC, basically run your PC box from your Mac. By all reports, it is a very solid program. i have used the Windows remote dektop and if it works anywhere near as well as that, then I will be happy. Hope this helps.
Good suggestions, all. I too have Virtual PC for OS9. I started it up and it ran fine. But, of course, I’d have to do everything in OS9 to conveniently check IE since Virtual PC won’t run in Classic mode. It has to be booted in 9. Browsercam is a good option, and the best seems to be using Remote Desktop.
Now, back to the reality of my scary code: I have over a hundred violations when I validate the second link and over sixty on the first one. I suspect a lot of it has to do with my hand coding (forgot to close tags) but also the nature of Adobe Golive. It’s easy to drag and drop floating boxes and simulate Template 6 or my variation of Template 6. The question is: does it add messy code? I’ll try using GoLive to simulate my Template from a fresh blank file and see if it’s as messy. If that doesn’t work, I’ll start with Template 6 again. But I think my problems arise when I try to modify Template 6 in GoLive.
Just found this. Although it requires that the computer run Windows XP Professional, Microsoft makes a freeware client called Remote Desktop Connection Client.
This is the same program as I mentioned above. Yes, it requires a server capable OS to be installed on the remote computer but even taking that into account, I think a cheap base box with one of those Windows versions installed would be a comparable option to Virtual PC whilst giving you actual hardware, without the limitations imposed by an emulator. On the other hand, I believe later versions of Virtual PC allow multiple OS systems to be emulated and you can switch fairly easily between them. That would be fairly time consuming, to achieve on a hardware system I think. I remember one of the things I liked about the OS 9 Virtual PC was that it saved the PC state and ‘booted’ up in no time. I still think I am going for the hardware system. Others might have some other options.
Yes, VirtualPC allows you to install different versions of Windows (as well as Linux & DOS). They are saved as separate drive images and you can switch back and forth between them. You can also save the states so when you return to VPc it’s the same as you left it. There is also a way to run various browser versions (IE5, 5.5 & 6) all within one version of Windows. I’m doing it but can’t recall how or where I found the info. Another nice thing is you can backup those drive images and restore really quickly. Doesn’t sound important but you are running an actual Windows environment and it’s just as susceptible to virus, worms, etc. as on a WinTel box even thought they won’t affect your Mac or OSX.
I find that between VPc and BrowserCam I’m pretty much covered.
The only downsides are it’s a lot slower then a real Windows box and the gamma might be different. To me, those are minor, easily dealt with and I don’t have another box cluttering my desk/office. It’s cheaper also
The code is kind of scary, I have seen worse, however, your first page renders beautifully in IE 6 on windows….well, at least I think it does. I would drop Adobe GoLive, and download the free trial of Style Master . It gives you the ability to see if the code you write is compatable with every current browser, and even many past browsers. It also is the only WYSIWYG editor thats affordable that I know of. You get a 30 day full trial. meaning, you can save the css and use it. the downside is you have 30 days to to write your code. But if your like me, it will be done in a day.
IE has some serious quirks! It is by far the worst interms of getting it to play nice, but here are some links to hack your problem. The main problem, is that IE needs a an absolute position to work. The trick is to fool it into thinking it is.
Now that I have been messing with it, I see what is wrong….and the code is very scarey, and Adobe GoLive is suppose to be good….I will work on it tonight to see what I can do…I was able to get the title bar, right, left and center coloms aligned right in IE6, but after its fidgity, and falls apart.
The other thing is you have 25 DIV tags, and 26 /DIV tags….
Thanks for any and all efforts to help out. Admission: As a longtime Mac weenie, I have a built-in aversion to any code; therefore, I have avoided HTML basics. For instance, I’m jumping into CSS without even knowing how to code a table. Whatever program promises WYSIWYG is what I will use. But calling the layout window in GoLive WYSIWYG is like calling an Etch-A-Sketch toy a calligraphy penl. So I can’t avoid learning some HTML and CSS during this process.
Stylemaster is excellent for learning. I have almost always hand code all my HTML all the way back to HTML 1.0 ( guess that is waht it would be called. ) So when I learned XHTML, and CSS 1 and (still learning 2) I hand coded all of it. I do find Style Master to be much faster! I do the layout by hand, and colors, typography, etc with Style Masta.
I will see if I can fix the bug tonight, and I’ll post the fix on this Thread. I do agree that the easiest way to correct this, and learn a great deal of CSS, is to download template 6, open the CSS in style master, and the index as well. Then make the ‘design’ changes (ie. the background gif, the Typography).
And dont learn HTML, or how to do tables! TABLES ARE EVIL! Learn XHTML..no sense in going backward. I would suggest this book . It is for absolute beginners, but not dummies. And it will teach you all about (X)HTML an CSS. Then get Designing with Web Standards by Jeffery Zeldam.
ok, so I have been messing with it, and I think I may have fixed it. unfortunately, I dont have access to a windows machine running IE 6. I did test in Mac IE 5.2. Here is the link .
None of the pictures are going to load because I have not pulled them from your site, and I had to change your CSS imgs to relative, instead of absolute because very few browsers support it. I will try to test it tomorrow and fix anything else. If anyone has IE 6 on Windows and can test it you should see a space for a banner, and a 3 colom layout underneith that.
johiniscool—thanks so much. I tested it with Virtual PC running IE 6 and it still lacks the right column, which is missing on my site because of the bad code. I can’t tell if you fixed the banner because on my site the banner doesn’t load either (obviously not because the graphics aren’t there but because my code is wrong), so it looks the same for different reasons.
I’ve used Stylemaster and is a good product if you need a CSS editor. And westciv also have great tutorials for CSS. I would also recommend Pagespinner as a really good, all round site editor although it is not WYSIWYG, but then you can get your hands dirty in the code.
