Hi. I am trying to move from table positioning to CSS positioning, but like many, have problems with cross browser compatibility.
I created a page to play around with this, which displays well on IE6 but not Mozilla/Firefix. Yes, I am aware that FireFox is more standards complient...
My XHTML and CSS validate, so that is not the problem. I am very interested in finding out if there is a better way to position these elements using CSS. Any help/explainations are much appreciated.
HTML: <!-- m --><a class="postlink" href="http://www.cohencentral.com/urls.html">http://www.cohencentral.com/urls.html</a><!-- m -->
CSS: <!-- m --><a class="postlink" href="http://cohencentral.com/general_assets/url_page.css">http://cohencentral.com/general_assets/url_page.css</a><!-- m -->
Thanks!For a start there is a CSS attribute that will alow wrapping of your urls even during the middle of a word like:
<!-- m --><a class="postlink" href="http://somer">http://somer</a><!-- m -->
andomsite.co
m/somerandom
page.htmValidation does not mean your layout is correct. It just means the grammar is right. If it doesn't work in FF then ignore IE until it works in FF. IE just covers up the mistakes.
Just a quick glance...do you need to set tables, or maybe the divs, to 100% width?IE just covers up the mistakes.
That is arguable.Not looking to start a debate, but there is a standard for CSS and Internet Explorer in its current incarnation doesn't support all of it. And the things it does support are often buggy: Windows Explorer vs. the Standards, a primer on standards violations in Explorer (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/ie-primer.html">http://www.positioniseverything.net/ie-primer.html</a><!-- m -->) (Position Is Everything.net (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/">http://www.positioniseverything.net/</a><!-- m -->)).
Firefox is the most standards compliant browser out there, that's why people say pages should be "designed for" this browser. Essentially designing for Firefox (along with validating your markup and CSS) ensures that you are designing utilizing published standards that even Microsoft helped create. But validation doesn't mean it's correct, as drhowarddrfine pointed out.
askohen, to answer your question, floating elements is a much better way to position things. A couple links that you'll want to check out:
<!-- w --><a class="postlink" href="http://www.w3schools.com">www.w3schools.com</a><!-- w --> -- for beginners and CSS
Standard CSS Box Model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">http://www.w3.org/TR/CSS21/box.html#box-dimensions</a><!-- m -->)
Standard Float Model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visuren.html#floats">http://www.w3.org/TR/CSS21/visuren.html#floats</a><!-- m -->)
Why floats don't take up space in block or inline elements (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=51576">http://www.webdeveloper.com/forum/showt ... adid=51576</a><!-- m -->)
A List Apart online magazine (<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->) -- Anything Web design
Thanks everyone for your input. Appreciate it..
I created a page to play around with this, which displays well on IE6 but not Mozilla/Firefix. Yes, I am aware that FireFox is more standards complient...
My XHTML and CSS validate, so that is not the problem. I am very interested in finding out if there is a better way to position these elements using CSS. Any help/explainations are much appreciated.
HTML: <!-- m --><a class="postlink" href="http://www.cohencentral.com/urls.html">http://www.cohencentral.com/urls.html</a><!-- m -->
CSS: <!-- m --><a class="postlink" href="http://cohencentral.com/general_assets/url_page.css">http://cohencentral.com/general_assets/url_page.css</a><!-- m -->
Thanks!For a start there is a CSS attribute that will alow wrapping of your urls even during the middle of a word like:
<!-- m --><a class="postlink" href="http://somer">http://somer</a><!-- m -->
andomsite.co
m/somerandom
page.htmValidation does not mean your layout is correct. It just means the grammar is right. If it doesn't work in FF then ignore IE until it works in FF. IE just covers up the mistakes.
Just a quick glance...do you need to set tables, or maybe the divs, to 100% width?IE just covers up the mistakes.
That is arguable.Not looking to start a debate, but there is a standard for CSS and Internet Explorer in its current incarnation doesn't support all of it. And the things it does support are often buggy: Windows Explorer vs. the Standards, a primer on standards violations in Explorer (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/ie-primer.html">http://www.positioniseverything.net/ie-primer.html</a><!-- m -->) (Position Is Everything.net (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/">http://www.positioniseverything.net/</a><!-- m -->)).
Firefox is the most standards compliant browser out there, that's why people say pages should be "designed for" this browser. Essentially designing for Firefox (along with validating your markup and CSS) ensures that you are designing utilizing published standards that even Microsoft helped create. But validation doesn't mean it's correct, as drhowarddrfine pointed out.
askohen, to answer your question, floating elements is a much better way to position things. A couple links that you'll want to check out:
<!-- w --><a class="postlink" href="http://www.w3schools.com">www.w3schools.com</a><!-- w --> -- for beginners and CSS
Standard CSS Box Model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">http://www.w3.org/TR/CSS21/box.html#box-dimensions</a><!-- m -->)
Standard Float Model (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visuren.html#floats">http://www.w3.org/TR/CSS21/visuren.html#floats</a><!-- m -->)
Why floats don't take up space in block or inline elements (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=51576">http://www.webdeveloper.com/forum/showt ... adid=51576</a><!-- m -->)
A List Apart online magazine (<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->) -- Anything Web design
Thanks everyone for your input. Appreciate it..