Skip to main content ↑ ↓
Topic: Small CSS issue with News (Read 1999 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Small CSS issue with News

When news has longer label (in Polish it is Aktualności) News box is misaligned:



ElkArte 1.0 RC2

Re: Small CSS issue with News

Reply #1 –

Well, thats not right  :D

One thought is to move some of the style elements to the main news div, right now they are on the UL and use margins to shift things around.  So for testing, in index_light.css change the news section to this and see how that works for you.

Code: [Select]
/* News section. */
#news {
	font-size: 0.929em;
	border: 1px solid #ccc;
	background: #fff;
	box-shadow: 1px 2px 3px #eee;
	margin-bottom: 1em;
	padding: 8px 12px;
	overflow: auto;
	resize: vertical;
}
#news>h2 {
	float: left;
	color: #4b863c;
	font-size: 1.286em;
	line-height: 1.286em;
	font-weight: 700;
	font-variant: small-caps;
	margin: -1px 0 0;
	display: inline-block;
}
#news>h2:after {
	content: "\2026";
}
#news_line, #elkFadeScroller {
	/* Longhand style due to JS bug in IE! */
	color: #666666;
	height: 60px;
	min-height: 60px;
	text-indent: 1em;
    display: inline;
}

Re: Small CSS issue with News

Reply #3 –

Ah cool ... same idea, I was not sure if the #elkFadeScroller was used or not so left it in place instead.  Your way is more compact  :D

Two suggestions  O:-) 

1) add a height to the H2 otherwise the first line of news text does not wrap under the News ... line (but the third line does) ... so a height: 1em; on the h2 should work.
2) I think it looks better with the News... line and the news item to have the bottom of the text aligned, at least on windows FF it is not and needs a margin-top: -2px; on that H2 as well (or margin on the list, your choice)