Prev: Please help with newbie questions
Next: An idea of a "semantic" stylesheet
From: Gordon on 5 Aug 2010 10:17
I am working on a new news feed page for our CMS. The front page
(link below) displays the most recent items (The first few in full,
the rest as just summaries). I wanted to arrange the page so that the
summaries are in a sort of grid layout, I have written some CSS that
achieves this quite nicely, but as ever it fails miserably in IE.

..headlines {
margin: 0;
padding: 0;
list-style: none outside;
overflow: hidden;
}
..headlines li {
padding: 1.5%;
margin: 0 0 1em 0;
width: 30%;
float: left;
}
..headlines li.newRow {
clear: both;
}
..headlines li.heroheadline {
width: 100%;
float: none;
clear: both;
padding:0;
}
..headlines li h2 {
font-size: 1.2em;
}
..headlines li.heroheadline h2 {
font-size: 1.62em;
}

Safari, Chrome, Firefox et al display the list as intended, but on IE
the bottom row kind of disintegrates with the articles failing to line
up properly with each other.

I could possibly change the markup to some other format, but I and the
other designers prefer the list approach as it's a more semantic way
of doing it. Does anybody know what's going wrong in IE and how to
fix it?

The mockup page is at http://www.equanet.co.uk/cms/newsfeed/ and the
stylesheet for the list is at http://www.equanet.co.uk/cms/css/equanet-cms.css
From: dorayme on 5 Aug 2010 19:27
In article
<5800c993-9f00-4eb7-822e-87d1e802357a(a)s9g2000yqd.googlegroups.com
>,
Gordon <grj.mcvey(a)googlemail.com> wrote:

> I am working on a new news feed page for our CMS. The front page
> (link below) displays the most recent items (The first few in full,
> the rest as just summaries). I wanted to arrange the page so that the
> summaries are in a sort of grid layout, I have written some CSS that
> achieves this quite nicely, but as ever it fails miserably in IE.
>
> .headlines {
> margin: 0;
> padding: 0;
> list-style: none outside;
> overflow: hidden;
> }
> .headlines li {
> padding: 1.5%;
> margin: 0 0 1em 0;
> width: 30%;
> float: left;
> }
> .headlines li.newRow {
> clear: both;
> }
> .headlines li.heroheadline {
> width: 100%;
> float: none;
> clear: both;
> padding:0;
> }
> .headlines li h2 {
> font-size: 1.2em;
> }
> .headlines li.heroheadline h2 {
> font-size: 1.62em;
> }
>
> Safari, Chrome, Firefox et al display the list as intended, but on IE
> the bottom row kind of disintegrates with the articles failing to line
> up properly with each other.
>
> I could possibly change the markup to some other format, but I and the
> other designers prefer the list approach as it's a more semantic way
> of doing it. Does anybody know what's going wrong in IE and how to
> fix it?
>
> The mockup page is at http://www.equanet.co.uk/cms/newsfeed/ and the
> stylesheet for the list is at http://www.equanet.co.uk/cms/css/equanet-cms.css

I assume you do not mean by article line-up the top of the text
under each headline. As you might know, these do not line up in
any browser because users have font-sizes you are not expecting.
Simply because you restrict the width of the site and the
headlines have nowhere to go but wrap down and then different
length headlines will travel further than others. OK, that is out
of the way.

To track this fault down (you do not mention which version of IE
btw) work backwards from something like the simpler:

<http://dorayme.netweaver.com.au/gordon.html>

which at least displays as you are likely to be satisfied with in
IE8. The fault, therefore, seems not to be in the CSS you refer
to.

If you do not want to track through all your *other* complex
sheets that control the page, may I suggest you isolate at least
the list items I list in the url above and have it as a separate
list altogether. It is still pretty semantic. The top ul will be
for the right-across 'complete' articles and the bottom would be
for the 'read-more' hook types. That is good enough and might
make it easier for you to disengage the *other* css sheets from
affecting it.

Before you do this, try shuffling the order of the css sheets
that control the sites.

No time just now to look further.

--
dorayme
From: BootNic on 6 Aug 2010 14:25
On Thu, 5 Aug 2010 07:17:48 -0700 (PDT)
Gordon <grj.mcvey(a)googlemail.com> wrote:

> I am working on a new news feed page for our CMS. The front page
> (link below) displays the most recent items (The first few in full,
> the rest as just summaries). I wanted to arrange the page so that the
> summaries are in a sort of grid layout, I have written some CSS that
> achieves this quite nicely, but as ever it fails miserably in IE.

[snip]

> Safari, Chrome, Firefox et al display the list as intended, but on IE
> the bottom row kind of disintegrates with the articles failing to line
> up properly with each other.
>
> I could possibly change the markup to some other format, but I and the
> other designers prefer the list approach as it's a more semantic way
> of doing it. Does anybody know what's going wrong in IE and how to
> fix it?

IE sucks yes indeed. No need to help it along it sucks just fine all by
its self.

