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 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; } 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 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. 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; } 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. 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. 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! 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
Archived
This topic is now archived and is closed to further replies.