2 annoying problems!

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
James

2 annoying problems!

Post by James »

Hey guys, this is my forst post on your forum so please be gentle ;)

Ive got 2 problems as can be seen here: http://hydrogen.chfs.org.uk/chfs

The first is with the menu, when you hover over a button in the menu with no sub pages it works fine, but when you hover over a button with sub pages it seems to add a 2px gap. See what I mean? Ive gotta say that I have implemented the IE7 hack to fix the white space bug with sub pages here: http://forum.cmsmadesimple.org/index.php/topic,8853.0.html but it was doing it before I implemented that hack and im sure its not the cause.

The other problem I have is with there being to much content on a page like this: http://hydrogen.chfs.org.uk/chfs/index.php?page=Syllabuses (scroll to the bottom to see what I mean).

Any advice greatly appreciated,
James Clements
ID2020
Forum Members
Forum Members
Posts: 39
Joined: Wed Feb 08, 2006 12:47 am

Re: 2 annoying problems!

Post by ID2020 »

The first problem does not appear on my config. Win2k. IE6. ??? Mayby it's a IE7 bug / fault.

The second thing I think you can set the backgroundcolor to the blue at the end of the picture you are using on the background.

Greetz ID2020.
James

Re: 2 annoying problems!

Post by James »

Ok, i fixed the second problem, thanks ID2020, still have the first though. It is an IE7 problem. >:(
3dcandy

Re: 2 annoying problems!

Post by 3dcandy »

yup, all appears fine here with Firefox 2!
Greg
Power Poster
Power Poster
Posts: 598
Joined: Sun Sep 26, 2004 6:15 pm

Re: 2 annoying problems!

Post by Greg »

Greg
James

Re: 2 annoying problems!

Post by James »

Ok, i fixed the problem of the 2px gap IE7 moves the buttons down by when you hover over them. In the main stylesheet for the theme/skin im using (andeas03Lft : andreas03Lft) is:


.sidelink:hover,.menuheader{
background:#fff url(uploads/andeas03Lft/gradient2.png) repeat-x;
color:#222;
border-top:1px solid #ddd;
border-right:1px solid #888;
border-bottom:1px solid #888;
border-left:1px solid #ddd;
text-decoration:none;

I commented out:

.sidelink:hover,.menuheader{
background:#fff url(uploads/andeas03Lft/gradient2.png) repeat-x;
color:#222;
/*border-top:1px solid #ddd;
border-right:1px solid #888;
border-bottom:1px solid #888;
border-left:1px solid #ddd;*/

text-decoration:none;

Comment that out and no more gap :D

Hope this helps someone!
Locked

Return to “Layout and Design (CSS & HTML)”