1. Don't set X-UA-Compatible to IE=7, no need to design a new
layout for IE 7. If it is to be set, set it to IE=edge.

2. Don't use floats when what you really want is inline-block.
Providing IE8 is not set to a backward compatible mode, it
handles inline-block much as other compatible browsers.

IE7 support required? No need to panic, IE 6/7 can emulate inline-block
for block elements with display:inline;zoom:1;

For testing add (after all other css):

<style type="text/css">
..headlines li {
display:inline-block;
vertical-align: top;
float:none;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
..headlines li {
display:inline;
zoom:1;
}
</style>
<![endif]-->


> The mockup page is at http://www.equanet.co.uk/cms/newsfeed/ and the
> stylesheet for the list is at
> http://www.equanet.co.uk/cms/css/equanet-cms.css


--
BootNic Fri Aug 6, 2010
02:25 pm It's not that some people have willpower and some don't. It's
that some people are ready to change and others are not.
*James Gordon*
From: dorayme on 6 Aug 2010 17:50
In article
<20100806142516.24bf02c4(a)bootnic.eternal-september.org>,
BootNic <bootnic.bounce(a)gmail.com> wrote:

> On Thu, 5 Aug 2010 07:17:48 -0700 (PDT)
> Gordon <grj.mcvey(a)googlemail.com> wrote:
>
> > I am working on a new news feed page for our CMS. The front page
> > (link below) displays the most recent items (The first few in full,
> > the rest as just summaries). I wanted to arrange the page so that the
> > summaries are in a sort of grid layout, I have written some CSS that
> > achieves this quite nicely, but as ever it fails miserably in IE.
>
> [snip]
>
> > Safari, Chrome, Firefox et al display the list as intended, but on IE
> > the bottom row kind of disintegrates with the articles failing to line
> > up properly with each other.
> >
> > I could possibly change the markup to some other format, but I and the
> > other designers prefer the list approach as it's a more semantic way
> > of doing it. Does anybody know what's going wrong in IE and how to
> > fix it?
>
> IE sucks yes indeed. No need to help it along it sucks just fine all by
> its self.
>
> ...
>
> 2. Don't use floats when what you really want is inline-block.
> Providing IE8 is not set to a backward compatible mode, it
> handles inline-block much as other compatible browsers.
>
>...
>

This might well fix the problem OP is experiencing but, as I
indicated before, the problem seems not to be the markup or the
css that was quoted by the OP. The trouble seems to be the effect
from the rest of the CSS (there are many sheets). Even on my IE
6, I was seeing no trouble with the admittedly isolated and
idealised

<http://dorayme.netweaver.com.au/gordon.html>


> > The mockup page is at http://www.equanet.co.uk/cms/newsfeed/ and the
> > stylesheet for the list is at
> > http://www.equanet.co.uk/cms/css/equanet-cms.css

--
dorayme
From: BootNic on 7 Aug 2010 00:27
On Sat, 07 Aug 2010 07:50:09 +1000
dorayme <dorayme(a)optusnet.com.au> wrote:

> In article
> <20100806142516.24bf02c4(a)bootnic.eternal-september.org>,
> BootNic <bootnic.bounce(a)gmail.com> wrote:
>
>> On Thu, 5 Aug 2010 07:17:48 -0700 (PDT)
>> Gordon <grj.mcvey(a)googlemail.com> wrote:

[snip]

>>> I could possibly change the markup to some other format, but I
>>> and the other designers prefer the list approach as it's a more
>>> semantic way of doing it. Does anybody know what's going wrong
>>> in IE and how to fix it?

[snip]

>> 2. Don't use floats when what you really want is inline-block.
>> Providing IE8 is not set to a backward compatible mode, it
>> handles inline-block much as other compatible browsers.

[snip]

> This might well fix the problem OP is experiencing but, as I
> indicated before, the problem seems not to be the markup or the
> css that was quoted by the OP. The trouble seems to be the effect
> from the rest of the CSS (there are many sheets). Even on my IE
> 6, I was seeing no trouble with the admittedly isolated and
> idealised

I totally ignored the css in the post, did not look at any of the
external css in the example. I took a rather quick glance at the
source

Truly too much too look at.

While it is possible to do this sort of thing with floats I think the
better tool in the box would be inline-block.

Just to change the "columns" from 3 to 2 or 4 … give some though to
min/max width. Float is just a real pain for this sort of thing.

> <http://dorayme.netweaver.com.au/gordon.html>

>>> The mockup page is at http://www.equanet.co.uk/cms/newsfeed/ and
>>> the stylesheet for the list is at
>>> http://www.equanet.co.uk/cms/css/equanet-cms.css


--
BootNic Sat Aug 7, 2010
12:27 am If you have money you can make the ghosts and devils turn your
grind stone. *Chinese Proverb*
 |  Next  |  Last
Pages: 1 2
Prev: Please help with newbie questions
Next: An idea of a "semantic" stylesheet