Making a site IE friendly.

  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

For the last couple of days i went under some sort of inspired journey to completely redevelop the look of my personal website. As a result i found myself with something i'm slightly okay with, perhaps okay enough to put it online on a more complete basis within the next day (time permitting).

However as usually tends to be the case i usually have the headache of making the site Internet Explorer friendly. At the moment the site is a complete mess in IE but look sort of respectable in Firefox if you are viewing on a res no lower than 1024x768.

I was hoping thanks to any members on Ozzu that there might be a way in which it could be tidied up a bit more to display better in IE. It is a CSS problem, and a problem i've had in the past with the current site.

Here is the site i knocked together in the last day.

Thanks!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8411
  • Loc: USA

Post 3+ Months Ago

This is the best I could come up with.

Quote:
body {
font-size: 12px;
margin: 0;
padding: 0;
font-family: Arial;
background-color: #000;
background-repeat: no-repeat;
background-attachment: fixed;
}

h1 {
font-size: 14px;
border-bottom: 1px solid #fff;
}

div#content {
position: absolute;
top: 15%;
left: 15%;
bottom: 15%;
right: 15%;
border: 1px solid #CC0001;
background-color: #000;
background-image: url('images/exposure.jpg');
background-repeat: no-repeat;
background-position: center;
}

a:link {
color: #fff;
text-decoration: underline;
font-weight: bold;
}

a:active {
color: #fff;
text-decoration: underline;
font-weight: bold;
}

a:visited {
font-weight: bold;
color: #fff;
text-decoration: underline;
}

div#text {
color: fff;
position: static;
top: 30%;
left: 5%;
text-align: justify;
padding-left: 1em;
padding-right: 1em;
background-color: #4a4a4a;
opacity: .85;
width: 60%;
height: 60%;
border: 1px solid #cc0000;
margin-left: 5em;
margin-bottom: 5em;
}

div#nav_cube {
position: absolute;
top: 1px;
right: 0px;
color: #fff;
width: 154px;
height: 155px;
margin-top: 5em;
}

div#nav_cube div {
position: absolute;
width: 46px;
height: 46px;
border: 1px solid #666;
}

div#nav_cube div a {
display: block;
width: 100%;
height: 100%;
}

div#nav_cube div a:link, div#nav_cube div a:visited {
text-decoration: none;
}

div#nav_cube div a:hover {

}

a#white_cube { background-color: #ffffff; }
a#white_cube:link, a#white_cube:visited {
opacity: .40;
filter: alpha(opacity=40);
}

a#blue_cube { background-color: #14008b; }
a#blue_cube:link, a#blue_cube:visited {
opacity: .75;
filter: alpha(opacity=75);
}

a#green_cube { background-color: #335c33; }
a#green_cube:link, a#green_cube:visited {
opacity: .80;
filter: alpha(opacity=80);
}

a#white_cube:hover, a#blue_cube:hover, a#green_cube:hover {
opacity: 1;
filter: alpha(opacity=1);
}
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Thanks Bogey. This makes the site more IE friendly and completely screws it in Firefox. I would rather have the site Firefox friendly than IE friendly if i can't get them both to see eye to eye if you know what i mean.
  • maxxximus
  • Beginner
  • Beginner
  • maxxximus
  • Posts: 42
  • Loc: UK

Post 3+ Months Ago

"Please remember that errors seen in IE or some other browsers outwith Firefox are expected and you should only be viewing this site if you are using Firefox." :lol: :lol: :lol:

Forget about absolutely positioned divs. Use a fixed width container div with auto margin and float your other divs.
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Thanks, so what i did here was changed the Position tag in the CSS file to "relative" and gave it a width and height.

It looks good in my IE here, but i would really appreciate if people could do a print screen of the page and copy it here. If there is also any other errors you might have that you could let me know about i'd really appreciate this too.

Thank you Bogey and maxxximus.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8411
  • Loc: USA

Post 3+ Months Ago

SB wrote:
Thanks Bogey. This makes the site more IE friendly and completely screws it in Firefox. I would rather have the site Firefox friendly than IE friendly if i can't get them both to see eye to eye if you know what i mean.


Weird, it shows fine in Firefox for me.
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Bogey wrote:
SB wrote:
Thanks Bogey. This makes the site more IE friendly and completely screws it in Firefox. I would rather have the site Firefox friendly than IE friendly if i can't get them both to see eye to eye if you know what i mean.


