We have designed a face book page.It is working fine in all browser including IE7 but it is not working in IE8.We checked then we got if we run our code outside the face book page it works in IE8 but when we put our code into face book page its not working.Here is the css code what we are using for IE8.
<!--[if lt IE 8]>
<style>
.nv_a
{
width:90px;
height:27px;
float:left;
text-align:center;
padding-top:8px;
}
.nvt_a
{
width:66px;
height:27px;
float:left;
text-align:center;
padding-top:8px;
}
.nv_a a
{
width:90px;
height:27px;
float:left;
padding-top:8px;
text-align:center;
color:#000;
display:inline-block;
text-decoration:none;
background-color:#e0e0e0;
border-top:solid 1px #999;
border-left:solid 1px #999;
border-right:solid 1px #999;
border-bottom:solid 1px #999;
}
.nv_a a:hover
{
width:90px;
height:27px;
padding-top:8px;
float:left;
color:#000;
text-align:center;
background-color:#ccc;
}
.nvt_a a
{
width:66px;
height:27px;
float:left;
padding-top:8px;
text-align:center;
color:#000;
display:inline-block;
text-decoration:none;
background-color:#e0e0e0;
border-top:solid 1px #999;
border-left:solid 1px #999;
border-right:solid 1px #999;
border-bottom:solid 1px #999;
border:1px solid red;
}
Please help us to solve the issue.
"Here is the css code what we are using for IE8."
No, you're not.
The conditional comment at top of your snippet excludes IE8. Maybe what you mean to use there is the "lte" (less than or equal) operator?
I can't comment as to why it might be working outside of the Facebook page, but as far as what you're showing, it's correct that the code above doesn't apply to IE8.
Related
I work in a new project, I´m doing the "chat part" a one-to-one chat.. with php and ajax.
I´m new of css stuff.. while I was testing the code, I found a problem:
The text does not go down and continues skipping over design, I put an image for better understanding.
The css code:
.login_form {
border: 1px solid #AAA;
padding:10px;
}
h3 {margin-top:3px;}
.chat_main {
border:1px solid #AAA;
-moz-box-shadow:0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
width:350px;
padding:10px;
background:#f3f3f3;
}
.message {
border:1px solid #AAA;
margin:4px;
padding:5px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#ffffff;
}
.textf {-moz-box-shadow:0 0 10px #CCCCCC;
-webkit-box-shadow:0 0 10px #CCCCCC;
border:1px solid #CCCCCC;
height:40px;}
.submit {
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:#F3F3F3;
border:1px solid #CCCCCC;
font-size:16px;
font-weight:bold;
height:35px;
margin-left:10px;
padding:5px;
}
.message span {
font-size:10px;
color:#888;
margin-left:10px;
}
.submit_form {
margin:10px 0px;
}
Hope u can help me, I think it´s a simple error design that I don´t know because I´m new in design stuff.
Use exact words instead of spam words like aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa this is not a word that why you are facing this issue.
Even If you want to use like this then you can use overflow-wrap: break-word;
You can use word-break:break-all; property or word-wrap:break-word; property:
For example :
div {
width: 200px;
border: 2px solid #CCC;
word-wrap: break-word;
}
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
I have a with:
.menuoptions {
height:30px;
width:225px;
color:#666;
line-height:40px;
font-weight:bold;
padding-left:10px;
margin-top:-10px;
border-bottom:solid 1px #FF0000;
}
but I want the bottom line to be equally between each list, not directly below the word.
is this possible?
Fiddle
Try this:
CSS:
.menuoptions li:not(:last-child){
border-bottom:solid 1px #FF0000;
}
DEMO
I'm making an error message, using a pointer image that should give the left side a border. You can see an example here.
My current css is:
span.arrow {
background-color:white;
background: url('http://i45.tinypic.com/201d0n.png') no-repeat left center;
height:17px;
display:inline-block;
}
span.error {
display:inline-block;
padding-right:2px;
background-color:white;
margin-left:10px;
height:15px;
font-size:small;
border-top:1px solid #99182c;
border-right:1px solid #99182c;
border-bottom:1px solid #99182c;
box-shadow:5px 5px 10px #888888;
position:relative;
top:-2px;
}
And html to display the error:
<span class='arrow'>
<span class='error'>
Errormessage.
</span>
</span>
Now first of all, the code seems a bit messy. Like having to position the span up two pixels is a bit strange. Nevertheless it seems to work in Chrome, FF & Opera, but not in IE9.
If it isn't clear: the box should perfectly aline with the triangle-image.
span.arrow {
background: url('http://i45.tinypic.com/201d0n.png') no-repeat left center transparent;
line-height:17px;
padding-left:10px;
display:inline-block;
}
span.error {
padding-right:2px;
background-color:white;
line-height:15px;
font-size:small;
border-top:1px solid #99182c;
border-right:1px solid #99182c;
border-bottom:1px solid #99182c;
display:block;
}
span.error {
display:inline-block;
padding-right:2px;
background-color:white;
margin-left:10px;
line-height: 17px;
font-size:small;
border-top:1px solid #99182c;
border-right:1px solid #99182c;
border-bottom:1px solid #99182c;
box-shadow:5px 5px 10px #888888;
position:relative;
top:-2px;
}
Generally if you make your line-height match your content area height, the text will be vertically aligned.
http://jsfiddle.net/dshFk/3/
I looked in IE and it looked fine.
We have designed a face book page.It is working fine in all browser including IE7 but it is not working in IE8.We checked then we got if we run our code outside the face book page it works in IE8 but when we put our code into face book page its not working.Here is the css code what we are using for IE8.
<!--[if lt IE 8]>
<style>
.nv_a
{
width:90px;
height:27px;
float:left;
text-align:center;
padding-top:8px;
}
.nvt_a
{
width:66px;
height:27px;
float:left;
text-align:center;
padding-top:8px;
}
.nv_a a
{
width:90px;
height:27px;
float:left;
padding-top:8px;
text-align:center;
color:#000;
display:inline-block;
text-decoration:none;
background-color:#e0e0e0;
border-top:solid 1px #999;
border-left:solid 1px #999;
border-right:solid 1px #999;
border-bottom:solid 1px #999;
}
.nv_a a:hover
{
width:90px;
height:27px;
padding-top:8px;
float:left;
color:#000;
text-align:center;
background-color:#ccc;
}
.nvt_a a
{
width:66px;
height:27px;
float:left;
padding-top:8px;
text-align:center;
color:#000;
display:inline-block;
text-decoration:none;
background-color:#e0e0e0;
border-top:solid 1px #999;
border-left:solid 1px #999;
border-right:solid 1px #999;
border-bottom:solid 1px #999;
border:1px solid red;
}
Please help us to solve the issue.
Your code only targets IE with version less than IE8...
This line, before your style element, says: <!--[if lt IE 8]>. This basically means:
If the IE browser version is less than (lt) IE 8, then include the style declarations within this comment.
Now, since your question is a bit vague, you either want to target all versions of IE up to and including IE 8, OR you just want to target IE 8:
Target all versions up-to-and-including IE8: <!--[if lte IE 8]>
Target ONLY IE 8: <!--[if IE 8]>
I have this structure:
<div class="gBigPage">
<span class="gBigMonthShort">FEB</span><br />
<span class="gBigDayShort">23</span><br />
<span class="gBigYearShort">2011</span>
</div>
The gaps between the text lines are too big, I need them shortened so they are all virtually touching.
/* Mouseover div for day numbers */
.gBigPage{
height:45px;
width:30px;
font-family:Arial;
font-weight:bold;
background-color:#ffee99;
text-align:center;
border-top:1px solid #c0c0c0;
border-left:1px solid #c0c0c0;
border-right:1px solid #c0c0c0;
position:absolute;
z-index:3;
}
.gBigPage:hover{
cursor:pointer;
}
/* In the big day box, the month at top */
.gBigMonthShort{
text-transform:uppercase;
font-size:11px;
}
.gBigYearShort{
font-size:11px;
}
.gBigDayShort{
font-size:16px;
}
I can't do relative positioning for the spans, as there is a bug in Chrome which flickers the mouseover effect, pure CSS is the only thing that seems to work.
Fiddle for example:
http://jsfiddle.net/GmKsv/
All you need is line-hight in your css. Add this to your gBigPage.
Here is the code:
.gBigPage{
height:45px;
width:30px;
font-family:Arial;
font-weight:bold;
background-color:#ffee99;
text-align:center;
border-top:1px solid #c0c0c0;
border-left:1px solid #c0c0c0;
border-right:1px solid #c0c0c0;
position:absolute;
z-index:3;
line-height: 13px;
}
Demo on jsFiddle
Hope it helps!
Use line-height in your css :) you can reduce the gap between lines
Set each element's line-height style, e.g.
.gBigMonthShort { line-height: 10px; }
Tom, have you tried using CSS line-height?
link text
Need to set 2 levels of line height, one in container and one for each span.
* Mouseover div for day numbers */
.gBigPage{
height:45px;
width:30px;
font-family:Arial;
font-weight:bold;
background-color:#ffee99;
text-align:center;
border-top:1px solid #c0c0c0;
border-left:1px solid #c0c0c0;
border-right:1px solid #c0c0c0;
position:absolute;
z-index:3;
line-height:4px;
}
/* In the big day box, the month at top */
.gBigMonthShort{
text-transform:uppercase;
font-size:11px;
line-height:13px;
}
.gBigYearShort{
font-size:11px;
line-height:9px;
}
.gBigDayShort{
font-size:16px;
line-height: 13px;
}
Make the <span>s block-level, and remove the line breaks:
http://jsfiddle.net/GmKsv/12/