I'll probably get flamed for this, but I re-did this site previewing in IE6, when I tested it in FF, it was all f'd up. There were already so many other problems that I'm hitting the wall with this. What are the errors this time? Any help would be appreciated. Thanks.
<!-- m --><a class="postlink" href="http://www.circleofrecoveryinc.com">http://www.circleofrecoveryinc.com</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.circleofrecoveryinc.com/corTrial.cssyou'll">http://www.circleofrecoveryinc.com/corTrial.cssyou'll</a><!-- m --> find that it's IE that has messed it up not FF.
height is both max and min height in standard using browsers while it stays as just the min-height in IE, use this kind of code:
#OBJ1 {
min-height: 100%;
}
* #OBJ1 {
height: 100%;
}
there are other standards IE defies, but you can find those yourself and just impliment this kind of code to avoid them(which is anoying cos you'll have to sort out IE all over again...)Remove the height:200px; from .navbar
Move PBLeft5px.gif from .navLeft to body as:
background: #fff url('images/PBLeft5px.gif') repeat-y 10px;
The white block in FF is .navLeft, which I imagine will be filled later.
.banBG has a width of 102% which gives a horizontal scrollbar in FF
z-index must be an unique number, if not then the browser will change it.
absolute positioning and negative margins are best avoided; layout should go with the document flow.Originally posted by Fang
absolute positioning ... are best avoided;
I'm curious -- is there any actual reason for this, or is just considered 'good practice'?
I find absolute positioning quite useful in assembling my banners. The only caveat is to make sure that everything 'absolute' is inside of a 'relative' banner so that if it's being viewed through google-cache or something, the images aren't all shifted.layout should go with the document flow
Turn off css support in your browser and see what happens to absolutely positioned elements.
Absolute positioning is useful, but not for all/majority of the elements in the document.Originally posted by Fang
Turn off css support in your browser and see what happens to absolutely positioned elements.
Absolute positioning is useful, but not for all/majority of the elements in the document.
I am going to check it out now I have never tested it with relative positioned DIV's before. I know that abs postioned DIV's will all stack up on top of one another without CSS but wouldn't it do the same thing if they were relativly positioned as that needs the CSS as well.
BTW JavaScript I can understand, but as to why would anyone turn off CSS is beyond me.css is not usually applied to older browsers due to limited support and screen readers ignore all css.
W3C Accessibility Priority 1 (<!-- m --><a class="postlink" href="http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-order-style-sheets">http://www.w3.org/TR/WCAG10/wai-pageaut ... yle-sheets</a><!-- m -->)they may not have CSS in the first place, imagine some guy who's just got a realy bad PC for the sole purpose of visitng a site, image that it just have IE 1.0 or something just as bad.No one would, in fact, I don't believe you can turn off CSS with the normal Download of a browser. Firefox has Web developer extensions that allow you to do that. Turning CSS off allows you to view your page as raw HTML. It's an easy way to see if your page makes sense, i.e. your markup is being use as markup and not for design. It's also how search engines "see" your site.
On the note of absolute positioning, use what ever works. I prefer floating DIVs compared to positioning them. It allows you to have a footer to the page that extends below all columns, no matter which one is taller.
I've found CSS design is easiest if done in this order:
1) Get it to work on Firefox/Mozilla
2) Preview in Opera and Safari
3) Preview in IE6-Win
4) Preview in IE5.5-Win
5) Preview in IE 5.01-Win
6) Preview in IE 5.1+ Mac
Firefox and Mozilla adhere to the standards almost annoyingly, but that's a good thing. Once you've got the page working in Standards browsers, you can be confident that the page will work in future browsers. Then use various CSS hacks, or filters, to get the layout to work in Internet Explorer. A great site explaining CSS bugs of all sorts is <!-- m --><a class="postlink" href="http://www.positioniseverything.net/">http://www.positioniseverything.net/</a><!-- m -->
Another great site is <!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m --> - which deals with specific design issues.
jaguide, all I can say is I feel your pain
IE-Win has been the source of migraine after migraine.I don't believe you can turn off CSS with the normal Download of a browser Opera and Amaya
Firefox has Web developer extensions that allow you to do that and IE Web Accessibility Toolbar (<!-- m --><a class="postlink" href="http://www.nils.org.au/ais/web/resources/toolbar/index.html">http://www.nils.org.au/ais/web/resource ... index.html</a><!-- m -->)
IE-Win has been the source of migraine after migraine
I feel no pain
Fang,
your suggestions worked.
I can't get over how useful this site is. My headache is going away.
M$ & IE must die.
Thanks everybody.Just keep coming back, everyone's input is usefulOriginally posted by Fang
absolute positioning and negative margins are best avoided; layout should go with the document flow. Yes, the layout should go with the document flow but that has nothing to do with absolute positioning or negative margins. As long as the individual parts of the page stay in context with css turned off then all is well.
Originally posted by Fang
Turn off css support in your browser and see what happens to absolutely positioned elements. They should fall into a sensible order according to how they were placed in the markup.
Originally posted by Fang
Absolute positioning is useful, but not for all/majority of the elements in the document. This is true...not useful for every item on a page, especially items that can grow or shrink according to the content.
<!-- m --><a class="postlink" href="http://www.circleofrecoveryinc.com">http://www.circleofrecoveryinc.com</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.circleofrecoveryinc.com/corTrial.cssyou'll">http://www.circleofrecoveryinc.com/corTrial.cssyou'll</a><!-- m --> find that it's IE that has messed it up not FF.
height is both max and min height in standard using browsers while it stays as just the min-height in IE, use this kind of code:
#OBJ1 {
min-height: 100%;
}
* #OBJ1 {
height: 100%;
}
there are other standards IE defies, but you can find those yourself and just impliment this kind of code to avoid them(which is anoying cos you'll have to sort out IE all over again...)Remove the height:200px; from .navbar
Move PBLeft5px.gif from .navLeft to body as:
background: #fff url('images/PBLeft5px.gif') repeat-y 10px;
The white block in FF is .navLeft, which I imagine will be filled later.
.banBG has a width of 102% which gives a horizontal scrollbar in FF
z-index must be an unique number, if not then the browser will change it.
absolute positioning and negative margins are best avoided; layout should go with the document flow.Originally posted by Fang
absolute positioning ... are best avoided;
I'm curious -- is there any actual reason for this, or is just considered 'good practice'?
I find absolute positioning quite useful in assembling my banners. The only caveat is to make sure that everything 'absolute' is inside of a 'relative' banner so that if it's being viewed through google-cache or something, the images aren't all shifted.layout should go with the document flow
Turn off css support in your browser and see what happens to absolutely positioned elements.
Absolute positioning is useful, but not for all/majority of the elements in the document.Originally posted by Fang
Turn off css support in your browser and see what happens to absolutely positioned elements.
Absolute positioning is useful, but not for all/majority of the elements in the document.
I am going to check it out now I have never tested it with relative positioned DIV's before. I know that abs postioned DIV's will all stack up on top of one another without CSS but wouldn't it do the same thing if they were relativly positioned as that needs the CSS as well.
BTW JavaScript I can understand, but as to why would anyone turn off CSS is beyond me.css is not usually applied to older browsers due to limited support and screen readers ignore all css.
W3C Accessibility Priority 1 (<!-- m --><a class="postlink" href="http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-order-style-sheets">http://www.w3.org/TR/WCAG10/wai-pageaut ... yle-sheets</a><!-- m -->)they may not have CSS in the first place, imagine some guy who's just got a realy bad PC for the sole purpose of visitng a site, image that it just have IE 1.0 or something just as bad.No one would, in fact, I don't believe you can turn off CSS with the normal Download of a browser. Firefox has Web developer extensions that allow you to do that. Turning CSS off allows you to view your page as raw HTML. It's an easy way to see if your page makes sense, i.e. your markup is being use as markup and not for design. It's also how search engines "see" your site.
On the note of absolute positioning, use what ever works. I prefer floating DIVs compared to positioning them. It allows you to have a footer to the page that extends below all columns, no matter which one is taller.
I've found CSS design is easiest if done in this order:
1) Get it to work on Firefox/Mozilla
2) Preview in Opera and Safari
3) Preview in IE6-Win
4) Preview in IE5.5-Win
5) Preview in IE 5.01-Win
6) Preview in IE 5.1+ Mac
Firefox and Mozilla adhere to the standards almost annoyingly, but that's a good thing. Once you've got the page working in Standards browsers, you can be confident that the page will work in future browsers. Then use various CSS hacks, or filters, to get the layout to work in Internet Explorer. A great site explaining CSS bugs of all sorts is <!-- m --><a class="postlink" href="http://www.positioniseverything.net/">http://www.positioniseverything.net/</a><!-- m -->
Another great site is <!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m --> - which deals with specific design issues.
jaguide, all I can say is I feel your pain
IE-Win has been the source of migraine after migraine.I don't believe you can turn off CSS with the normal Download of a browser Opera and AmayaFirefox has Web developer extensions that allow you to do that and IE Web Accessibility Toolbar (<!-- m --><a class="postlink" href="http://www.nils.org.au/ais/web/resources/toolbar/index.html">http://www.nils.org.au/ais/web/resource ... index.html</a><!-- m -->)
IE-Win has been the source of migraine after migraine
I feel no pain
Fang,your suggestions worked.
I can't get over how useful this site is. My headache is going away.
M$ & IE must die.
Thanks everybody.Just keep coming back, everyone's input is usefulOriginally posted by Fang
absolute positioning and negative margins are best avoided; layout should go with the document flow. Yes, the layout should go with the document flow but that has nothing to do with absolute positioning or negative margins. As long as the individual parts of the page stay in context with css turned off then all is well.
Originally posted by Fang Turn off css support in your browser and see what happens to absolutely positioned elements. They should fall into a sensible order according to how they were placed in the markup.
Originally posted by Fang
Absolute positioning is useful, but not for all/majority of the elements in the document. This is true...not useful for every item on a page, especially items that can grow or shrink according to the content.