Ifaiden Posted April 20, 2010 Share Posted April 20, 2010 I could use some help with this. By default, how I understand this, html (css) automatically set margin-top to like 5px in the body. This can easly be removed from all of the browsers by *{margin:0px; padding:0px;} or body{margin:0px; padding:0px;} The problem is that safari still has this problem. How can I remove the gap between my menu and the top border? http://mindu.mine.nu/projektarbete/benni/bug/menu.php Quote Link to comment https://forums.phpfreaks.com/topic/199147-margin-top-safari-and-firefox/ Share on other sites More sharing options...
seventheyejosh Posted April 20, 2010 Share Posted April 20, 2010 It looks like safari isn't interpreting the *{margin:0px;} rule. If you inspect the source, you can see that it is pulling the rule from the user agent stylesheet. Which means, your rule is missing. Try just doing a: body{ margin:0px; } Quote Link to comment https://forums.phpfreaks.com/topic/199147-margin-top-safari-and-firefox/#findComment-1045202 Share on other sites More sharing options...
Ifaiden Posted April 20, 2010 Author Share Posted April 20, 2010 Nope, no luck Quote Link to comment https://forums.phpfreaks.com/topic/199147-margin-top-safari-and-firefox/#findComment-1045207 Share on other sites More sharing options...
seventheyejosh Posted April 20, 2010 Share Posted April 20, 2010 There is no rule added in your stylesheet. I can see this in the page source. The user agent sheet is still prevalent. Quote Link to comment https://forums.phpfreaks.com/topic/199147-margin-top-safari-and-firefox/#findComment-1045211 Share on other sites More sharing options...
seventheyejosh Posted April 20, 2010 Share Posted April 20, 2010 See: http://phpfreaks.lifecoderdev.com/ All I did was add a body{ font-family:"Verdana"; font-size:12px; margin:0px; /* added */ } and fixed: div#menu{ border-left:1px solid #000; /* removed double :: */ border-right:1px solid #000; /* removed double :: */ background-image: url(http://81.226.101.66/projektarbete/benni/TEST/img/menubar_bg.png); background-repeat: repeat-x; height: 33px; margin-top:0px; padding-top:0px; width:1024px; margin-left:auto; margin-right:auto; } Quote Link to comment https://forums.phpfreaks.com/topic/199147-margin-top-safari-and-firefox/#findComment-1045215 Share on other sites More sharing options...
Ifaiden Posted April 20, 2010 Author Share Posted April 20, 2010 That's because I changed it back Changed it now, it doesn't work. Quote Link to comment https://forums.phpfreaks.com/topic/199147-margin-top-safari-and-firefox/#findComment-1045217 Share on other sites More sharing options...
seventheyejosh Posted April 20, 2010 Share Posted April 20, 2010 Here is the source I got from you, and altered. It is live here: http://phpfreaks.lifecoderdev.com index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" /> <title>Index</title> </head> <body> <div id="menu"> <ul> <li><a href="">Aktuellt</a> <ul> <li><a href="">Senaste</a></li> <li><a href="">Nyhetsarkiv</a></li> </ul> </li> <li><a href="">Spel</a> <ul> <li><a href="">Spelarkiv</a></li> <li><a href="">Senast tillagda</a></li> <li><a href="">Lägg till spel</a></li> </ul> </li> <li><a href="">Forum</a></li> </ul> </div> <!-- End of div#menu !--> </body> </html> style.css @charset "utf-8"; /* MENU BAR */ *{ margin:0px; padding:0px; } body{ font-family:"Verdana"; font-size:12px; margin:0px; /* added */ } div#menu{ border-left:1px solid #000; /* removed double :: */ border-right:1px solid #000; /* removed double :: */ background-image: url(http://81.226.101.66/projektarbete/benni/TEST/img/menubar_bg.png); background-repeat: repeat-x; height: 33px; margin-top:0px; padding-top:0px; width:1024px; margin-left:auto; margin-right:auto; } div#menu ul{ list-style:none outside none; color:#FFF; margin:0px; padding:0px; } div#menu li{ float:left; width:100px; text-align:center; padding-top:8px; margin:0px; } div#menu li:hover{ background-image: url(http://81.226.101.66/projektarbete/benni/TEST/img/menubar_bg_hover2.png); background-repeat: repeat-x; color:#000; height:33px; } div#menu li a:link, div#menu li a:active, div#menu li a:focus, div#menu li a:visited{ outline: none; outline-style: none; text-decoration:none; color:#FFF; } div#menu li:hover a:link, div#menu li:hover a:active, div#menu li:hover a:focus, div#menu li:hover a:visited{ color:#000; } div#menu li ul{ display:none; position:absolute; } div#menu li:hover ul{ display:block; width:auto; text-decoration:none; margin:0px; padding:0px; margin-top:11px; background-color:#FFF; border:1px solid #CCC; } div#menu li li{ float:none; color:#000; width:200px; text-align:left; padding-left:5px; height:20px; } div#menu li li:hover{ background-image: url(http://81.226.101.66/projektarbete/benni/TEST/img/menubar_bg_hover3.png); background-repeat: repeat-x; height:20px; } div#menu li li:hover a:link, div#menu li li:hover a:active, div#menu li li:hover a:focus, div#menu li li:hover a:visited{ color:#FFF; } You must be altering other stuff as you go. Quote Link to comment https://forums.phpfreaks.com/topic/199147-margin-top-safari-and-firefox/#findComment-1045227 Share on other sites More sharing options...
Ifaiden Posted April 20, 2010 Author Share Posted April 20, 2010 Aah, just copy-pasted the code you just wrote, seems to work fine now ... how weird! Thanks a lot! Quote Link to comment https://forums.phpfreaks.com/topic/199147-margin-top-safari-and-firefox/#findComment-1045233 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.