News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Extremely annoying border-radius not working properly with some browsers.

Started by Ninja ZX-10RR, November 03, 2014, 06:21:37 PM

Previous topic - Next topic

Ninja ZX-10RR

Hi everyone, strange enough I make 2 threads in a row... Well I need some VERY experienced user as regards themes and stuff because I have already posted in 2 other sites about this and nobody was able to help me, also because it's really tricky and is directly related to browsers integration... Now let's see.

Here is my forum: http://vige.altervista.org/forum/index.php
Now if you see it with IE, Maxthon, Chrome or any browser that is Chrome-based you will see that most of it has border-radius: 15px; enabled, HOWEVER if you see it with FF or any other browser it will very much likely NOT look the same way - it will look squared.
Now I have been told on Italian Mozilla Forum (in which I originally posted, since I was sure that Mozilla was being the problem) that the other browsers are bugged and that's the only reason I see the rounded edges on some of them. The fact is that I want all damn browsers to show the rounded-edges, not just some of them. You will be like "ok there is no problem let's just edit the css here and there and then it will work", no, that's not just easy as that, many people have tried and all of them failed. The fact is that if you edit the css to debug all browsers either the memberslist (that I want squared since if it has rounded edges it sucks hard and it is impossible to read) or the topics list (same here) or even the who's online list get bugged, it could be the colors being bugged or even the rounded edges being everywhere and not just where I want them.
I'm not sure about the .css classes that I should be creating, if I should... Nor where to apply them and how in the template... Be careful though there is also the shoutbox (guests need to uncollapse it) that has rounded edges...
Thanks in advance for any help, it would be much appreciated! :D

P.s. Before telling me to ask the theme author please note that this is the default theme, edited in its .css I'm attaching my index.css (and many more php files that might be looked at) in order for you to make edits if you feel like being able to.

EDIT: attachments removed to save space from the server since they are useless having packed the whole theme as per smart request. :)
Quote from: BeastMode topic=525177.msg3720020#msg3720020
It's so powerful that on this post and even in the two PMs you sent me,you still answered my question very quickly and you're apologizing for the delay. You're the #1 support I've probably ever encountered man, so much respect for that. Thank you, and get better soon.

I'll keep this in my siggy for a while just to remind me that someone appreciated what I did while others didn't.

♥ Jess ♥

STOP EDITING MY PROFILE

ARG01

It would probably be easier for someone to fix if you just zip and attach the entire theme. Without installing it on a test server would make it difficult to examine thoroughly.
Just an idea.  ;)
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

Gwenwyfar

I've seen that bug a couple times... but I don't know what exactly causes it since I rewrote the code on the cases I saw it. It is most likely related to how both browsers interact/interpret border radius. On the cases I saw it was ff working and chrome not working though.

But it seems to be essentially the same, some code is conflicting with it somehow, if you disable your css and put a border-radius in it it'll work just fine (as it should normally). Just need to find what is the code conflicting or what's the source of the issue :P Go around disabling things till it works, then change the bit of code that was the problem should probably work.
"It is impossible to communicate with one that does not wish to communicate"

Ninja ZX-10RR

@SimpMode It should work, try the attached. EDIT: too large to upload xD I've put that on onedrive: http://1drv.ms/10gbEKQ
And thanks for the reply SimpMode, you know that I appreciate it :)

@Fortytwo yes that is basically what a boatload of people tried to do already (including me) without actually being able to completely nail it, there is ALWAYS something that doesn't work for some reason. :( thank you too anyway.
Quote from: BeastMode topic=525177.msg3720020#msg3720020
It's so powerful that on this post and even in the two PMs you sent me,you still answered my question very quickly and you're apologizing for the delay. You're the #1 support I've probably ever encountered man, so much respect for that. Thank you, and get better soon.

I'll keep this in my siggy for a while just to remind me that someone appreciated what I did while others didn't.

♥ Jess ♥

STOP EDITING MY PROFILE

Gwenwyfar

Yeah, that's complicated when there's so much code around. What did they try that made it work but become wrong on other places? Could be helpful to know.

