PDA

View Full Version : css glitch with tabs and pagination


Hall of Famer
03-28-2012, 07:05 PM
The css font style and size for tabs/pagination mess up with the main css
This may not be a glitch that causes serious malfunction to sites, but can hurt your eyes much. The css of tabs and pagination does not seem to be compatible with the main theme's, as the font style and size are messed up in profile tabs and whenever pagination class is used. The tabs css also makes drop-down menu disappear magically, for unknown reason. I've assigned Nyxi to fix this bug, hopefully it will be done before Mys v1.3.1 release.

Nyxi
03-28-2012, 08:06 PM
Taking a look at the following CSS files:
- menu.css
- online.css
- pagination.css
- tabs.css

Looks like there are conflicting font family & size calls in each file. I've removed the conflicting items and am uploading the cleaned versions. If these new versions do not work, please feel free to PM me or comment with information.

solskenn
03-28-2012, 08:59 PM
I'm assuming we just replace the old with the new. I'm trying it now. I'll letcha know how it works ^,^

solskenn
03-28-2012, 09:07 PM
The dropdown menu for "view profile" page is still vanishing. If it helps you solve /that/ problem, when I looked at the page source earlier it was missing something to do with "if ie.. dropdown css" or something like that..

I was using main, gemstone style. Two of the drop down menus were on a row beneath the others. I managed to fix that for my own site by going into the css thing for style_gemstone and finding "wrap =650px" or something like that.. and changing it to 71% makes it work on all the pages especially if the browser your using is set to "full screen".

For further advice in fixing some things, I discovered two links that you couldn't really edit the link by the admin panel. The text box wouldn't work for some reason. However if you go into the database and find the thing for the links (i think it'd be myadopts_links or something like that) You can edit it there, even change the "parent link" to another one, which will cause the link to appear in a different drop down menu.

hope those helps someone..

Nyxi
03-28-2012, 09:41 PM
There is a known issue with IE and css based drop down menus. IE is probably the least usable browser for code. Most have upgraded to either Google Chrome or Firefox because they actually work.

Glad you could find a few fixes. I tried to make it easy to work with.

Silver Kitsune
03-28-2012, 10:03 PM
Ohhh where are the new files?

Edit: duh. Found them :)

Silver Kitsune
03-28-2012, 10:08 PM
I still lose the top menu when viewing profiles :/

Nyxi
03-28-2012, 10:20 PM
All right, I'll see what's going on with the top menu. I wonder if moving it down below the header image would change anything.

Silver Kitsune
03-28-2012, 10:48 PM
I moved it... nothing changed :/ But I do like it better there :p

solskenn
03-28-2012, 11:27 PM
I switched from Firefox to Chrome about a year ago.. never looked back xD.

I think the problem is with the php or something to do with the profile page/script. Cause as I stated earlier it didn't have that "if ie ..." thing, but a couple of other pages did (I compared it to two others wondering if I could figure out how to fix that problem) the page source actually had quite a bit less to it than the other pages.

