CSS - Internet Explorer Scrollbar Issues

Hey guys. I found some CSS code that will causes the latest IE 6 browsers to display an error reporting window if the service is running and close IE. It works on two computers. A celeron 1.2GHz and an Athlon 2600+.

Here is the original code that IE works fine with.
Code:

/*nav.css*/
#nav *{font: small-caps normal 98%/1em sans-serif;display:block;}
#nav * a{color:#9fb594;display:block;}
#nav_list,#nav,#nav_main{float:left;clear:none;}
#nav_main{background-image:url('../image/nav_bg.png');background-repeat:repeat-y;width:122px;}
#nav_foot{background-image:url('../image/nav_foot.png');background-repeat:no-repeat;height:177px;width:122px;}
#nav_foot{font: small-caps normal .6em/1em sans-serif;}
#nav_foot a{width:105px;margin-top:2px;vertical-align:bottom;}
#nav * ul{list-style-type:none;padding:0;margin:0;}
#sub_nav_list{background-color:#000;text-align:right;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a{width:105px;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a,#sub_nav_list,#nav_foot{float:left;clear:both;}
.nav_item{height:2.2em;}
.sub_nav_item a{padding-bottom:.5em;min-height:1em;}
.selected a.nav_hlink{font:normal small-caps 900 98%/1em sans-serif;}
#nav_main * a:hover{background-color:#333;}

The last item, the hover, is what is changed.
Code:

/*nav.css*/
#nav *{font: small-caps normal 98%/1em sans-serif;display:block;}
#nav * a{color:#9fb594;display:block;}
#nav_list,#nav,#nav_main{float:left;clear:none;}
#nav_main{background-image:url('../image/nav_bg.png');background-repeat:repeat-y;width:122px;}
#nav_foot{background-image:url('../image/nav_foot.png');background-repeat:no-repeat;height:177px;width:122px;}
#nav_foot{font: small-caps normal .6em/1em sans-serif;}
#nav_foot a{width:105px;margin-top:2px;vertical-align:bottom;}
#nav * ul{list-style-type:none;padding:0;margin:0;}
#sub_nav_list{background-color:#000;text-align:right;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a{width:105px;}
.nav_item,.sub_nav_item,.selected,.sub_nav_item a,#sub_nav_list,#nav_foot{float:left;clear:both;}
.nav_item{height:2.2em;}
.sub_nav_item a{padding-bottom:.5em;min-height:1em;}
.selected a.nav_hlink{font:normal small-caps 900 98%/1em sans-serif;}
#nav_main * a:hover{background-color:#333; width:80%;margin:auto; }

This works fine in Firefox, doesn't look too good. I'm trying to figure something out so that when it's actived it looks kinda like the buttons used in a lot of linux console setup programs. Like the nvidia driver installer and the slackware setup buttons. Trying to figure out how to make this crapy looking site look better. I guess stupid "animations" based on linux console isn't the best way to go :P

Hey people.

i have created a "fixed" toolbar for my website and runs fine in both safari and firefox... however in IE 6 and 7 the toolbar gets stuck and does not flow with the page. i used a fix which makes it apear in the right place this can be found he
http://tagsoup.com/cookbook/css/fixed/

here is the website so far, try opening it in both IE and another brouser too see the difference.
http://people.brunel.ac.uk/~dt08ajm/playgroundtest/

any ideas on how i can fix it? i can post the code if needed.

thanks in advance.

i have a div on a page that i want to be centered. i am using in css as
Code:

margin: 0 auto

that works fine and is centered in firefox, but is left aligned in internet explorer.
how to accompalish it in iexplorer ??

I am trying to see what is the problem at my css with internet explorer , banner is appearing over the text however in firefox, safari or opera it works fine.

Please check it he
ucables.com

css style used is he
ucables.com/account/styles/ucables.css

Please can you help me to find what is the problem i dont know what internet explorer bug is causing this problem

THank you in advance

Hi,

I would really appreciate some help sorting out an error that seems to only crop up on IE.

http://www.formulation.org.uk/redesign

Is fine on mac browsers (Safari/Camino/Firefox etc.). and fine on windows firefox.

the problem appears to be with content wrap. It covers a majority of the banner and navigation bar background. I did manage to fix this with fixed positioning - however this caused adverse effects to the footer.

Thanks in advance,

Tom

I am trying to see what is the problem at my css with internet explorer 6.0, all text is put at the bottom of the page, however in firefox, safari or opera it works fine.

Please check it he
ucables.com/search/iphone

css style used is he
ucables.com/account/styles/ucables.css

Please can you help me to find what is the problem i dont know what internet explorer bug is causing this problem

THank you in advance

I have a div #footer at the bottom of a page.

All works except in MSIE (v6) where ol' Bill Gates decides to duplicate the #footer:
http://www.jobsinkent.com/v5c/home/index.php

If I remove the float:left from #footer it displays fine (but out of position!!) ... ideas welcome!!

Hi, for reasons unknown my template is being displayed towards the far right of the browser in Internet Explorer...It works fine in Firefox (page is centered) but I am rather confused as to why it is being displayed so strangely in IE? Help would be appreciated.