Just from editing things in inspector around I can't think of any special selector that would work, it won't get rounded even if you apply the style directly inline unless you disable some of the css. But then again... sometimes the browser acts differently from code loaded and code edited on inspector :P Sometimes it works on inspector only, sometimes from code loaded only.
"It is impossible to communicate with one that does not wish to communicate"

Ninja ZX-10RR

http://www.italiansmf.net/forum/index.php?topic=1139.0

http://forum.mozillaitalia.org/index.php?topic=62495.0

Both in Italian though, you might want to put those into Google translator, they are not very hard to translate. (One of the users who replied on Mozilla is a total jerk btw -.-)
Quote from: BeastMode topic=525177.msg3720020#msg3720020
It's so powerful that on this post and even in the two PMs you sent me,you still answered my question very quickly and you're apologizing for the delay. You're the #1 support I've probably ever encountered man, so much respect for that. Thank you, and get better soon.

I'll keep this in my siggy for a while just to remind me that someone appreciated what I did while others didn't.

♥ Jess ♥

STOP EDITING MY PROFILE

Gwenwyfar

The mozilla guy was right though, the border IS there, and functioning as it should, but you can't see it!

Just remove the background color from the rows and from the table, and add the background to tds, should work. If you need help with that I can write the css for you.

Good that it was just a visual problem and not a bug after all :) Totally different problem than that chrome border not working on my case :P
"It is impossible to communicate with one that does not wish to communicate"

ARG01

If that don't work, what happens if you change the color here?

.content {
    background-color: #ffffff;
    border: medium none;
    margin: 0;
    padding: 0.5em 1.2em;
}
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

Ninja ZX-10RR

@Fortytwo I tried to do that and something very bad happened, I can't remember what but it was not working properly in other places...

@SimpMode I've set this .content
{
background-color: #555555
padding: 0.5em 1.2em;
margin: 0;
border: medium none;
}
instead of the original .content
{
        padding: 0.5em 1.2em;
margin: 0;
border: none;
        background-color: #FFFFFF
}
and actually nothing happened... Wtf... (flushed Cloudflare, forum and browser cache...)

Quote from: BeastMode topic=525177.msg3720020#msg3720020
It's so powerful that on this post and even in the two PMs you sent me,you still answered my question very quickly and you're apologizing for the delay. You're the #1 support I've probably ever encountered man, so much respect for that. Thank you, and get better soon.

I'll keep this in my siggy for a while just to remind me that someone appreciated what I did while others didn't.

♥ Jess ♥

STOP EDITING MY PROFILE

Gwenwyfar

If you just remove the color it will affect many other areas of the forum, yes.

Just add this then:

#boardindex_table .content, #boardindex_table tr  {
   background-color: transparent; }

#boardindex_table td.info, #boardindex_table td.lastpost {
  background-color: #F0F4F7; }

The id should make the priority higher and override the general colors, but if it doesn't, move that to the bottom of the css or add an "!important" in there on the first one.
"It is impossible to communicate with one that does not wish to communicate"

ARG01

No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

Ninja ZX-10RR

#11
Almost there dude that was the closest test so far. The orange boxes are not rounded both in who's online list and in the members list, works anywhere else so far, EDIT: also in the error messages caused by a member (the ones in the profile view). Also noted that the indentation of the things in the account settings etc is *extremely* to the left now, probably one of those idk :/
EDIT 2: also the shoutbox is being cut in a quite not good looking way at its edges :/
EDIT 3: it's complicated to spot all of those...
EDIT 4: also some orange boxes in the banlist and moderation log don't seem to work (I could go with the admin errors but I'd like to fix the mod ones..)
EDIT 5: also topic solved log, warnings log, watched members log the orange boxes are not rounded...
EDIT 6: nice, just spotted a bad database error bug that I hadn't noticed before... Nice day...
Quote from: BeastMode topic=525177.msg3720020#msg3720020
It's so powerful that on this post and even in the two PMs you sent me,you still answered my question very quickly and you're apologizing for the delay. You're the #1 support I've probably ever encountered man, so much respect for that. Thank you, and get better soon.

I'll keep this in my siggy for a while just to remind me that someone appreciated what I did while others didn't.

♥ Jess ♥

STOP EDITING MY PROFILE

