23 replies [Last post]
Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 22 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

So I just implemented social icons on my website thanks to a a few of the people on this site and now that I am all done and wrapped up I figured out I have one problem. They display correctly in every browser except IE9. Any idea what's going on? Thought maybe I added some script that's not supported by IE9. Thank you!

CSS:

#social-icon-links {
   float: right;
   padding :0;
    margin : 4;
}
 
#social-icon-links li {
float: right;
    display: inline;  /* forces lis to be on one line */
    list-style-type: none;  /* Removes the bullet */
    padding-right: 4px;  /* Adds a gap between the item */

HTML:

<ul id="social-icon-links">
  <li class="yelp-icon"><a href=""><img src="/files/theme/Yelp.png" alt="Yelp" /></a></li>
 <li class="twitter-icon"><a href=""><img src="/files/theme/twitter.png" alt="Twitter" /></a></li>
 <li class="linkedin-icon"><a href=""><img src="/files/theme/linkedint.png" alt="Linked In" /></a></li>
  <li class="facebook-icon"><a href=""><img src="/files/theme/Facebook.png" alt="Facebook" /></a></li>
</ul>

Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 22 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

Forgot to mention that the

Forgot to mention that the website is www.rxforjunk.com

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 40 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9149
Points: 3133

Too much thinking

You have this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
...
<meta http-equiv='X-UA-Compatible' content='IE=EmulateIE7' />

Change the DTD to <!DOCTYPE html>. XHTML1.1 may not be served as html.

Delete the other. Telling IE to emulate IE7 is to tell it to be stupid.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 22 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

Alright so do I have to put a

Alright so do I have to put a URL in from the w3 site like it has currently? Also am I supposed to delete the content area completely then or just remove the "IE=EmulateIE7" text? Heres my idea from what your telling me. Sorry this area of coding is ll new to me.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
..
<meta http-equiv='X-UA-Compatible'/>

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 years 25 weeks ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2256

Too much thinking again.

Too much thinking again. Start by doing just what Gary said. Smile

yet again.

Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 22 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

So if I am understanding you

So if I am understanding you correctly I am supposed to delete the whole current doctype. All of this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
...
<meta http-equiv='X-UA-Compatible' content='IE=EmulateIE7' />

and replace it with <!DOCTYPE html>?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 40 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9149
Points: 3133

Using the doctype xhtml 1.1

Using the doctype xhtml 1.1 implies you will serve the page as application/xhtml+xml

XHTML 1.1 documents SHOULD be labeled with the Internet Media Type "application/xhtml+xml" as defined in [RFC3236]. For further information on using media types with XHTML, see the informative note [XHTMLMIME].

See also rfc 2119.

Therefor the DTD should not be xhtml1.1. The much simpler <!doctype html> will suffice, and will keep browsers in standards mode. You may still use xhtml syntax with this doctype.

Yes, the entire IE compatibility meta element should be deleted. Its purpose was for those maintainers who had to deal with sites/pages that had been written to support older, crappy IE browsers. There is no sane reason to cause IE to act brain-dead for new or modernized pages.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 22 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

Even as I try to understand

Even as I try to understand this as best as I can it's got me confused. I think it's the terminology that I am having the most trouble with as well as placement. Can I get an example of how this is to be changed over to what your referring to so I can see what it is that's actually been changed? Also, so I can understand this more for would you happen to know of somewhere you can start learning about Doctypes and how to write them? Maybe a doctypes for beginners website?

P.S. I read both of the links that you listed for me and as of so far they haven't gave me an understanding

Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 22 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

I looked around and although

I looked around and although I did no create which I guess is what is supposed to happen. I found a DTD that looked a little bit to the standards you are talking about. How would this do?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 years 25 weeks ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2256

(No subject)

<!DOCTYPE html>

yet again.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 40 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9149
Points: 3133

First, follow instructions

If you don't follow instructions, we're constantly talking at cross purposes.

I gave you exactly what you need to do.

Replace these lines

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<meta http-equiv='X-UA-Compatible' content='IE=EmulateIE7' />
<title>Junk Rx - Home</title>

with the following, exactly as shown.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>Junk Rx - Home</title>

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 22 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

EDIT

Alright, well I replaced the doctype with the one provided and I am still having the same exact problem. I honestly don't get it and I am complying to the best of my knowledge but if someone tells you to do something and you have no idea what they are talking about then you are not going to be able to follow through. Beyond that though, what else could be the problem?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 years 25 weeks ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2256

YOU WILL COMPLY!

yet again.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 40 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9149
Points: 3133

Reasons

Matt,

I looked back at each of my comments. In every case, I included the reason for the suggested change. First, I told you that the xhtml1.1 DTD is inappropriate due to the way it should be served. Serving with the proper MIME-type means that a single error causes a catastrophic failure to render; a good thing imo, but it makes non-programmers crazy. I even gave you the simple replacement DTD that triggers standards mode in all browsers, "<!DOCTYPE html>". I have even linked to the effective specifications.

Then, I told you to delete the IE compatibility meta element. Why? because it makes IE stupid. It is the reason you have the issue you posted about. In comment #6, I explained why the compatibility mode exists, and why new pages should not invoke it.

Please feel free to ask for clarification of the issues you don't understand, but do follow the instructions first.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 22 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

gary.turner wrote: If you

gary.turner wrote:

If you don't follow instructions, we're constantly talking at cross purposes.

I gave you exactly what you need to do.

Replace these lines

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<meta http-equiv='X-UA-Compatible' content='IE=EmulateIE7' />
<title>Junk Rx - Home</title>

with the following, exactly as shown.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>Junk Rx - Home</title>

cheers,

gary