Site: www dot 21healthconsult dot com

CSS:

Code:

    /* Generic Selectors */ 

   div.wrapper {
   height: 100%;
   width: 950px;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
   }

    body { 

    font-family: Georgia, "Times New Roman", Times, serif;

    font-size: 14px; 

    color: #000000;

    background-color: #FFFFFF; 

    } 

    p { 

    width: 100%; 
    text-align: left;

    }

    h1 { 

    font-family: Georgia, "Times New Roman", Times, serif; 

    font-size: 18px; 

    font-weight: bold; 

    color: #000000; 

    } 

	
    h2 { 

    font-family: Georgia, "Times New Roman", Times, serif; 

    font-size: 14px;

    font-weight: none; 

    color: #000000; 

    border-bottom: 1px solid #E0E0E0; 

    } 



 
    /**************** Pseudo classes ****************/ 

    :link { 

    color: #0066FF; 

    text-decoration: none; 

    font-weight: none; 

    } 


  li {

      list-style-type: disc; 

      line-height: 150%; 

      } 


    li :link { 

    color: #0066FF; 

    text-decoration: none; 

    font-weight: bold; 

    } 

    
	:visited { 

    color: #0066FF;

    text-decoration: none; 

    font-weight: none; 

    } 


    li :visited { 

    color: #0066FF; 

    text-decoration: none; 

    font-weight: bold; 

    } 

    :hover {

    color: #0066FF;

    padding-bottom: 5px; 

    font-weight: none;

    text-decoration: underline; 

    } 

    li :hover { 

    display: block; 

    color: rgb(0, 96, 255); 

    padding-bottom: 5px; 

    font-weight: bold; 

    border-bottom-width: 1px; 

    border-bottom-style: solid; 

    border-bottom-color: #C6EC8C; 

    } 


   :active { 

    color: #0066FF; 

    font-weight: none; 

}
   
   


    /************************* ID's *************************/ 


    #header {

    position: absolute;

    width: 900px;

    height: 50px;

    margin: 0;

    margin-top: 15px;

    padding: 0 0 50px 50px; /*top right bottom left*/

    text-align: left;

    }

    #t_navigation { 

    position: absolute;

    z-index: 10; 

    width: 900px; 

    height: 50px; 

    margin: 0; 

    margin-top: 48px; 

    padding: 0 0 50px 300px; /*top right bottom left*/

    font-weight: normal; 

    font-size: 11;

    text-align: left;

    } 

    #search_frame {

    position: absolute;

    z-index: 10; 

    margin: 0; 

    margin-top: 15px; 

    padding: 0 0 0 300px; /*top right bottom left*/

    width: 600px;

    }

#search_box {
background-color: #F0F0F0; 
width: 600px;
height: 28px;
}

#search_box #s {
float: left;
padding: 0;
margin: 6px 0 0 0;
border: 0;
width: 569px;
background-color: #F0F0F0; 
font-color: #000000;
}

#search_box #go {
width: 27px;
margin: 3px 4px 0 0;
font-color: #000000;
float: right;
}

    #l_navigation { 

    position: absolute;

    z-index: 10; 

    width: 210px; 

    height: 600px; 

    margin: 0; 

    margin-top: 80px; 

    padding: 0 0 50px 50px; /*top right bottom left*/

    border-right: 1px solid #E0E0E0; 

    font-weight: normal; 

    text-align: left;

    } 

   
    #centerDoc { 

    position: absolute; 

    z-index: 15; 

    padding: 0 0 50px 300px; /*top right bottom left*/

    margin-top: 80px; 
    
    width: 900px;

    text-align: left;

    }

OK basically this css code is causing problems in IE.5 OS/9 on the mac

I was wondering if the Windows version caused the same problems when rendering these css buttons:


#elButton a {
color: white;
font-size:10px;
font-family:verdana;
font-weight:bold;
text-align:center;
text-decoration: none;
border:3px outset #99ccff;
background-color: #3399ff;
display: block;
margin: 1px;
width: auto;
height: 2.5 em;
padding: 3px 5px 0;
}

#elButton a:hover {
background-color: #D43D2A;
color:#ffffff;
padding-left:5px;
border:3px inset #ffffff;
}

==============================================
html code:

<DIV id="elButton">
<DIV><A href="#" onclick="img(1)">Next</A></DIV>
<DIV><A href="#" onclick="img(-1)">Prev</A></DIV>
</DIV>

THANKS GUYS !!

I am having problems getting my menu to align, I found the menu system at.

http://www.gazingus.org/html/Using_...HTML_Menus.html

However when you try and center it using tables or divs you get the result you can see in the attached image.

Strange thing it works fine in firefox, and sort of okay in opera, though its not centered and the menu is a little bugged.

I just can't think what causing the problem and its annoying me.

I've attached all the files in zip file for people to explore and see were i am going wrong.

thanks

OK, so IE 8 comes out, and it has the "compatibility mode" icon, to let everyone know the page is broken when the IE8 doesn't like the particular CSS. Through reading through tons of Microsoft documentation, however, I can't find anything that helps validate your CSS for IE8, or even tell you what it likes and what it doesn't like. It actually has some nice developer tools where it allows you to validate your CSS and HTML with W3C, but to no avail. You can be perfectly validated w/ W3C, and still the icon will show up saying it's broken for IE8 (and, in some cases, it actually is).

