Jump to content

margin-top, Safari and Firefox?


Ifaiden

Recommended Posts

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

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;
}

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;

}


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.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.