|
CSS - Please Help Me Plug The Gap!
Sorry - very easy question I'm sure but we all have to start somewhere...!
Could someone just explain why the following page has a gap several pixels high at the very top of the page (greater in IE, less in Firefox - haven't tested others) - it's only a few lines of html but can't work it out.... <html> <head> <style>body{text-align:center}</style> </head> <body text="#000000" bgcolor="#FFFFFF"> <div id="container" style="top:0px;text-align:left;margin:0pt auto;width:780px;background-color:#cccccc;height:100px"> <div id="content" style="width:100%">Some text</div> </div> </body> </html> I'm trying to create a horizontally-centred site so can't use absolute positioning. Thanks a lot. Similar TutorialsHi Everyone, I'm new here - have lurked on and off - great forum. I am using a suckerfish wordpress plug-in, it has been working fine until I added 3rd level of pages to the navigation. Still works fine in FF, Safari, Opera & Chrome but mis-aligns (offsets) 3rd level navigation to the right in IE 7 (not tested in IE8 or 6). I have attached screenshots of the problem. Correctly positioned in FF URL Mis-aligned in IE7 URL *Just realised that as a new user the imgage URLs are stripped - so I shall try to describe the problem. In most browsers the 3rd level navigation appears directly adjacent to the second level navigation. In IE it appears 80 or so pixels to the right with a gap in between making it impossible to access the 3rd level menu. The CSS is Code: #suckerfishnav {
background:#81aaf2 url(../multi-level-navigation-plugin/images/suckerfish_JP.png) repeat-x;
font-size:13px;
font-family:verdana,sans-serif;
font-weight:bold;
width:100%;
z-index: 1000;
}
#suckerfishnav, #suckerfishnav ul {
float:left;
list-style:none;
line-height:34px;
padding:0;
margin:0;
width:100%;
}
#suckerfishnav a {
display:block;
color:#dddddd;
text-decoration:none;
padding:0px 10px;
z-index: 1000;
}
#suckerfishnav li {
float:left;
padding:0;
z-index: 1000;
}
#suckerfishnav ul {
position:absolute;
left:-999em;
height:auto;
width:151px;
font-weight:normal;
margin:0;
line-height:1;
border:0;
border-top:1px solid #666666;
z-index: 1000;
}
#suckerfishnav li li {
width:149px;
border-bottom:1px solid #666666;
border-left:1px solid #666666;
border-right:1px solid #666666;
font-weight:bold;
font-family:verdana,sans-serif;
z-index: 1000;
}
#suckerfishnav li li a {padding:4px 10px; width:130px;font-size:12px;color:#dddddd;}#suckerfishnav li ul ul {margin:-21px 0 0 150px;}
#suckerfishnav li li:hover {
background:#81aaf2;
}
#suckerfishnav li ul li:hover a,
#suckerfishnav li ul li li:hover a,
#suckerfishnav li ul li li li:hover a,
#suckerfishnav li ul li li li:hover a {color:#dddddd;}
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {color:#dddddd;}
#suckerfishnav li:hover li a,
#suckerfishnav li li:hover li a,
#suckerfishnav li li li:hover li a,
#suckerfishnav li li li li:hover li a {color:#dddddd;}
#suckerfishnav li:hover ul ul,
#suckerfishnav li:hover ul ul ul,
#suckerfishnav li:hover ul ul ul ul,
#suckerfishnav li.sfhover ul ul,
#suckerfishnav li.sfhover ul ul ul,
#suckerfishnav li.sfhover ul ul ul ul {left:-999em;}
#suckerfishnav li:hover ul,
#suckerfishnav li li:hover ul,
#suckerfishnav li li li:hover ul,
#suckerfishnav li li li li:hover ul,
#suckerfishnav li.sfhover ul,
#suckerfishnav li li.sfhover ul,
#suckerfishnav li li li.sfhover ul,
#suckerfishnav li li li li.sfhover ul {
left:auto;
background:#00a33d;
}
#suckerfishnav li:hover,
#suckerfishnav li.sfhover {
left:auto;
background:#81aaf2;
}
I think perhaps the 3rd level navigation is inheriting a margin(?) from somewhere but I need someone with a bigger brain than mine to help me see it! Many thanks to anyone who can help. |
|||||||