PDA

View Full Version : wierd padding problem



j05hr
Dec 26th, 2008, 11:53 AM
I have these buttons that you can view at www.jasongold.org theyr're meant to look like they do in firefox or if you view the pages on home or about on IE the rest of the pages arn't how it's supposed to look.

For the life of me i don't know why as all the pages are using the same css and it works in some pages in IE but not in others.

The html in question



<div class="left_column" style="text-align:center">
<p class="style5"><div id="menu">
<ul id="navlist">
<li><a href="index.html" title="Link to Homepage">Home</a>
<ul>
<li><a href="about.html" title="Link to About Page">About</a></li>
<li><a href="portfolio.html" title="Link to Portfolio Page" id="portfolionav">Portfolio</a>
<ul>
<li><a href="fashion.html" title="Link to Fashion Page">Fashion</a></li>
<li><a href="portrait.html" title="Link to Portrait Page">Portrait</a></li>
<li><a href="reportage.html" title="Link to Reoportage Page">Reportage</a></li>
<li><a href="travel.html" title="Link to Travel Page">Travel</a></li>
</ul>
</li>
<li><a href="contact1.php" title="Link to contact page">Contact</a></li>
</ul>
</li>
</ul>

</div>


and the css..


#menu {
width: 12.5em; /* set width of menu */
background: #333333;
display:block;
z-index: 100;
height: 40px;
}

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding:0;
}

/* style, color and size links and headings to suit */
#menu a, #menu h2 {
display: block;
border-width: 0px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
line-height: 40px;
font-weight: bold;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #a5a2b5;
background: #333333;
text-decoration: none;
}



#menu a:hover {
color: #ffffff;
background: #202020;
}

#menu li {
/* make the list elements a containing block for the nested lists */
position: relative;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}



body#home a#homenav,
body#about a#aboutnav,
body#portfolio a#portfolionav,
body#fashion a#fashnav,
body#portrait a#portraitnav,
body#reportage a#repnav,
body#travel a#travnav,
body#contact a#connav {

color: #fff;
background: #666666;
}

abduraooft
Dec 26th, 2008, 01:39 PM
Have a try by

/* style, color and size links and headings to suit */
#menu a, #menu h2 {
display: block;
border-width: 0px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
line-height: 40px;
height:40px;
font-weight: bold;
}

<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}

#menu ul li a {height: 1%;}

/*
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
*/
</style>
<![endif]--> I don't see any use for the highlighted style in the above conditional comment, and in fact it's overriding the newly added line-hight property in your CSS file (so I just commended it)

j05hr
Dec 26th, 2008, 04:57 PM
Thanks you reminded me that i needed to add those comments to the html for it to work in IE.

However i just tested the buttons in Safari and when hovering over portfolio, the drop down menu doesn't show, do you know of a way to solve this or point me in the direction of a tutorial that will help?

Thanks,
Josh

abduraooft
Dec 26th, 2008, 05:08 PM
At present, I'm talking about
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
} added in your conditional comment.

j05hr
Dec 26th, 2008, 06:13 PM
I got rid of it now

abduraooft
Dec 27th, 2008, 10:29 AM
I got rid of it nowIs it OK now?

j05hr
Dec 27th, 2008, 11:47 AM
Is it OK now?

Yeah it works fine in IE now but when hovering over portfolio in Safari the drop down menu doesn't stay there and i'm not sure of a hack for it