If you scroll right down here
the author and readers will notice that the layout has gone a bit wonky. Welcome to web standards coding 😉
— Working, more or less, on XP_IE6.0, FF0.9 & Opera7.11.
–IE5x/win is another matter. Hugs left viewport, instead of centering– menu breaks right.
–Safari1.2 Not sure. It may be that the ” i-capture” cache was not popped between revisions that fixed the same problem in FF.
–IE/Mac5.2 Not tested.
HTML/CSS are valid.
Comments, suggestions appreciated.
Yes but you cheated on the positioning scheme. You have abandoned your footer 😉
Hacked and now working IE5x/win. IE/Mac5.2 is working.
On to the footer.
Comments, suggestions appreciated.
Added #back-menu, only to discover several hours latter that doing so detroyed Opera7– the problem being a miscalculation of the width. In the meantime, it seems to look okay on a Safari1.2(whatever) i-capture, including expected Mac OS difference in font rendering.
I have also found some discrepencies of other width dimensions causing sublte rendering differences between Gecko and IE browsers. Currently attepting to correct these, and their associated hacks. Needless to say, I need a Math-101 refresher course…
Comments, suggestions, some aspirin, and a glass of water appreciated.
No math degree needed. Wherever you see borders, padding or margins all you need remember is that some browsers will add them to the width and some will deduct them. Now unless for some reason you are very tight of space doing a really intricate pixel perfect layout, the trick is to avoid adding margins, padding and borders to anything that already has the width defined like the floats. So – try and avoid if poss. With ingenuity you will see how. For example do not margin the content because its width is defined. Instead add a class .post and margin that. See what I mean?. Otherwise we are going to have to start hacking.I am following your progress dont worry if you get stuck.Anonymous
re: creating div’s for margins, padding and borders on anything
that already has the width defined
Very peculiar–files are valid, and working locally. Fails when uploaded. However, everything jumps into place on FF if *Edit CSS* ( Web Developer extension) is checked and then unchecked.
Popping the cache and/or reloading has no effect whatsoever.
Going from a small to a large window seems to trigger correct rendering. Weird…
I am just wondering if the server is refreshing properly. Servers keep all the old copies. Why not delete the necessary files then ftp afresh.
Made a couple of mark-up changes. It’s now working on XP_IE6.0, Moz1.6, and Opera7.5.1. *FF0.9 is the problem*– menu breaks right…
I’ll try a new set of files…
No, she doesn’t like the fresh set of files either– must be something in the code. I’ll tinker with it…
Ok. Here is the thing. In the CSS you have a class and a div both styled with the same name. .content. And the class content has a lot of padding. That is screwing the pooch. HTH.
Turns out not to be a problem with the code. Wound up stripping everything, and found an error on the source file. Needs to be tweaked, but after a cursory look is now rendering on IE, Moz, My Lady FF, and Opera. Predictably hugging the left viewport on IE5/5.5. without the box model hack to center it.
I will be away from 7a, Tues,. July 6 until 8p, Fri., July9th.
If I haven’t driven you completly nuts by now, I’d appreciate continuing when I get back. Either way, thanks ever so much…
I was having a bad IE5/5.5 day earlier this morning. It is predictably centering just fine *without using* the box model hack. There is a 17px vertical drop between the header and the content on IE5 personally I think this can ride as is). IE5.5 rendering same as 6.0. IE/Mac5.2 seems okay– same for AOL7.
Header centers, container holding content/menu breaks right, appearing to hug right viewport on Konqueror. While this could probably be fixed by anchoring it to the header, I’m not so sure it’s really worth the effort?
On the menu (all browers) there is added vertical space between the category Blogroll and the first link– Rebecca’s Pocket. Particularly obvious on IE6. Deleting the category and links, and then replacing them does not seem to help. Any suggestions?
continuing when I get back. Either way, thanks ever so much…
Well maybe you need a break. Tantek Ceilks voice box hack is not necessary and is over elaborate for the issues raised here and has no bearing on centering the page in the view port at all anyway.For what it is worth I believe that a sound understanding of any one simple layout model is better than any amount of hacking and going round and round, as you, sadly seem to be doing.
- The topic ‘Constructive Criticism’ is closed to new replies.