margin-top, Safari and Firefox?

Ifaiden · 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

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

Ifaiden · April 20, 2010

Nope, no luck

seventheyejosh · 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.

seventheyejosh · 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;

}

Ifaiden · April 20, 2010

That's because I changed it back Changed it now, it doesn't work.

seventheyejosh · 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.

Ifaiden · April 20, 2010

Aah, just copy-pasted the code you just wrote, seems to work fine now ... how weird! Thanks a lot!

Sign In

margin-top, Safari and Firefox?

Recommended Posts

Ifaiden

Link to comment

Share on other sites

seventheyejosh

Link to comment

Share on other sites

Ifaiden

Link to comment

Share on other sites

seventheyejosh

Link to comment

Share on other sites

seventheyejosh

Link to comment

Share on other sites

Ifaiden

Link to comment

Share on other sites

seventheyejosh

Link to comment

Share on other sites

Ifaiden

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information