Gwenwyfar

I can't see many of those areas but they seem to be a issue of their own. That code should only affect boardindex table and nothing else, unless the ID slipped into those other areas somehow :P

The shoutbox was already cut from the beginning in here.

Edit: Could this be part of those issues? Ran the css validator to see if there wasn't any bad tags and found this:

table.table_list td, table.table_list th
{
   //Mozilla forum Ninja edit padding: 5px;
}

The padding could be this:

.content
{
   background-color: #555555
   padding: 0.5em 1.2em;
   margin: 0;
   border: medium none;
}

Forgot to readd the semicolon when you changed back I think.

Edit2: One more:

The part you added my code, that's php comment, css comment is /* comment */ ;)

For the cut orange bars :

div.cat_bar {
    background: none no-repeat scroll 0% 0% #FF7A00;
    padding-left: 9px;
    height: 31px;
    overflow: hidden;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

Change that to

div.cat_bar {
    background: none no-repeat scroll 0% 0% #FF7A00;
    padding-left: 9px;
    height: 31px;
    overflow: hidden;
    border-radius: 15px;
"It is impossible to communicate with one that does not wish to communicate"

Ninja ZX-10RR

/*sadface goes here*/
That's what working with php does... Sigh. I fixed the comment issues. Thanks :/

What's wrong with that padding anyway? It's exactly the same in my code...

The orange bars no that is on purpose, those are correct like that, I wanted the upper edges to be rounded and the lower ones to be squared because they fit much better, i.e. the shoutbox ;) and I will fix its template then, it's something wrong in it, idk where and how to do it but I will have a look at it too. Thanks :)
The fact is that somewhere it works and somewhere it doesn't, it's just where it doesn't that I need help, I know the differences between top-right, bottom-left and so on :) (at least this one thing I know it! xD)
Quote from: BeastMode topic=525177.msg3720020#msg3720020
It's so powerful that on this post and even in the two PMs you sent me,you still answered my question very quickly and you're apologizing for the delay. You're the #1 support I've probably ever encountered man, so much respect for that. Thank you, and get better soon.

I'll keep this in my siggy for a while just to remind me that someone appreciated what I did while others didn't.

♥ Jess ♥

STOP EDITING MY PROFILE

Gwenwyfar

Yes, that's why its not working, need to add the " ; " at the end of the color hex :P

Ah, thought that's one of the things you were having problems with, the shoutbox seems just fine here for me.

And the rounded thing on memberlist you mean the table orange bar being rounded? (the one just above the content) If so, that's really a separate issue, though its the same problem in essense. I can make a similar code for those if that's the problem, just let me know all the specific tables that you want to do that with, or is it all of them?

The problem is simply the background of the table being the same as the table cells, so the borders are rounded, but you can't see it. The table headings have the same thing.
"It is impossible to communicate with one that does not wish to communicate"

Sir Osis of Liver

You might try this.  I've used it to make IE8 display radiused corners and drop shadows (normally it doesn't).  Don't know if it would solve your problem with other browsers.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Ninja ZX-10RR

