Page 1 of 1

IE6 Display Issue Re: Website Template's Pagination Section

Posted: Fri Aug 07, 2009 11:58 pm
by abajan
Any of you guys proficient at CSS (Cascading Style Sheets)? I'm having trouble fixing a part of a photo album template. In a nutshell, in Internet Explorer 6 for Windows (probably in the one for Mac as well) the pagination area looks like the first screenshot below when it should look like the second one:

How it's displayed in IE6: :x

Image


How it's displayed in most other browsers: 8-)

Image


The template's URL is: http://howmywebsitewilllook.atspace.com/
It is my intention to pattern a number of online albums off of that template, so I would rather it display correctly in a wide range of browsers before I proceed any further.

Thanks.

Re: IE6 Display Issue Re: Website Template's Pagination Section

Posted: Sat Aug 08, 2009 9:14 am
by lurkey
First of all, thanks for wanting to include IE6. Most websites are dropping support. There will be a s--tstorm at work when Facebook and Youtube drops support for IE6 soon.

As a Mac (Intel, not PPC) user, I can tell you don't worry about IE5 for Mac. Most of us use Safari, Camino or Firefox as our web browser.

Re: IE6 Display Issue Re: Website Template's Pagination Section

Posted: Sun Aug 09, 2009 5:15 am
by abajan
Never mind, peeps. A coding guru gave me the solution after quietly but emphatically whispering to me in song: "The answer my friend, is blowing in the wind... the answer is blowing in the wind." (Okay, I'm kiddin' about that part :lol: ) The solution was so simple I'm almost too embarrassed to reveal it but in the interest of sharing that which was revealed to me, here it is (drum roll please...)

The "#pagination li" declaration block should have included "display:inline". That alone fixed the problem (that I'm told was also affecting IE7) but it was also suggested that "list-style:none" should be moved to the "#pagination ul" block. Thus this:

Code: Select all

#pagination ul {
   border:0;
   margin:0;
   padding:0;
   font:0.7em/1.7 Verdana, Arial, Helvetica, sans-serif;
}

#pagination li {
   border:0; margin:0; padding:0;
   list-style:none;
}

became this:

Code: Select all

#pagination ul {
   list-style:none;
   border:0;
   margin:0;
   padding:0;
   font:0.7em/1.7 Verdana, Arial, Helvetica, sans-serif;
}

#pagination li {
   border:0; margin:0; padding:0;
   display:inline;
}
and all was well with the world again. :sun:

Posted: Sun Aug 09, 2009 2:40 pm
by RL3AO
Whats IE6? :wink: