Jump to content

what I should doing for my Opera


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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...