The only other bug I've noticed is (and i'm not sure if this was there before or not) when I go to the page "member list" all the link fonts get like.. huge instead of staying the same size as the other page. I haven't yet looked to see if I can figure out how to fix it on my own as I've been busy moving links around and changing their names and where they go. If I can't fix it, its such a terribly small thing that I'm not that worried on it. (I only mentioned it here cause, as I said, I wasn't sure if it was like that before or not) edit: and members online.

Hall of Famer
03-29-2012, 12:09 AM
Well the profile tabs incompatibility with drop down menu may not be a simple css glitch. If there is any PHP programming errors in it I will give a look and see if I can fix that. If the problem is with the javascript file then we probably are doomed until I learn AJAX. Its a pity though, I actually planned to make it possible for admins to create 'tabbed pages' through ACP, but not if it messes up drop down menu at this point.

Silver Kitsune
03-29-2012, 01:47 AM
It's the css/tabs.css

I just removed it to see and it worked.

When I remove


.hide { position: absolute; top: -9999px; left: -9999px; }

It loads and then disappears... if any of this helps :/

Nyxi
03-29-2012, 09:26 AM
Eh... Hm. I'll see what can be done for this. Never had any problems with it myself.

Nyxi
04-13-2012, 02:08 PM
For a new try on the main CSS file replace the html {} code with the following:
/* Setting Up Basic Styles */

body{
background:#222;
font-family:sans-serif;
color:#333;
font-size:12px;
}

Silver Kitsune
04-13-2012, 02:26 PM
This is suppose to fix the disappearing bar? If so, nope :(

Nyxi
04-13-2012, 04:49 PM
Hm.. Hoffie and I think it may be in the script not the css... so we'll be looking into it.

Hall of Famer
04-13-2012, 04:54 PM
Yeah I see a possibility for that. Since it has AJAX in it, I may not be able to fix this myself.

Hall of Famer
09-14-2012, 02:07 AM
Update: The pagination css glitch is already fixed, I did it by modifying the main css. The disappearance of navtabs from user profile page is still present though, and it seems to be beyond my ability to resolve.

Hall of Famer
04-23-2013, 11:40 PM
Another update: The css glitch with profile tab/dropdown menu is fixed in Mys v1.3.4, the tabs will no longer make dropdown menu disappear any longer. I will post a solution later.

bobbybig
04-24-2013, 07:02 PM
Another update: The css glitch with profile tab/dropdown menu is fixed in Mys v1.3.4, the tabs will no longer make dropdown menu disappear any longer. I will post a solution later.

Thank you :)

I am working on the map plug in and I am working on a few js files and was having them argue with the tabs.js file. Well not argue with it but you understand I hope. calling on any js library before the one used for the profile tabs seemed to also break the profile tabs. So I hope that in the future I can lend a hand here to resolve js problems in the main source code. My skills are at your disposal.

lol give me a few versions to get familiar with the codes use of math, classes, and functions and I will jump right in to lend a hand where I can.

We may need to come up with some set default required file list to call on pre theme head. that all themes need to follow to be able to be used so that theme coders understand what files are being loaded and called on from the source. I have found that this does resolve many conflict issues from source to extended code writes and re-writes. I will leave this topic here on this comment for fear of diving too deeply into what all I would like to talk about on code at this time.

bobbybig
04-24-2013, 07:07 PM
There is a known issue with IE and css based drop down menus. IE is probably the least usable browser for code. Most have upgraded to either Google Chrome or Firefox because they actually work.

Glad you could find a few fixes. I tried to make it easy to work with.

0.o is all I can say. lol yes I only use IE and always only will. ;) joke reply don't take offence please.

Hall of Famer
04-25-2013, 03:14 PM
Well I've uploaded the menu class and menu css that will not conflict with the tabs css. The problem here is that the tabs css use the div class called .hide, which was also present in menu css. For this reason Id recommend all of you to be aware of this and try to name your div class by another name rather than .hide, which is already 'booked' by the tabs css.

bobbybig
04-27-2013, 01:12 AM
Well I've uploaded the menu class and menu css that will not conflict with the tabs css. The problem here is that the tabs css use the div class called .hide, which was also present in menu css. For this reason Id recommend all of you to be aware of this and try to name your div class by another name rather than .hide, which is already 'booked' by the tabs css.

Yes HOF thank you very good point. Yes please people when working in css and making class and id names for plug ins and or themes and what not, try to use unique naming to not cause conflicts.

On the source this should also be considered to not cause standard css conflicts. (not a huge demand, but just a thought to keep in mind.)

I will check my use of the .hide class in my upcoming site map plug in.

again thank you for this info HOF it is very helpful

Hall of Famer
04-27-2013, 02:48 PM
Well one possible way to get by this is to use prefixing, say .menu_hide and .tabs_hide. In PHP there is this concept called namespace, which is nonexistent in the world of css. For this reason, Id rather consider prefixing or changing the class name to an uncommon one.

bobbybig
04-28-2013, 02:50 AM
Well one possible way to get by this is to use prefixing, say .menu_hide and .tabs_hide. In PHP there is this concept called namespace, which is nonexistent in the world of css. For this reason, Id rather consider prefixing or changing the class name to an uncommon one.

lol truly now your going to love my upcoming map source as I implemented a js math set that suffixes "_over" onto the class names to not use the standard :hover feature of css. it is very interesting concept to handle sprites in a way not standard to the usual source code uses, but secures the sprites and hover abilities in a way that makes for a much stronger class structure. you will see it. The whole thing will be available and open source to the community here, and rightfully so I am designing the whole thing just for this community so they should have it openly. lol trust that I do not suggest using js to prefix the classes in the main script source but it is very interesting and it can be done using a very small js code lol if someone was so inclined to need it to.

lol it would have to be modified but here is the simple js for the hover over class name changes

function onMouseOver(){ this.className += '_over'; }
function onMouseOut(){ this.className = this.className.replace('_over', ''); }