Jump to content

snailface

Members
  • Posts

    7
  • Joined

  • Last visited

snailface's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. How can i implement max and min width on Mac IE.I've used the "expression" workaround in a conditional comment for PC IE, but as far as I know, Mac IE doesn't recognize conditional comments, and I don't want to put an expression directly into my CSS file because then it won't validate.
  2. Little Goat -There is nothing in the external CSS, I just forgot to take it our when I created the stripped down set of code for this topic. Sorry.Tony -I took a look at everything in the Try It editor, and I still see the problem. The problematic links are the first ones that appear in the white portion of the module after clicking on the Tabs labled "Second" and "Third".Also, are you using IE6? That is the browser where I am finding the issue.
  3. snailface

    IE Bug?

    I have a page and a section of it, in its simplest form, is a container div, with an image floated left, and paragraphs.The problem I am finding is in IE 6. If the content of the paragraphs isn't enough to wrap to a point below the image, the bottom margin of the last paragraph is actually placed below the floated image.Anyone know why this is happening and what the fix is.Here is some sample code.Note, I used another div in place of the floated image. <html><head><style type="text/css">#container { width: 400px; overflow: hidden; border: solid 1px #000000;}#fakeImg{ float: left; width: 100px; height: 100px; background: #DDDDDD;}p{ margin: 0px 0px 20px 0px;}</style></head><body><div id="container"> <div id="fakeImg"></div> <p>some text</p> <p>some text</p></div></body></html>
  4. I'm afraid that adding a valid link does not correct the issue.Here is code with URLs in the HREF attribute. I still get the same issue. <html><head><title>HTML Template Test Page</title><link rel="stylesheet" href="./css/newCSS.css" type="text/css"><style type="text/css">/************* Begin Testing Declarations *************/.testShellCenter {width: 50%;border: solid 1px #999999; }.testShellRight {width: 25%;border: solid 1px #999999; }/************* End Testing Declarations *************//************* HTML ELEMENTS *************/body {margin: 0px;padding: 0px;font-size: 62.5%;color: #000000;font-family: verdana, arial, helvetica, sans-serif; }table {font-size: 1em;}ul {position: relative;clear: both;margin: 0 5px 1em 5px;padding: 0;list-style: none; }li {margin: 0px 0px 0.4em 0px;padding: 2px 0px 2px 22px;background: url(../images/bullet.gif) 0px 1px no-repeat; }a {font-size: 1em;font-weight: bold;color: #006699;text-decoration: none; }a:link {font-size: 1em;font-weight: bold;color: #006699;text-decoration: none; }a:visited {font-size: 1em;font-weight: bold;color: #808080;text-decoration: none; }a:hover {font-size: 1em;font-weight: bold;color: #006699;text-decoration: underline; }/************* CLASSES *************/div.htmlPortlet {position: relative;width: 100%;font-size: 1.1em;margin: 5px 0px 5px 0px; }div.hiddenContent {display: none; }div.shownContent {display: block; }/************* TABBED PORTLET SPECIFIC STYLES *************/div.tabbedPortlet {margin: 0px 0px 0px 0px; }div.tabbedPortlet table.portletTabs {margin: 0px; }div.tabbedPortlet table.portletTabs td {background:#B8D1EB;border:1px solid #B8D1EB;font-weight: bold;text-align: center;padding: 5px 0px 5px 0px;margin: 20px; }div.tabbedPortlet table.portletTabs td.tabOn {background:#FFFFFF; }div.tabbedPortlet div.tabbedContentWrapper {overflow: auto;height: 240px;padding: 5px 0px 5px 0px; }</style><script language="javascript">function showTabbedContent(clicked){tab = clicked;tabToShow = tab.id;tabNav = tab.parentNode;for(i=0; i<tabNav.childNodes.length; i++){ navTab = tabNav.childNodes[i]; if(navTab.nodeName == "TD" && tabToShow == navTab.id){ navTab.className = "tabOn"; }else if(navTab.nodeName == "TD" || tabToShow != navTab.id){ navTab.className = "tabOff"; }}contentToShow = tab.id + "Content";tabNav = tab.parentNode;while(tabNav.className != "portletTabs"){ tabNav = tabNav.parentNode;}tabWrapper = tabNav.nextSibling;while(tabWrapper.nodeName != "DIV" || tabWrapper.className != "tabbedContentWrapper"){ tabWrapper = tabWrapper.nextSibling;}for(i=0; i<tabWrapper.childNodes.length; i++){ content = tabWrapper.childNodes[i]; if(content.nodeName == "DIV" && contentToShow == content.id){ content.className = "shownContent"; }else if(content.nodeName == "DIV" && contentToShow != content.id){ content.className = "hiddenContent"; }}return false;}</script></head><body><div class="testShellCenter"> <div class="tabbedPortlet"> <table class="portletTabs" width="100%" border="0" cellpadding="0" cellspacing="1"> <tr> <td id="FirstTab" class="tabOn"><a href="#" onclick="javascript:showTabbedContent(this.parentNode);">First</a></td> <td id="SecondTab" class="tabOff"><a href="#" onclick="javascript:showTabbedContent(this.parentNode);">Second</a></td> <td id="ThirdTab" class="tabOff"><a href="#" onclick="javascript:showTabbedContent(this.parentNode);">Third</a></td> </tr> </table> <div class="tabbedContentWrapper"> <div id="FirstTabContent" class="shownContent"> <ul> <li><a href="http://www.google.com">test1</a></li> <li><a href="http://www.google.com">test2</a></li> </ul> </div> <div id="SecondTabContent" class="hiddenContent"> <ul> <li><a href="http://www.google.com">test2</a><!--link not clickable in IE6--></li> <li><a href="http://www.google.com">test3</a></li> </ul> </div> <div id="ThirdTabContent" class="hiddenContent"> <ul> <li><a href="http://www.google.com">test4</a><!--link not clickable in IE6--></li> </ul> </div> </div> </div></div></body></html>
  5. Can anyone out there help me with this? It's driving me crazy.
  6. My apologies.Here is the code again. <html><head><title>HTML Template Test Page</title><link rel="stylesheet" href="./css/newCSS.css" type="text/css"><style type="text/css">/************* Begin Testing Declarations *************/.testShellCenter { width: 50%; border: solid 1px #999999; }.testShellRight { width: 25%; border: solid 1px #999999; }/************* End Testing Declarations *************//************* HTML ELEMENTS *************/body { margin: 0px; padding: 0px; font-size: 62.5%; color: #000000; font-family: verdana, arial, helvetica, sans-serif; }table { font-size: 1em;}ul { position: relative; clear: both; margin: 0 5px 1em 5px; padding: 0; list-style: none; }li { margin: 0px 0px 0.4em 0px; padding: 2px 0px 2px 22px; background: url(../images/bullet.gif) 0px 1px no-repeat; }a { font-size: 1em; font-weight: bold; color: #006699; text-decoration: none; }a:link { font-size: 1em; font-weight: bold; color: #006699; text-decoration: none; }a:visited { font-size: 1em; font-weight: bold; color: #808080; text-decoration: none; }a:hover { font-size: 1em; font-weight: bold; color: #006699; text-decoration: underline; }/************* CLASSES *************/div.htmlPortlet { position: relative; width: 100%; font-size: 1.1em; margin: 5px 0px 5px 0px; }div.hiddenContent { display: none; }div.shownContent { display: block; }/************* TABBED PORTLET SPECIFIC STYLES *************/div.tabbedPortlet { margin: 0px 0px 0px 0px; }div.tabbedPortlet table.portletTabs { margin: 0px; }div.tabbedPortlet table.portletTabs td { background:#B8D1EB; border:1px solid #B8D1EB; font-weight: bold; text-align: center; padding: 5px 0px 5px 0px; margin: 20px; }div.tabbedPortlet table.portletTabs td.tabOn { background:#FFFFFF; }div.tabbedPortlet div.tabbedContentWrapper { overflow: auto; height: 240px; padding: 5px 0px 5px 0px; }</style><script language="javascript">function showTabbedContent(clicked){ tab = clicked; tabToShow = tab.id; tabNav = tab.parentNode; for(i=0; i<tabNav.childNodes.length; i++){ navTab = tabNav.childNodes[i]; if(navTab.nodeName == "TD" && tabToShow == navTab.id){ navTab.className = "tabOn"; }else if(navTab.nodeName == "TD" || tabToShow != navTab.id){ navTab.className = "tabOff"; } } contentToShow = tab.id + "Content"; tabNav = tab.parentNode; while(tabNav.className != "portletTabs"){ tabNav = tabNav.parentNode; } tabWrapper = tabNav.nextSibling; while(tabWrapper.nodeName != "DIV" || tabWrapper.className != "tabbedContentWrapper"){ tabWrapper = tabWrapper.nextSibling; } for(i=0; i<tabWrapper.childNodes.length; i++){ content = tabWrapper.childNodes[i]; if(content.nodeName == "DIV" && contentToShow == content.id){ content.className = "shownContent"; }else if(content.nodeName == "DIV" && contentToShow != content.id){ content.className = "hiddenContent"; } } return false;}</script></head><body><div class="testShellCenter"> <div class="tabbedPortlet"> <table class="portletTabs" width="100%" border="0" cellpadding="0" cellspacing="1"> <tr> <td id="FirstTab" class="tabOn"><a href="#" onclick="javascript:showTabbedContent(this.parentNode);">First</a></td> <td id="SecondTab" class="tabOff"><a href="#" onclick="javascript:showTabbedContent(this.parentNode);">Second</a></td> <td id="ThirdTab" class="tabOff"><a href="#" onclick="javascript:showTabbedContent(this.parentNode);">Third</a></td> </tr> </table> <div class="tabbedContentWrapper"> <div id="FirstTabContent" class="shownContent"> <ul> <li><a href="#">test1</a></li> <li><a href="#">test2</a></li> </ul> </div> <div id="SecondTabContent" class="hiddenContent"> <ul> <li><a href="#">test2</a><!--link not clickable in IE6--></li> <li><a href="#">test3</a></li> </ul> </div> <div id="ThirdTabContent" class="hiddenContent"> <ul> <li><a href="#">test4</a><!--link not clickable in IE6--></li> </ul> </div> </div> </div></div></body></html> The links that don't appear clickable are marked with comments.The version of IE in which I found this is 6.Also, I found that the links are not entirely unclickable. There appears to be about a 1px wide space at the beginning of the link that is clickable.Thanks in advance for the help.
  7. I'm working on a project where pieces of content will be contained within "tabbed" containers.In one of the containers, each tab contains a list of links, and for some reason, on all of the tabs, except for the first one, the first link in the list is not clickable in IE 6, and I can't figure out why, though I'm sure it's something super simple.It's almost as though some invisible element is covering it, preventing the user from clicking on it.I put together a sample page to illustrate. The code is below.<html><head><title>HTML Template Test Page</title><link rel="stylesheet" href="./css/newCSS.css" type="text/css"><style type="text/css">/************* Begin Testing Declarations *************/.testShellCenter {width: 50%;border: solid 1px #999999; }.testShellRight {width: 25%;border: solid 1px #999999; }/************* End Testing Declarations *************//************* HTML ELEMENTS *************/body {margin: 0px;padding: 0px;font-size: 62.5%;color: #000000;font-family: verdana, arial, helvetica, sans-serif; }table {font-size: 1em;}ul {position: relative;clear: both;margin: 0 5px 1em 5px;padding: 0;list-style: none; }li {margin: 0px 0px 0.4em 0px;padding: 2px 0px 2px 22px;background: url(../images/bullet.gif) 0px 1px no-repeat; }a {font-size: 1em;font-weight: bold;color: #006699;text-decoration: none; }a:link {font-size: 1em;font-weight: bold;color: #006699;text-decoration: none; }a:visited {font-size: 1em;font-weight: bold;color: #808080;text-decoration: none; }a:hover {font-size: 1em;font-weight: bold;color: #006699;text-decoration: underline; }/************* CLASSES *************/div.htmlPortlet {position: relative;width: 100%;font-size: 1.1em;margin: 5px 0px 5px 0px; }div.hiddenContent {display: none; }div.shownContent {display: block; }/************* TABBED PORTLET SPECIFIC STYLES *************/div.tabbedPortlet {margin: 0px 0px 0px 0px; }div.tabbedPortlet table.portletTabs {margin: 0px; }div.tabbedPortlet table.portletTabs td {background:#B8D1EB;border:1px solid #B8D1EB;font-weight: bold;text-align: center;padding: 5px 0px 5px 0px;margin: 20px; }div.tabbedPortlet table.portletTabs td.tabOn {background:#FFFFFF; }div.tabbedPortlet div.tabbedContentWrapper {overflow: auto;height: 240px;padding: 5px 0px 5px 0px; }</style><script language="javascript">function showTabbedContent(clicked){tab = clicked;tabToShow = tab.id;tabNav = tab.parentNode;for(i=0; i<tabNav.childNodes.length; i++){navTab = tabNav.childNodes;if(navTab.nodeName == "TD" && tabToShow == navTab.id){navTab.className = "tabOn";}else if(navTab.nodeName == "TD" || tabToShow != navTab.id){navTab.className = "tabOff";}}contentToShow = tab.id + "Content";tabNav = tab.parentNode;while(tabNav.className != "portletTabs"){tabNav = tabNav.parentNode;}tabWrapper = tabNav.nextSibling;while(tabWrapper.nodeName != "DIV" || tabWrapper.className != "tabbedContentWrapper"){tabWrapper = tabWrapper.nextSibling;}for(i=0; i<tabWrapper.childNodes.length; i++){content = tabWrapper.childNodes;if(content.nodeName == "DIV" && contentToShow == content.id){content.className = "shownContent";}else if(content.nodeName == "DIV" && contentToShow != content.id){content.className = "hiddenContent";}}return false;}</script></head><body><div class="testShellCenter"><div class="tabbedPortlet"><table class="portletTabs" width="100%" border="0" cellpadding="0" cellspacing="1"><tr><td id="FirstTab" class="tabOn"><a href="#" onclick="java script:showTabbedContent(this.parentNode);">First</a></td><td id="SecondTab" class="tabOff"><a href="#" onclick="java script:showTabbedContent(this.parentNode);">Second</a></td><td id="ThirdTab" class="tabOff"><a href="#" onclick="java script:showTabbedContent(this.parentNode);">Third</a></td></tr></table><div class="tabbedContentWrapper"><div id="FirstTabContent" class="shownContent"><ul><li><a href="#">test1</a></li><li><a href="#">test2</a></li></ul></div><div id="SecondTabContent" class="hiddenContent"><ul><li><a href="#">test2</a></li><li><a href="#">test3</a></li></ul></div><div id="ThirdTabContent" class="hiddenContent"><ul><li><a href="#">test4</a></li></ul></div></div></div></div></body></html>
×
×
  • Create New...