IE6 Width 'vs' IE 7 Width

Hi

I'm fairly new to CSS for website design so please bear this in mind when flaming me for my obvious short comings. This is only the third website I've created using XHTML and CSS so I still class myself as a novice! (with big ideas - therein lies the problem)

http://www.quentinjames.co.uk/dynatek1/

I've designed and created the site above but have noticed several problems when switching between browsers. The main problem is that the 'wrapper' div seems to be wider on the right when viewed in IE6. This problem is not apparent in any other browser.

I am a Mac based designer so testing the site is not easy for me and I am relying on an aging version of Virtual PC and various browser capture websites for testing. I've tried removing various 'divs' in turn to see if I can find the problem by trial and error bu this has not proved successful.

Any tips or clues as to my problem would be gratefully received!

Cheers

Q

 

I've tested your site in IE6,7,8beta and FF. I see no diffrence at in the browsers. Did you already solved it? The only thing I see is that the site is left aligned whil you might wanted to center it?

 

I'm not exactly seeing a difference here either, though it's hard to tell if that's an intentional layout or one giant rendering error.

Some advice since you are new - ditch the tables. Even using tables for layout there is nothing on this page that warrants more than a single table, a handful of designers might say three if you were going light on the CSS - yet you seem to have ELEVEN of them?!?

Tables without CSS, even with all that cellpadding/cellspacing/border attribute rubbish, can cause odd problems cross-browser - most of which can be fixed by just using table-layout:fixed and border-collapse:collapse;

You've got a lot of images for text - JUST USE TEXT. Oh noes, it's not the font you want - if you REALLY need that special font, look up "image replacement" techniques. (I'm a glider-levin fan)

If I were to mark up that page... You've got under 500 bytes of content so there's no reason for that page to be more than 4k of HTML. You have 8k - most of that bloat being presentational elements and the tables.

 

Oops. Please accept my most sincerest apologies. I posted an incorrect URL The correct URL is as follows:

http://www.quentinjamesdesign.co.uk/dynatek1/

You are 100% right in your comments about my own, old website. I am in the early stages of re-designing this along the lines you suggest. The results can be seen:

http://www.quentinjamesdesign.co.uk/new/

However I am still totally stuck with the original problem I posted for

http://www.quentinjamesdesign.co.uk/dynatek1/

 

I now see the problem,

I think the best solution here is to make an appart style sheet for IE6 where you put less width for the wrapper. Their might be another solution but I have to go now,
Good luck

Thomas Horton

 

Thomas,

Thanks for your tip. I tried that but it didn't work 100%. I think a good night's sleep and a fresh perspective this morning helped as I think I've sorted it!

The problem seemed to be a 25px margin on the right of the footer container div which IE6 interpreted wrongly. I've changed it to 0px margin and 25px padding which seems to have corrected the display fault.

I'm not sure why this error occurred in the first place or if my 'fix' is classed as a hack but at least it works!

I'd still appreciate any tips, comments or critiques on my CSS skills, or lack of them!

Thanks for looking!

 

I don't see a difference between Internet Explorer 6.0 and Firefox 3. Did you manage to resolve the problem?

 

Don't forget to also check your pages by disabling style sheets (maybe images too) and bump up the text size one or two increments via the keyboard/toolbar -- that is the way some of your visitors will probably view your pages for quicker and easier browsing of the content.

James

 

Yes thanks. See previous post.

 

I see little or no code difference in terms of problems between the original link and these new ones. Everything I said to the first link applies to these as well - though it brings some fun new problems to the table... like the menus being broken on large font machines, improper use of heading tags (documents should have one and only one H1) , that fat bloated chrome menu rubbish being an accessability /FAIL, 33 validation errors, use of an image map, inlined CSS, inlined scripting, etc, etc...

My advice would be pretty much the stock answer I give people - throw it out and start over with clean minimalist semantic markup, as there is little here that could be salvaged or 'fixed up'.

Oh, and your 'new' design - giant header image pushes actual page content offscreen, so that's a fail from a marketing standpoint. There is nothing on that page which should warrant needing the .png fix script, you have bloated out the page with an ungodly 335k in images (home3.jpg is larger than I usually allow for an entire SITE), it too is filled with multiple tables for no good reason, presentational markup, a whole slew of div's and classes that shouldn't be needed, again with the incorrect use of heading tags, etc, etc.

 

Another useful tool for testing sites on IE is net render http://ipinfo.info/netrenderer/, if you could post some of the code problematic I may be able to help.