|
| |
Randomly placed black bar functions same as dropdown menu
View related threads:
(in this forum
| in all forums)
|
Logged in as: Guest
|
|
|
drogers
Posts: 142
Joined: 5/7/2004
Status: offline
 |
Randomly placed black bar functions same as dropdown menu - 2/2/2006 23:42:56
Site: Click Here
Problem: For some reason, there is a black bar at the top right portion of the screen. If you mouse over it, you will see the drop downs operate and it mimicks the spacing of the actual links in the nav. The bar seems to start at page center and then float right.
Here's the CSS Offending Line
li {
float: left;
position: relative;
width: 9em;
text-align: center;
cursor: default;
background-color: #96ADD4;
/* THIS LINE CREATES THE PROBLEM */
border: 1px solid #000000;
border-width: 1px 0;
}
Here is the entire CSS file:
a:link {
color: Blue;
}
a:visited {
color: Blue;
}
div#gallery
{
position: absolute;
width: 402;
left: 50%;
margin-left: -27px;
margin-top: 160px;
color: #ffffff;
font-size: 75%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
/* nav link color */
#nav a {
/* font-weight: bold; */
color: black;
text-decoration: none;
}
/* nav nothing? */
#nav li li a {
display: block;
font-weight: normal;
font-size: 12px;
padding: 0.2em 1px;
}
/* nav mouseover */
#nav li li a:hover {
padding: 0.2em 5px;
border: 5px solid #AA0C0D;
border-width: 0 10px;
background-color: #B5C5E1;
}
/* nav dropdownbackground */
li {
float: left;
position: relative;
width: 9em;
text-align: center;
cursor: default;
background-color: #96ADD4;
/* THIS LINE CREATES THE PROBLEM */
border: 1px solid #000000;
border-width: 1px 0;
}
/* position and overlay */
ul { /* all lists */
position: absolute;
z-index: 1
padding: 0;
margin: 0;
list-style: none;
}
/* nav nothing */
li { /* all list items */
float: left;
position: relative;
width: 8.8em;
}
/* hides dropdowns */
li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
}
/* hack to fix problems caused by IE centering bug fix */
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
/* hover fix attempt covers more levels */
ul li:hover ul, ul ul li:hover ul, ul ul ul li:hover ul{
display:block;
}
/* problem area with display blocks works on first item of a level not on second etc */
li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}
/* page container which resets left margins of text to override ms bug */
#content {
clear: left;
}
body {
text-align: center;
font-family: arial, helvetica, serif;
}
Thanks for any help.
|
|
|
|
caz
Posts: 3582
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
RE: Randomly placed black bar functions same as dropdow... - 2/3/2006 6:26:07
To trouble shoot this you really need to validate your html, get that right and move on to validating your css. There are a number of errors in your html, such as unclosed elements which are probably contributing to this.
Do a search on this forum about validation and you will find the relevant url's.
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
drogers
Posts: 142
Joined: 5/7/2004
Status: offline
|
RE: Randomly placed black bar functions same as dropdow... - 2/3/2006 10:19:04
Ok, everything validates now except for the following:
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" bgcolor="#C0C0C0">
It says there are no topmargin, leftmargin, etc...
Other than that, it's only missing ALT tags which I doubt is causing the problem.
The CSS validates with some warnings, but I don't know what they mean or if they are causing the problem.
Any ideas?
| |
|
|
|
drogers
Posts: 142
Joined: 5/7/2004
Status: offline
|
RE: Randomly placed black bar functions same as dropdow... - 2/3/2006 13:45:11
Ok, so I've gotten all of that taken care of and now, except for a few alt tags, I'm valid. Problem remains, there is a black bar at the top of the pages which is somehow a part of the navigation. Any ideas?
If I take out the line border: 1px solid #000000; in
li {
float: left;
position: relative;
width: 9em;
text-align: center;
cursor: default;
background-color: #96ADD4;
/* THIS LINE CREATES THE PROBLEM */
border: 1px solid #000000;
border-width: 1px 0;
}
then the problem disappears, but so do my drop down's borders.
The black line is the length of the entire list, starts from center and floats to the right, and seems to be positioned relatively which is why it sits at the top, meaning it's not inheriting the absolute positioning of the rest of the menu.
Arrrrghhhh
| |
|
|
|
Tailslide
Posts: 6272
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
RE: Randomly placed black bar functions same as dropdow... - 2/3/2006 13:54:24
Can you put the borders specifically on the drop down rather than on all the LIs
Sorry we're not being too helpful - dropdowns are a bit of a pain at the best of times plus the way you've got your dropdowns set up is a bit unusual - different divs for each menu item etc.
Without wanting to throw a spanner in the works and confuse things completely - you might want to have a look at "Son of Suckerfish" dropdowns to see if there's anything you can steal for your site.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
drogers
Posts: 142
Joined: 5/7/2004
Status: offline
|
RE: Randomly placed black bar functions same as dropdow... - 2/3/2006 14:02:46
Changed the CSS to read:
#borders li {
float: left;
position: relative;
width: 9em;
text-align: center;
cursor: default;
background-color: #96ADD4;
/* THIS LINE NO LONGER CREATES THE PROBLEM */
border: 1px solid #000000;
border-width: 1px 0;
}
...and then in the HTML code...
<div id="borders">
<li><a href="hometheater.asp">Home Theater</a></li>
<li><a href="homeaudio.asp">Home Audio</a></li>
<li><a href="seating.asp">Seating</a></li>
<li><a href="surgeprotection.asp">Surge Protection</a></li>
</div>
Where would you like me to send your beer, Tailslide?
Edit: Just saw your addition of the Suckerfish modification. I was using the original Suckerfish from a list apart, I'll have to take a look at the one you linked.
I think most of the confusion in mine comes from trying to center in IE. Now I have to go back through the code and trick FF back in line as it looks horrendous right now.
< Message edited by drogers -- 2/3/2006 14:09:09 >
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
). HTML Tidy'll check out your code with the validator (though there's no substitute for using the validator itself for all the extra info you get), highlight errors in your code, showing you errors and warnings, and gives you the option to clean up your code, though it's still a good idea to read up on html/css and validation to understand what it's doing and why.
)