Weird, it shows fine in Firefox for me.


Yeah, if you read the reply afterwards i managed to sort it by changing the position to "relative" as opposed to being absolute. It seems to look alright now in IE, only differences are the opacity doesn't work in IE but i believe that's something that can't be fixed without putting in some javascript code or something like that.

Cheers anyway!
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8411
  • Loc: USA

Post 3+ Months Ago

SB wrote:
Bogey wrote:
SB wrote:
Thanks Bogey. This makes the site more IE friendly and completely screws it in Firefox. I would rather have the site Firefox friendly than IE friendly if i can't get them both to see eye to eye if you know what i mean.


Weird, it shows fine in Firefox for me.


Yeah, if you read the reply afterwards i managed to sort it by changing the position to "relative" as opposed to being absolute. It seems to look alright now in IE, only differences are the opacity doesn't work in IE but i believe that's something that can't be fixed without putting in some javascript code or something like that.

Cheers anyway!


Yeah, I read on, but I mean the CSS I gave you seems to be working fine for me in Firefox. I tried relative position and that messed up the layout in IE very bad. I tried it twice and both results were different, but it was messed up in IE.
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

That's odd. How does the site look at the moment on IE and FF? is it possible to do a copy of your screen in both and let me see?

If it is faulty then i'd appreciate feedback as at the moment it looks fine on both IE and FF on my machine.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8411
  • Loc: USA

Post 3+ Months Ago

Right now, I don't see the exposure.jpg. The background of the whole thing.

On my PC, my CSS yielded the right results in Firefox. It was just as it was before I altered the CSS. In IE, the exposure's edges were cut off a little and the opacity didn't work on the contents. My screenshot doesn't work. If there is another program out there that would take a screenshot of my screen than I could show you what I mean.
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

It's at times like these i sort of dislike web design. It's looking not bad here and how i like it here, but it's handy having a different system to double check it over. I appreciate the comments and as soon as i can figure out what's wrong i'll sort it out.

Regarding the exposure image thing, the actual image placement isn't as tidy as i'd like it. I actually edited the size of the image so it looked as it does rather than figuring out how i can display it in CSS so it will span the whole length and height of the background in the box. If anyone knows how i can do this then i'd appreciate this very much too.
  • maxxximus
  • Beginner
  • Beginner
  • maxxximus
  • Posts: 42
  • Loc: UK

Post 3+ Months Ago

A good online design check for deprecated IE is http://ipinfo.info/netrenderer/.

You can see your site in IE6, 5.5 etc. Pity no support for IE on a Mac or other browsers but excellent site all the same.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Quote:
It seems to look alright now in IE, only differences are the opacity doesn't work in IE but i believe that's something that can't be fixed without putting in some javascript code or something like that.


Actually, you should be able to get IE to support the opacity filter by using this line:

Code: [ Select ]
filter:alpha(opacity=85); -moz-opacity:0.85; opacity:0.85; -khtml-opacity:0.85;


instead of what you have now:

Code: [ Select ]
opacity: .85;


No JavaScript required 8)
  • Funny_Fuzz
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1517

Post 3+ Months Ago

Well, looks absolutely fine for me in IE. But remember, IE don't follow web standards so it's better that it's FF compatible than IE compatible.
  • wphilipw
  • Student
  • Student
  • wphilipw
  • Posts: 87
  • Loc: PA, US

Post 3+ Months Ago

I know that this is a hack and that it will keep the site from having "pretty code" but what I often have to resort to doing is using the "underscore hack" for IE, as in set the site to look however it should normally look (by that I mean make it work with firefox) and then just change whatever you need to make it "IE friendly" (in other words a horrible mess) by using underscores.

an example of this would be say the width didn't render correctly accross browsers you could do this:
Code: [ Select ]
#whatever {
width: 200px;
_width: 202px;
}
  1. #whatever {
  2. width: 200px;
  3. _width: 202px;
  4. }

thanks to that firefox and all normal standards based browsers would display the 200px, and IE would display the 202px.

just a thought.

btw for me everything seems fine (FF and IE winXP) there are just a few pixels difference between the 2.

Post Information

  • Total Posts in this topic: 15 posts
  • Users browsing this forum: No registered users and 69 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.