S
sevillad
Hi,
I'm using an inline ul to get a horizontal menu, but it's long so it
takes two lines, and when I try to add some spacing between them with
margin, it doesn't work. I've searched and read something about margin
collapse, they always say that one solution is to add border/padding
but it hasn't worked. The code is below, it's the menu3 that is giving
me trouble (notice how the black boxes intersect).
On a related note, if I change margin to 0, in Firefox 2 there's still
some horizontal distance between the boxes, whereas in IE 6 they are
tightly packed. Is it because of something funny in my code that is
treated differently? (I don't understand much about adding style to
"ul", to "ul li", to "ul li a" and so on, I've just experimented until
it looked right).
Thanks in advance,
David
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Personal page of David Sevilla: Mathematics - Research</title>
<meta http-equiv="Content-type" content="text/html;
charset=ISO-8859-1">
<style type="text/css">
body { background-color: #69c; background-image: url(degradado-
azul.gif); background-repeat: repeat-x; margin-left: 10%; margin-
right: 10%; }
#maindiv {width: 100%;}
#title { padding: 5px; height: 45px; text-align: center; overflow:
auto; color: blue; font-size: 35px; }
#bannerright { float: right; margin: 10px 0px; border: 0;}
#menu ul { margin: 0; padding: 1em 0; list-style: none; text-align:
center; }
#menu ul li { display: inline; height: 60px; }
#menu ul li a { padding: .2em 1em; color: blue; font-size: 25px; text-
decoration: none; }
#menu ul li a:hover { color: navy; }
#menu ul li .current { color: white; text-decoration: underline; }
#menu2 ul { margin: 0; padding: 1em 0; list-style: none; text-align:
center; }
#menu2 ul li { display: inline; }
#menu2 ul li a { padding: .2em 1em; color: white; background-color:
#036; text-decoration: none;}
#menu2 ul li a:hover { background-color: #369; }
#menu2 .current { text-decoration: underline; }
#menu3 ul { font-size: larger; margin: 0; list-style: none; text-
align: center; }
#menu3 ul li { display: inline; border: 2px black solid; padding:
0.5em; margin: 0.5em; }
#menu3 ul a { color: #036; text-decoration: none; }
/*#menu3 ul li a:hover { background-color: #369; }*/
#menu3 .current { text-decoration: underline; color: #369; }
#wrapper {padding: 0 40px; border: 2px; border-style: solid; clear:
both; background-color: #D2E7F4; }
#content a { color: blue; }
#content a.empty { color: red; text-decoration: none; }
#footer { font-size: smaller; text-align: center; padding: 5px 0; }
h2, h3 { color: navy; margin: 30px 0; }
img { margin: 0px; }
p.note { font-size: smaller; }
..subs { vertical-align: sub; font-size: smaller; }
..sups { vertical-align: super; font-size: smaller; }
#lastupdated { font-size: smaller; text-align: center; }
</style>
</head>
<body>
<div id=maindiv>
<div id=title>
Personal Page of David Sevilla
</div>
<div id=menu>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="math.html" class=current>Mathematics</a></li>
<li><a href="personal.html">Personal</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</div>
<div id=wrapper>
<div id=menu2>
<ul>
<li><a href="math.html">Mathematics - Main</a></li>
<li><a href="math-research.html" class=current>My research</a></li>
<li><a href="math-publications.html">My publications</a></li>
<li><a href="math-fun.html">Math fun</a></li>
</ul>
</div>
<div id=menu3>
<ul>
<li><a href="" class=current>Research - Main</a></li>
<li><a href="">Functional decomposition</a></li>
<li><a href="">Monstrous moonshine</a></li>
<li><a href="">Hyperelliptic curves</a></li>
<li><a href="">Root parametrizations</a></li>
</ul>
</div>
<div id=content>
Hello!
</div> <!-- content -->
</div> <!-- wrapper -->
</div> <!-- maindiv -->
</body>
</html>
I'm using an inline ul to get a horizontal menu, but it's long so it
takes two lines, and when I try to add some spacing between them with
margin, it doesn't work. I've searched and read something about margin
collapse, they always say that one solution is to add border/padding
but it hasn't worked. The code is below, it's the menu3 that is giving
me trouble (notice how the black boxes intersect).
On a related note, if I change margin to 0, in Firefox 2 there's still
some horizontal distance between the boxes, whereas in IE 6 they are
tightly packed. Is it because of something funny in my code that is
treated differently? (I don't understand much about adding style to
"ul", to "ul li", to "ul li a" and so on, I've just experimented until
it looked right).
Thanks in advance,
David
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Personal page of David Sevilla: Mathematics - Research</title>
<meta http-equiv="Content-type" content="text/html;
charset=ISO-8859-1">
<style type="text/css">
body { background-color: #69c; background-image: url(degradado-
azul.gif); background-repeat: repeat-x; margin-left: 10%; margin-
right: 10%; }
#maindiv {width: 100%;}
#title { padding: 5px; height: 45px; text-align: center; overflow:
auto; color: blue; font-size: 35px; }
#bannerright { float: right; margin: 10px 0px; border: 0;}
#menu ul { margin: 0; padding: 1em 0; list-style: none; text-align:
center; }
#menu ul li { display: inline; height: 60px; }
#menu ul li a { padding: .2em 1em; color: blue; font-size: 25px; text-
decoration: none; }
#menu ul li a:hover { color: navy; }
#menu ul li .current { color: white; text-decoration: underline; }
#menu2 ul { margin: 0; padding: 1em 0; list-style: none; text-align:
center; }
#menu2 ul li { display: inline; }
#menu2 ul li a { padding: .2em 1em; color: white; background-color:
#036; text-decoration: none;}
#menu2 ul li a:hover { background-color: #369; }
#menu2 .current { text-decoration: underline; }
#menu3 ul { font-size: larger; margin: 0; list-style: none; text-
align: center; }
#menu3 ul li { display: inline; border: 2px black solid; padding:
0.5em; margin: 0.5em; }
#menu3 ul a { color: #036; text-decoration: none; }
/*#menu3 ul li a:hover { background-color: #369; }*/
#menu3 .current { text-decoration: underline; color: #369; }
#wrapper {padding: 0 40px; border: 2px; border-style: solid; clear:
both; background-color: #D2E7F4; }
#content a { color: blue; }
#content a.empty { color: red; text-decoration: none; }
#footer { font-size: smaller; text-align: center; padding: 5px 0; }
h2, h3 { color: navy; margin: 30px 0; }
img { margin: 0px; }
p.note { font-size: smaller; }
..subs { vertical-align: sub; font-size: smaller; }
..sups { vertical-align: super; font-size: smaller; }
#lastupdated { font-size: smaller; text-align: center; }
</style>
</head>
<body>
<div id=maindiv>
<div id=title>
Personal Page of David Sevilla
</div>
<div id=menu>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="math.html" class=current>Mathematics</a></li>
<li><a href="personal.html">Personal</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</div>
<div id=wrapper>
<div id=menu2>
<ul>
<li><a href="math.html">Mathematics - Main</a></li>
<li><a href="math-research.html" class=current>My research</a></li>
<li><a href="math-publications.html">My publications</a></li>
<li><a href="math-fun.html">Math fun</a></li>
</ul>
</div>
<div id=menu3>
<ul>
<li><a href="" class=current>Research - Main</a></li>
<li><a href="">Functional decomposition</a></li>
<li><a href="">Monstrous moonshine</a></li>
<li><a href="">Hyperelliptic curves</a></li>
<li><a href="">Root parametrizations</a></li>
</ul>
</div>
<div id=content>
Hello!
</div> <!-- content -->
</div> <!-- wrapper -->
</div> <!-- maindiv -->
</body>
</html>
The <a> can quite happily live inside a <li>. No need for more.