Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login


Tycoon Talk > Web Development and Programming Support > CSS Forum > IE - link/form issues with DIVs

Reply
IE - link/form issues with DIVs
Old 09-12-2008, 05:24 PM IE - link/form issues with DIVs
[B]lackwater's Avatar
Novice Talker

Posts: 14
Trades: 0
Talkupation: [B]lackwater is on a distinguished road
Hello all,

I'm having a problem with IE and the links on my website. The site is a three column layout. The left most column being the main menu and the middle being the main content area. Links work perfectly in these two areas. The right column is the "sub-content" and contains useful information and the calendar. In IE none of the links on the calendar can be clicked on for some reason, but all of the links in the sub-content area work perfectly. The calendar links can be "tabbed" to.

The website has a basic content editing system on it. Clicking login, present the user with usr and pass fields plus a submit button. None of which in IE can be clicked on with the mouse however, the tab feature still works and the user can login using that method.

Once logged in there are form buttons around the site that allow the user to edit different areas, in IE none of these can be clicked on however, they can be "tabbed" to.

I've checked the DIVs and Z-index of everything and there is no reason it should be doing this. The scripting works perfectly in Firefox but because MS makes trash software it doesn't work in IE. Anyone have the fix or a way to fix it?
[B]lackwater is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 09-12-2008, 05:33 PM Re: IE - link/form issues with DIVs
[B]lackwater's Avatar
Novice Talker

Posts: 14
Trades: 0
Talkupation: [B]lackwater is on a distinguished road
Here is the code for the website:
Code:
<div style='position:relative; margin-top:30px; margin-left:auto; margin-right:auto; width:208px;'>
<div class='menu_top'></div>
<div class='menu_mid'>
	<div style='padding-top:17px; margin-left:4px;'>
    <ul class='drawers' style='font-family:sans-serif;'>
        <li class='drawer'><span class='drawer-handle'><a href=''>Home Page</a></span></li>       
		 <li class='drawer'><span class='drawer-handle'><a href=''>Worship Services</a></span></li>
        <li class='drawer'><span class='drawer-handle'><a href='sermons.php'>Sermons</a></span></li>
        <li class='drawer' style='cursor:pointer;'><span class='drawer-handle'>Music</span>
            <ul style='margin-left:-25px;'><div class='submenu'>
                <li><a href='chancel_choir.php'>Chancel Choir</a></li>
				<li><a href=''>Youth Choir</a></li>
				<li><a href=''>JoyRide</a></li>
				<li><a href=''>Praise Dancers</a></li>
			</div></ul>
        </li>
        <li class='drawer' style='cursor:pointer;'><span class='drawer-handle'>Education</span>
            <ul style='margin-left:-25px;'><div class='submenu'>
                <li><a href=''>Adult School</a></li>
				<li><a href=''>Youth School</a></li>
				<li><Confirmation</li>
				<li>Bible School</li>
				<li>Memorial Library</li>
			</div></ul>
        </li>
        <li class='drawer' style='cursor:pointer;'><span class='drawer-handle'>Fellowship</span>
            <ul style='margin-left:-25px;'><div class='submenu'>
                <li><a href=''>Men's</a></li>
				<li><a href=''>Women's</a></li>
				<li><a href=''>Youth Groups</a></li>
			</div></ul>
        </li>
        <li class='drawer' style='cursor:pointer;'><span class='drawer-handle'>Small Groups</span>
            <ul style='margin-left:-25px;'><div class='submenu'>
                <li><a href='prayer_group.php'>Prayer Group</a></li>
				<li><a href=''>Prayer Shawl</a></li>
				<li><a href=''>Listening for God</a></li>
				<li><a href=''>Affirming Life</a></li>
				<li><a href=''>Laity Empowerment</a></li>
				<li><a href=''>Scrapbooking</a></li>
				<li><a href=''>Reading</a></li>
			</div></ul>
        </li>
        <li class='drawer last'><span class='drawer-handle'><a href=''>Missions</a></span></li>
    </ul>
<p style='text-align:center;'><img src='images/menu/resources.png' alt='' /></p>
	<div style='padding-top:0px; margin-left:1px;'>
	<ul>
		<li><a href=''>Staff Directory</a></li>
		<li><a href='#'>Calendar</a></li>
		<li><a href=''>Contact Us</a></li>
		<li><a href=''>Login</a></li>
	 </ul>
	</div>
