On photo you can see my problem,
Problem is because my first text is to long and don't show some letters on end,
I try with padding, margin ... not work i really don't know what to add there for this look like in 2. row
main
.qa-main {padding-left:20px; float:left; margin-bottom:2em; width:626px; clear:left; overflow:hidden;
.qa-q-view-extra {margin-bottom:18px; font-style:normal;}
.qa-q-view-extra-content {font-weight:bold; background:#FFF; color:#0ba200; font-size:15px; text-decoration:underline;}
Thanks.
You should add word-wrap: break-word; to the div.
.qa-main {
...
word-wrap: break-word;
}
Related
The code is exactly the same but it just isnt inline with the box above it.
Thanks in advance.
CSS
#menu {
margin-top:75px;
min-width:19px;
max-width:1920px;
height:40px;
background-color:#0F0;
border:4px groove #F00;
}
#header {
margin-top:50px;
max-width:1920px;
height:70px;
background-color:#000;
border:4px groove #F00;
If those are div or other block elements, you could use the CSS-attribute float.
I think you have part of the answer you are looking for already in your question.
If you have a block-element (or any other non-inline-element) and want it to behave like it is inline you can do so by setting the display-property:
display: inline;
I've seen this and this, and tried both methods to apply word breaking to a span tag. Neither one works in IE8 for me.
Here's the code I'm trying:
.bodyWrap .dashboard .col2 .wrapper .locInfoWrap .nickname {
font-size:16px;
color:#000;
word-wrap:break-word;
-ms-word-wrap: break-word;
-ms-word-break: break-all;
}
EDITED TO ADD - I just tried adding a width to the span element, like this:
.bodyWrap .dashboard .col2 .wrapper .locInfoWrap .nickname {
font-size:16px;
color:#000;
word-wrap:break-word;
-ms-word-wrap: break-word;
-ms-word-break: break-all;
width:100%;
}
Still looks the same. Help, please! This is a major requirement for our client.
Here's what it ends up looking like (larger version here):
What do I need to do to get this to work in IE8?
What ended up working for me was setting the span to have a display of inline-block.
I have a vertical CSS menu but there is a gap to the left and above and i cannot work out where to remove it - my menu CSS is below and i have created a fiddle with my full code:
#vertical_menu {
float:left;
}
#vertical_menu > ul > li {
display:inline-block;
width:140px;
}
#vertical_menu > li {
display:inline-block;
list-style:none;
margin-left:-20px;
}
#vertical_menu li a {
display:block;
padding-bottom:10px;
margin-top:15px;
border-bottom:4px solid #000000;
color: #000000;
text-decoration:none;
}
#vertical_menu li a:hover {
border-color:#666666;
color:#666666
}
any ideas?
http://jsfiddle.net/Dfw9f/1/
i think what you are looking for is a reset CSS, kindly check CSS Tools: Reset CSS
The goal of a reset stylesheet is to reduce browser inconsistencies in
things like default line heights, margins and font sizes of headings
for quick solution just add this to your CSS
ul,tr,hr{margin:0;padding:0;}
I think adding this to your code will solve your problem:
ul
{
padding:0px;
margin:0px;
}
Hope this helped.
UPDATE
I think the gap is not because of an issue with margin or padding, but because of an empty row in your table. You can see this by giving the table a border, like <table border="1"> (jsfiddle).
I see that you included the last row of the table to have a line between the table and the menu. You can accomplish this simply by deleting the last row of the table (which is messing your layout) and add a border-bottom to the table, like <table border="0" style="border-bottom:1px solid gray;">
JSFIDDLE - here is an updated version, with the line and correctly laid out menu.
Hope this helped.
I want this :
But I get this :
Using this to style the containing div :
.option {
display:inline-block;
width:100%;
white-space:nowrap;
overflow:hidden;
margin:10%;
}
The rest is nothing here : http://jsfiddle.net/n2LtN/
What is missing?
I fixed it by using display:inline-block instead of display:inline, without floating :
span, input[type="checkbox"] {
display:inline-block;
*display:inline; /*That's for IE*/
*zoom:1; /*That's for IE*/
width:auto;
}
See the working fiddle.
Remove float:left from span, input[type="checkbox"]
You should read up on how float works.
I have a list of thumbnails with links and images, so when the user hover an li element, it's height becomes 100%, but the problem it works wrong in Chrome for some odd reason. I don't understand why in Chrome the hovered li width doesn't adjust to its "new" size.
(Note: this is a simplified version of my problem)
Also, this problem occurs only on :hover. but not, lets say, with :nth-child
Playground link
Update: problem continues... See my solution in the answers, BUT the problem continues..I've zoom in with the mouse and you will see it happening..note that number of images can be huge.
Update 2:
Force a redraw every mousehweel event fires...
thumbs.hide().show(0);
My solution: Solution playground
The idea is to trick Chrome to re-calculate the width, by giving the image a new height that is almost the same on the li:hover state. BUT this isn't enough for Chrome. transitions must also be applied on the img. This is all voodoo coding, but this is the least-ugly solution I could come up with:
ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%; }
li{ display:inline-block; vertical-align:middle; height:60%; -webkit-transition:.2s; transition:.2s; }
li:hover{ height:100%; }
li a{ height:100%; padding:0 2px; display:block; }
li a img{ height:96%; -webkit-transition:.2s; transition:.2s; }
li:hover a img{ min-height:96%; }
I am new here and I am not sure if this is a good practice but I will post my observation and not a precise solution:
The same problem appears on Opera.
This seemed strange to me - when li:hover a img{ border:1px solid black; } or any similar css code that is not supposed to make any change to the current situation is added it all starts to behave very strange. ex - http://jsbin.com/operib/43/edit
And here it is the solution I do not find elegant, just a quick fix:
http://jsbin.com/operib/39/edit
EDIT: After testing #Carol McKay's result I realized that the transition is making the whole mess. The next link (node 58) is node 43 linked above (which is basically node 1 just added border to the image on hover) with removed transition and it works just fine http://jsbin.com/operib/58/edit.
It seems that any css rule should be added on hover so the <img/> dimensions are recalculated.
Apply transition to the image instead.
css
ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%;
}
li{ display:inline-block; vertical-align:middle; height:60%; }
li a{ height:100%; padding:0 2px; display:block; }
li a img{ display:inline-block; vertical-align:middle; height:96%; transition:0.15s; - webkit-transition:0.15s; }
li:hover{ height:100%; }
li:hover a img{ height:100%; opacity:1; }
http://jsbin.com/operib/83/edit