What I am trying to point out though is that I did EXACTLY as stated above without luck of it solving my original problem. Is there something I am doing wrong at this point, cause if there is I can't seem to understand what it is.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 40 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9149
Points: 3133

Matt.Kaufman wrote: Alright,

Matt.Kaufman wrote:

Alright, well I replaced the doctype with the one provided and I am still having the same exact problem. I honestly don't get it and I am complying to the best of my knowledge but if someone tells you to do something and you have no idea what they are talking about then you are not going to be able to follow through. Beyond that though, what else could be the problem?

I just looked at your page, since you say you made the change, and I see the same old thing:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<meta http-equiv='X-UA-Compatible' content='IE=EmulateIE7' />

Before you say, "that didn't work", let us see that you did as suggested.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 22 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

That's odd as I saw what

EDIT: It posted again when I thought I had hit edit. Sorry about that.

Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 22 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

That's odd as I saw what

That's odd as I saw what you're talking about when I went into the IE developer tools and source code (the new code is listed below) But when I go to the area in which I publish my source code, it shows everything that's updated. The code shown below is what is shown in my advanced editor publisher. Is it possible it would take some time to catch up or something?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>{title}</title>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<body class="wsite-theme-light">
  <div id="container">
    <div id="top">
      <div id="header" class="wsite-header">
        <div id="title">{logo max-height="55"}</div><!-- header text -->
      </div>
 
      <div class="nav bl"><div class="nav2 br">
        <div id="navdiv">
          <ul id="navlist">
            {activeitem}<li id="active"><a href="{activeitemlink}">{activeitemtitle}</a></li>{/activeitem}
            {item}<li><a href="{itemlink}">{itemtitle}</a></li>{/item}
          </ul>
        </div>  
      </div></div>
 
      <div id="content">
        <div id="left">
          {content}
        </div>
      </div>
 
      <div class="footer tl"><div class="tr"><div class="br"><div class="bl">
 
<ul id="social-icon-links">
  <li class="yelp-icon"><a href=""><img src="/files/theme/Yelp.png" alt="Yelp" /></a></li>
 <li class="twitter-icon"><a href=""><img src="/files/theme/twitter.png" alt="Twitter" /></a></li>
 <li class="linkedin-icon"><a href=""><img src="/files/theme/linkedint.png" alt="Linked In" /></a></li>
  <li class="facebook-icon"><a href=""><img src="/files/theme/Facebook.png" alt="Facebook" /></a></li>
</ul>        
 
        <div id="copyright"><span id='weeblyFooter'>{footer}</span></div>
        <div class="clear"></div>
      </div></div></div></div>
    </div>
    <div id="bottom">
    </div>
  </div>
</body>
</html>

Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 22 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

Well, I figured out why I

Well, I figured out why I couldn't get it updated. I use an advanced editor through my host which is provided in a simple editor and when I did so it wasn't updating the index file so I had to go into my file manager and update it manually. Anyhow I whole heartedly appreaciate your patience with me Gary and thank you for time. Problem solved!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 29 weeks 1 day ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

However you are left now with

However you are left now with the knowledge that IE7 has issues with rendering the icons, question is are you concerned with supporting IE7? if so then a description of the issue would help, which I'm going to guess at being IE not shrinkwrapping the floated li elements to the width of their content but instead taking all available width of parent ul per li item and thus stacking the li elements one above the other rather than in a line, fix would be to add a width to the li elements.

Now If this is the issue I would ask how it has occurred??!! Looking back at the other post where I provided you with this code I expressly stated dimensions on the li elements and you appeared to do just that showing the changed code complete with the properties I suggested, yet in this post you appear to have removed these properties, why?

from top of thread wrote:

display: inline; /* forces lis to be on one line */

No it bloody doesn't where or who provided you with that bon mott?

display inline together with float was a hack to avoid a very ancient issue that used to exist with IE adding double margins to ul elements. The float property cancels the display property you cannot display something inline if it's floated float is a automatic block level property.

You probably need to stop taking advice from two different forums as you told me you were on the other thread, as clearly it causes issues, wastes time, and in terms of forum/board etiquette it's a frowned upon practice, it also does seem as though you are getting BADLY advised and then we have to pick up the pieces and correct what wasn't broken. I am not necessarily the font of all knowledge where CSS is concerned but on this forum we have many fonts and between us we can correctly advise to an extremely high degree on most frontend matters.

You must choose a forum and stick with it on a particular issue until they are not able to help further at which time it's appropriate and permissible to try another forum on the same question/issue

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 22 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

Well, I am sticking to this

Well, I am sticking to this forum as I find it more suitable. Unfortunately as much as I wanted the doctype fix to work there ended up being a problem. The publisher I use for my website automatically replaces the doctype with the default doctype which you must know all to well by now. To answer your questions, yes I am very interested in why this issue is actually happening. I don't just want a fix but I want to be able to understand why it is so. The issue that is happening is that when I put in the icons it seems to create a second footer above the original. If what I say is confusing you at all then you can rest easy that I am posting a screenshot for you to view. Thank you.

http://www.rxforjunk.com/error.png

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 29 weeks 1 day ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

Essentially it's due to no

Essentially it's due to no stated width on the ul.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Matt.Kaufman
Matt.Kaufman's picture
Offline
Regular
Washington, NJ
Last seen: 2 years 22 weeks ago
Washington, NJ
Timezone: GMT-5
Joined: 2012-01-22
Posts: 22
Points: 26

Essentially it due to the

Essentially it due to the width? So does that mean if the correct width were added it could possibly fix the problem? If yes, this would be added to the CSS, correct?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 29 weeks 1 day ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

Yes as per my example in the

Yes as per my example in the other thread iirc

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me