[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Errant displays in various browser

Posted on 2008-11-04
7
Medium Priority
?
437 Views
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
correct.jpg
wrong.jpg
0
Comment
Question by:weisianz
  • 5
  • 2
7 Comments
 
LVL 4

Expert Comment

by:markgooding
ID: 22878122
it will be pretty hard to guess what is wrong without seeing any source code.
0
 
LVL 1

Author Comment

by:weisianz
ID: 22878293
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
 
LVL 4

Expert Comment

by:markgooding
ID: 22879842
yeah - tables aren't really designed for laying out a page. Dreamweaver is naughty!
0
Free Backup Tool for VMware and Hyper-V

Restore full virtual machine or individual guest files from 19 common file systems directly from the backup file. Schedule VM backups with PowerShell scripts. Set desired time, lean back and let the script to notify you via email upon completion.  

 
LVL 1

Author Comment

by:weisianz
ID: 22882625
ok.. then what will be the recommended way to lay out a page instead???
0
 
LVL 1

Author Comment

by:weisianz
ID: 22883075
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
 
LVL 1

Author Comment

by:weisianz
ID: 22883288
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
 
LVL 1

Accepted Solution

by:
weisianz earned 0 total points
ID: 22893490
mm.. problem solved.. decided to do some tweaking to the script.. :)

0

Featured Post

Get free NFR key for Veeam Availability Suite 9.5

Veeam is happy to provide a free NFR license (1 year, 2 sockets) to all certified IT Pros. The license allows for the non-production use of Veeam Availability Suite v9.5 in your home lab, without any feature limitations. It works for both VMware and Hyper-V environments

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
This article discusses four methods for overlaying images in a container on a web page
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

872 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