0

div contains single line texts as li elements div width is determined by widest item width. If mouse is over some item, its font style changes to bold.

If mouse is placed hover wide items, bold font causes width increase and this causes div width also to increase. This looks very ugly if mouse is moved in list. How to disable this increase without using hard-coded width?

I tried overflow: hidden style as shown in code below but div width still increases.

html:

<div id="LeftPane" class="site-leftpane">
<ul class="tree">
<li><a href="/details?product=1">Product1</a></li>
<li><a href="/details?product=2">Product2</a></li>
...

css:

.site-leftpane {
    background-color: #FBFBFB;
    clear: left;
    color: Black;
    float: left;
    margin: 0;
    overflow: hidden;
    padding-top: 1em;
}

.tree {
    line-height: 1.6em;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

.tree li a {
    color: #333333;
    cursor: default;
    display: block;
    font-family: "arial","sans-serif";
    margin: 0;
}

.tree li:first-child {
    font-weight: bold;
}

.tree li a:hover {
    color: #E47911 !important;
    font-weight: bold;
}

Update

I chaged style according to proposed answer to 

.tree li a {
    color: #333333;
    cursor: default;
    display: block;
    font-family: "arial","sans-serif";
    margin: 0;
}

But problem persists. Web page can used in different screen resolutions. Texts are created by customer at runtime. Right side of contains other div which automatically uses remaining space. I do'nt knwo how to use hard-coded max-width in this case. max-width specifies maximum allowd div width. Usually in this case div width is smaller, hover causes its increase and thus max-width does not solve the issue.

Andrus
  • 26,339
  • 60
  • 204
  • 378
  • 1
    Similar question to [this one](http://stackoverflow.com/q/5687035/218597). I particularly like Thorgeir's solution to that question. – icabod Apr 04 '13 at 14:12
  • Thank you. I tried Thorgeir's solution but text quality is much worse than using bold font. Hover text must be very good quality so this is not acceptable. This is implemented in amazon.com : shop by department menu hover makes text bold poperly. amazon.com uses wide div . Maybe this can used in this case also. – Andrus Apr 04 '13 at 15:31

4 Answers4

2

I had a similar problem and found one way to fix it was by using some jQuery, simple and works:

$('.menu-item').each(function() { 
    $(this).css( 'width', $(this).width()+'px' ); 
});

Basically you have jQuery "hard-code"/set the initial width of each of your class elements that was calculated by the browser based on text length and font settings, so that when you hover over each element which say changes the font-weight of the text, then the width won't change, it will remain the same as it was initially.

Stefan Djurcic
  • 69
  • 11
1

Ok, this isn't a great answer, but may provide a quick fix, from which someone else could base a real answer :)

Playing around with your HTML/CSS I was able to get what you want (well, emulating a dynamic max-width) by adding duplicate entries for each <li> in the list, adding a "pad" class, which basically hides the content.

<div id="LeftPane" class="site-leftpane">
<ul class="tree">
<li><a href="/details?product=1">Product1</a></li>
<li><a href="/details?product=2">Product It's a product, yes.</a></li>
<li class="pad"><a>Product1</a></li>
<li class="pad"><a>Product It's a product, yes.</a></li>
</ul>
</div>

And in the CSS I added this to the end:

.tree li.pad {
    line-height: 0;
    font-weight: bold;
    visibility: hidden;
}

What it basically does it add hidden entries for each of your list items, but the pad class makes the additional entries zero-height, but bold (and hence the correct width). It kind of relies on you being able to generate the HTML side, to allow adding the duplicate entries.

However, I think that this is a terrible solution, for numerous reasons (it's adding redundant data, it would mess up any non-visual browser, ...).

icabod
  • 6,992
  • 25
  • 41
0

Try adding padding:0px and margin:0px to your :hover, also you could add a max width to your div to keep your width at a single size. This in my opinion would fix your problem.

Cam
  • 1,884
  • 11
  • 24
  • list texts are read dynamically from database. How to determine max width at runtime? – Andrus Apr 03 '13 at 20:51
  • @Andrus max-width is a CSS property which you can set. You don't need to determine it beforehand, just set it to whatever the largest size your design can handle. The divs will not increase past that width. – Jeff Apr 03 '13 at 20:56
  • max-width will behave as if there is info in there regardless if there is or isnt. You should also add overflow hidden if you have too much content. Some jquery can handle what to do if you have too much content inside a div. – Cam Apr 03 '13 at 20:59
  • @Jeff: I want div width to be as wide as widest line plus maybe some ems to reserve space for bold hover or hide rightmost charaters on hover. max-width sets only maximum width. many category lists widths are smaller. In this case width is determinened by widest line and problem persists. – Andrus Apr 04 '13 at 07:07
  • @Cam: I tried answer but problem persists. No idea how to specify max-width and how it can help. I updated question. – Andrus Apr 04 '13 at 09:23
  • Good morning, add this to your CSS I tested it already, if you dont have css add it to your style in your header. .ui-menu { max-width: 225px !important; } – Cam Apr 04 '13 at 12:34
  • @Cam: thank you. This works only is line width is is as this site. If menu contains narrower lines, properm persist. Items are created dynamically and hard coded max-width cannot used. How to implement this wihtout hard coded width? – Andrus Apr 04 '13 at 13:37
  • You could set min-width to auto and max-width to the highest amount that you can without impeding the design/layout – Cam Apr 04 '13 at 15:08
  • To be honest I would put a character limit on your link, then include in your links a title, so that when people go to your website and they see a link called "Stuff people will see in poland" you could shorten it to "Poland Sites" then the hover will reveal the title="Stuff people will see in poland" – Cam Apr 04 '13 at 15:11
0

I don't think you can be certain of the actual pixel width when your server builds your page.

The users browser does all of those calculations, and it doesn't really expose them (though client-side scripting languages & toolsets like jQuery can see the end results).

Honestly, your best bet is to either assign a fixed-width to the items, calculated well ahead of time, and accept that long text might line break. If this doesn't work for you, the other option you have is to change the hover behavior. Perhaps instead of making the text bold you could change the text/background color? This would be an alternate way to indicate the currently hovered item and it won't change the character size or spacing.

Jeff
  • 2,835
  • 3
  • 41
  • 69