Website stylesheets and Internet Explorer

HTML & CSS
1

Hi everyone.
I did a really stupid thing which is forgetting about the awesome Internet Explorer when changing style on my website (due to the fact that my office has IE9 on all machines and I don’t bother restyling on that as it can use custom stylesheets and really I don’t care about customers who still have that browser).

The big issue is how the website displays in IE 10+ now. It works “fine” in chrome and firefox (not sure about safari) but it’s all messed up in IE for some reason. I think it’s not picking up some stylesheets at all.

Website link is : www.sntravel.co.uk

Any help is appreciated, thank you so much.

2

you may need to clarify how you define “messed up” i opened it in chrome and the the entire page with the exception of very few elements were at first covered w/the

background: url(/images/www.sntravel.co.uk/bg-repeat.gif)

when i refreshed it was gone.
however

1355×673 187 KB

that is messed up…
i did fix it by changing the float of the right column w/

#rightCol {
width: 78%;
/* float: right; */
float:none;
}

but also your id="navNew" would benefit from a color change as the white disappears over the whiter/clearer backgrounds below.
and thehome_page_info_box2 seems cut off at the rigth but don’t have a chance to look at it now.

D

3

Hi pdxSherpa, thank you for your time.

How did you remove the float? It doesn’t show up when I inspect on IE

4

Hello, sorry i don’t really have too much time to look at this in depth now. but pretty sure outstanding peeps like ronpat, dresdent and paul’b will be by w/better advice soon.
I see you don’t have the prob in ie. i did a float:none; but you said you might not have the prob in ff or chrome?
also in ie8 at least don’t have 9 or above on this laptop you might want to add to your wrapper positioning.

position: relative; top: 0;
it might fix this i see in in ie 8

1267×641 101 KB

unless you don’t see it & don’t care in that case please ignore the advice.
take care
D

5

ok so!
run your url in http://validator.w3.org/
It is a great 1st step to see what the possible issue could be w/your site. I did and got 117 errors. Some could be duplicates and some could be quite easy to fix, so it is not that bad.
but start at the top and work your way down. As you eliminate the errors revalidate the code.
I think this will help you quite a bit. And then it’ll be easier to see what the possible remaining issues if any are there.
D

1 Like
6

I see it fine on chrome firefox and safari, but not in any IE version (especially IE10+) which is what I’m trying to improve.

I’ll try the validation and wrapper fix and let you know, thanks!

7

good luck. go for the validator first. sometimes just fixing one of the errors will fix several others at the same time. and some are very simple from what i saw.
D

1 Like
8

Hi, yeah I fixed something for sure. IE 9 looks good now, IE 8 I can’t seem to make the hover work on the homepage boxes for destinations.

I’ll work from home for IE10+

9

Why on certain resolutions do you remove the floats for the left and right column. For example

media="screen and (min-width: 1300px)"

On my personal resolution, the left and right column stack up vertically. I do not understand why you did it this way? If I remove hte floats and go back to the regular default floats on it, it appears normally.

As far as the hovering, I believe that is Jquery / Javascript? Perhaps you should ask over there. IE8 is basically dead anyway so I’m not 100% sure I’d bother, but it can’t hurt to ask them.

10

You mean on IE10? I will try that at home Ryan, thanks

11

Nope, I have a chromebook (I dual boot (Ch)Ubuntu on there but I have some weird glitch with my internet so I have to use ChromeOS at work…I digress.

It’s Chrome. I could figure out my resolution if you want but upon inspecting, the media query removed the floats and broke hte page for me.

Although the breaking of the page was resolution based - every browser would break if you removed those float properties so every browser is at risk of breaking. Perhaps you had a reason for including those float:none propreties, I dunno, but FYI it’s gonna break pages at certain resolutions (like mine.)

12

Uhm on Chrome it’s fine to be honest, probably you were looking at it while I was making changes or the cache didn’t update correctly (we are on a bad CMS and it’s slow)

13

Sorry :smile:

1366×768 291 KB

14

Hi, it should be ok on Chrome now. I assigned different stylesheets with zoom level for each size after 1280px.

I’m struggling only with Internet Explorer 10+

It seems it doesn’t recognize some styles even though it clearly opens the css

Take for example the navNew style in sn.css

For some reason with Explorer it doesn’t work. Any idea why?

15

Validate your page, for example look at this snippet.

navNew {
width: 100.4%;
}

No # is there. Validate your entire site / file though since that file alone has 159 errors. There is no point in me debugging it if invalid code is the probable culprit.

16

Thanks I will and get back to you

17

Hi everyone, I have only 3 errors now but not sure how to fix them.
Apart from that I can see IE works but firefox won’t show some styles.

Please advise, thank you.

18

You may have missed a few friend “Validation Output: 57 Errors” although only 2 warnings.
http://validator.w3.org/check?uri=www.sntravel.co.uk&charset=(detect+automatically)&doctype=Inline&group=0

This shows 5. One at least of which should be easy to solve.
http://html5.validator.nu/?doc=http%3A%2F%2Fwww.sntravel.co.uk%2F

Error: End tag for body seen, but there were unclosed elements.
From line 737, column 1; to line 737, column 7
:leftwards_arrow_with_hook::leftwards_arrow_with_hook:</htm

You have open elements (div or something). Close them properly. I find IE especially picky about closing elements. Chrome and Firefox kinda work it out for themselves. IE is fussy.

I am still seeing your top nav bar thing at the very top disappear in chrome above visible screen.
And your super evil popup, appears awkwardly on the screen. If your going to have a pop up, at least make sure you can see the whole thing in order to close it. The X for me appears off screen.

19

The key word being “kinda”. The way they work it out may not be the way you intended.

20

@Mittineague Sad but true :slight_smile:

I used to hate IE with a passion, but actually the better I get at making valid code the more I appreciate its fussiness. If it doesn’t show right chances are its something I have done wrong.

Well at least IE9+ I will make no comment about IE6 :stuck_out_tongue: