Graphics on different broswers

[mkueb]

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

[Ivan Trebješanin]

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

[mkueb]

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

[Farhad Sakhaei]

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

[mkueb]

Hi Ivan,

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

Can I email you?

[Farhad Sakhaei]

Just include index.php and customize.css

[mkueb]

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!

[Farhad Sakhaei]

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

[mkueb]

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

Thanks....

[Farhad Sakhaei]

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

[mkueb]

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. 

[Ivan Trebješanin]

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

[Farhad Sakhaei]

Replace :

Code:

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

With :

Code:

<div id="oktoheader">

</div>

In: index.php

AND:
Replace :

Code:

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

With :

Code:

#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:

#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)

[mkueb]

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! 

[Farhad Sakhaei]

Did you set the width to 900px ?