IE CSS Question...

[baldidiot]

I have a css issue that I can't figure out, wondering if anyone CSS gurus could give it a once over.

We're in the process of merging a lot of our old offers sites into one larger one: https://www.betting-offers.com/ - still setting it up so a bit rough around the edges at this point so ignore the half-finished look.

Anyway, the headers one the home page are wrapped in divs and displayed inline to put a a background colour behind the text, but not the full width (ie: only on the text - we'll be adding an ASA disclaimer next to it in time). The div then has a border on the bottom.

Works on all browsers and mobile except for bloody IE. For some reason the left hand side of the H2 and div are missaligned: https://snag.gy/G3XbjK.jpg

Any ideas?

 

[Frank]

I notice in IE or.. Edge.. images dont align and leave a massive gap if anywhere near the h2.. annoying as I design my site around chrome

 

[jopaa]

The only way you can achieve this is by using browser specific hacks.

Here is a pretty detailed post:

hxxps://css-tricks.com/snippets/css/browser-specific-hacks/

 

[slotplayer]

It used to be that you'd reset padding, margin to zero via css for this problem. However adding it to the style sheet after the page has been laid out could totally mess things up.

There are a bunch of variations of it, this particular one uses the wildcard character (*) to reset padding/margin on all html elements.

* {
margin: 0;
padding: 0;
}

 

[baldidiot]

The only way you can achieve this is by using browser specific hacks.

Here is a pretty detailed post:

hxxps://css-tricks.com/snippets/css/browser-specific-hacks/

Cheers... problem with that is that I haven't got a clue what's causing it to output like that in IE. Even looking at the computed output in IE there doesn't seem to be anything out of place.

 

[baldidiot]

It used to be that you'd reset padding, margin to zero via css for this problem. However adding it to the style sheet after the page has been laid out could totally mess things up.

There are a bunch of variations of it, this particular one uses the wildcard character (*) to reset padding/margin on all html elements.

* {
margin: 0;
padding: 0;
}

That's interesting. The computed output has them all set as zero already but I tried it anyway. Didn't seem to do anything unfortunately.

 

[TheGooner]

I have found that the old microsoft explorer was infuiriating for trying to get CSS working correctly.
It was as if Microsoft had an investment or royalty payment in the tables html syntax !


I have not tried the new edge browser - but really you are dabbling in the margins with both browsers now.

According to my latest Analytics for September (around 150,000 sessions) :
42% Chrome
20% Safari
16% Opera Mini (African phone users)
7% Firefox
6% Samsung interent
2% Opera
2 % Microsoft Explorer
1% Edge
1% Android Explorer.

PLus 20 other rats and mice ... things like Blackberry, Puffin?, Coc Coc (I am NOT making this up), Maxthon, Nokia Browser (really - a Nokia phone still?) .. seaMonkey and many others.

Checkout your own Google Analytics - it's a weird and wacky list!

 

[Engineer]

Maybe try increasing the bottom margin or padding of the H2, for IE only? I'm not sure exactly how to do that, though.

 

[slotplayer]

That's interesting. The computed output has them all set as zero already but I tried it anyway. Didn't seem to do anything unfortunately.

Well that code is put at the very top of the css and then you set margins/padding on individual element. Put it as the last style in the css and it would override all the previously defined css rules.

If you want to see the effect paste it in on the css under the opening style tag on this site https://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-type_ex and click run. You'll see how it clears the default padding on unordered lists. Watch the bullet points dissappear.

What are we supposed to look at in the snagy jpg around the green border? I don't see anything not rendering too bad unless I'm missing it.

 

[baldidiot]

I have not tried the new edge browser - but really you are dabbling in the margins with both browsers now.

Very true! It'll bug me though knowing it's there...

Maybe try increasing the bottom margin or padding of the H2, for IE only? I'm not sure exactly how to do that, though.

Weirdly it's only affecting the ones on the left most side though, not the others with the exact same classes. I've fiddled with the padding for ages though to no avail...

What are we supposed to look at in the snagy jpg around the green border? I don't see anything not rendering too bad unless I'm missing it.

It's the 'Free Bets' header on the left hand side. The left most part of the background behind the text is missaligned with the border underneath by a pixel or two.

 

[slotplayer]

Very true! It'll bug me though knowing it's there...





Weirdly it's only affecting the ones on the left most side though, not the others with the exact same classes. I've fiddled with the padding for ages though to no avail...




It's the 'Free Bets' header on the left hand side. The left most part of the background behind the text is missaligned with the border underneath by a pixel or two.

I thought that is what you meant.

Have you tried display: inline-block instead of display: inline

 

[baldidiot]

Unfortunately, yes...

 

[AussieDave]

TBH, I don't even bother checking out IE layouts anymore. My user stats on it are so low, I couldn't be bothered. However, have you tried something like this:

.alignleft {
display: inline;
float: left;
margin-right: 20px;
margin-bottom: 10px;

or

.alignright {
display: inline;
float: right;
margin-right: 20px;
margin-bottom: 10px;

Would need to fiddle around with the margin sizes...

 

[AussieDave]

I just checked it out in IE 11, and it's not producing the border issue. Unless you've disabled that for the time being, till you can fix it?

One thing I did notice, you've got 747 lines CSS in the header. Maybe this is only there while your testing etc. I'm sure your aware of this, but just in case your not, this could slow down your above fold loading. Realistically, I only include CSS which is 100% needed straight up, The rest is either imported or even deferred, to load later, which has been minified to the max.

 

[baldidiot]

I just checked it out in IE 11, and it's not producing the border issue. Unless you've disabled that for the time being, till you can fix it?

Hmmm. That's weird, I'm using IE11 as well but happens for me. I wonder if it's my computer. Resolution issue perhaps?

One thing I did notice, you've got 747 lines CSS in the header. Maybe this is only there while your testing etc. I'm sure your aware of this, but just in case your not, this could slow down your above fold loading. Realistically, I only include CSS which is 100% needed straight up, The rest is either imported or even deferred, to load later, which has been minified to the max.

Cheers, yeah it's for testing. The new live css editor on wordpress is actually pretty useful for setting things up. Once we're happy with it I'll move to a css file.

 

[slotplayer]

I just checked it out in IE 11, and it's not producing the border issue. Unless you've disabled that for the time being, till you can fix it?

One thing I did notice, you've got 747 lines CSS in the header. Maybe this is only there while your testing etc. I'm sure your aware of this, but just in case your not, this could slow down your above fold loading. Realistically, I only include CSS which is 100% needed straight up, The rest is either imported or even deferred, to load later, which has been minified to the max.

optimized for speed. I like it.

 

[hcgroup]

I have a css issue that I can't figure out, wondering if anyone CSS gurus could give it a once over.

We're in the process of merging a lot of our old offers sites into one larger one: https: //www betting offers.com/ - still setting it up so a bit rough around the edges at this point so ignore the half-finished look.

Anyway, the headers one the home page are wrapped in divs and displayed inline to put a a background colour behind the text, but not the full width (ie: only on the text - we'll be adding an ASA disclaimer next to it in time). The div then has a border on the bottom.

Works on all browsers and mobile except for bloody IE. For some reason the left hand side of the H2 and div are missaligned: https:// snag gy/G3XbjK.jpg

Any ideas?

Are you using "nofollow" attribute for the outlinks? (there are too many even from the main page)

Thanks