...

View Full Version : Margin/Padding on 100% width top menubar



joroco
11-01-2007, 10:08 PM
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 :thumbsup:

here is the html and CSS


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


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

Fumigator
11-01-2007, 10:29 PM
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 :p

joroco
11-01-2007, 10:39 PM
HTML

<!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

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum