1. Home
  2. Forums Index
  3. Browser Side / CSS 8:32 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Can't get CSS menu to work in 1024x768

         

dgafin

4:27 pm on Jul 14, 2009 (gmt 0)

10+ Year Member



I am working on website on my free time for my brother's state baseball tournament that is coming up at the end of the month. I have everything on the site looking good in Firefox/IE7/IE8 at a resolution above 1024x768. The menu is too far to the right on 1024x768 and I cannot figure out how to make it fit without causing it to look wrong at other resolutions. The website is setup for testing purposes a waynebaseball.ath.cx

DOCTYPE: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Relevant CSS: 


.menu {font-family: arial, sans-serif; width:1000px; height:16px; position:relative; font-size:16px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:109px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#0e03f2; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none; width:100%}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}

Any help is greatly appreciated.

jameshopkins

6:35 pm on Jul 14, 2009 (gmt 0)

10+ Year Member



Remove 'width:1024px;' from 'menu', reduce the width of the '.menu li a' elements so that they all fit on the same line, and add 'overflow:auto' to '.menu ul'.

dgafin

7:04 pm on Jul 14, 2009 (gmt 0)

10+ Year Member



Ok, so I added what you suggested, and took out the width:1024px. I tried 105px on the .menu ul li a, .menu ul li a:visited, which then made it not stretch across to the edge. I tried 106px, and 107px and it still won't stretch. As soon as I put it 108px it drops links to a second line. Also, the sub menus will not work when I have these settings. Thanks for the help!

jameshopkins

9:34 pm on Jul 14, 2009 (gmt 0)

10+ Year Member



My bad. The quick fix would be to remove 'overflow:auto' from '.menu ul'

dgafin

1:02 pm on Jul 31, 2009 (gmt 0)

10+ Year Member



Anyone else have any ideas? Also, I have some IE6 hacks in there to make it work, and that's not working. Any ideas here?

Here's the IE6 code:

Ok, so it still doesn't work with the IE6 hacks in there. Here is the css for my IE6 css. Does anyone know what I can change to make the menu work? 

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#fff; background:#000;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#0e03f2; color:#fff;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:10; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 8:32 pm May 1, 2026