Any one know of where I can find a resource to validate sites for IE8, so that that damn icon doesn't keep showing up, and so I can more easily figure out what the heck it is IE8 doesn't like about my site?

I have my website look exactly how I want it on Firefox and Safari. I checked it on IE 7 and it looks all out of wack! My design is a 3 column design with a column on the left that has a menu, the middle column has my content so far, and the right column is reserved for banners and links. The problem with IE is the left and right column meet and overlap in the middle of the page. How can I fix this without messing it up for the other browsers? my site is at www. highartculture .com. Thank you very much.

Any idea why in IE the images and form elements in the middle row of this table are 50% opacity, but none of the text is?
The IE CSS: http://ezdispatch.org/css/ezd_ie.css
The other CSS: http://ezdispatch.org/css/ezd.css

As a note, The IE version of this page (see a larger version he http://ezdispatch.org/view_orders.php ) is already hacked beyond belief (ok, it's not THAT bad...but it's not cool either). Basically, to do the partially see-through background I used a .png with 50% alpha transparency (.grey & .important classes). The problem is that IE doesn't do PNG alpha transparency without their proprietary filters applied. Once I figured that out, it still didn't work. Turns out you can't attach the filtered png background to the tr...you must attach to the tds. So I did. Then I found out that the filtered background image stops propogation of clicks. You can fix the clicks that go to links by making the bg image 1x1...no problem. But, the table rows need to get clicks because they expand when clicked. To do that I added a clear 1x1 gif as the background image over the top of the filtered background image. For some reason that takes the click, and passes it through...even though there is still a filtered image.

The reason for wanting opacity for the whole row (as you would see viewing the bigger page in Firefox) is either for rows that are "done" or rows that are "deleted" (rather than the ugly line-through).

If you are confused...join the club. If you can find a solution, you are my hero.

Good Evening Folks,

I would like to discuss Transparent PNG files and Internet Explorer.

I like to use 24-bit PNG files with transparency in my web work.
I like to overlay transparent backgrounds onto images with text
formatted over the top.

I like to use transparent PNG's as backgrounds for buttons, text and boxes
all over the place, I even like using them to mask out images.

I am very keen on using 24-Bit transparent PNG files in web design.

The only thing that really stops me or at least puts me off using them
is compatability problems with IE6 and below. IE7 doesn't seem to have
any problems with them.

I have found away to make 24-Bit transparent PNG files work in IE6,
It requires using a proprietary IE filter called AlphaImageLoader
I am still experimenting with it, but It seems to work OK utilising a few @import hacks.

But I can't make this filter work in IE5.5 or IE5, although Micro$oft's
doccumentation says I should be able to make it work in 5.5. Anyway I
could always use @import hacks to make IE5 browsers use GIF images
instead or maybe even JPGs.

Now to me this is a lot of mucking around, I accept that a lot of people still use IE6 but how many people are still using IE5.5 and IE5?
Does anyone have any other theories or ideas on how to go about this?

CAn anyone tell my why in firefox this code showes borders on all sides but in ie it only shows left and right borders?
Code:

<style type="text/css">	 
 		
 a:link
 {
 text-decoration:none;
 color:#000000;
 background:white;
 font-weight : bold;
 display:inline;
 border-color:#000000;
 border-style:solid;
 border-width:1px;
 padding-left:3px;
 padding-right:3px;
 padding-top:3px;
 padding-bottom:3px;
 
 }
 
 a:active
 {
 text-decoration:none;
 color:FFFFFF;
 background:background-color:#FFFFFF;
 font-weight:bold;
 display:inline;
 border-color:#FFFF00;
 border-style:solid;
 border-width:1px;
 padding-left:3px;
 padding-right:3px;
 padding-top:3px;
 padding-bottom:3px;
 }
 
 a:visited 
 {
 text-decoration:none;
 color:#0000FF;
 font-weight:bold;
 display:inline;
 border-color:#000000;
 border-style:solid;
 border-width:1px;
 padding-left:3px;
 padding-right:3px;
 padding-top:3px;
 padding-bottom:3px;
  }
 
 a:hover
 {
 text-decoration:none;
 color:FFFFFF;
 font-weight:bold;
 background:background-color:#FFFFFF;
 display:inline;
 border-color:#FFFF00;
 border-style:solid;
 border-width:1px;
 padding-left:3px;
 padding-right:3px;
 padding-top:3px;
 padding-bottom:3px;
 	  
 }
 
 .navigationBorder
 {
 width:600px;
  }
 
 </style>
 <div class="navigationBorder">
 <a href="http://www.2dwebdesign.com/index.html">Home</a>
 
 <a href="http://www.2dwebdesign.com/design.html/">Design</a>
 
 <a href="http://www.2dwebdesign.com/build.html/">Build</a>
 
 <a href="http://www.2dwebdesign.com/publish.html/">Publish</a>
 
 <a href="http://www.2dwebdesign.com/promote.html/">Promote</a>
 </div>