Firefox vs. IE

Hello everybody,

I'm ready to upload my files to my webhost server but found out that my website doesn't look the same in IE (I'm using Firefox and I also have IE6). I've seen few differences but my main concern right now is my header logo. It's perfect in FF but in IE the links next to it (Shopping Cart | My Account | Log-in) is dropped to the next line, creating a huge space next to it. I tried resizing my logo to make it smaller until it will "fit" with IE's space but it's too small when for FF browser that it doesn't really look right. I have css_ie folder and tried to add different #logowrapper size but to no avail. I'm not a programmer but I've been customizing my template with the help of the tutorials I found especially in ZenCart FAQ's and I thank all the guys helping us newbies. Hope somebody could help me with this one.

Thanks in advance :smile:

Can you provide a link so we can have a look?

There is a problem with IE6's box model rendering in CSS. The margin parameter behaves differently in IE (takes up more space thus causing the wrap). I use the FF web developers plug in and Firebug to look at the code and CSS and make the adjustments whilst swapping between browsers.

Thank goodness IE7 is much better but IE6 will be around for a while and so will the need for hacks

Joe

adelante:

Can you provide a link so we can have a look?

There is a problem with IE6's box model rendering in CSS. The margin parameter behaves differently in IE (takes up more space thus causing the wrap). I use the FF web developers plug in and Firebug to look at the code and CSS and make the adjustments whilst swapping between browsers.

Thank goodness IE7 is much better but IE6 will be around for a while and so will the need for hacks

Joe

Hi Hoe,

Thanks for the reply. My website is not live yet. I installed an Apache server in my computer and it's where all my files are for now. I'll try to upload everything tonight and I'll give you the link tomorrow.

Thanks again!

Lyn

Opsssss, I meant Joe! sorry for the typo, don't mean to ruin your good name hehhehe

Hi Lyn,

Looks like I'll have to get rid of the fish net stockings :clap::rolleyes:

I'll have a look at the link when you next post.

best wishes

Joe

Hi Joe, (there I got your name right, lol)

Sorry I can't give you the links yet because I had trouble uploading my files to my host server. I posted another thread earlier about setting permissions so hopefully somebody would help and resolve my problem. When I install a new zencart in my host server - the cache folder's path shown during the set-up is the one in my C: drive and it's Unwritable. I'm not even sure if having the cache path pointed to my local computer is correct. Anyway, the problem is how can I change its permissions? I could change the permissions in the uploaded files using FTP but I could not change the files in my computer. It's marked as read-only and when I tried to remove the tick mark under Properties it would not do the trick so I guess I have to edit a php file somewhere?

Lyn

Hi Lyn,

Yes my good name :blush: is restored.

Looks like you've got your hands full there. When I did an upload like that I made a backup using cpanel of the account directory and the mysql database. I did a fresh install on the hosting server then uploaded the backups using cpanel again. You will probably need to edit the config.php file in the includes folder and in the admin includes folder so all of the paths are correct. Nothing should be pointing back to your c drive.

The file permissions are set in the cpanel file manager. I hope that give you a couple of clues. There are a few articles on the subject in the tutorials section of the site.

I really recommend getting the Zencart book, it's great and can save you so much time.

best wishes,

Joe

Hi Joe, (I typed Hoe again! :blink:Fortunately I was able to edit it before I post this. I guess I need typing lessons aside from programming lessons:lookaroun)

Anyway, I was able to solve my cache problem - I just re-install a new zencart and edit my config file. The permissions on my local folders are still the same though - read only. I can't think of anything why I can't removed the tick mark.

My site is up and running (there are still some things that I need fixed) but you can look at it now. I still don't know how to fix my logo problem in IE browser.

Here's the link: http://lynsfashions.com (without the www. - my webhost told me I have to create a 301 Redirect link (which I have no clue!:cry:) of some sort before I could use the www.lynsfashions. com. It's because my SSL is only for lynsfashions.com. I have to pay them $$$$$ more if I need them to do it for me so I have to do some research and studying again (gee, and I though I'm done)

Okay, thanks again Joe!

Lyn

Hi Lyn,

Try editing the stylesheet "includes/templates/theme12/css/stylesheet.css" try line 631 or so it the width definition for .header_c2 try dropping the width down to 205px or so. The 472px it's set at looks way too large for the area that div is taking up.

It's worth a try, by the way that's a great looking site you've prepared, well done.

Let me know how it goes,

Joe

You did it! Yepeeee!!! :clap:

THANKS JOE!!!

I changed the width before to 300px so I guess it was not enough. Thank you so much and thanks for the compliment for my site. I guess for a graduate of Accoutancy who knew nothing about programming I didn't do too bad for my first project.:smile: But this would have not been possible without the help of all zencart contributors like you who constantly help newbies like me get through the bumps. A million thanks!:thumbsup:

Lyn

That's fantastic Lyn,

I'm glad it worked out, the Zencart community is great. I've done 3 carts now and this forum has been a big help. Good luck with the store and the career, I think you're going to go great.

Best wishes,

Joe

Thanks again Joe,

I just encountered another similar problem - now my footer. After a day's research on how to insert the java script code my webhost gave me for the SSL logo, I was able to integrate it with my tpl_footer.php file, but I could not make it to look right in IE. I tried editing my css (.footer) but no luck. Could you help me again pleaseeeee?:blush:

Thanks a bunch!

Lyn

Hi Lyn,

I've just had a little look, try changing the style sheet

includes/templates/theme12/css/stylesheet.css

.footer_c2 (line 644)

{

width: 417px;

to a smaller value until it doesn't wrap in IE. It would be good to add some padding to the top and bottom of the ssl image so it's not so cramped.

In the tpl_footer try changing the html for the image to this:

<img oncontextmenu="alert('This SiteSeal is protected');return false;" style="border: medium none ; [B]padding-top: 10px; padding-bottom: 10px;[/B]" src="https://seal.networksolutions.com/images/basicsqblue.gif"/>

also change the top margin value to align the credit cards image:

<img width="191" height="50" style="margin-left: 18px; margin-right: 18px; [B]margin-top: 15px;[/B]" alt="" src="includes/templates/theme12/images/cards.jpg"/>

and finally change the height of the spacer image above the footer links:

<img width="1" [B]height="15"[/B] alt="" src="includes/templates/theme12/images/spacer.gif"/>

You may need to fiddle with the values to get it just right. Hope that helps.

regards,

Joe

Hi Joe,

I've been fiddling with it but it doesn't seems to like me :) I changed the paypal logo to something narrower hoping that it will fit but still the same. I 'disable' my footer settings in css for now because it doesn't seems to work. I've got different output by changing the <div> tags though.

                        <div class="dt footer" >
                            <div class="dr">
                                <div class="dc footer_c1" >

Used to be after the SSL code, but when placed before SSL code and deleting </div> tag in SSL, my papal logo moved up beside it. I tried do the same with the text but didn't get the same result. Changing <div class="dc footer_c2 footer_text" > makes a difference too. It's originally located after the paypal logo code, but when I deleted it together with the <br></div> at the end of paypal logo code, the text move beside it (see https://www.lynsfashions.com). The problem is it didn't move high enough so it will be even with the SSL & Paypal logo. I tried changing the spacer & footer height but didn't do any good.

Any ideas? :)

Thanks,

Lyn

Hi Joe,

It's me again:smile: I found a solution for my problem - I created a table. I'm not sure what are the consequences of doing that but it achieved the look I want.

Anyway, one last thing and I'll be out of your hair :) What do I need to do so that in IE my boxes/borders in product descriptions would extend to the end of the page like Firefox does? I used to have right sideboxes but I disabled them. The boxes extends in Firefox but there's still that gap in IE. Is there a code or something I could add in my css_ie file so the boxes/borders will extend in IE too?

Thanks again,

Lyn

Hi Lyn,

I think it's caused by the <td> width="380", the actual width is more like 487. I think what's happening is FF is formatting via CSS whilst IE6 is taking the table column width. The file to edit should be:

includes/templates/theme12/common.tpl_main_page.php .

I don't know the structure of your template so I can only suggest that you look for the line that has

<td id="navColumnOne" class="columnLeft" style="width: <?php echo COLUMN_WIDTH_LEFT; ?>">
``` it should be around line 80. Once you find it look further down the list and see if you can find ```
<td> width="380"
``` and change the width value to 488 or so.

I can't verify that this will work but it's what I'd be trying, good luck.

regards,

Joe

Got it! you're my angel! thanksssssssssssss!!!:clap:

Thanks a lot for your help Joe... you're great!:yes:

Lyn

A pleasure Lyn,

good luck with the store,

regards,

Joe