tags:

views:

105

answers:

1

Hello everyone, my website looks ok in all browsers expect for IE7 I have lot of issues with this browser. Below is the image with which I have problems :

alt text

I made a pagination which has a problem with IE7, the border bottom and top doesn't render, anyone knows why? here is my css mayber that will give you hint what is wrong?

div.Pager a {
    display:block:
    float:left;
    padding: 2px 6px;
    border: solid 1px #e6e7e8;
    margin: 0 2px 0 2px;
    text-align:center;
}

div.Pager a:hover {
    background-color:#437FC1;
    border-color:#437FC1;
    color:#fff;
    text-decoration:none;
}

div.Pager{

    display:block;
    overflow: hidden;
    white-space: nowrap;
    padding:6px 0 6px 0;
    margin-top:2px;
}

Anyone had similar problems, perhaps another approach to this? basically inside Pager div there are some a tags which are links to page numbers. Thank you

UPDATE:

Here is what happens when all css has passed validation, when semi-columns replaced : ,

alt text

Its amazing how everything works well in ff and IE8 without even css being valid.. when it is valid it doesn't work in any browser in all of them it looks like in the picture above Yes here is HTML

<div class="Pager">
<div class="Pager_left">
<span class="light"> Page:</span> 
<span class="current">1</span> 
<a onclick="return Page.goto(10);" href="#">2</a>
<a onclick="return Page.goto(20);" href="#">3</a>
<a onclick="return Page.goto(30);" href="#">4</a>
<a onclick="return Page.goto(40);" href="#">5</a>…
<a onclick="return Page.goto(10);" href="#">»</a>
</div><div class="Pager_right"/></div>
+3  A: 

First of all have you checked your CSS / HTML is valid?

The border shorthand syntax should be as follows, you are specifying style before weight, it should be weight before style:

border: 1px solid #e6e7e8; /* correct format */

This may send IE7 into quirks mode, possibly causing your problem.

Also your code here doesn't terminate your selector correctly, use a semicolon instead.

display:block: /* look here, you need a ; */
ILMV
No change, doesn't mather which one goes first its remained same
Gandalf StormCrow
Ok, have you applied the second change, adding a `;` instead of a `:` to your `display:block:` line?
ILMV
That is it , thumbs up !!
Gandalf StormCrow
Excellent! Remember, W3C CSS validator is your friend, bookmark this bad boy. http://jigsaw.w3.org/css-validator/
ILMV
Sorry m8, I have updated the question .. didn't have the time to refresh until now ..
Gandalf StormCrow
Can you post your HTML too.
ILMV
I added HTML / updated my question
Gandalf StormCrow
I haven't forgotten, will look when I have a spare 5 mins :)
ILMV