</div>
<div class='menu_bottom'></div>
</div></div>
<br/><br/>
<p style='font-family:Palatino; font-size:0.8em; font-weight:600; text-align:center;'></a></p>
</body>
</html> 
    </div>
<!-- END MENU -->

<!-- MAIN CONTENT START -->
    <div class="main_content">
      <br/><br/><br/>
      <p style="margin-top:0px; font-family:tahoma;">
<img src='images/church.jpg' style='width:135px; border:0px solid #FFF; float:left; margin-right:15px; margin-bottom:5px;' alt='' /><p style='text-align:center;'><p><b>Welcome!</b> to First Church, Congregational, a home away from home where we offer two centuries of tradition woven together within the fabric of today's spiritual realities - greeting all people with open arms, sincere smiles and hearts filled with the love of God. Welcome Home.</p> 

<p>CONTENT</p>
 
<p>CONTENT</p>
<p>CONTENT</p>
<br/><br/>
    </div>
<!-- END MAIN CONTENT -->
<!-- SUB CONTENT START -->
    <div class="sub_content">
      <p style="margin-top:0px;">
	  	<p style="margin-bottom:5px;"><b>Calendar</b></p>
<table align='center' style='border:1px solid #000; font-size:0.7em;' width='90%'><tr><th colspan='7' style='font-size:1.2em; background-color:#7c146d; color:#FFF; border:1px solid #333;'> September 2008 </th></tr><tr><th>S</th><th>M</th><th>T</th><th>W</th><th>R</th><th>F</th><th>S</th><tr><td></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=1&Month=September'>1</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=2&Month=September'>2</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=3&Month=September'>3</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=4&Month=September'>4</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=5&Month=September'>5</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=6&Month=September'>6</a></td></tr><tr><td style='text-align:center;'><a href='calendar_day.php?Calendar=7&Month=September'>7</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=8&Month=September'>8</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=9&Month=September'>9</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=10&Month=September'>10</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=11&Month=September'>11</a></td><td style='border:1px solid #7C146D; text-align:center;'><a href='calendar_day.php?Calendar=12&Month=September'><b>12</b></a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=13&Month=September'>13</a></td></tr><tr><td style='text-align:center;'><a href='calendar_day.php?Calendar=14&Month=September'>14</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=15&Month=September'>15</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=16&Month=September'>16</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=17&Month=September'>17</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=18&Month=September'>18</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=19&Month=September'>19</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=20&Month=September'>20</a></td></tr><tr><td style='text-align:center;'><a href='calendar_day.php?Calendar=21&Month=September'>21</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=22&Month=September'>22</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=23&Month=September'>23</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=24&Month=September'>24</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=25&Month=September'>25</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=26&Month=September'>26</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=27&Month=September'>27</a></td></tr><tr><td style='text-align:center;'><a href='calendar_day.php?Calendar=28&Month=September'>28</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=29&Month=September'>29</a></td><td style='text-align:center;'><a href='calendar_day.php?Calendar=30&Month=September'>30</a></td><td> </td><td> </td><td> </td><td> </td></tr></table><br/><p style='text-align:center;'><table width=95%" align="center" border="0" style="border:1px solid #000; font-size:0.9em;">
<tr><th colspan="2" style="color:#FFF; background-color:#7c146d; border:1px solid #000;">Worship Services</th></tr>
<tr><td>9:00 a.m.</td><td><b>Contemporary</b></td></tr>
<tr><td>10:00 a.m.</td><td><b>Sunday School</b></td></tr>
<tr><td>11:00 a.m.</td><td><b>Traditional</b></td></tr>
</table>

<br/><br/>

<p style="text-align:center; width:95%;"></p>
<br/><br/>
<p style="text-align:center;"><a href="http://www.mozilla.com/products/download.html?product=firefox-3.0.1&os=win&lang=en-US"   />Download Firefox</a><br/><br/>    
    </div>
<!-- END SUB CONTENT -->

  </div>
<!-- CONTENT END -->

<!-- FOOTER START -->
  <div class="footer"></div>
  <div class="copy">&copy;&nbsp;2008 White Cloud Designs</div>
<!-- END FOOTER -->
</div>
Code for the CSS Stylesheet that is specific to IE:
Code:
/* CSS Document */

