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

    Join Date
    Nov 2004
    Posts
    136
    Rep Power
    17

    Compatibility with different browsers


    Hi all,
    Compatibility with different browsers, link one and link looks good in ie but gets overlap in Firefox and too far apart in Opera.
    Does anyone know how to make this menu compatible with a least these tree browsers. Any help is greatly appreciated thanks.

    Code:
    <style type="text/css">
    ul { list-style-type: none; margin: 1.0em 0 0 30px; padding: 0; position: relative; overflow: visible; height: auto; }
    ul li { height: 1.6em; width: 230px; }
    ul li a, ul li a:visited { width: 200px; display: block; color: black; text-decoration: none; background: yellow; margin: 0.1em 0 0 0; text-indent: 10px; padding: 3px;}
    ul li a:hover { display: block; background: green; color: black; }
    ul li a.currentpage, ul li a.currentpage:visited { background: red; color: black; padding: 3px;}
    </style>
    <ul>
      <li><a href="menu3.html" class="currentpage">Main page </a></li>
      <li><a href="page2.html">Dummy page 2</a></li>
    </ul>
  2. #2
  3. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,115
    Rep Power
    2498
    What versions of each browser are you using?
    What DTD are you using?

    I put your page into HTML 4.01 Strict template and I just see gaps between the links in
    IE7, Opera 9x and Firefox 2x on Windows XP (1024*768)...

    Cheers,
    Jamie

    >_ My Music Blog | Losing weight @notsoheavyblog | My Tweets

    __________________

    Let the might of your compassion arise to bring a quick end
    to the flowing stream of the blood and tears .....
    Please hear my anguished words of truth.

    __________________
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2004
    Posts
    136
    Rep Power
    17

    browser compatibility


    Thanks jabba_29 for looking at my code.
    To answer your question about dtd code is below.

    About browsers it must work in the latest version and previous version at least.

    I have to have links with background one or two pixels apart.
    It works fine in firefox and ie, but in opera is almost three pixels apart (not good). Again thanks.

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    <title>An XHTML 1.0 Strict standard template</title>
    	<meta http-equiv="content-type" 
    		content="text/html;charset=utf-8" />
    	<meta http-equiv="Content-Style-Type" content="text/css" />
    </head>
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    The XML declaration (the line above the doctype) forces IE6 into quirks mode, which is usually a bad thing. (They fixed that bug in IE7.)

    Why not set a min-height on the <a>s instead of a height on the <li>s?
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2004
    Posts
    136
    Rep Power
    17

    it works


    Hi Kravvitz,
    Thanks you very much it does work. This case is close.

IMN logo majestic logo threadwatch logo seochat tools logo