Ugh, a mess happens if I do that. Practically the shoutbox background gets black (that's the color I had set) and I can see some black and squared (barely visible) edges in the columns of the board description and so on... Getting rid of it.

Yep I meant the memberlist orange table being rounded. I remember that I tried to do that but another mess occurred... :( I would like the 2 top radius being rounded there... Listing all the tables is quite trivial... I just want it to be overall rounded but still without making a mess in topics or in the topics list or whatsoever list.
Also the profile indentation... Wtf happened? :(
EDIT: just figured out some things. If I put it on without commenting it out it makes a mess, including messing up the shoutbox and the profile, deactivating it solved all of those :D (except the rounded orange edges).

@krash Thanks :) still the problem is to where and what to do, not exactly how. We know how to tweak the border-radius it just seems that the css is stubbornly against doing it :P
Quote from: BeastMode topic=525177.msg3720020#msg3720020
It's so powerful that on this post and even in the two PMs you sent me,you still answered my question very quickly and you're apologizing for the delay. You're the #1 support I've probably ever encountered man, so much respect for that. Thank you, and get better soon.

I'll keep this in my siggy for a while just to remind me that someone appreciated what I did while others didn't.

♥ Jess ♥

STOP EDITING MY PROFILE

Gwenwyfar

Happens, sometimes a single bit of css is connected to important parts of styling all over, you change it and everything goes amok :P

This is for all tables then, I think it should be for all those with the same styling as memberlist:

.table_grid tr {
   background-color: transparent;
}

.table_grid th {
   background-color: #FF7A00;
}

.table_grid .first_th {
   border-radius: 15px 0 0 0;
}

.table_grid .last_th {
   border-radius: 0 15px 0 0;
}

Make sure you add that to the bottom, if it doesn't work then you'll need to add !important on one (or three) of the rules.
"It is impossible to communicate with one that does not wish to communicate"

Ninja ZX-10RR

It worked again except that now the moderation log (as well as topic solved log etc) has a black background :/ that's the only issue I could find in the first minute - edit: as well as the error log and the package manager.
Quote from: BeastMode topic=525177.msg3720020#msg3720020
It's so powerful that on this post and even in the two PMs you sent me,you still answered my question very quickly and you're apologizing for the delay. You're the #1 support I've probably ever encountered man, so much respect for that. Thank you, and get better soon.

I'll keep this in my siggy for a while just to remind me that someone appreciated what I did while others didn't.

♥ Jess ♥

STOP EDITING MY PROFILE

Gwenwyfar

Black background in the heading or the content? That code doesn't change anything in the content, and the heading should be the normal orange, gave a look here on my forum and the table for moderation is pretty much the same as the memberlist etc. See if you don't have anything changing the css in there.

Edit: And the default borders are taking priority, if you want only the top border to be rounded you can change this bit:

.table_grid .first_th {
   border-radius: 15px 0 0 0 !important;
}

.table_grid .last_th {
   border-radius: 0 15px 0 0 !important;
}

Edit2: oops, I think I found the problem with the black backgrounds, forgot a small piece of code there, sorry.

Change this:

.table_grid thead tr {
   background-color: transparent;
}
"It is impossible to communicate with one that does not wish to communicate"

Ninja ZX-10RR

Quote from: BeastMode topic=525177.msg3720020#msg3720020
It's so powerful that on this post and even in the two PMs you sent me,you still answered my question very quickly and you're apologizing for the delay. You're the #1 support I've probably ever encountered man, so much respect for that. Thank you, and get better soon.

I'll keep this in my siggy for a while just to remind me that someone appreciated what I did while others didn't.

♥ Jess ♥

STOP EDITING MY PROFILE

Gwenwyfar

Yeah, my fault on that, sorry, just edited the last post before you posted, give a look :P
"It is impossible to communicate with one that does not wish to communicate"

Ninja ZX-10RR

Didn't work either xD and I can't see any changes, should I put it like !important.table_grid thead tr {
   background-color: transparent;
?
EDIT: just tried, doesn't seem to change a thing...
This is the final snippet of code that I have, just to be clear ;)
/*Fortytwo*/
#boardindex_table table {
   background-color: transparent; }

#boardindex_table tr {
  background-color: transparent; }

#boardindex_table td.info, #boardindex_table td.lastpost {
  background-color: #F0F4F7; }

/*Fortytwo 2*/
.table_grid tr {
   background-color: transparent;
}

.table_grid th {
   background-color: #FF7A00;
}

.table_grid .first_th {
   border-radius: 15px 0 0 0;
}

.table_grid .last_th {
   border-radius: 0 15px 0 0;
}
.table_grid thead tr {
   background-color: transparent;
}
Quote from: BeastMode topic=525177.msg3720020#msg3720020
It's so powerful that on this post and even in the two PMs you sent me,you still answered my question very quickly and you're apologizing for the delay. You're the #1 support I've probably ever encountered man, so much respect for that. Thank you, and get better soon.

I'll keep this in my siggy for a while just to remind me that someone appreciated what I did while others didn't.

♥ Jess ♥

STOP EDITING MY PROFILE

Gwenwyfar

I guess that wasn't clear enough, sorry. Here's how it should look for the part 2 ;)

/*Fortytwo 2*/
.table_grid thead tr {
   background-color: transparent;
}

