Errant displays in various browser

Posted on 2008-11-04
Last Modified: 2013-12-16
1.) I am developing a website using Dreamweaver and has been testing the look on IE.
However, i just found out that the display will be errantic when i open in other browsers namely: Firefox, Chrome, Safari. I attached the correct display and the errant display.

2.) there's also a javascript on the buttons. when mouse goes over, links will show. in other browsers other than IE, it does not shows up properly.

Pls advise what i should do to correct this. thanks in advance
Question by:weisianz
    LVL 4

    Expert Comment

    it will be pretty hard to guess what is wrong without seeing any source code.
    LVL 1

    Author Comment

    basicallly, i only use one type of CSS.. is there a browser friendly format of CSS format that i have to follow??

    from the picture, the orange bars are different. they are layed out in table.. is it because diff browsers take in the table values differently?

    will post code snippet when i can.
    LVL 4

    Expert Comment

    yeah - tables aren't really designed for laying out a page. Dreamweaver is naughty!
    LVL 1

    Author Comment

    ok.. then what will be the recommended way to lay out a page instead???
    LVL 1

    Author Comment

    ok.. i had solved the layout prob.. now all is left is the alignment for the sub links.. i attached the javascript for the link.. do help me to take a look and see wat changes has to be made for it to be browser friendly..

    i had also attached the screenshots for the links.
    thanks in advance.
    var disappeardelay=100  //menu disappear speed onMouseout (in miliseconds)
    var enableanchorlink=0 //Enable or disable the anchor link when clicked on? (1=e, 0=d)
    var hidemenu_onclick=1 //hide menu when user clicks within menu? (1=yes, 0=no)
    var horizontaloffset=0 //horizontal offset of menu from default location. (0-5 is a good value)
    /////No further editting needed
    var ie5=document.all
    var ns6=document.getElementById&&!document.all
    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    return totaloffset;
    function showhide(obj, e, visible, hidden){
    if (ie5||ns6)
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
    else if (e.type=="click")
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    function clearbrowseredge(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
    var windowedge=ie5 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
    if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+(horizontaloffset*2) //no space to the right of page? Move menu over to the left
    var topedge=ie5 && !window.opera? iecompattest().scrollTop : window.pageYOffset
    var windowedge=ie5 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up?
    if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)
    return edgeoffset
    function dropdownmenu(obj, e, dropmenuID){
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    if (typeof dropmenuobj!="undefined") //hide previous menu"hidden"
    if (ie5||ns6){
    if (hidemenu_onclick) dropmenuobj.onclick=function(){'hidden'}
    dropmenuobj.onmouseout=ie5? function(){ dynamichide(event)} : function(event){ dynamichide(event)}
    showhide(, e, "visible", "hidden")
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top"), "rightedge")+obj.offsetWidth+horizontaloffset-10+"px", "bottomedge")+20+"px"
    return clickreturnvalue()
    function clickreturnvalue(){
    if ((ie5||ns6) && !enableanchorlink) return false
    else return true
    function contains_ns6(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    function dynamichide(e){
    if (ie5&&!dropmenuobj.contains(e.toElement))
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
    function delayhidemenu(){
    function clearhidemenu(){
    if (typeof delayhide!="undefined")

    Open in new window

    LVL 1

    Author Comment

    the below will be the CSS for the sublinks..
    visibility: hidden;
    border:1px solid gray;
    font:normal 12px Geneva, Arial, Helvetica, sans-serif;
    line-height: 11px;
    z-index: 1;
    background-color: white;
    .anylinkcss a{
    color: black;
    width: 100%;
    display: block;
    padding: 5px;
    text-decoration: none;
    font-weight: bold;
    .anylinkcss a:hover{ /*hover background color*/
    background-color: #bed8fd;
    color: black;

    Open in new window

    LVL 1

    Accepted Solution

    mm.. problem solved.. decided to do some tweaking to the script.. :)


    Featured Post

    Why You Should Analyze Threat Actor TTPs

    After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

    Join & Write a Comment

    Suggested Solutions

    CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
    The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…

    733 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now