ok here is my problem.
My page looks good on Firefox, Opera, and Chrome but on IE6 and IE7 there is a small gap between my top menu and my logo but on Opera, chrome and firefox there is no gap (which is what I want). I use dreamweaver so my code has been validated (no errors) and browser compatibality has been checked (no errors).
Next problem, [ctrl] + scroll to zoom the page zooms fine in firefox, Opera and chrome but IE the top menu loses it padding and all the links (text) run together.
help! (why is internet explorer so hard to design for??) It always seems that IE (the most used browser, of course) is the one that I have problems with. I always knew I didn't like IE but now I have a good reason.
here is my body code
<body>
<div id="logo"><img src="http://www.namepros.com/images/menulogo.jpg" alt="Toledo Menus.com logo" width="1020" height="100" longdesc="default.htm" /></div>
<ul id="topmenu">
<li><a href="default.htm" title="Home">Home</a></li>
<li><a href="Movies.htm" title="Movies">Movies</a></li>
<li><a href="Special Events.htm" title="Special Events">Special Events</a></li>
<li><a href="Sporting Events.htm" title="Sporting Events">Sporting Events</a></li>
<li><a href="Nitelife.htm" title="Nitelife">Nitelife</a></li>
<li><a href="Toledo Links.htm" title="Toledo Links">Toledo Links</a></li>
</ul>
........
here is my css code
#logo {
padding-top:10px;
padding-bottom:10px;
background: black;
border-bottom: 4px groove #F21C47;
width: 1020px;
height: 100px;
margin-right:auto;
margin-left:auto;
}
#topmenu {
position:relative;
top:-16px;
list-style-type:none;
text-align:center;
margin-right:auto;
margin-left:auto;
white-space:nowrap;
background:#4D4D4D;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:0;
padding-top:8px;
padding-bottom:8px;
width:1020px;
}
ul#topmenu li {
display:inline;
}
ul#topmenu li a {
text-decoration:none;
color:white;
padding-right:35px;
padding-left:35px;
}
ul#topmenu li a:hover {
font-weight:bold;
Color: white;
}
My page looks good on Firefox, Opera, and Chrome but on IE6 and IE7 there is a small gap between my top menu and my logo but on Opera, chrome and firefox there is no gap (which is what I want). I use dreamweaver so my code has been validated (no errors) and browser compatibality has been checked (no errors).
Next problem, [ctrl] + scroll to zoom the page zooms fine in firefox, Opera and chrome but IE the top menu loses it padding and all the links (text) run together.
help! (why is internet explorer so hard to design for??) It always seems that IE (the most used browser, of course) is the one that I have problems with. I always knew I didn't like IE but now I have a good reason.
here is my body code
<body>
<div id="logo"><img src="http://www.namepros.com/images/menulogo.jpg" alt="Toledo Menus.com logo" width="1020" height="100" longdesc="default.htm" /></div>
<ul id="topmenu">
<li><a href="default.htm" title="Home">Home</a></li>
<li><a href="Movies.htm" title="Movies">Movies</a></li>
<li><a href="Special Events.htm" title="Special Events">Special Events</a></li>
<li><a href="Sporting Events.htm" title="Sporting Events">Sporting Events</a></li>
<li><a href="Nitelife.htm" title="Nitelife">Nitelife</a></li>
<li><a href="Toledo Links.htm" title="Toledo Links">Toledo Links</a></li>
</ul>
........
here is my css code
#logo {
padding-top:10px;
padding-bottom:10px;
background: black;
border-bottom: 4px groove #F21C47;
width: 1020px;
height: 100px;
margin-right:auto;
margin-left:auto;
}
#topmenu {
position:relative;
top:-16px;
list-style-type:none;
text-align:center;
margin-right:auto;
margin-left:auto;
white-space:nowrap;
background:#4D4D4D;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:0;
padding-top:8px;
padding-bottom:8px;
width:1020px;
}
ul#topmenu li {
display:inline;
}
ul#topmenu li a {
text-decoration:none;
color:white;
padding-right:35px;
padding-left:35px;
}
ul#topmenu li a:hover {
font-weight:bold;
Color: white;
}
Last edited:
