Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2005
    Location
    Sweden
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Internet Explorer Margin/Padding on 100% width top menubar

    It looks as it should in FF but in IE7 and im guessing versions below as well it looses the bottom padding from the links.
    I have tested changing several things moving margins, padding etc but i keep ending up making it worse!

    I did have problems centering the menu and the code below does that but now its just the bottom padding of the links that looks different... hope someone has some ideas, normal works to ask here to fix it

    here is the html and CSS

    Code:
    <div id="menu">
    	<ul>
    		<li class="linkactive"><a href="test.html">test</a></li>
    		<li><a href="test.html">test</a></li>
    		<li><a href="test.html">test</a></li>
    		<li><a href="test.html">test</a></li>
    		<li><a href="test.html">test</a></li>
    		<li><a href="test.html">test</a></li>
    	</ul>
    </div>
    Code:
    #menu {
    	width: 100%;
    	background-color: #4f4f4f;
    	height: 40px;
    	border-bottom: 2px solid #d4ed05;
    	border-top: 3px solid #1693c2;
    	padding: 0 0 5px 0;
    }
    
    #menu ul {
    	padding: 10px 0 0 0;
    	margin: 0 auto;
    	width: 507px;
    }
    
    #menu li {
    	display: inline;
    	text-align: center;
    	list-style-type: none;
    	padding: 0;
    	margin: 10px 0 12px 10px;
    }
    
    #menu a {
    	padding: 5px 9px;
    	text-decoration: none;
    	font-family: Trebuchet MS, Arial, Serif;
    	font-size: 12px;
    	text-transform: uppercase;
    	font-weight: bold;
    	color: #fff;
    }
    
    #menu a:hover {
    	background-color: #d4ed05;
    	color: #2c2c2c;
    }
    
    .linkactive a {
    	background-color: #1693c2;
    }

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    As you know, other CSS on the page can effect things (parent selectors for example), so if you could either post a link to the actual page or post the entire CSS and HTML then I might (emphasis on "might") be able to help. But I usually make things worse too

  • #3
    New Coder
    Join Date
    Nov 2005
    Location
    Sweden
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    HTML
    Code:
    <!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=utf-8" />
    <title>Design Inspiration by Scratch Designs - Tutorials, Articles, Galleries and more...</title>
    <link type="text/css" rel="stylesheet" href="style.css" />
    <meta name="description" content="Design Inspiration by Scratch Designs - Tutorials, Articles, Galleries and more..." />
    <meta name="keywords" content="Articles, CSS, Tutorials, Showcases, Gallery, Design, Inpsiration" />
    <meta name="robots" content="index, follow" />
    <meta name="robots" content="noodp" />
    <meta http-equiv="content-language" content="en" />
    
    </head>
    
    <body>
    
    <div id="menu">
    	<ul>
    		<li><a href="index.html">Home</a></li>
    		<li><a href="articles.html">Articles</a></li>
    		<li class="linkactive"><a href="tutorials.html">Tutorials</a></li>
    		<li><a href="showcases.html">Showcases</a></li>
    		<li><a href="inspiration.html">Inspiration</a></li>
    		<li><a href="about.html">About</a></li>
    	</ul>
    </div>
    
    <div id="topwrap">
    <div id="header"></div>
    	<div id="content">
    		<div id="innercontent">
    			<p class="bigheader">Tutorials<img src="images/feather.jpg" /></p>
    			<h4>Adobe Photoshop<img class="image" src="images/icons/ps.jpg" /></h4>
    			<h5>Icon Creation</h5>
    			<ul>
    				<li><a href="http://pscloud.com/web-graphics/vista-folder-icon/">+ Windows Vista Style Folder</a></li>
    				<li><a href="#">+ Your Tutorial Here!</a></li>
    			</ul>
    			<h5>Text</h5>
    			<ul>
    				<li><a href="#">+ Your Tutorial Here!</a></li>
    				<li><a href="#">+ Your Tutorial Here!</a></li>
    			</ul>
    		</div>
    	</div>
    	<div id="footer"></div>
    	
    </div>
    </body>
    
    </html>
    CSS
    Code:
    @charset "utf-8";
    /* CSS DOCUMENT */
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background-color: #404040;
    	margin: 0 auto;
    }
    
    h1 {
    	background: url(images/header1.jpg) left center no-repeat;
    	padding: 2px 0 2px 40px;
    	font-family: Arial, Tahoma, Trebuchet MS, Serif;
    	font-size: 1em;
    	color: #1693c2;
    	margin-top: 15px;
    }
    
    h2 {
    	font-size: 0.9em;
    	font-family: Arial, Tahoma, Trebuchet MS, Serif;
    	font-style: italic;
    	padding: 0 10px 10px 40px;
    	color: #454545;
    }
    
    h3 {
    	background: url(images/header2.jpg) left center no-repeat;
    	font-size: 0.8em;
    	font-family: Arial, Tahoma, Trebuchet MS, Serif;
    	padding: 2px 0 2px 12px;
    	color: #1693c2;	
    }
    
    p {
    	padding: 8px 10px 8px 12px;
    	font-size: 0.7em;
    	font-family: Arial, Tahoma, Trebuchet MS, Serif;
    	color: #14313c;
    	width: 370px;
    	border-top: 1px dotted #ccc;
    }
    
    p a {
    	color: #1693c2;
    }
    
    p a:hover {
    	color: #d4ed05;
    }
    
    span.black {
    	font-weight: bold;
    }
    
    .indent {
    	border-left: 5px solid #1693c2;
    	margin: 0 20px 0 20px;
    	background-color: #d4ed05;
    	width: 300px;
    }
    
    /*TOP MENUBAR*/
    
    #menu {
    	width: 100%;
    	background-color: #4f4f4f;
    	height: 40px;
    	border-bottom: 2px solid #d4ed05;
    	border-top: 3px solid #1693c2;
    	padding: 0 0 5px 0;
    }
    
    #menu ul {
    	padding: 10px 0 0 0;
    	margin: 0 auto;
    	width: 507px;
    }
    
    #menu li {
    	display: inline;
    	text-align: center;
    	list-style-type: none;
    	padding: 0;
    	margin: 10px 0 12px 10px;
    }
    
    #menu a {
    	padding: 5px 9px;
    	text-decoration: none;
    	font-family: Trebuchet MS, Arial, Serif;
    	font-size: 12px;
    	text-transform: uppercase;
    	font-weight: bold;
    	color: #fff;
    }
    
    #menu a:hover {
    	background-color: #d4ed05;
    	color: #2c2c2c;
    }
    
    .linkactive a {
    	background-color: #1693c2;
    }
    
    /*PAGE*/
    
    #topwrap {
    	background: url(images/topwrap.jpg) top center repeat-x;
    	height: 150px;
    }
    
    #header {
    	background: url(images/logo.jpg) top center no-repeat;
    	width: 400px;
    	height: 150px;
    	margin: 0 auto;
    }
    
    #content {
    	width: 400px;
    	height: auto;
    	margin: 0 auto;
    }
    
    #innercontent {
    	width: 400px;
    	background: #fff url(images/contenttop.jpg) top center repeat-x;
    	margin: 0 auto;
    	padding: 7px 0;
    }
    
    /*FOOTER*/
    
    #footer {
    	background: url(images/footer.jpg) no-repeat;
    	width: 400px;
    	height: 160px;
    	margin: 0 auto;
    }
    
    /*SPAN ITEMS*/
    
    .bigheader {
    	font-family: Arial, Tahoma, Trebuchet MS, Serif;
    	font-size: 12px;
    	text-transform: uppercase;
    	font-weight: bold;
    	color: #404040;
    	width: 100%;
    	border: 0;
    }
    
    .bigheader img {
    	vertical-align: bottom;
    	margin: 0 0 0 5px;
    }
    
    h5 {
    	font-family: Arial, Tahoma, Trebuchet MS, Serif;
    	background-color: #404040;
    	border-bottom: 1px solid #545454;
    	border-top: 1px solid #545454;
    	border-left: 4px solid #545454;
    	font-size: 11px;
    	letter-spacing: 1px;
    	font-weight: bold;
    	color: #fff;
    	width: 384px;
    	margin: 0;
    	padding: 5px 0 0 12px;
    	height: 20px;
    }
    
    h4 {
    	font-family: Arial, Tahoma, Trebuchet MS, Serif;
    	background: url(images/titleheader.jpg) no-repeat;
    	font-size: 11px;
    	letter-spacing: 1px;
    	font-weight: bold;
    	color: #d4ed05;
    	width: 100%;
    	border: 0;
    	margin: 0;
    	padding: 11px 0 0 15px;
    	height: 29px;
    }
    
    h4 .image {
    	margin: 0;
    	padding-left: 235px;
    	vertical-align: middle;
    }
    
    h4 .imagecss {
    	margin: 0;
    	padding-left: 323px;
    	vertical-align: middle;
    }
    
    h4 .imagecss1 {
    	margin: 0;
    	padding-left: 323px;
    	vertical-align: middle;
    	display: none;
    }
    
    #innercontent ul {
    	list-style-type: none;
    	font-family: Verdana, Arial, Trebuchet MS, Serif;
    	font-size: 9px;
    	font-weight: bold;
    	letter-spacing: 1px;
    }
    
    #innercontent li {
    	background-color: #404040;
    	margin: 0;
    	padding: 0;
    	display: block;
    }
    
    #innercontent li a {
    	background-color: #2c2c2c;
    	display: block;
    	padding: 8px 0 8px 25px;
    	margin: 0;
    	color: #18a8dc;
    	text-decoration: none;
    	border-right: 3px solid #def802;
    }
    
    #innercontent li a:hover {
    	background-color: #252525;
    	color: #fff;
    	border-right: 3px solid #18a8dc;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •