Facebook page design is not working in IE8 - css

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]>

Related

CSS issue - aligning a span to another

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.

Text overlapping with drop-down

I have CSS code from a template design that a client wants to use. One of the issue I'm having is that, once a text option is selected (those options with wide length) is writing over the drop-down arrow.
See image
I have tried using z-index and placing overflow:hidden where appropriate. Here is the CSS code:
/* search drop-down values */
select option {}
option.level-0{padding:0 3px;}
option.level-1,option.level-2,option.level-3,
option.level-4,option.level-5,option.level-6,
option.level-7{}
.selectBox-dropdown{ height: 34px; min-width:190px; max-width: 320px; position:relative; border:solid 1px #BBB; line-height:1; text-decoration:none; color:#666; outline:none; vertical-align:middle; background:#FFF; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; display:inline-block; cursor:default; margin-top: 1px\9; height: 33px\9;}
.content_right .selectBox-dropdown {width:303px;}
.content_right a.selectBox-dropdown:hover {text-decoration:none;}
.selectBox-dropdown:focus,
.selectBox-dropdown:focus .selectBox-arrow{border-color:#BBB}
.selectBox-dropdown.selectBox-menuShowing{-moz-border-radius-bottomleft:0; -moz- border-radius-bottomright:0; -webkit-border-bottom-left-radius:0; -webkit-border-bottom-right-radius:0; border-bottom-left-radius:0; border-bottom-right-radius:0}
.selectBox-dropdown .selectBox-label{width:100%; padding:0 .7em; line-height:2.4em; display:inline-block; white-space:nowrap; overflow:hidden; font-size:14px}
.selectBox-dropdown .selectBox-arrow{position:absolute; top:0; right:0; width:23px; height:100%; background:url(images/sb-arrow.png) 50% center no-repeat; border-left:solid 1px #BBB; }
.selectBox-dropdown-menu{position:absolute; z-index:99999; max-height:200px; border:solid 1px #BBB; background:#FFF; -moz-box-shadow:0 2px 6px rgba(0,0,0,.2); -webkit-box-shadow:0 2px 6px rgba(0,0,0,.2); box-shadow:0 2px 6px rgba(0,0,0,.2); overflow:auto}
.selectBox-inline{width:250px; outline:none; border:solid 1px #BBB; background:#FFF; display:inline-block; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; overflow:hidden;}
.selectBox-inline:focus{border-color:#666}
.selectBox-options,
.selectBox-options li,
.selectBox-options li a{list-style:none; display:block; cursor:default; padding:0; margin:0}
.selectBox-options li a{color:#666; padding:1px .7em; white-space:nowrap; overflow:hidden; background:6px center no-repeat; text-decoration:none; font:14px/1.5em Arial,Helvetica,sans-serif;}
.selectBox-options li.selectBox-hover a{background-color:#EEE}
.selectBox-options li.selectBox-disabled a{color:#888; background-color:transparent}
.selectBox-options .selectBox-optgroup{color:#666; background:#EEE; font-weight:bold; line-height:1.5; padding:0 .3em; white-space:nowrap;}
.selectBox.selectBox-disabled{color:#888 !important}
.selectBox-dropdown.selectBox-disabled .selectBox-arrow{opacity:.5; filter:alpha(opacity=50); border-color:#666;}
.selectBox-inline.selectBox-disabled{color:#888 !important}
.selectBox-inline.selectBox-disabled .selectBox-options a{background-color:transparent !important}
code for the drop-down:
<div class="state-dropdown"><?php wp_state_dropdown() ?></div>
<span id="campus_dropdown"><?php if (empty($_GET['cp_state'])){ wp_campus_dropdown();} ?></span>
<?php if (!empty($_GET['cp_state'])){?>
<script type="text/javascript" >loadXMLDoc('<?php echo $_GET['cp_state'];?>','<?php echo $_GET['cp_your_college'];?>')</script>
<?php }?>
Any suggestions or help would be greatly appreciated. I know this is a bit too much of CSS, but again its from a template and I have been pulling my hair out for weeks!
Thank you so much in advance!
First of all without sample HTML, we can only guess at how the css is used. After analyzing the css you provided, I took a stab at how I thought it might be used, jsFiddle here. Based on this assumption there are two options:
Set a right padding for the elements that contain the menu options. This may cause the dropdown to widen, but should be better as it will allow users to see the entire text of the option.
Set the background for the dropdown arrow element ('.selectBox-arrow') to a solid color and match the border radius of the containing element. Note that the background color defaults to transparent.
If for whatever reason neither of these options work in your situation, remember, Firebug (or other browser's developer tools) are your friend. These tools can help make short work of problems like this.

Menu triangle/arrow issue (pure CSS)

I have a triangle next to menu items, using pure CSS. It works flawlessly in Internet Explorer and Firefox but Chrome crops the bottom of the arrow. Here's some screenshots of the issue:
Here is the CSS I'm using:
/*menu arrows */
.arrowsprite {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #444444;
font-size:0px;
line-height:0px;
top:-2px;
position:relative;
}
.arrowspriteselected {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #fff;
font-size:0px;
line-height:0px;
top:-2px;
position:relative;
}
.leftish li:hover .arrowsprite {
border-top:5px solid #444444;
}
.leftish li:hover .arrowspriteselected {
border-top:5px solid #444444;
}
The HTML is:
<li>Wanted <span class="arrowsprite"></span></li>
Does anyone see any glaring problems in my CSS?
Try setting display to inline-block for your .arrowsprite rule. See this fiddle for an example.
.arrowsprite {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #444444;
font-size:0px;
line-height:0px;
top:-2px;
position:relative;
display:inline-block;
}
It's working for me in Chrome 14.0.803.0 dev.
I'm not able to reproduce what you see in Chrome 12.0.742.112. For me, the span didn't even show up with that CSS and HTML. However, I tried putting in a non-breaking space, and then I was able to see it and it displayed fine.
<li>Wanted <span class="arrowsprite"> </span></li>
Here's a fiddle to compare with and without the non-breaking space. Notice that on Firefox at least the method gives more space (no pun intended), so see if you can still make it do what you want. If you can't, the next thing to try would be a float for your list elements (See this question for why).

Facebook page design is not working in IE8

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.

CSS space lines between spans

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/

Resources