body {
  background-color:#2848E6;
  background-image:url('images/Bkgd.jpg');
  background-repeat:repeat-x;
  height:100%;
  margin:0px; }

#wrapper {
  position:relative;
  width:920px;
  min-height:100%;
  margin-left:auto;
  margin-right:auto;
  margin-top:-30px;
  z-index:0; }
  
.content {
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/BkgdContent.png', sizingMethod='scale');
  width:920px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  z-index:0; }
  
.menu {
  width:180px;
  float:left;
  margin-top:10px;
  margin-left:15px;
  font-family:Palatino;
  font-size:0.9em;
  z-index:1; }
  
.main_content {
  width:450px;
  margin-left:12px;
  display:inline;
  font-family:Palatino;
  font-size:1em;
  z-index:3;
  float:left; }

 .menu li {
 	list-style-image:url('images/li.gif');
	color:#FFF;
 }
 
 .submenu li {
 	list-style-image:url('images/li_inv_ie.png');
	margin-left:35px;
}

.submenu a {
	color:#000;
 }
	

.main_content_nosub {
  width:450px;
  margin-left:12px;
  font-family:Palatino;
  font-size:1em;
  z-index:3;
 }

.menu_top { 
  background-image:url(images/menu/menu_top.jpg); 
  background-repeat:no-repeat;
  width:208px;
  z-index:1;
  height:28px;
}

.menu_mid {
  background-image:url('images/menu/menu_mid.jpg'); 
  background-repeat:no-repeat; 
  background-color:#7c146d; 
  width:208px;
  height:300px;
  z-index:1;
}

.menu_bottom {
  background-image:url(images/menu/menu_bottom.jpg); 
  background-repeat:no-repeat; 
  width:208px;
  height:27px;
  z-index:1;
}
  
.sub_content {
  width:180px;
  height:600px;
  float:left;
  font-family:Palatino;
  font-size:0.9em;
  margin-left:13px;
  margin-top:35px;
  z-index:1; }
  
.footer {
  background-image:url('images/Footer.gif');
  background-repeat:no-repeat;
  position:relative;
  width:920px;
  height:61px;
  margin-left:auto;
  margin-right:auto;
  margin-top:0px;
  clear:both;
  z-index:0;
[B]lackwater is offline
Reply With Quote
View Public Profile
 
Old 09-13-2008, 11:34 AM Re: IE - link/form issues with DIVs
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Talkupation: LadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond repute
You've got z-index all over the place, most of which are being ignored because z-index ONLY works on a positioned element - absolute or relative. So all that z-indexing on anything else is a waste of time.

Float:left, with margin-left triggers IE6's doubled-float margin bug which can blow up your layout. Adding display:inline in a separate css file called with conditional comments will correct that bug.

You might want to read up on IE6's bugs here: http://www.positioniseverything.net
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 09-13-2008, 08:26 PM Re: IE - link/form issues with DIVs
[B]lackwater's Avatar
Novice Talker

Posts: 14
Trades: 0
Talkupation: [B]lackwater is on a distinguished road
Thanks, I'll look into those and see what I can manage I'll post here again if I need more help or if everything worked!

Quote:
You might want to read up on IE6's bugs here: http://www.positioniseverything.net
Its sad that IE has to be this crappy of a program...
__________________
Code:
if( $hungry ) { eat(); } 
    else { sleep(); }
[B]lackwater is offline
Reply With Quote
View Public Profile
 
Old 09-19-2008, 10:25 PM Re: IE - link/form issues with DIVs
[B]lackwater's Avatar
Novice Talker

Posts: 14
Trades: 0
Talkupation: [B]lackwater is on a distinguished road
Here is the scoop. I set in the head of the website some php that chooses the proper style sheet depending upon the browser. I added in the `display:inline;' and even tried removing the float and margin-left commands in the IE style sheet. The only change is the layout moves, the links are still useless.

I don't see how the double float margin problem will effect whether or not the links work.
__________________
Code:
if( $hungry ) { eat(); } 
    else { sleep(); }
[B]lackwater is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to IE - link/form issues with DIVs
 
Previous Thread | Next Thread Tycoon Talk > Web Development and Programming Support > CSS Forum > IE - link/form issues with DIVs

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.30736 seconds with 12 queries