fikiwan Posted October 27, 2012 Share Posted October 27, 2012 (edited) 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 Firefoxfor crome for safari: for Operalooking , 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 October 27, 2012 by fikiwan Link to comment Share on other sites More sharing options...
dsonesuk Posted October 27, 2012 Share Posted October 27, 2012 Since we have no code, no link, no option but to put down to Gremlins, tricky little blighters, sorry. 1 Link to comment Share on other sites More sharing options...
Charles @ CodeConquest.com Posted October 29, 2012 Share Posted October 29, 2012 Well, I have to say it's quite unlikely that gremlins caused it but you'll have to post your code. Are you using margin-top? 1 Link to comment Share on other sites More sharing options...
fikiwan Posted October 29, 2012 Author Share Posted October 29, 2012 Well, I have to say it's quite unlikely that gremlins caused it but you'll have to post your code. Are you using margin-top?ya I use magin-top , why can tell me.. Link to comment Share on other sites More sharing options...
fikiwan Posted October 29, 2012 Author Share Posted October 29, 2012 (edited) 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 June 10, 2014 by fikiwan Link to comment Share on other sites More sharing options...
fikiwan Posted October 29, 2012 Author Share Posted October 29, 2012 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 More sharing options...
dsonesuk Posted October 29, 2012 Share Posted October 29, 2012 Give anchor menu elements display:block; and float: left; 1 Link to comment Share on other sites More sharing options...
Charles @ CodeConquest.com Posted October 30, 2012 Share Posted October 30, 2012 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. 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 30, 2012 Share Posted October 30, 2012 (edited) 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 October 30, 2012 by dsonesuk 1 Link to comment Share on other sites More sharing options...
fikiwan Posted October 30, 2012 Author Share Posted October 30, 2012 Give anchor menu elements display:block; and float: left;Oh thanks for the help its work ... Link to comment Share on other sites More sharing options...
fikiwan Posted October 30, 2012 Author Share Posted October 30, 2012 (edited) 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 October 30, 2012 by fikiwan Link to comment Share on other sites More sharing options...
Ingolme Posted October 31, 2012 Share Posted October 31, 2012 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. 1 Link to comment Share on other sites More sharing options...
Charles @ CodeConquest.com Posted October 31, 2012 Share Posted October 31, 2012 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 More sharing options...
Don E Posted October 31, 2012 Share Posted October 31, 2012 because there are a lot of HTML elements and CSS properties it does not / did not support. Exactly what Ingolme mean't. Link to comment Share on other sites More sharing options...
fikiwan Posted October 31, 2012 Author Share Posted October 31, 2012 Those are conditional comments created by Microsoft in order to make up for such a bad browser.Thanks, so its not same with conditional comment anyway.. baru tau wak kalw mode tiu da , makasih link nyo yo da bisauak tanyo liak... Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now