Jump to content

what I should doing for my Opera


fikiwan
 Share

Recommended Posts

Hy every one... :) I have a problem in CSS design,look my picture.I check my desaign web in 4 browser . I dont know why design be different in Oprea Browser,margin not same for my menu .. Can some one explain my problem pic in Firefoxfirefox.jpgfor cromecrome.jpg for safari:safari.jpg for Operaopera.jpglooking , pic that//I don't know why, in Opera there little difference margin top,. what I should be for be same for any browser Thanks for corrections

Edited by fikiwan
Link to comment
Share on other sites

Oh sorry this my code ; can caorrection

/*=============================================================================*//*---- Style Global Here-*/body{background:url(../bus/42-RocketRiderBus.jpg)top no-repeat;color:white;font-family:Arial, Helvetica, sans-serif;font-size:24px;margin:0px;}h1{color:white;}div{border:1px solid #333333;}a{color:white;text-decoration:none; font-weight:bold;}/*-- Style badan--*/div#wraper-head{height:403px;width:900px;border: hidden;}img#logo{margin:-90px 10px 0px 0px;float:right;}#badan{width:900px;margin:10px 0 0 16%;border:hidden;}#head-kiri,#head-kanan,#menu-kiri,#menu-kanan{background:rgba(0 ,0, 0, 0.9);border-radius:4px 4px 0 0;}#head-kiri{height:200px;width:560px;margin-top:100px;}div#menuh{font:"Courier New", Courier, monospace;font-size:19px;width:80px;float:left;padding:8px 0 8px 20px;}div#d-menu{float:right;padding:8px;width:440px;margin:0;border: hidden;}.nm{margin:0px 0 0 5px;width:60px;padding:8px 20px 8px 20px;font-family:Verdana;font-size:15px;border:1px #999999 dashed;}.nm:hover{ background:green;}div.drop{ width:560px; height:160px; border:1px black groove; float:left; margin:4px 0 0 0px; display:none; border-radius: 0 0 4px 4px;box-shadow:0px 10px 10px -8px green; z-index:15; background-color: #007700; overflow:auto; display:none;}#head-kanan,#menu-kanan{float:right!important;width:330px!important;}#head-kanan{margin-top:-202px!important;height:200px;}#menu-kiri,#menu-kanan{margin-top:-198px;width:200px;height:200px;float:left;}#kaki{clear:both;border:hidden;}/* CSS Document */
Edited by fikiwan
Link to comment
Share on other sites

my HTML code .. corection please

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Travael Center</title><link  rel="stylesheet" href="css/style.css" media="screen" /><script src="js/menu.js" type="text/javascript"></script><script type="text/javascript">var ma = ["menu1","menu2","menu3","menu4"];function menudrop(x)  {   for (var m in ma){    if(ma[m] != x){	 document.getElementById(ma[m]).style.display = "none";    }   }   if(document.getElementById(x).style.display =='block'){    fadeOut(x);      }else{	 fadeIn(x);	 }  }</script></head><body><div id="badan"><div id="wraper-head"><img src="bus/logo.png"  id="logo"/>  <div id="head-kiri">  <div id="menuh">Home »</div>   <div id="d-menu">   <a href="#" onclick="return false;" onmousedown="menudrop('menu1')" class="nm">Menu1</a>    <div id="menu1" class="drop">	 <h1>Data Menu Satu Disisni</h1>    </div>   <a href="#" onclick="return false;" onmousedown="menudrop('menu2')" class="nm">Menu2</a>    <div id="menu2" class="drop">	 <h1>Data Menu Bua Disisni</h1>    </div>   <a href="#" onclick="return false;" onmousedown="menudrop('menu3')" class="nm">Menu3</a>    <div id="menu3" class="drop">	 <h1>Data Menu Tiga Disisni</h1>    </div>   <a href="#" onclick="return false;" onmousedown="menudrop('menu4')" class="nm">Menu4</a>    <div id="menu4" class="drop">	 <h1>Data Menu Empat Disisni</h1>    </div>  </div>  </div><div id="head-kanan"><h2>Heade Kanan</h2></div></div><div id="menu-kiri"><h4>Menu Kiri</h4></div><div id="menu-kanan"></div><div id="kaki"></div></div></body></html>

Link to comment
Share on other sites

Give anchor menu elements display:block; and float: left;
I don't think that's what's causing the problem. I think it's because this tag:
<div id="d-menu">

...isn't closed. After this code:

<div id="d-menu">   <a href="#" onclick="return false;" onmousedown="menudrop('menu1')" class="nm">Menu1</a>    <div id="menu1" class="drop">         <h1>Data Menu Satu Disisni</h1>    </div>   <a href="#" onclick="return false;" onmousedown="menudrop('menu2')" class="nm">Menu2</a>    <div id="menu2" class="drop">         <h1>Data Menu Bua Disisni</h1>    </div>   <a href="#" onclick="return false;" onmousedown="menudrop('menu3')" class="nm">Menu3</a>    <div id="menu3" class="drop">         <h1>Data Menu Tiga Disisni</h1>    </div>   <a href="#" onclick="return false;" onmousedown="menudrop('menu4')" class="nm">Menu4</a>    <div id="menu4" class="drop">         <h1>Data Menu Empat Disisni</h1>    </div>

add in another closing

</div>

tag.

  • Like 1
Link to comment
Share on other sites

Congratulations just told the OP to add a extra closing div tag which is not required, put specs on and check again, if you still can't see it! let me point it out for you, actually i'll point them ALL out.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Travael Center</title><link  rel="stylesheet" href="css/style.css" media="screen" /><script src="js/menu.js" type="text/javascript"></script><script type="text/javascript">var ma = ["menu1","menu2","menu3","menu4"];function menudrop(x)  {   for (var m in ma){	if(ma[m] != x){		 document.getElementById(ma[m]).style.display = "none";	}   }   if(document.getElementById(x).style.display =='block'){	fadeOut(x);     }else{		 fadeIn(x);		 }  }</script></head><body><div id="badan"><div id="wraper-head"><img src="bus/logo.png"  id="logo"/>  <div id="head-kiri">  <div id="menuh">Home »</div><!-- menuh -->   <div id="d-menu">   <a href="#" onclick="return false;" onmousedown="menudrop('menu1')" class="nm">Menu1</a>	<div id="menu1" class="drop">		 <h1>Data Menu Satu Disisni</h1>	</div><!-- menu1 -->   <a href="#" onclick="return false;" onmousedown="menudrop('menu2')" class="nm">Menu2</a>	<div id="menu2" class="drop">		 <h1>Data Menu Bua Disisni</h1>	</div><!-- menu2 -->   <a href="#" onclick="return false;" onmousedown="menudrop('menu3')" class="nm">Menu3</a>	<div id="menu3" class="drop">		 <h1>Data Menu Tiga Disisni</h1>	</div><!-- menu3 -->   <a href="#" onclick="return false;" onmousedown="menudrop('menu4')" class="nm">Menu4</a>	<div id="menu4" class="drop">		 <h1>Data Menu Empat Disisni</h1>	</div><!-- menu4 -->  </div><!-- d-menu  GOOEY, LOOK I AM HERE-->  </div><!-- head-kiri --><div id="head-kanan"><h2>Heade Kanan</h2></div><!-- head-kanan --></div><!--wraper-head  --><div id="menu-kiri"><h4>Menu Kiri</h4></div><!-- menu-kiri --><div id="menu-kanan"></div><!-- menu-kanan --><div id="kaki"></div><!-- kaki --></div> <!-- badan --></body></html>

Edited by dsonesuk
  • Like 1
Link to comment
Share on other sites

I have one question more, what meanig fo this code

<!--[if IE 6]>.... ex link<![endif]--> <!--[if IE 7]>.... ex link<![endif]--> <!--[if IE 8]>.... ex link<![endif]-->  <!--[if lt IE 9]>.... ex link<![endif]--> <!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->

I looking that in code web some one , I dont know its really work fo set desain to IE , u can see for external link in a tag comment.. Can explain for me it ... Thank .. for it

Edited by fikiwan
Link to comment
Share on other sites

I have one question more, what meanig fo this code
<!--[if IE 6]>.... ex link<![endif]--> <!--[if IE 7]>.... ex link<![endif]--> <!--[if IE 8]>.... ex link<![endif]-->  <!--[if lt IE 9]>.... ex link<![endif]--> <!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->

I looking that in code web some one , I dont know its really work fo set desain to IE ,u can see for external link in a tag comment.. Can explain for me it ... Thank .. for it

Those are conditional comments created by Microsoft in order to make up for such a bad browser.
  • Like 1
Link to comment
Share on other sites

Congratulations just told the OP to add a extra closing div tag which is not required, put specs on and check again, if you still can't see it! let me point it out for you, actually i'll point them ALL out.
Sorry, did not see the closing tag for #menuh. Thank you for pointing that out!
Those are conditional comments created by Microsoft in order to make up for such a bad browser.
It's not to 'make up for such a bad browser', it's so that you can link up style sheets which only get read by IE and not the other browsers, because there are a lot of HTML elements and CSS properties it does not / did not support.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...