#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    192
    Rep Power
    0

    css messes up in mac/aol


    http://www.innerspect.net/blog/

    can anyone confirm this? offer some fixes?
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Since AOL/Mac uses the Mozilla Gecko rendering engine, I looked at the page in Mozilla. There are location issues with the calendar. I tend to believe Moz is rendering more correctly than IE. I've attached a screenshot.

    There are several errors which mean the code does not validate as xhtml1 transitional.

    My inspection was cursory at best, so I can't offer any suggestions other than clean up the code errors and take a look at the calendar placement.

    gary
    Attached Images
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    192
    Rep Power
    0
    the xhtml errors shouldn't do something like that...

    the css elements that are overlaping are in seperate tables.. so that shouldn't happen.

    any way to fix this easily?
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    it would probably be easier if you dropped the table

    and i would recomend that you run your site throug w3.orgs validator http://validator.w3.org/check?uri=ht....net%2Fblog%2F

    the markup aren't very semantic either
    instead of :
    <div class="sidetitle">

    Archives
    </div>

    <div class="side">
    <a href="http://www.innerspect.net/blog/archives/2004_01.html">January 2004</a><br />

    it would be better to use

    <h2>Archives</h2>
    <ul>
    <li><a href="http://www.innerspect.net/blog/archives/2004_01.html">January 2004</a></li>

    then use css to defince the layout.

    also try to use class names that reflects the content of the element, not its placement, so instead of class="side" you could use class="archives" class="recentEntries" etc.
    and in css
    .archives, recentEntries {/*some style*/}
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    192
    Rep Power
    0
    that stuff is fine but none of it helps with the mozilla / mac(aol) error...
  10. #6
  11. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    try to adjust the widht to the td above div id="links"

    but you really shouldn't use table for layout,
    and do check out that validator,
    you have a couple of errors,

    you should also avoid using the font-elemnts as font has been deprecated.

    i would also recommend a strict doctype instead of transitional

IMN logo majestic logo threadwatch logo seochat tools logo