Hello all,
Im nearing completion of a pet project of mine. And after going through a bit of validation, I think im ready to get this site cross-browser compliant. Some of the HTML hasnt validated yet. On the front page it doesnt like how my flash header is put in. And on all the portfolio pages, it doesnt like my pop-up windows. My CSS is vaild though.
Anyway, I figure if I have it validated to this point with very few errors, id like to now get it looking good in IE at least for now.
Still pretty new to CSS, and I designed the site for checks in Firefox first (as was suggested to me). But of course, its all whacko in IE. I was expecting this, and I realize that they are several IE hacks, some of which I have used before.
I guess im hoping someone can take a look and point me in the right direction as far as hacks go or what I need to do to get this thing flying in IE.
Thx in advance!
JW
site:
<!-- w --><a class="postlink" href="http://www.precisionimageworks.com/index.html">www.precisionimageworks.com/index.html</a><!-- w -->
the CSS I use:
<!-- w --><a class="postlink" href="http://www.precisionimageworks.com/Precision-index.css">www.precisionimageworks.com/Precision-index.css</a><!-- w -->
<!-- w --><a class="postlink" href="http://www.precisionimageworks.com/Precision-portfolio.css">www.precisionimageworks.com/Precision-portfolio.css</a><!-- w -->
<!-- w --><a class="postlink" href="http://www.precisionimageworks.com/Precision-pricing.cssAll">www.precisionimageworks.com/Precision-pricing.cssAll</a><!-- w --> that looks wrong to me on IE6 WXP (FF good) is that the topband is too close to the Topnav. If you set a height to the Topnav and make it line up does this effect the firefox view? Just give that a try, it's simple but may just do it. Otherwise I'll leave it up to someone else, I don't use IE Hacks.Sorry didnt look past the index page lol, yes there are more differences, possibly disreguard my last post. hmm. that recent news is fast! yes, i think someone else.Portfolio page:
border: 1px #ffffff solid; in #wrapper gives a border in IE but not in FF
Incorrect use of headers; should be in order of importance h1, h2 etc.
Too many <div> elements
attribute windowheight and others not permitted
xhtml served as text/html not application/xhtml+xml
typo: arguably
JavaScript:
document.write not allowed in xhtml
depreciated elements usedPortfolio page:
border: 1px #ffffff solid; in #wrapper gives a border in IE but not in FF
Incorrect use of headers; should be in order of importance h1, h2 etc.
Too many <div> elements
attribute windowheight and others not permitted
xhtml served as text/html not application/xhtml+xml
typo: arguably
javascript:
document.write not allowed in xhtml
depreciated elements used
OK.....Some of this I need some clarifications on.....
A) Can you explain incorrect order of importance for the headers?
B) How many <div> elements are too many? and does this effect the difference in display between browsers?
C) I know about the windowheight and others not permitted, I stated that in my first post....Im ok with it UNLESS its altering the display in crappy IE
D) The XHTML needs to be switched to HTML?
E) Deprecited elements used? can you explain please?
thx so much for the critique
A) Mainly for search engines and for visual scanning of text by the user. <!-- m --><a class="postlink" href="http://annevankesteren.nl/archives/2003/08/html-headers">http://annevankesteren.nl/archives/2003/08/html-headers</a><!-- m -->
B) The extra <div>s won't affect the display, but add to Download (bandwidth) and rendering time.
<div id="portB"> <a href=http://www.webdeveloper.com/forum/archive/index.php/"brochures.html"></a> </div>
can be written as:
<a id="portB" href=http://www.webdeveloper.com/forum/archive/index.php/"brochures.html"></a>
Classitis and Divitis (<!-- m --><a class="postlink" href="http://developer.apple.com/internet/webcontent/bestwebdev.html">http://developer.apple.com/internet/web ... ebdev.html</a><!-- m -->)
C) Page will not validate (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->) with these attributes
D) No real need to use xhtml, html will suffice. xhtml versus html (<!-- m --><a class="postlink" href="http://annevankesteren.nl/archives/2004/02/xhtml-versus-html">http://annevankesteren.nl/archives/2004 ... ersus-html</a><!-- m -->)
E) Use of font (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-html40/appendix/changes.html#h-A.3.1.2">http://www.w3.org/TR/REC-html40/appendi ... #h-A.3.1.2</a><!-- m -->) in document.writeok, now I just have a small problem on my homepage....
The topband isnt lining up with the background band and
there is about a 2 or 3 pixel gap between the top of the flash banner and the bottom of topband, and of course this only happens in IE
please help!!!!JohnWorfin,
Check your border, padding and margin settings. IE uses different defaults than Netscape & Safari. If you haven't implicitly set these to a value (like 0), then you'll get the defaults, which may be a couple more pixels than you want...Ive tried so many different combos of margins, padding and borders for the flash, and the topband.
Any specific suggestions?My personal style is to set border: 0; padding: 0; margin: 0; on pretty much every single element until I need to change something specifically. I've had a lot less display issues since I started doing that...
What is the CSS specifically for the problem area?
Im nearing completion of a pet project of mine. And after going through a bit of validation, I think im ready to get this site cross-browser compliant. Some of the HTML hasnt validated yet. On the front page it doesnt like how my flash header is put in. And on all the portfolio pages, it doesnt like my pop-up windows. My CSS is vaild though.
Anyway, I figure if I have it validated to this point with very few errors, id like to now get it looking good in IE at least for now.
Still pretty new to CSS, and I designed the site for checks in Firefox first (as was suggested to me). But of course, its all whacko in IE. I was expecting this, and I realize that they are several IE hacks, some of which I have used before.
I guess im hoping someone can take a look and point me in the right direction as far as hacks go or what I need to do to get this thing flying in IE.
Thx in advance!
JW
site:
<!-- w --><a class="postlink" href="http://www.precisionimageworks.com/index.html">www.precisionimageworks.com/index.html</a><!-- w -->
the CSS I use:
<!-- w --><a class="postlink" href="http://www.precisionimageworks.com/Precision-index.css">www.precisionimageworks.com/Precision-index.css</a><!-- w -->
<!-- w --><a class="postlink" href="http://www.precisionimageworks.com/Precision-portfolio.css">www.precisionimageworks.com/Precision-portfolio.css</a><!-- w -->
<!-- w --><a class="postlink" href="http://www.precisionimageworks.com/Precision-pricing.cssAll">www.precisionimageworks.com/Precision-pricing.cssAll</a><!-- w --> that looks wrong to me on IE6 WXP (FF good) is that the topband is too close to the Topnav. If you set a height to the Topnav and make it line up does this effect the firefox view? Just give that a try, it's simple but may just do it. Otherwise I'll leave it up to someone else, I don't use IE Hacks.Sorry didnt look past the index page lol, yes there are more differences, possibly disreguard my last post. hmm. that recent news is fast! yes, i think someone else.Portfolio page:
border: 1px #ffffff solid; in #wrapper gives a border in IE but not in FF
Incorrect use of headers; should be in order of importance h1, h2 etc.
Too many <div> elements
attribute windowheight and others not permitted
xhtml served as text/html not application/xhtml+xml
typo: arguably
JavaScript:
document.write not allowed in xhtml
depreciated elements usedPortfolio page:
border: 1px #ffffff solid; in #wrapper gives a border in IE but not in FF
Incorrect use of headers; should be in order of importance h1, h2 etc.
Too many <div> elements
attribute windowheight and others not permitted
xhtml served as text/html not application/xhtml+xml
typo: arguably
javascript:
document.write not allowed in xhtml
depreciated elements used
OK.....Some of this I need some clarifications on.....
A) Can you explain incorrect order of importance for the headers?
B) How many <div> elements are too many? and does this effect the difference in display between browsers?
C) I know about the windowheight and others not permitted, I stated that in my first post....Im ok with it UNLESS its altering the display in crappy IE
D) The XHTML needs to be switched to HTML?
E) Deprecited elements used? can you explain please?
thx so much for the critique
A) Mainly for search engines and for visual scanning of text by the user. <!-- m --><a class="postlink" href="http://annevankesteren.nl/archives/2003/08/html-headers">http://annevankesteren.nl/archives/2003/08/html-headers</a><!-- m -->B) The extra <div>s won't affect the display, but add to Download (bandwidth) and rendering time.
<div id="portB"> <a href=http://www.webdeveloper.com/forum/archive/index.php/"brochures.html"></a> </div>
can be written as:
<a id="portB" href=http://www.webdeveloper.com/forum/archive/index.php/"brochures.html"></a>
Classitis and Divitis (<!-- m --><a class="postlink" href="http://developer.apple.com/internet/webcontent/bestwebdev.html">http://developer.apple.com/internet/web ... ebdev.html</a><!-- m -->)
C) Page will not validate (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->) with these attributes
D) No real need to use xhtml, html will suffice. xhtml versus html (<!-- m --><a class="postlink" href="http://annevankesteren.nl/archives/2004/02/xhtml-versus-html">http://annevankesteren.nl/archives/2004 ... ersus-html</a><!-- m -->)
E) Use of font (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-html40/appendix/changes.html#h-A.3.1.2">http://www.w3.org/TR/REC-html40/appendi ... #h-A.3.1.2</a><!-- m -->) in document.writeok, now I just have a small problem on my homepage....
The topband isnt lining up with the background band and
there is about a 2 or 3 pixel gap between the top of the flash banner and the bottom of topband, and of course this only happens in IE
please help!!!!JohnWorfin,
Check your border, padding and margin settings. IE uses different defaults than Netscape & Safari. If you haven't implicitly set these to a value (like 0), then you'll get the defaults, which may be a couple more pixels than you want...Ive tried so many different combos of margins, padding and borders for the flash, and the topband.
Any specific suggestions?My personal style is to set border: 0; padding: 0; margin: 0; on pretty much every single element until I need to change something specifically. I've had a lot less display issues since I started doing that...
What is the CSS specifically for the problem area?