.table_grid th {
   background-color: #FF7A00;
}

.table_grid .first_th {
   border-radius: 15px 0 0 0;
}

.table_grid .last_th {
   border-radius: 0 15px 0 0;
}
"It is impossible to communicate with one that does not wish to communicate"

Ninja ZX-10RR

OMG how did you do that?!

That's plain awesome no need to say sorry I'm just shocked for such a speed, you made it where a lot of people couldn't. I really owe you. I'm so happy you literally made my day, I was stuck with this thing since a few weeks and you just solved it in no time... Now I can finally start to add more selectable colors by packing up new themes, I might pack some of those up and distribute it I don't know (hope that I can use those changes)... And all thanks to you.

once again, even if it won't be enough.

I will get back here if I see any bug but I really don't see any...
Quote from: BeastMode topic=525177.msg3720020#msg3720020
It's so powerful that on this post and even in the two PMs you sent me,you still answered my question very quickly and you're apologizing for the delay. You're the #1 support I've probably ever encountered man, so much respect for that. Thank you, and get better soon.

I'll keep this in my siggy for a while just to remind me that someone appreciated what I did while others didn't.

♥ Jess ♥

STOP EDITING MY PROFILE

ARG01

No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

Gwenwyfar

Glad its all fixed then, just let us know in case you see any more bugs  ;D

I probably wouldn't have noticed (or at least taken some time to notice) if it wasn't for that post on mozilla though, so you can call it a "team" solution if you will ;)

With the problem known its just plain old selector play, but it can do wonders if you know how they work. Even if you don't know how they work, its enough to have in mind that you can easily select any combination of elements you want, then do something with that selection :)
"It is impossible to communicate with one that does not wish to communicate"

Ninja ZX-10RR

That's my problem - I don't know how they really work, I am (perhaps I should say was, since I totally quitted..) basically a supporter and I know a very little php just to fix bugs or editing here and there. But .css... Still learning :) I guess I will have to check some guides about it, I just don't have time because my project is really about to take off thanks to an awesome former dev that is helping me very much to get a payment system up and running.

Btw thanks again :D
Quote from: BeastMode topic=525177.msg3720020#msg3720020
It's so powerful that on this post and even in the two PMs you sent me,you still answered my question very quickly and you're apologizing for the delay. You're the #1 support I've probably ever encountered man, so much respect for that. Thank you, and get better soon.

I'll keep this in my siggy for a while just to remind me that someone appreciated what I did while others didn't.

♥ Jess ♥

STOP EDITING MY PROFILE

Gwenwyfar

No problem, you're welcome :)

When you decide to start learning more about it I can try to help you out if you want, almost done with my own forum as well soon ;)

(Try because I'm much better at coding than at explaining/teaching anything :P But its pretty simple once you get the hang of it, only some selectors are a bit more tricky to get what they do)
"It is impossible to communicate with one that does not wish to communicate"

Ninja ZX-10RR

Link? Perhaps I can learn something already from there... :) and that's exactly the reason why I surf forums on the internet, I inspect a lot of elements :P
Quote from: BeastMode topic=525177.msg3720020#msg3720020
It's so powerful that on this post and even in the two PMs you sent me,you still answered my question very quickly and you're apologizing for the delay. You're the #1 support I've probably ever encountered man, so much respect for that. Thank you, and get better soon.

I'll keep this in my siggy for a while just to remind me that someone appreciated what I did while others didn't.

♥ Jess ♥

STOP EDITING MY PROFILE

Gwenwyfar

"It is impossible to communicate with one that does not wish to communicate"

Ninja ZX-10RR

For the sake of the discussion it looks plain awesome :D I respect your willingness not to publish the link here though.
Quote from: BeastMode topic=525177.msg3720020#msg3720020
It's so powerful that on this post and even in the two PMs you sent me,you still answered my question very quickly and you're apologizing for the delay. You're the #1 support I've probably ever encountered man, so much respect for that. Thank you, and get better soon.

I'll keep this in my siggy for a while just to remind me that someone appreciated what I did while others didn't.

♥ Jess ♥

STOP EDITING MY PROFILE

Advertisement: