 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
quartzy
Joined: 26 Dec 2007
Posts: 400
|
 Posted: Sat Apr 05, 2008 3:49 am horizontal menu displays OK in FF not IE |
 |
|
|
I have this coding for a horizontal menu that works in FF but not IE, as this site is mainly going to be viewed in IE I need to fix it. I have added display: inline twice but it still does not align along the top but aligns like graduated steps in IE7.
Is this a bug of IE? Hope someone can help with this.
| Code: |
* html > body #container {height: auto;}
* {margin: 0;padding: 0;}
* html .menu li a {/*IE only. Actual menu width minus left padding of A element (10px) */width: 740px;}
body {
font-family: "Helvetica Verdana", Arial, sans-serif;
font-size: .88em;
color: #FFFFFF;
text-align: center;
background-image: url('images/background.gif');}
#container {
width: 750px;
height: 100%;
margin: auto;
background: #000000;
text-align: left;}
#centercontent {
width: 750px;
float: left;
background: #000000;
color: #FFFFFF;
display: inline;
height: 1%;/* combat IE's 3 pixel jog */}
#header {
width: 750px;
height: 85px;
background-color: black;
background-image: url('images/header.gif');
background-repeat: no-repeat;}
#fullwidth {
width: 730px;
position: relative;
float: left;
margin: 0;
padding: 0 15px 5px 5px;}
#fullwidth2 {
width: 730px;
position: relative;
float: left;
margin: 0;
padding: 0 15px 5px 5px;}
#leftarea {
float: left;
padding: 3px;
margin: 3px;
width: 228px;}
#rightarea2 {
float: right;
margin: 3px;
padding: 3px;
width: 230px;}
#centerarea {
width: 235px;
float: left;
display: inline;
padding: 3px;
margin: 3px;}
#rightarea {
width: 120px;
height: 200px;
float: right;
padding: 5px 50px 5px 5px;
background-image: url('images/smallbox.jpg');
background-repeat: no-repeat;
text-align: center;}
#calendar {
width: 175px;
background-color: maroon;
padding: 2px;
border: 1px solid #A8D4FF;
}
table.calendar td {
border: 1px solid #A8D4FF;
}
table.calendar td a {
display: block;
width: 50px;
padding: 2px;
text-decoration: none;
color: #fff;
background-color: gray;
text-align: center;
}
table.calendar td a:active {
background-color: silver;
}
table.calendar td a:hover {
background-color: silver;
}
a:link {color: #FFCC00;}
a:hover {color: white;}
a:visited {color: #CC99FF;}
img.floatright {float: right;margin: 0 3px;}
img {border: none;}
img.center {vertical-align: middle;}
img.floatright2 {float: right;padding: 5px;margin: 5px;border: 3px solid white;}
img.floatleft2 {padding: 5px;margin: 5px;border: 3px solid white;float: left;}
h1 {color: #FFCC00;font-size: 1.50em;padding-bottom: 10px;}
.menu {
list-style: none;
padding: 0;
width: 750px;
height: 66px;
display: inline;
float:left;
text-align:center;}
.menu li a {
background: black url('images/lista.gif') repeat-x bottom right;
color: white;
font-family: Tahoma bold 1.00em;
display: inline;
float:left;
width: 90px;
border-right: 1px solid;
padding: 3px 0 3px 3px;
text-decoration: none;}
.menu li a:active {color: gray;}
.menu li a:visited {color: gray;}
.menu li a:hover {background:gray url('images/listb.gif')}
.blue {background-color: #FFFFFF;margin: 5px;color: #000000;}
p {padding-bottom: 10px;}
p.strong {font-weight: bold;}
.gray {background-color: #232323;
padding: 10px;
margin: 0 10px;}
.caption {
color: #fff;
background-color: gray;
text-align: center;
border: 1px solid #A8D4FF;
width: 169px;
margin: 2px;}
.shaded {background-color: silver;text-align: center;}
span.red {color: red;font-weight: bold;}
h3 {
font-size: 0.88em;
color: #FFFFFF;
padding-bottom: 5px;}
hr {border: 1px solid #FFCC00; margin-bottom: 5px;}
h2 {font-size: 1.00em;
color: #990019;
padding-bottom: 5px;
margin-bottom: 10px;}
#footer {
clear: both;
width: 750px;
height: 50px;
text-align: center;
background: maroon;
font-size: 0.75em;}
#footer p {padding-top: 15px;}
|
the related html is this:
| Code: |
<div id="container">
<div id="header"><br />
<a href="papier.htm"><img class="floatright"src="images/papierg.gif" width="59" height="26" /></a><a href="news.htm"><img class="floatright"src="images/misc.gif" width="56" height="26" /></a><a href="mosaic2.htm"><img class="floatright"src="images/mosaic2.gif" width="64" height="26" /></a>
<a href="mosaic1.htm"><img class="floatright"alt="mosaic nav button 1" src="images/mosaic1.gif" width="66" height="27" /></a></div>
<div id="centercontent">
<ul class="menu">
<li><a href="index.htm">Homepage</a></li>
<li><a href="news.htm">News</a></li>
<li><a href="studio.htm">Studio</a></li>
<li><a href="guestbook3.htm">Guest Book</a></li>
<li><a href="contacts.htm">Contact Me</a></li>
<li><a href="links.htm">Links</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="workshops.htm" style="border-bottom-width: 0;">Workshops</a></li>
</ul>
<div id="fullwidth" class="gray">
<h1><br />
Welcome to 'Eyecatchingart'</h1>
|
I have never come across this before, but the menu was originally a block menu until I had to change it to inline. |
|
quartzy
Joined: 26 Dec 2007
Posts: 400
|
| Posted: Sat Apr 05, 2008 6:30 am re |
|
|
|
| Gave up on this menu and found a nice one at dynamic drive. |
|
sticks464
Joined: 31 Dec 2006
Posts: 993
|
| Posted: Sat Apr 05, 2008 6:55 am |
|
|
|
CSS
| Code: |
* html > body #container {height: auto;}
* {margin: 0;padding: 0;}
* html .menu li a {/*IE only. Actual menu width minus left padding of A element (10px) */width: 740px;}
body {
font-family: "Helvetica Verdana", Arial, sans-serif;
font-size: .88em;
color: #FFFFFF;
text-align: center;
background-image: url('images/background.gif');}
#container {
width: 750px;
height: 100%;
margin: auto;
background: #000000;
text-align: left;}
#centercontent {
width: 750px;
float: left;
background: #000000;
color: #FFFFFF;
display: inline;
height: 1%;/* combat IE's 3 pixel jog */}
#header {
width: 750px;
height: 85px;
background-color: black;
background-image: url('images/header.gif');
background-repeat: no-repeat;}
#fullwidth {
width: 730px;
position: relative;
float: left;
margin: 0;
padding: 0 15px 5px 5px;}
#fullwidth2 {
width: 730px;
position: relative;
float: left;
margin: 0;
padding: 0 15px 5px 5px;}
#leftarea {
float: left;
padding: 3px;
margin: 3px;
width: 228px;}
#rightarea2 {
float: right;
margin: 3px;
padding: 3px;
width: 230px;}
#centerarea {
width: 235px;
float: left;
display: inline;
padding: 3px;
margin: 3px;}
#rightarea {
width: 120px;
height: 200px;
float: right;
padding: 5px 50px 5px 5px;
background-image: url('images/smallbox.jpg');
background-repeat: no-repeat;
text-align: center;}
#calendar {
width: 175px;
background-color: maroon;
padding: 2px;
border: 1px solid #A8D4FF;
}
table.calendar td {
border: 1px solid #A8D4FF;
}
table.calendar td a {
display: block;
width: 50px;
padding: 2px;
text-decoration: none;
color: #fff;
background-color: gray;
text-align: center;
}
table.calendar td a:active {
background-color: silver;
}
table.calendar td a:hover {
background-color: silver;
}
a:link {color: #FFCC00;}
a:hover {color: white;}
a:visited {color: #CC99FF;}
img.floatright {float: right;margin: 0 3px;}
img {border: none;}
img.center {vertical-align: middle;}
img.floatright2 {float: right;padding: 5px;margin: 5px;border: 3px solid white;}
img.floatleft2 {padding: 5px;margin: 5px;border: 3px solid white;float: left;}
h1 {color: #FFCC00;font-size: 1.50em;padding-bottom: 10px;}
.menu {
list-style:none;
margin:0;
font-size:1.2em;
float:left;
width:100%;
background:#000;
text-align:center;
}
.menu li {
display:inline;
border-right:1px solid #fff;
padding-right:0.5em;
margin-right:0.5em;
}
.menu a {
color: white;
font-family: Tahoma;
}
.menu a:hover {
color: #fff;
text-decoration:underline;
}
.menu li#lastItem {
border:none;
}
.menu li a:visited {color: gray;}
.menu li a:hover {background:gray url('images/listb.gif');}
.menu li a:active {color: gray;}
.blue {background-color: #FFFFFF;margin: 5px;color: #000000;}
p {padding-bottom: 10px;}
p.strong {font-weight: bold;}
.gray {background-color: #232323;
padding: 10px;
margin: 0 10px;}
.caption {
color: #fff;
background-color: gray;
text-align: center;
border: 1px solid #A8D4FF;
width: 169px;
margin: 2px;}
.shaded {background-color: silver;text-align: center;}
span.red {color: red;font-weight: bold;}
h3 {
font-size: 0.88em;
color: #FFFFFF;
padding-bottom: 5px;}
hr {border: 1px solid #FFCC00; margin-bottom: 5px;}
h2 {font-size: 1.00em;
color: #990019;
padding-bottom: 5px;
margin-bottom: 10px;}
#footer {
clear: both;
width: 750px;
height: 50px;
text-align: center;
background: maroon;
font-size: 0.75em;}
#footer p {padding-top: 15px;} |
html
| Code: |
<div id="container">
<div id="header"><br />
<a href="papier.htm"><img class="floatright"src="images/papierg.gif" width="59" height="26" /></a><a href="news.htm"><img class="floatright"src="images/misc.gif" width="56" height="26" /></a><a href="mosaic2.htm"><img class="floatright"src="images/mosaic2.gif" width="64" height="26" /></a>
<a href="mosaic1.htm"><img class="floatright"alt="mosaic nav button 1" src="images/mosaic1.gif" width="66" height="27" /></a></div>
<div id="centercontent">
<ul class="menu">
<li><a href="index.htm">Homepage</a></li>
<li><a href="news.htm">News</a></li>
<li><a href="studio.htm">Studio</a></li>
<li><a href="guestbook3.htm">GuestBook</a></li>
<li><a href="contacts.htm">Contacts</a></li>
<li><a href="links.htm">Links</a></li>
<li><a href="about.htm">About</a></li>
<li id="lastItem"><a href="workshops.htm">Workshops</a></li>
</ul>
<div id="fullwidth" class="gray">
<h1><br />
Welcome to 'Eyecatchingart'</h1> |
|
|
quartzy
Joined: 26 Dec 2007
Posts: 400
|
| Posted: Sat Apr 05, 2008 7:24 am re |
|
|
|
hello
thanks very much for posting this code, but I had to get another one as I wrote before and now I have removed the original so I cannot even check it. Looking at the code you posted will enable me to look back in the future when I do a horizontal navigation.
I see a couple of mistake to your original post on this that i had not done. But my new menu looks great. |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
