Jacked Browser Displays

[lmtwoody]

Mornin, afternoon, evenin, and go to bed, as it applies to where ever you're at.I'm having a problem similliar to RobertP the other day or so, I read that thread and changed from laying out in tables to div.That helped a LOT, for sure. I'm still having an issue where a page will look right in 1 browser, then be jacked up in the others.... I fix it for a different browser, and it's jacked in the first. Good times.I've validated the code, had a handfull of issues here and there, worked those kinks out, and still ... jacked.That site is ready to go, pretty much, and starts at san.lunariffic.com/studi188/index.html (not the offical addy, of course)Here's the CSS to accompany the base HTML

div.share{float : left;margin-top : 15%;clear : right;}div.topstrip {width : 100%;background-color : #5ce62e;margin : 0;}div.left {float : left;width : 167px;margin : 0;/* padding : 1em; */margin-top : 105px;}p.tblinfo {text-align : center;color : black;}span.upleft {text-align : left;vertical-align : top;}body.bgc {background-color : #e6b2ff;}.img1 {position : absolute;left : 27%;top : 1%;width : 450px;height : 380px;}.img2 {position : absolute;left : 1%;top : 110%;}.img3 {position : absolute;left : 82%;top : 102%;}div.lefto {float : left;width : 167px;margin : 0;padding : 1em;margin-top : 80px;}div.content {margin-top : 120px;float : left;width : 800px;}div.contento {margin-top : 20px;float : left;width : 700px;}div.head {margin : 0;padding : 1em;margin-top : 50px;}div.cal {margin-top : 300px;}.hiC {text-align : center;}.hiclear {text-align : center;clear : both;}span.bull{font-size:35px;color:#5ce62e;}th.s{width : 10%;border:2px solid #5ce62e;}th.l{width : 16%;border:2px solid #5ce62e;}

I hope you guys don't find my code too annoying, I know the CSS is disjointed a bit, as I've been trying to conquer this issue. I'm wondering if maybe I should use a JS to reference different pages by browser type.... most of the rest of the site works right, the home page and art gallery seem to be my biggest headaches. Any comments on the JS for referencing idea would be appreciated.Thanks for lookin.

[jeffman]

Do not browser sniff. It's much more trouble than its worth, and good designers can find CSS solutions that require no knowledge of the browser. This does not mean you shouldn't be aware of browser differences. It takes a while to learn the kinds of things that work in all browsers, and the kind of tweaks that make one browser work without jacking up another one.Job 1: do you have a strict doctype? The is crucial.Your link doesn't work for me, so I don't have much more to say. Seeing CSS without the HTML it works on does not help much

[jeffman]

Oh. I notice a lot of absolute positioning. That's a last-resort technique, best reserved for things like dropdown menus.

[lmtwoody]

Sorry about that. missed a tilde when I freehanded it in. :Shttp://san.lunariffic.com/~studi188/index.htmlWhen I didn't pin the jpg's absolutely, they floated pretty heavily by browser too, at least THOSE stay pretty consistent across all browsers. <g>I know some things are going to shift a bit, by browser type, etc. I see it in Facebook, and a few other sites I visit. What I'm seeing here isn't minor shifting though. :/

[lmtwoody]

Okay ..... I 'think' I've got it nailed down now..... I added the share button after I validated, (after thought, that was supposed to been there from 'go'.)I need to view source through firefox more often, as it showed me an open table element, which set me back in motion to figuring out where to relocate the rest of my div's. (assigning a different background color to each div during code massage is a great tool, too) Okay, about the absolute positioning of images, (and maybe why sometimes images don't show up at all, in certain browsers) .... What's a better aproach please?

[jeffman]

Positioning is a consequence of several things:Left-to-right, top-to-bottom sequence in the HTMLLogical sequence: what element contains what.height and widthmargins and (to a lesser extent) padding. Don't be afraid of 100px margins if that's what you need.whether an element is defined as inline or block. inline elements stay next to each other, like characters. Block elements begin a new line.floats. Float "turns off" a block-level's newline tendency.clear. If element A is floated, and element B should not be, element B needs a clear property.In my experience, designers moving to a CSS model need to experiment the most with float and clear. A good experiment is simply to create a bunch of rectangular divs with different background colors and try positioning them around a test page. Put words in them too, so you know which is which.

[lmtwoody]

Awesome,Thanks so much for the help Deirdre's Dad. I've been workin on this project for a month and a half, or so, the w3 tutorials are very straight forward, and extrememely helpful, and I've managed to answer most of my questions myself by perusing these forums, and more often than not, you've been influential in answering most questions that I've seen posted.This is the first project I've embarked upon since college, and I graduated from ITT some 6 yrs ago. A number of things have changed since then, I don't recall them teaching us about DIV, but I do recall marquee (which doesn't seem to exist any more) and applets that don't seem very commonplace either. :)I'll definetely keep the test page with color coded div's for practice purposes in mind.