Joomla Templates Club 406,261 posts

[calavaro Friend calavaroJoin date: August 2013Posts: 125Downloads:7Uploads:34 Thanks: 28 Thanked: 24 times in 1 posts]

#192114

Hi,

I have made some modifications to the site I’m working on…. and it seems a few of the modifications do not render correctly in Internet Explorer 10, Chrome 30 and Opera 16.

IE10 has the biggest problems with many things displaying wrong. There are some issues with Google Chrome and Opera as well (although Opera is not important).

Is there anything specific I need to do to correct rendering issues in IE10 most importantly?
These include the top header not rendering full width (custom module position), menu not rendering fully to the left and the discount shipping graphics just above the footer does not render fully left.
See attached images for specific rendering issues.

Chrome and Opera does not render the menu full width (see picture). It’s exactly 3 pixels too short. If I increase the search icon by 3 pixels it renders correctly in Chrome and Opera, but becomes too wide in Firefox (by 3 pixels). How can I fix that?

Chrome also has the added bug of sometimes not rendering the front page tabbed items fully. It cuts off the “Details” bit See picture.

There are of course no problems in Firefox (any modern version).

Thank you.

All the best,

Calavaro

---

Attachments:

1. 
2. 
3. 
4. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#512010

Hi Calavaro,

It seems that you customize the header block of our JA Hawkstore template not in a correct method. When you can check the site elements via Firebug, you can see that the template block layouts are defined in .moduletable class, instead of body as we did on our T3v3 templates, including JA Hawkstore. Therefore, the Custom HTML and its block (Top Top) doesn’t load the span width of integrated Bootstrap on the site.

In addition, the IE browser has more strict standard of defining the css styles of a website element, that is why you got the difference with modification on browsers. The idea in this case is assigning a fixed property to the width of specific elements to make them display fine on IE and Safari. You can try to put below css style into custom.css file:

@media (min-width: 1200px) {
.ja-top-top .custom img {
min-width: 1057px;
}

.t3-mainnav .navbar .nav > li.search a {
width: 75px;
}
}

You can change the width property until you get it perfect and note that I just suggest the styles on desktop view. For the rest resolutions, you can do it by yourself by using the @media queries.

1 user says Thank You to phong nam for this useful post

1. calavaro

[calavaro Friend calavaroJoin date: August 2013Posts: 125Downloads:7Uploads:34 Thanks: 28 Thanked: 24 times in 1 posts]

#512117

Hi Leo,

Thanks for the guide. It got me started in the right direction.

I had to create new CSS in bootstrap-responsive.css, template-responsive.css and custom.css to get everything to render correctly.

The only 2 things that doesn’t work is
1. The position-4 (shipping advert) width in IE when viewing the site full width (not full width is fine)
2. Menu width in Chrome and Opera. Still 3px too short. (not critical).

All the best,

Calavaro

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#512142

Hi Calavaro,

1. The position-4 (shipping advert) width in IE when viewing the site full width (not full width is fine)

>> As I explained above, we should define a fixed property of width to positions, especially Custom HTML module so that the position will display full with the width of mainbody. You can try to use these codes:

.t3-spotlight.t3-spotlight-2 .t3-module {
max-width: 100%;
}


2. Menu width in Chrome and Opera. Still 3px too short. (not critical).
It seems that you didn’t try the codes i suggested in the first reply 🙂 You can try these:

.t3-mainnav .navbar .nav > li.search a {
width: 75px;
}

[calavaro Friend calavaroJoin date: August 2013Posts: 125Downloads:7Uploads:34 Thanks: 28 Thanked: 24 times in 1 posts]

#512180

Hi Leo,

I did add the code as below. It didn’t work for Chrome, but is ok for IE.

.t3-mainnav .navbar .nav > li.search a { width: 75px; }

The code below didn’t work to show the position-4 full width in IE. Sorry 🙁

.t3-spotlight.t3-spotlight-2 .t3-module { max-width: 100%; }

It’s a bit frustrating since everything works fine in Firefox, and the code is logical and easy to change. Sadly, most of these changes then doesn’t show up in IE at all… 😮
Even if I force the width by using “min-width: 1056px” it still does not span fully in IE at 1200px mode, it still leaves 30px margin (but of course makes the graphics span 1056px for all other resolutions).
“min-width: 100% !important” Still does not work.

Anyway, this is just a minor annoyance to the major bug of the shopping cart not updating when adding the first product on empty cart. Have you seen it? http://www.joomlart.com/forums/topic/adding-product-top-right-cart-view-is-broken-sidebar-1-cart-is-broken/.
This is in fact the very final actual bug to solve before going live…. and it’s apparently a big one as Saguaros haven’t been able to reply with a solution yet… maybe 2 heads is better than 1? I promise I will most likely stop opening a buttload of threads when its solved! 😉

All the best,

Calavaro

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#512185

Hi Calavaro,

Sorry. I didn’t realize that you are using the Red theme as the default template style, instead of Orange as the demo, that is why the template can’t load the overridden styles in custom.css file. I have changed the codes a little bit, you can put into /templates/ja_hawkstore/css/themes/red/template.css

.t3-spotlight.t3-spotlight-2 .t3-module {
max-width: 100% !important;
}

.t3-mainnav .navbar .nav > li.search a {
width: 75px !important;
}

Just try this and don’t forget to inform me the result.

On the issue of not updating shopping cart, I will remind Saguaros to reply your thread with a suitable solution. It seems that it will take some time to check out and help you to correct this issue. Please give him some time.

However, may I ask you a question that did you change any related files or install any extensions ? As you know, the updating feature of shopping cart still worked fine when I helped you to correct the Add To Cart button with Stockable Variants.

[calavaro Friend calavaroJoin date: August 2013Posts: 125Downloads:7Uploads:34 Thanks: 28 Thanked: 24 times in 1 posts]

#512212

Hi Leo,

Regarding the updating shopping cart, I have PM’d you in reply to your PM.
No changes have been made by me, no extensions added, no core file modifications.

Regarding the code. As I suspected it would make the menu 3px too wide in FireFox. It displays fine in Chrome now, but FF is 3px too wide. It’s a choice I guess.

.t3-mainnav .navbar .nav > li.search a { width: 75px !important; }

The code for the position-4 banner. Still does not render correctly in IE. Still shows with 30px margin to the right.

.t3-spotlight.t3-spotlight-2 .t3-module { max-width: 100% !important; }

This is purely an Internet Explorer issue for sure…. It should work, but doesn’t.

All the best,

Calavaro

1 user says Thank You to calavaro for this useful post

1. phong nam

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#512313

I think we should focus on the “sale” label issue of JA VM Products module on your website rather than some tiny css styles don’t affect on browsers. I will reply you with a solution on that label issue after hearing from our our dev.

[Author]

Posts