Recent Topics
  1. b2evolution CMS Support Forums
  2. b2evolution Support
  3. Templates, skins, XHTML and CSS
  4. [SOLVED] CSS bugs

[SOLVED] CSS bugs

1 Mar 17, 2008 08:26    

I built a new skin for an upgrade to 2.40rc2. But I'm having a weird error with the CSS where the page renders perfectly to begin with, then after a click-through or two the links misbehave, adding extra space for-and-aft, with the text-decoration:underline going right through them.
Please have a look and tell me what you think the issue might be.
http://combatwombat.7doves.com

Back to top

2 Mar 17, 2008 08:57

Um.... your "styles.css" isn't loading. Your cw.css is loading
Your skin looks good, the wombat looks great.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>404 Not Found</title>
	</head>
	<body>
		<h1>404 Not Found</h1>
		<p><a href="http://7doves.com/">b2evolution</a> cannot resolve the requested URL.</p>
			</body>
</html>

Back to top

3 Mar 17, 2008 09:20

Thanks John,
took the invalid reference out for style.css, but it makes no difference to the bad rendering. You see it too?

Back to top

4 Mar 17, 2008 13:17

You really need to validate your skin, it has multiple <head> tags etc ;)

¥

Back to top

5 Mar 18, 2008 00:45

1024 width on my monitor and I get a horizontal scroll bar. Skins limiting to 800 wide are soooo 20th century, but expecting 1280 wide might be a bit premature. Just my 2 cents there - and worth potentially less.

Back to top

6 Mar 20, 2008 07:03

Thanks again, Yabba. There were 2 head blocks loading, which confused the browser. :oops:

EdB, I understand your POV, and may change it if I get requests to do so, but currently the audience is a technological one, so they probably have even bigger screen setups on average. It would be interesting to get the system to automatically take a poll using javascript to find out what the average really is!

Back to top

7 Mar 20, 2008 07:56

Well in that case you wouldn't learn the screen resolution of either of my monitors - unless I enabled javascript ;) hmmm... I wonder if there was any way a server could learn if my monitors are "wider than tall" or "taller than wide", or would that be revealed with the screen res info? Yeah ... I guess it would.

Hey anyway what you're doing is pretty much a "self fulfilling prophesy" meaning you won't attract visitors who don't meet your expectations, so the results of any form of data gathering will reveal that which you already assume to be true. Like back in the day when webs that worked well in IE but nothing else noticed that all of their visitors use IE so, webmasters thought, why bother changing for other browsers.

I do like the semi-transparent bit over the main content. I don't think that's been used that way before so it's pretty cool. In fact the black text remains quite readable when over a background silhouette compliments of the ... opacity? I think that's what it is. Else it's a semi-trans image... Hm! Seems to be a little bit of both!

BTW it appears you've solved the problem initially mentioned here? Else I was unable to duplicate it with a couple of random clicks using Firefox.

Back to top

8 Mar 29, 2008 11:33

Hi EdB,
yup, I got it sorted thanks to that good spotting by Yabba; the extra HEAD tag was being loaded, which had weird side effects.

Thanks for the comments on the skin. The Opacity is courtesy of two DIVs, over the top of the third DIV that has the background image.
If you are interested, the CSS goes like this:
#backg{
position:absolute; left:0px; top:0px; width:898px; height:700px; z-index:1; background-image: url(img/onpatrol.jpg); layer-background-image: url(img/onpatrol.jpg); border: 1px none #000000;
}
#block{
background: white; position:absolute; left:100px; top:0px; width:798px; height:632px; z-index:2; overflow: auto; filter:alpha(opacity=45);-moz-opacity:.45;opacity:.45;
}
#main{
position:absolute; left:100px; top:0px; width:792px; height:626px; z-index:2; overflow: auto; margin-left: 5px; margin-right: 5px; margin-top: 1px; margin-bottom: 1px; font-size: 1em;
}
So that Main ends up holding all the text for the posts, floating on top of everything else. The numerous calls to opacity code for the BLOCK DIV are due to the different handling between Mozilla and IE. It even works in Opera and Konqueror. Nice trick, but not original; I learnt it years ago from a guru.

I have been considering the idea of turning the right hand menu into a drop-down dhtml style one, but it's a lot of work to integrate it cleanly. That would remove the need for fluffing with screen resolutions too, although I would still have to narrow things a bit to be across the board. I don't want to think about those with limited screen devices just yet: I do have a life outside this interweb thingy, it just doesn't seem like it sometimes. :lol:

Back to top


Form is loading...