CSS Same style - 2 different output !?

  • George L.
  • Bronze Member
  • Bronze Member
  • George L.
  • Posts: 2209
  • Loc: Malaysia

Post 3+ Months Ago

Code: [ Select ]
 
.bottombar {
        padding: 0px;
    text-align: center;
    color: #555555;
        font-size: 1.1em;
        background-color: #fff58a;
        border-top-style: outset;
        border-bottom-style: outset;
        border-left-style: inset;
        border-right-style: inset;
        border-top-width: 16px;
        border-bottom-width: 3px;
        border-left-width: 3px;
        border-right-width: 3px;
        border-color: #008efb;
}
 
 
  1.  
  2. .bottombar {
  3.         padding: 0px;
  4.     text-align: center;
  5.     color: #555555;
  6.         font-size: 1.1em;
  7.         background-color: #fff58a;
  8.         border-top-style: outset;
  9.         border-bottom-style: outset;
  10.         border-left-style: inset;
  11.         border-right-style: inset;
  12.         border-top-width: 16px;
  13.         border-bottom-width: 3px;
  14.         border-left-width: 3px;
  15.         border-right-width: 3px;
  16.         border-color: #008efb;
  17. }
  18.  
  19.  


The result is fine, but there are 2 different styles for Admin; and registered users.

What can i do so only 1 style is displayed!?

lol

:)

Thanks in advance.
Attachments:
registered.JPG

Registered users page

Attachments:
admin.JPG

Admin page

  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Heh. My suggestion would be...

Code: [ Select ]
# .bottombar {
#         padding: 0px;
#         text-align: center;
#         color: #555;
#         font-size: 1.1em;
#         background-color: #fff58a;
#         border:1px solid #000;
# }
  1. # .bottombar {
  2. #         padding: 0px;
  3. #         text-align: center;
  4. #         color: #555;
  5. #         font-size: 1.1em;
  6. #         background-color: #fff58a;
  7. #         border:1px solid #000;
  8. # }


Hehehehe :)


//Seriously, I wouldn't try to use borders as a means of graphic design.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Which one is correct?
  • George L.
  • Bronze Member
  • Bronze Member
  • George L.
  • Posts: 2209
  • Loc: Malaysia

Post 3+ Months Ago

I'd just discovered that it's something to do with different browsers.

IE is the first picture, while FF, Opera and Safari shows the second one.


...What do you think I should do?

The second 1 is the ideal one, Bogey...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

It must be a conflict with two CSS styles that define the same attribute to the same class...

If you have Notepad++ installed and all of your CSS files opened you can search within those files for the class you are editing. This way, you are able to see which one has borders/background colors already defined in them.
  • George L.
  • Bronze Member
  • Bronze Member
  • George L.
  • Posts: 2209
  • Loc: Malaysia

Post 3+ Months Ago

Notepad++..
Uh, free? Can I see the changes I make instantly?

sounds great..

I'm just thinking to just allow this to happen since either one doesn't look that bad.
  • George L.
  • Bronze Member
  • Bronze Member
  • George L.
  • Posts: 2209
  • Loc: Malaysia

Post 3+ Months Ago

DM: thanks I'm going to test yours later, not sure if that's what I'd use...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Notepad++ is free... just google Notepad++ and the first result would most likely be the right one.
  • George L.
  • Bronze Member
  • Bronze Member
  • George L.
  • Posts: 2209
  • Loc: Malaysia

Post 3+ Months Ago

Thanks, Bogey I'd play with it later..

How about your site??
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

George L. wrote:
Thanks, Bogey I'd play with it later..

How about your site??

No problem. Any time :D

[off-topic]

It's doing great... I took off the link because it's not finished yet and replaced with fun facts I found on the web :lol:

I'm re-styling the phpBB3 forum to fit my forum. I'm basically done with it... just redoing some minor details and integrating my non phpBB files to fit with phpBB files. About 75% done :P Can't wait until I'm fully done.

Also waiting for some phpBB3 hack to come out... the ticket system you find on hosting services :lol:

Sorry to get so braggy about my site :lol: you asked (my excuse).
  • George L.
  • Bronze Member
  • Bronze Member
  • George L.
  • Posts: 2209
  • Loc: Malaysia

Post 3+ Months Ago

I don't know how to test the CSS file I've made in notepad++, can I just run it??

//No bragging at all, it's normal positive vibe you must have to build your site :)
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

What are you talking about? All you have to do is create a test page using those styles and there you go... testing them :)
  • George L.
  • Bronze Member
  • Bronze Member
  • George L.
  • Posts: 2209
  • Loc: Malaysia

Post 3+ Months Ago

Do I need additional plugins??

I don't get what you mean by test page and test it...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

You just create another HTML page... no plug in other than your brain

something like

<html>
<head>
<title>title</title>
</head>
<body>
<div class="style">
</div>
</body>
</html>
  • George L.
  • Bronze Member
  • Bronze Member
  • George L.
  • Posts: 2209
  • Loc: Malaysia

Post 3+ Months Ago

Ok, thanks I'm going to use my brain with this. Got no other choice, but to use my most powerful weapon. You asked for it.

:)

thanks,
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

lol no problem

You got it all figured out?
  • George L.
  • Bronze Member
  • Bronze Member
  • George L.
  • Posts: 2209
  • Loc: Malaysia

Post 3+ Months Ago

Hey Bogey, no, I didn't really dwell into it as I was on something else.

Besides, I was just gonna post something here to say that; maybe I am wrong, I think it's common to see it that way, no matter what kind of editor used, nothing would change how a 'browser' would interpret it and display, for instance I had all four different browsers opened and noticed that each color had slight or variant differences, some were large variances, not only using my codes but viewing other websites. So I decided that I'd leave it at that. :)

//a bit off topic
I think notepad ++ is another web editor which is good to use, I'd love to learn it more future but considering why they'd posted something controversial 'boycott China olympic' really saddens me for a bit. I won't go into any judgement as it's good or bad, but I'd just wait and see..(whatever I'm waiting) :)


Hey man, Thanks for everything, i should go now.

should I say good night?..

:)
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I'm not really sure why they would post that but I didn't really thought about it. I just downloaded Notepad++ because it was recommended to me and now I can't use anything BUT Notepad++ :lol:

I'm so used to the auto-indentation and Ctrl+Tab for un-indentation that everytime I use Window's Notepad I try to do the same thing :lol:

No problem. Hope that you would figure it out. Like I said, it could be a class defined in two different css files and you might have put an attribute that is already styled in the other definition of the same style.

Notepad++ lets you search within all opened files so you can select all of the CSS files you're editing, right click, click Edit with Notepad++ (Or just open Notepad++, click file>open, select all those files and click open).

Then you can go to search > Withing Files and there you go :) Results would be at the bottom of the program. You can close it at the top right of the bottom result pop up.

To go to a certain result just double-click on the result line and it would lead you to the file and the number and place the blinker (umm... the thing that you see in front of the letter when you type :P) and it would put a yellow start for future reference. To turn the star off (make it disappear) all you have to do is click on it.

Hope this helps a bit with this case :) Good night :D.
  • George L.
  • Bronze Member
  • Bronze Member
  • George L.
  • Posts: 2209
  • Loc: Malaysia

Post 3+ Months Ago

Yes, it's going to help I'm sure, thanks :)

All well goes to you :)

Post Information

  • Total Posts in this topic: 19 posts
  • Users browsing this forum: No registered users and 50 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.