CSS Menu Highlighting Problem
|
|
Thread rating:  |
Ste - 26 Aug 2007 02:18 GMT Hi there,
I'm using CSS to highlight main navigation items in a 'suckerfish menu' for the currently loaded page, i.e. when on the home page, the 'home' navigation item should be highlighted.
I've almost got this working, except for some reason, the highlighted background block isn't quite covering the full area of the menu item.
For example, see this beta page (via TinyURL): http://tinyurl.com/2bk78a
You can see that the Home navigation item is highlighted in red. This looks fine upon first glance, but if you hover over it, you'll see a white hover colour 'behind' the red background which shows the full width that the menu item should be highlighted in red up to - so there shouldn't be any gaps between menu items.
Can anyone tell me why this is happening and how I can fix it please?
Thanks for any advice,
Ste
rf - 26 Aug 2007 02:39 GMT > Hi there, > [quoted text clipped - 12 lines] > the menu item should be highlighted in red up to - so there shouldn't be > any gaps between menu items. Be aware that IE6 does not support :hover on anything other than <a href=> elements. Your hover does not work in IE6 and causes the the text to be dark grey on blank, that is unreadable.
The standard way is to make the <a> elements block (#nav2 a: {display: block}) and apply your :hover etc to the <a>.
 Signature Richard.
Ste - 26 Aug 2007 11:25 GMT >> Hi there, >> [quoted text clipped - 19 lines] > The standard way is to make the <a> elements block (#nav2 a: {display: > block}) and apply your :hover etc to the <a>. The whole site is in beta mode and I've been working in Safari and Firefox on the Mac - not yet tested the menu at all in IE6, but I was led to believe that the JavaScript would make it work in IE6 on the page where I found the code from: http://www.htmldog.com/articles/suckerfish/ Maybe I've hacked it around too much and now it doesn't work.
Can you recommend an alternative open source menu that can look similar to how I have this menu, but has the hacks for IE in place?
Thanks,
Ste
dorayme - 26 Aug 2007 02:52 GMT > Hi there, > [quoted text clipped - 14 lines] > > Can anyone tell me why this is happening and how I can fix it please? You could try putting your "current" style on the list item instead?
li#homenav { color:#444444; background: red; }
and moving the id to inside the relevant list item. In the case of the home page it would be:
<li id="homenav" style="font-size: 37.4px; line-height: 37.4px;"><a style="font-size: 37.4px; line-height: 37.4px;" href="http://www.beta.zestimages.com/">HOME</a>
Which very much reminds me to say this design is all hopeless acrobatics. It is a nice example of an attempt to do things fine grained in pixels. A nightmare! For a start, see what breaks at a few clicks of browser text enlargement.
__________________ [Anyone the slightest bit interested to know if I succeeded in replacing the power booster in my Ford XY yesterday _without_ disconnecting the master cylinder? Can anyone smell any brake fluid over my words here?]
 Signature dorayme
Ste - 26 Aug 2007 11:33 GMT >> Hi there, >> [quoted text clipped - 31 lines] > grained in pixels. A nightmare! For a start, see what breaks at a > few clicks of browser text enlargement. Thanks for the suggestion, I've give it a try. Regarding it all being hopeless anyway, can you recommend an alternative open source menu that can look like I want this to look, but also be more accessible and work in multiple browsers? I'm open to suggestions, and thought this was the one, but obviously not...
Thanks,
Ste
Ben C - 27 Aug 2007 20:03 GMT [...]
> [Anyone the slightest bit interested to know if I succeeded in > replacing the power booster in my Ford XY yesterday _without_ > disconnecting the master cylinder? Can anyone smell any brake fluid > over my words here?] Yes I am quite interested. What is a "power booster"? Do you mean the servo? Have you tried uk.rec.cars.maintenance? It's not a bad NG with a few people who really know what they're talking about. I particularly recommend "Mr Cheerful". There is also an Andy Dingley who posts there occasionally.
dorayme - 27 Aug 2007 23:14 GMT > [...] > > [Anyone the slightest bit interested to know if I succeeded in [quoted text clipped - 7 lines] > recommend "Mr Cheerful". There is also an Andy Dingley who posts there > occasionally. <http://netweaver.com.au/images/PBXWY.jpg>
It sits on the firewall, and simply pushes the piston in the master cylinder, no "mechanical" connection.
Anyway, no I did not succeed in the "short method" mentioned. It was impossible to replace it without disconnecting the master cylinder. Not for want of trying at every angle and more. Could not be done in my particular model (without caving in a double steel plated well in the way that contained the front coil). So all the dramas of freeing and refitting very old pipe threads ensued. Into the dark of early evening. It was ok. The worst bit was actually getting one particular nut off a bolt to free the bracket holding the booster onto the firewall from under the dash. There is a hump for the gearbox in the cabin, making it a very unfriendly place to lie, backbreaking! Luckily, I brought along a mate who can accept reconfiguration of body, I removed his legs as well as his left arm and head (it was simple enough work to allow the latter).
I had to return the old booster (exchange deal) and could not satisfy my curiosity, I had a theory about what was wrong inside, I diagnosed an internal valve fault. Looked into opening and fixing but parts were not certain and time was not on my side, nor experience in such things from others (no one does these things nowadays). I notice the pros did what I had planned, a metal band with a nut and bolt to tighten around to close the thing shut and tight. The factory jobs are not user friendly to open, press fitted as you can see from the pics. There is a powerful spring inside and opening and closing is tricky work.
Thanks for the link, must look at it. Very bush mechanical around my old Ford, no fine work. I reckon Englishman would be appalled at the way the colonials make do...
 Signature dorayme
Ben C - 28 Aug 2007 08:38 GMT >> [...] >> > [Anyone the slightest bit interested to know if I succeeded in [quoted text clipped - 4 lines] >> Yes I am quite interested. What is a "power booster"? Do you mean the >> servo? [...]
><http://netweaver.com.au/images/PBXWY.jpg> > > It sits on the firewall, and simply pushes the piston in the > master cylinder, no "mechanical" connection. That's right, that's what we call the "servo". Over here the power booster is what we call the red button inside the gear knob that you push when you need to overtake.
> Anyway, no I did not succeed in the "short method" mentioned. It > was impossible to replace it without disconnecting the master > cylinder. Not for want of trying at every angle and more. Could > not be done in my particular model (without caving in a double > steel plated well in the way that contained the front coil). Probably not a good idea, you do need those strut mounts. It's important when judging whether to cave in bodywork to distinguish the functional from the merely cosmetic.
> all the dramas of freeing and refitting very old pipe threads > ensued. Into the dark of early evening. It was ok. It's often surprisingly not that bad to disturb the hydraulics. Some people even undo the bleed screws to facilitate retracting the pistons when changing the pads. I think that's unnecessary but there's a school of thought that says that if you operate the bleed screws quite regularly they're less likely to get seized and therefore rounded or broken when you do need to move them.
> The worst bit was actually getting one particular nut off a bolt to > free the bracket holding the booster onto the firewall from under the > dash. There is a hump for the gearbox in the cabin, making it a very > unfriendly place to lie, backbreaking! I hate things under the dash. Even worse than lying under the car with brake fluid dripping onto one's face.
[...]
> I had to return the old booster (exchange deal) and could not > satisfy my curiosity, I had a theory about what was wrong inside, > I diagnosed an internal valve fault. Perhaps. I think those things also have a rubber diaphragm which is therefore subject to perishing and splitting. This is one reason not to get the replacement from a scrapyard. The same applies to cam-operated mechanical fuel pumps.
> Looked into opening and fixing but parts were not certain and time was > not on my side, nor experience in such things from others (no one does > these things nowadays). I notice the pros did what I had planned, a > metal band with a nut and bolt to tighten around to close the thing > shut and tight. I think that's a "jubilee clip".
dorayme - 29 Aug 2007 00:14 GMT > > all the dramas of freeing and refitting very old pipe threads > > ensued. Into the dark of early evening. It was ok. [quoted text clipped - 5 lines] > regularly they're less likely to get seized and therefore rounded or > broken when you do need to move them. Yes indeed! What happens is not only the bleed screw seizing in the thread but on the pipe itself. As you know, it needs to be able to turn on the metal brake line. True, you do not always need to disconnect the line when merely changing pads. One time, one of the bleeders snapped and I simply had to pull the calliper off. I drilled and counter-screwed the stuck in stub and then, being a Queen's birthday long weekend, could not get one, could not find one anywhere at home. What to do?
I remembered an old trick, I found a length of pure steel thread that fitted perfectly into the bleed thread, shaped the round end to make a square for a spanner, dropped a ball bearing down the calliper bleed hole that nicely covered the "tiny bleed hole" at the bottom, the curvature being just right and the diam also being snug. Followed by the bolt I fashioned. True, it is harder to bleed (because harder for the air to escape... a finesse would have been to drill a fine hole through the length of the bolt. But hey, this was meant as stop gap and bush mechanics, not arty farty). It worked a treat. I will dig up a pic somewhere one day.
(I ran no one over that I did not want to run over. I saw a skier in purple pants I wanted to run over and headed off over the paddocks after him but the bugger did an arty farty jump and got away. Ah well, he would only have come back to haunt me.)
> > The worst bit was actually getting one particular nut off a bolt to > > free the bracket holding the booster onto the firewall from under the [quoted text clipped - 11 lines] > Perhaps. I think those things also have a rubber diaphragm which is > therefore subject to perishing and splitting. You are not wrong. It is just that I fancied from the particular symptoms I had that it was a valve.
> > Looked into opening and fixing but parts were not certain and time was > > not on my side, nor experience in such things from others (no one does [quoted text clipped - 3 lines] > > I think that's a "jubilee clip". Yes. I was looking for the phrase "hose clamp" as closest but even this temporarily slipped my mind. Am losing it slightly!
 Signature dorayme
Ben C - 29 Aug 2007 08:54 GMT >> > all the dramas of freeing and refitting very old pipe threads >> > ensued. Into the dark of early evening. It was ok. [quoted text clipped - 8 lines] > Yes indeed! What happens is not only the bleed screw seizing in > the thread but on the pipe itself. You mean I think the union rather than the bleed screw. The union is the nut around the end of the pipe that connects it to the caliper/master cylinder/etc. Sometimes you turn the union to undo it and the pipe turns with it, quickly resulting in the pipe splitting. Always something to watch out for.
> As you know, it needs to be able to turn on the metal brake line. > True, you do not always need to disconnect the line when merely > changing pads. No, I never do. The thinking is it makes the piston easier to retract, but I don't see what's wrong with an hour or two of bleeding knuckles and swearing instead.
> One time, one of the bleeders snapped and I simply had to pull the > calliper off. I drilled and counter-screwed the stuck in stub and > then, being a Queen's birthday long weekend, could not get one, could > not find one anywhere at home. What to do?
> I remembered an old trick, I found a length of pure steel thread that > fitted perfectly into the bleed thread, shaped the round end to make a > square for a spanner, dropped a ball bearing down the calliper bleed > hole that nicely covered the "tiny bleed hole" at the bottom, the > curvature being just right and the diam also being snug. Followed by > the bolt I fashioned. Now _that_ is clever.
[...]
> But hey, this was meant as stop gap and bush mechanics, not arty > farty). It worked a treat. I will dig up a pic somewhere one day. A much less elegant trick for a rear brake (which let's face it isn't really necessary) is just to disconnect the pipe altogether and bend it over itself a few times, effectively tying a knot in the thing. Then you never need to worry about that rear brake again. Not something I've done myself but have heard tell of it.
dorayme - 31 Aug 2007 00:26 GMT > On 2007-08-28, dorayme > > Yes indeed! What happens is not only the bleed screw seizing in > > the thread but on the pipe itself. > > You mean I think the union rather than the bleed screw. oops... yes I meant the union.
> > As you know, it needs to be able to turn on the metal brake line. > > True, you do not always need to disconnect the line when merely > > changing pads. > > No, I never do. The thinking is it makes the piston easier to retract, Yes. A mate of mine made a little screw clamp device to push them in for such situations. I borrowed it once. But usually you can manage.
> > One time, one of the bleeders snapped and I simply had to pull the > > calliper off. I drilled and counter-screwed the stuck in stub and [quoted text clipped - 19 lines] > never need to worry about that rear brake again. Not something I've > done myself but have heard tell of it. I might do this to a vehicle to a farm but one place I go for a swim, there are some big hills, I like to have the small contribution of the rear brakes. I suppose the hand brake might be called in on such occasions. <g>
 Signature dorayme
Ben C - 31 Aug 2007 08:27 GMT [...]
>> > As you know, it needs to be able to turn on the metal brake line. >> > True, you do not always need to disconnect the line when merely [quoted text clipped - 5 lines] > in for such situations. I borrowed it once. But usually you can > manage. Sometimes you're lucky and a G clamp fits on it. But that's for the fronts. The rears are much worse. They need to be pushed and twisted, just right, at the same time. The only way to get any purchase on them without the dreaded special tool referred to in the manual that one of course doesn't have is with long-nose pliers.
This design is so you can have a self-adjusting handbrake on the rear discs. Some cars use a drum as well, just for the handbrake, so wouldn't have this difficulty. Many cars, especially older ones, just have drums on the rear anyway.
Andy Dingley - 28 Aug 2007 23:30 GMT >There is also an Andy Dingley who posts there occasionally. _Very_ rarely.
And I prefer PHP to Fords.
Gus Richter - 26 Aug 2007 03:32 GMT > For example, see this beta page (via TinyURL): http://tinyurl.com/2bk78a Why would you use a tinyURL? for a simple one like: http://www.beta.zestimages.com/ I usually skip those - changed my mind this one time. I thought that people use them only when they are very long URLs and they're not aware to use this format (which does not wrap): <http://www.beta.zestimages.com/>
> You can see that the Home navigation item is highlighted in red. This > looks fine upon first glance, but if you hover over it, you'll see a [quoted text clipped - 3 lines] > > Can anyone tell me why this is happening and how I can fix it please? #nav2 li { float: left; /*padding: 0 5px 0 0px;*/ margin-right:5px; border-left: solid 1px #444444;}
 Signature Gus
rf - 26 Aug 2007 03:47 GMT >> For example, see this beta page (via TinyURL): http://tinyurl.com/2bk78a > > Why would you use a tinyURL? As the site is in beta the OP might have wanted to keep the real URL unmentioned, so it wont end up in places like google groups and thus be prematurely found by the search engines. Begs the question: Does google follow tinyurl redirections?
 Signature Richard.
Ste - 26 Aug 2007 11:34 GMT >>> For example, see this beta page (via TinyURL): http://tinyurl.com/2bk78a >> [quoted text clipped - 4 lines] > prematurely found by the search engines. Begs the question: Does google > follow tinyurl redirections? That was the intention - so thanks to all those who posted the link anyway... :-)
Ste
Ste - 26 Aug 2007 11:34 GMT >> For example, see this beta page (via TinyURL): http://tinyurl.com/2bk78a > [quoted text clipped - 4 lines] > they're not aware to use this format (which does not wrap): > <snip> I used it because it's a beta site and still in progress. I didn't want to attract search engines and risk getting the site indexed in parallel to the currently live site...
>> You can see that the Home navigation item is highlighted in red. This >> looks fine upon first glance, but if you hover over it, you'll see a [quoted text clipped - 7 lines] > /*padding: 0 5px 0 0px;*/ margin-right:5px; > border-left: solid 1px #444444;} Thanks for this, I'll give it a try.
Ste
Beauregard T. Shagnasty - 26 Aug 2007 03:46 GMT > Thanks for any advice, How about:
body { margin: 0; padding: 0; font-size: 71%; font-family: verdana, arial, helvetica, sans-serif;
71% ... and Verdana ... I have to increase text size to read your content, which is less than 3/4 of my preferred size.
See this page: http://k75s.home.att.net/fontsize.html
Also, your page doesn't fit in my browser window without horizontal scrolling.
 Signature -bts -Motorcycles defy gravity; cars just suck
Ste - 26 Aug 2007 11:39 GMT >> Thanks for any advice, > > How about: > > body { margin: 0; padding: 0; font-size: 71%; font-family: verdana, > arial, helvetica, sans-serif; Thanks, I'll give that a try.
> 71% ... and Verdana ... I have to increase text size to read your > content, which is less than 3/4 of my preferred size. > > See this page: > http://k75s.home.att.net/fontsize.html I'll check out the link - the site is still in beta so I'm currenly designing to look as I want before fixing other issues like this.
> Also, your page doesn't fit in my browser window without horizontal > scrolling. I was using an elastic layout which worked down to around 750px wide, but then checked out my website stats and found that around 98% of my visitors were using 1024x768 or higher. So I then decided to make it 'easier' for designing the site by switching the width to a fixed 950px wide - and not penalise the majority for the sake of the minority. Are you using 800x600? If you're using 1024x768 at maximised browser window than I have a problem!
Ste
rf - 26 Aug 2007 12:13 GMT >> Also, your page doesn't fit in my browser window without horizontal >> scrolling. > > I was using an elastic layout which worked down to around 750px wide, but > then checked out my website stats and found that around 98% of my visitors > were using 1024x768 or higher. The width of your visitors screen has absolutely not bearing on the width of their browser canvas. Quite the opposite in fact. The wider the screen the more likelyhood that your visitor has their browser window narrower, so as to be able to see other things on their desktop at the same time. My "desktop" is currently about 5000 pixels wide. The bit of my desktop I have allocated to your site has a horizontal scroll bar.
> So I then decided to make it 'easier' Easier for whom?
> for designing the site by switching the width to a fixed 950px wide Very bad choice. My browser canvas is very rarely that wide.
> and not penalise the majority for the sake of the minority. Are you using > 800x600? Irrelevant.
>If you're using 1024x768 at maximised browser window than I have a problem! Irrelevant. Except that you do have a problem :-)
Design the page so that it adjusts to the width of the browser canvas it is contained in.
More to the point, do not constrain the page so that it does not adjust to the browsers canvas width. The default is to use the entire canvas. It is you who are constraining your page to do otherwise.
Here are two images from a site I administer (for illustration only, totally compressed to 100%, and carefull, it's still 130K).
http://barefile.com.au/m.jpg
See any scrollbars? Any empty space?
 Signature Richard.
Ste - 27 Aug 2007 03:34 GMT >>> Also, your page doesn't fit in my browser window without horizontal >>> scrolling. [quoted text clipped - 9 lines] > "desktop" is currently about 5000 pixels wide. The bit of my desktop I have > allocated to your site has a horizontal scroll bar. I know the difference between screen resolution and browser resolution, and also know about people with larger screens being more likely to browse with non-maximised windows, whilst those with 1024x768 resolution and lower tend to browse with maximised browser windows (I can't remember where I read that in case you ask).
However, I've still made this decision about the 950px width and I'm pretty sure I'm going to stick with it. It's not just me though, I'm seeing lots of sites that are doing this. In fact, two of the largest stock photography sites are doing something similar (Getty Images & Corbis), so I'm not the only one to take this gamble!
Just remember - there's no right or wrong here, it's personal preference and also depends on the target audience of the site in question and how they are likely to be browsing.
>> So I then decided to make it 'easier' > > Easier for whom? For me when designing the site of course. I don't like fluid widths as content tends to become stretched too wide (I see wide & stretched content as bad as you see these scroll bars when you're browsing with small browser windows).
The elastic width was okay, but I still had the uncertainty of how to deal with things like the big home page splash image etc. It seemed much easier to design the page after I decided to keep the width at 950px, and I made this decision after checking out a lot of other websites (websites this market/competitors/market leaders websites).
>> for designing the site by switching the width to a fixed 950px wide > > Very bad choice. My browser canvas is very rarely that wide. I'll agree to disagree. I find that it's mainly 'IT/Computer Geeks' that browse with these large displays and smaller windows anyway. I believe that my potential audience are more likely to be browsing with maximised screen resolutions at 1024x768 to 1280x1024 in the main. I'll live or die by this decision and knew about the points you made anyway before going this route.
>> and not penalise the majority for the sake of the minority. Are you using >> 800x600? > > Irrelevant. That's being knit-picky - in general terms, I was trying to get an idea of the browser window and screen resolution you were using.
>> If you're using 1024x768 at maximised browser window than I have a problem! > > Irrelevant. Except that you do have a problem :-) I have no problem, except for when you browse the site! :-P I'm confident that my audiance will be browsing differently to yourself.
> Design the page so that it adjusts to the width of the browser canvas it is > contained in. That would result in horrible looking fluid pages at wide browser resolutions and ruin the effect I'm trying to get with the splash images. I also don't want to use any scripts to change things dependent upon browser resolution unless they were fool proof to use (as I don't know much JavaScript). It's as big a gamble to predict users with wider screens are browsing maximised or non-maximised, so I have to draw the line at some point.
> More to the point, do not constrain the page so that it does not adjust to > the browsers canvas width. The default is to use the entire canvas. It is [quoted text clipped - 6 lines] > > See any scrollbars? Any empty space? But it looks really bad being stretched so far, which is what I also want to avoid. And any text pages which are spread this wide will be very difficult to read, which is very bad IMO.
Thanks for the comments (and similar ones from Beauregard) but I won't be discussing/responding to these any further. I'll agree to disagree where opinions differ and will stick to my original post subject in future rather than digressing into another subject all together. I've made a few posts to this newsgroup now and find that for every helpful reply to the subject in question, I get two or three other replies that talk about something completely different! I like to answer all responses out of courtesy but I need to be wiser with my time than to get involved in these types of OT (to the original post subject, not the newsgroup) discussions.
Thanks,
Ste
Beauregard T. Shagnasty - 26 Aug 2007 13:25 GMT > "Beauregard T. Shagnasty" said: >>> Thanks for any advice, [quoted text clipped - 5 lines] > > Thanks, I'll give that a try. The above is what you already have. I copied it here to show you and other readers your use of 71% font size, and Verdana.
>> 71% ... and Verdana ... I have to increase text size to read your >> content, which is less than 3/4 of my preferred size. [quoted text clipped - 3 lines] > I'll check out the link - the site is still in beta so I'm currenly > designing to look as I want before fixing other issues like this. The page says use 100% for your base/content font size, and drop Verdana. You should fix this first, before attempting other fixes, to make sure your content fits within any sized boxes/divs, and does not overflow if someone with poor vision increases it by up to .. 150%?
>> Also, your page doesn't fit in my browser window without horizontal >> scrolling. [quoted text clipped - 6 lines] > minority. Are you using 800x600? If you're using 1024x768 at > maximised browser window than I have a problem! Screen resolution is unimportant. Browser window size is important. My screen resolution is higher than 1024, but my browser window is not full-screen. At that moment it was to the left on my screen, and approximately 700 wide by 900 tall.
I was working with web info in one window, and an editor in another, positioned beside the browser. This is not uncommon.
 Signature -bts -Motorcycles defy gravity; cars just suck
|
|
|