pagination css προβλημα

[quito]

παιδια το προωλημα που εχω ειναι το εξης.

εχω την παρακατω σελιδοποιηση μαζι και το css της. το θεμα μου ειναι οτι στον mozilla φαινεται μια χαρα ενω στον ΙΕ χαλαει.το css ειναι:

<style type="text/css">

#pagination

{

font-size : .8em;

margin : 0;

overflow : hidden;

padding : 2px 0;

text-transform : uppercase;

 

}

 

#pagination li

{

display:inline;

}

#pagination a,#pagination a:visited

{

color : #999;

text-decoration : none;

padding: 3px;

margin: 3px;

}

 

#pagination a:hover

{

color : #000;

text-decoration : none;

}

#pagination .pagination-prev a

{

background : url(images/previous.gif) no-repeat left center;

}

 

#pagination .pagination-next a

{

 

background:url(images/next.gif) no-repeat right center;

 

}

#pagination span.disabled {

padding: 2px 3px 2px 3px;

margin: 2px;

color: #DDD;

font-family:verdana;

letter-spacing:1px;

font-size:8px;

}

#pagination span.current {

padding: 2px 5px 2px 5px;

margin: 2px;

color:#D56A00;

font-family:verdana;

font-weight:bold;

font-size:13px;

line-height:2px;

border:1px solid #666666;

}

 

</style>

ενω ο php κωδικας για τα κουμπια επομενη σελιδα και προηγουμενη ειναι:

<?php

$targetpage = "site.php";

$page = $_GET['page'];

 

if ($page == 0) $page = 1;

$prev = $page - 1;

$next = $page + 1;

echo "<ul id=\"pagination\">";

//previous button

if ($page > 1)

echo "<li class=\"pagination-prev\"><a href=\"$targetpage?page=$prev\">    </a></li>";

 

 

//pages

for ($counter = 1; $counter <= 4; $counter++)

{

if ($counter == $page)

echo "<span class=\"current\">$counter</span>";

else

echo "<a href=\"$targetpage?page=$counter\">$counter</a>";

 

}

//next button

if ($page < $counter - 1)

echo "<li class=\"pagination-next\"><a href=\"$targetpage?page=$next\">    </a></li>";

 

echo "</ul>\n";

?>

τι λαθος εχει το css ωστε στον ΙΕ να μην φαινεται σωστα?

[quito]

η δεξια εικονα ειναι αυτη που φαινεται στον ΙΕ.

Δηλαδη τι κανει, επαναλαμβανει την εικονα που εχω για τα next previous buttons.

 

#pagination .pagination-prev a

{

background : url(images/previous.gif) no-repeat left center;

}

 

#pagination .pagination-next a

{

 

background:url(images/next.gif) no-repeat right center;

 

} πιστευω οτι εδω πρεπει να μπει καποια ιδοτητα για να μην επαναλαμβανεται η εικονα?γνωριζει κανεις??

[sebastien]

Κατ'αρχίν σε ένα <ul> μπορείς να βάλεις μόνο <li> σαν παιδιά, οπότε στο σημείο pages στο php κώδικά σου πρέπει να βάλεις:

 

>echo "<li><span class=\"current\">$counter</span></li>";
else
echo "<li><a href=\"$targetpage?page=$counter\">$counter</a></li>"; 

 

Επίσης, μέσα στα <a> για τα previous/next, αντί για <a>   </a>, το οποίο δεν είναι semantic, σου προτείνω να γράψεις: <a>Previous</a> ή <a>Προηγούμενο</a>, και αντίστοιχα για το Next.

 

Για να κρύψεις το κείμενο πάνω από τις εικόνες θα πρέπει να βάλεις τον εξής κώδικα στη CSS:

 

>#pagination .pagination-prev a
{
background : url(prev.gif) no-repeat left center;
overflow : hidden;
text-indent: -9999px;
display: block;
width: (όσα px είναι η εικόνα);
}

#pagination .pagination-next a
{
background:url(next.gif) no-repeat right center;
overflow : hidden;
text-indent: -9999px;
display: block;
width: (όσα px είναι η εικόνα);
}

 

Επίσης για να έρθουν όλα στην ίδια ευθεία πρέπει να αλλάξεις το εξής:

 

>#pagination li
{
display:block;
float: left;
}

[quito]

sebastien σευχαριστω πολυ!

τελικα μονο το πρωτο που μου εγραψες ηθελε αλλαγη και ειναι οκ και στον ΙΕ

>echo "<li><span class=\"current\">$counter</span></li>";
else
echo "<li><a href=\"$targetpage?page=$counter\">$counter</a></li>";  

 

---------- Το μήνυμα προστέθηκε στις 00:12 ----------

 

sebastien επειδη σε βλεπω ενημερω πανω σε css μηπως μπορεις να βοηθησεις στο παρακατω τοπικ css positioning. αν γνωριζεις. παντως σευχαριστω και παλι