Joomla Templates Club 406,261 posts

[soubira Friend soubiraJoin date: August 2011Posts: 16Downloads:0Uploads:5 Thanks: 7]

#173084

Hello,
I apologize in advance, the answer to my question has to be somewhere, but I can not find it.
I therefore use the template with Joomla 1.7.3 JA Kranos and after editing the file template.css, the rendering is not the same on Fixefox (there it is good), chrome (not good) and IE (either) .
How can I make my template compatible with all browsers? Several css files yes, but where to place the code to refer to these files depending on the browser?
A better solution to offer?

thank you very much

[n6rej Friend n6rejJoin date: November 2006Posts: 1040Downloads:0Uploads:63 Thanks: 79 Thanked: 145 times in 90 posts]

#436273

in t3 there are multiple .css files sometimes many for IE.. in this case it has one for IE and one for everyone else, both in the main .css folder. I’ll ask our css pro’s to give this a look.

[Blaine Friend BlaineJoin date: August 2007Posts: 1443Downloads:0Uploads:25 Thanks: 98 Thanked: 177 times in 154 posts]

#436274

I think the first thing to address here is clarifying what you mean by bad rendering.
Are we talking fonts, clickable links, what?
Thanks

[soubira Friend soubiraJoin date: August 2011Posts: 16Downloads:0Uploads:5 Thanks: 7]

#436345

Hello,
Then, I placed my hand menu, and the position sociallink logo “position: fixed”. But the rendering is not the same on different browsers. As if they did not have the same degree of pixels.
I suggest you visit: http://www.unibain.fr for realizing it.
Firefox: Ok
Chrome: not ok
IE: not ok
These are positions that I have fixed offset from the center of the site.
Here is the css code I hit:

/* Top social links */
.top-social { text-align: right; padding: 0 0 0 0; margin-top: -8px;position: fixed; margin-left: 0; background-color: #3A3A3B; width: 980px; }

.ico-social {
background: url(../images/social-icons.png) no-repeat;
height: 20px;
width: 20px;
display: inline-block;
margin-left: 5px;
}

.ico-social span { display: none; }

.ico-rsss { background-position: 0 0; }
.ico-rsss:hover { background-position: 0 -30px; }

.ico-facebooks { background-position: -25px 0; }
.ico-facebooks:hover { background-position: -25px -30px; }

.ico-twitters { background-position: -50px 0; }
.ico-twitters:hover { background-position: -50px -30px; }

/* NAVIGATION
——————————————————— */
/* Main Nav —*/
#ja-mainnav .main { background: #1a1a1a; position: fixed; margin-top: 25px; margin-left: 143px; }

/* Breadcrumbs —*/
#ja-navhelper .main {
text-transform: uppercase;
border-top: 5px solid #222;
border-bottom: 1px solid #111;
}

[pixelzombie Friend pixelzombieJoin date: August 2010Posts: 339Downloads:2Uploads:49 Thanks: 32 Thanked: 168 times in 107 posts]

#436400

Hi soubira,

you’ve got the fixed statement in the wrong classes. Please check the following classes and if they look different, make them look the same :p

#ja-mainnav needs the fixed statement.


#ja-mainnav {
line-height: 1;
position: fixed;
z-index: 11;
}


#ja-mainnav .main must be relative (default) and get rid of the strange margins.


#ja-mainnav .main {
background: #1A1A1A;
position: relative;
margin-top: 25px;
}


your logo must look like this, remove margins too.


h1.logo {
width: 215px;
height: 112px;
position: fixed;
top: 0;
}


And by the way, .top-social is too short :p


.top-social {
text-align: right;
padding: 0 0 0 0;
margin-top: -8px;
position: fixed;
margin-left: 0;
background-color: #3A3A3B;
width: 1000px;
}


I hope this solves your issue. If you run into problems, please let us know.

Cheers

Frank

2 users say Thank You to pixelzombie for this useful post

1. soubira
2. Blaine

[soubira Friend soubiraJoin date: August 2011Posts: 16Downloads:0Uploads:5 Thanks: 7]

#436410

Wow! Thank you! I did not understand everything but it works on major browsers.
It is a bug in the iPhone but I’m afraid there have no solution, though?
Again, thank you 🙂

[pixelzombie Friend pixelzombieJoin date: August 2010Posts: 339Downloads:2Uploads:49 Thanks: 32 Thanked: 168 times in 107 posts]

#436550

Glad it worked!
About the iPhone template: depends on what issue you’re having with it 🙂 Just give it a shot and describe your problem. :p

[soubira Friend soubiraJoin date: August 2011Posts: 16Downloads:0Uploads:5 Thanks: 7]

#439237

Hello,
Excuse me for opens to this topic again. But finally the CSS is still not correct for this site. Here is a picture illustrating the problems:

1. On firefox only: the gray bar at the top is shifted to the right
2. On all browsers: the logo is not aligned on the left slidebar

Have you a little trick? Thank you! 🙂

---

Attachments:

1. 

[soubira Friend soubiraJoin date: August 2011Posts: 16Downloads:0Uploads:5 Thanks: 7]

#439251

Moreover, how can I put the menu and logo in “normal” position (on if I’m not mistaken) for browsers on touchscreens? I found the css iphone but I do not want to use the template iphone, I can not find where to change the template handhelp.
My menu fixed on touchscreens is not cool so I prefer to fixed …

[pixelzombie Friend pixelzombieJoin date: August 2010Posts: 339Downloads:2Uploads:49 Thanks: 32 Thanked: 168 times in 107 posts]

#439367

Okay there are some changes and therefore you need to make .top-social smaller:


.top-social {
background-color: #3A3A3B;
margin-left: 0;
margin-top: -8px;
padding: 0;
position: fixed;
text-align: right;
width: 980px;
}


To align the logo, add a left margin of 15px:


h1.logo {
width: 215px;
height: 112px;
position: fixed;
top: 0;
margin-left: 15px;
}


To edit the handheld template you have to copy the folder and it’s content from

pluginssystemjat3jat3base-themesdefaultcsshandheld

to

templatesja_kranoscsshandheld

and edit the css there to make the logo static (is the correct word) again.

Cheers

Frank

[Author]

Posts