Elxis CMS Forum

Support => General => Topic started by: mkueb on December 29, 2008, 21:46:42

Title: Graphics on different broswers
Post by: mkueb on December 29, 2008, 21:46:42

Hi everyone,

I notice there are different broswers that show different header and  content image sizes.

In Firefox, header image size looks fine. But, in Chrome and IE, header image is too wide or big.

How can I adjust them better in Chrome/IE? I tried adjusting templates and CSS...still no luck...

I hope you would help.

Thanks

Title: Re: Graphics on different broswers
Post by: Ivan Trebješanin on December 29, 2008, 22:39:09

You must show us the link. How can we talk about graphics, without seeing them???

Title: Re: Graphics on different broswers
Post by: mkueb on December 29, 2008, 22:57:09

Hi Ivan,

I apologize. Ok, here is http://www.betheldeafministries.org/tech/chrome.jpg and http://www.betheldeafministries.org/tech/firefox.jpg

Both are images.

Thanks

Title: Re: Graphics on different broswers
Post by: Farhad Sakhaei on December 30, 2008, 00:07:17

Please attach your template source + css files ... With this way we can help you more  :)

Title: Re: Graphics on different broswers
Post by: mkueb on December 30, 2008, 00:20:31

Hi Ivan,

Thanks! Included template, CSS, and Images files are too big. 1.19 MB

Can I email you?

Title: Re: Graphics on different broswers
Post by: Farhad Sakhaei on December 30, 2008, 00:21:53

Just include index.php and customize.css ;)

Title: Re: Graphics on different broswers
Post by: mkueb on December 30, 2008, 00:39:55

Allowed file types: doc, jpg, jpeg, pdf, png, txt, zip, gif
Maximum attachment size allowed: 128 KB, per post: 4

They are all images...css files are not accepted....


Thanks!

Title: Re: Graphics on different broswers
Post by: Farhad Sakhaei on December 30, 2008, 00:41:45

Oooops! Compress those 2 files in a zip file ... no graphics need

Title: Re: Graphics on different broswers
Post by: mkueb on December 30, 2008, 00:46:28

I attached them in zip file. I hope they work....

Thanks.... :)

[attachment deleted by admin]

Title: Re: Graphics on different broswers
Post by: Farhad Sakhaei on December 30, 2008, 00:58:02

Do you want that your header image be fit on the top ?

Title: Re: Graphics on different broswers
Post by: mkueb on December 30, 2008, 01:05:42

Yes please.....

Also, on the content page, I want big images fit on the content, too... Is that possible?

Just remember, Firefox looks good, but IE/Chrome need work...

Thanks.  :)

Title: Re: Graphics on different broswers
Post by: Ivan Trebješanin on December 30, 2008, 01:10:38

From what I see, you have overflow:hidden in main content div... just remove it and it will be ok. ;)

Title: Re: Graphics on different broswers
Post by: Farhad Sakhaei on December 30, 2008, 01:15:22

Replace :

Code: [Select]

<div id="oktoheader">
<div id="headright">
<!-- module Search loaded without template position -->
<?php elxLoadModule(&#39;mod_search&#39;, -2); ?>
<!-- module Language loaded without template position -->
<?php elxLoadModule(&#39;mod_language&#39;, -2); ?>
</div>
</div>
With :

Code: [Select]

<div id="oktoheader">

</div>
In: index.php

AND:
Replace :

Code: [Select]

#oktoheader {
text-align:left;
background: #78A1BB url(../images/elxislogo.jpg) no-repeat top left;
height: 75px;
border-bottom: 1px solid #1D4D6C;
}
With :

Code: [Select]

#oktoheader {
text-align:left;
background: #78A1BB url(../images/elxislogo.jpg) no-repeat top center;
height: 75px;
border-bottom: 1px solid #1D4D6C;
}The new file elxislogo.jpg should replace with your header image ... and the color of your background should match on your background of image

background: #78A1BB url(../images/elxislogo.jpg) no-repeat top center;

Okto template has auto width dimension ... So you can set it to static by changing the value of width in this line :

Code: [Select]

#container {
padding: 0;
margin: 0;
width: 100%;
background: #C2C29C url(../images/bg.png) repeat 0 0;
text-align: center;
}
Change width to a static value (like 900px)

When you set the static width , On the content you can set your dimensions of your picture to a valid value to fit on there ... It should not be larger than that area ... you can get a screenshot from the final work and calculate dimensions on that area in a photo editor (like photoshop)

Title: Re: Graphics on different broswers
Post by: mkueb on December 30, 2008, 02:10:16

Hi there,

I followed your help and test them...

Take a look at two browsers:

http://www.betheldeafministries.org/tech/chrome_IE.jpg - content needs work.

http://www.betheldeafministries.org/tech/firefox.jpg

Looking forward to getting your help...

Thanks!  :)

Title: Re: Graphics on different broswers
Post by: Farhad Sakhaei on December 30, 2008, 02:13:57

Did you set the width to 900px ?

Title: Re: Graphics on different broswers
Post by: mkueb on December 30, 2008, 02:31:45

Opps,

I change the 640 px x 378 px image fit in the content page fine for Chrome and IE... Now, they are fine....Thanks....

BUT, 640 px image (small) is not fine for Firefox as well as header size problem..

Title: Re: Graphics on different broswers
Post by: mkueb on December 30, 2008, 03:46:58

I want to show you URLs.....

Chrome/IE fine....

Firefox not....


http://www.betheldeafministries.org/tech/firefox.jpg

http://www.betheldeafministries.org/tech/chrome_IE.jpg

Title: Re: Graphics on different broswers
Post by: mkueb on December 30, 2008, 07:15:20

Hi everyone,

I got it. IE/Chrome and Firefox look fine when I added width:978px !Important; that works fine.. including header and content pages.

Thanks, everyone.... :)

Title: Re: Graphics on different broswers
Post by: Farhad Sakhaei on December 30, 2008, 12:03:36

Good luck  ;)