Errant displays in various browser

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
correct.jpg
wrong.jpg
LVL 1
weisianzAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

markgoodingCommented:
it will be pretty hard to guess what is wrong without seeing any source code.
0
weisianzAuthor Commented:
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.
0
markgoodingCommented:
yeah - tables aren't really designed for laying out a page. Dreamweaver is naughty!
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

weisianzAuthor Commented:
ok.. then what will be the recommended way to lay out a page instead???
0
weisianzAuthor Commented:
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;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
 
function showhide(obj, e, visible, hidden){
if (ie5||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}
 
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
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
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
}
else{
var topedge=ie5 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie5 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up?
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)
edgeoffset=dropmenuobj.y
}
}
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
dropmenuobj.style.visibility="hidden"
clearhidemenu()
if (ie5||ns6){
obj.onmouseout=delayhidemenu
dropmenuobj=document.getElementById(dropmenuID)
if (hidemenu_onclick) dropmenuobj.onclick=function(){dropmenuobj.style.visibility='hidden'}
dropmenuobj.onmouseover=clearhidemenu
dropmenuobj.onmouseout=ie5? function(){ dynamichide(event)} : function(event){ dynamichide(event)}
showhide(dropmenuobj.style, e, "visible", "hidden")
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset-10+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "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))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}
 
function delayhidemenu(){
delayhide=setTimeout("dropmenuobj.style.visibility='hidden'",disappeardelay)
}
 
function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

Open in new window

wrong2.jpg
correct2.jpg
0
weisianzAuthor Commented:
the below will be the CSS for the sublinks..
.anylinkcss{
position:absolute;
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

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

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development Software

From novice to tech pro — start learning today.