|
CSS - Overflow:auto; And Mac Internet Explorer 5.2
Hello All:
I'm working on a design (See insivia.com/fo) and I was wondering if someone could give me some insight on using the css style "overflow:auto;" instead of using an iframe. Specifically, if you mouseover "our company" and go to "overview" you'll see that the "overflow:auto;" works great on all of the browsers (both PC and MAC systems) except IE on MAC. I was wondering if there is something that I have done incorrectly or if there is some kind of work around. Using the traditional iframe doubles my work and I'd rather not spend the time if at all possible. I've studied css and many different posts and compatibility charts and they all say that there is NO compatibility issues with using "overflow:auto;" in MAC IE. my css code below: Code:
html {
width:100%;
height:100%;
}
body {
background:#877966;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
img {
margin-bottom: 0px;
}
#site {
text-align:left;
width:756px;
padding:0px;
border:0px;
margin:0px;
border-top:18px solid #000000;
border-bottom:18px solid #000000;
}
#site .top {
background:#000000;
font: bold 10px Arial, Verdana;
color:#ffffff;
padding:2px 0px 20px 0px;
width:756px;
border:0px;
margin:0px;
}
.top_nav{
width:756px;
}
#site .navigation {
width:756px;
float:left;
}
#site .heading_title {
float:left;
white-space:nowrap;
border:0px;
margin:0px;
padding:0px;
width:592px;
}
#site .heading_ext {
float:right;
white-space:nowrap;
border:0px;
margin:0px;
padding:0px;
width:164px;
}
#site .main {
font:normal 10px verdana;
float:left;
background:#ffffff;
padding:0px;
border:0px;
margin:0px;
width:469px;
height:218px;
overflow:auto;
}
#site .image {
white-space:nowrap;
padding:0px;
text-align:right;
float:right;
border:0px;
margin:0px;
width:287px;
}
#site .bottom {
padding:0px;
border:0px;
margin:0px;
width:756px;
background:#000000;
}
#site .bottom_logo2 {
clear:both;
background:#000000;
width:756px;
}
I appreciate everyone's help! Best, BAF Similar TutorialsWhy Oh Why?? Internet Explorer.... *gripe gripe* I have this basic code... Code:
#rightside {
float:right;
width:315px;
}
#rightside_top {
height:6px;
background:url(/images/rightbg_top.gif) no-repeat;
}
#rightside_bottom {
height:800px;
background:url(/images/rightbg_bottom.gif);
}
<div id="rightside">
<div id="rightside_top"></div>
<div id="rightside_bottom"></div>
</div>
It looks great in anything that isn't IE... but IE adds about 10px under the first div (rightside_top), which breaks the image effect i am trying to accomplish anyone know how to efficiently get rid of this gap?? I am building a custom form control that behaves more or less like a <select> menu. For the dropdown portion of the menu, I need to set a max-height. If the dropdown contains enough options to go beyond the max-height a vertical scrollbar should appear. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Custom Auto-Complete</title>
<script type="text/javascript">
<!--
function initPage()
{
}
-->
</script>
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 76%;
}
input {
width: 200px;
background: #f4f4f4;
border: 1px solid #999;
font-size: .9em;
/*
*/
}
.clearfix {
display: inline-block;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.cAutoCompleteCtl {
position: relative;
/*
border: 3px solid red;
*/
}
.cAutoCompleteCtl input {
margin: 0 5px 0 0;
display: block;
float: left;
}
.cAutoCompleteCtl a.dwnarrow {
width: 15px;
height: 15px;
border: 1px solid #999;
background: url(images/downarrow.gif)
no-repeat;
background-position: center center;
background-color: #efefef;
float: left;
display: block;
font-size: 1px;
text-decoration: none;
}
.cAutoCompleteCtl .acCtlDropdwn {
position: absolute;
top: 20px;
left: 0px;
z-index: 100;
visibility: visible;
min-width: 300px;
max-width: 600px;
height: auto;
max-height: 200px;
background: #fff;
padding: 5px;
border: 1px solid #999;
overflow: auto;
/*
width: 400px;
*/
}
* html .cAutoCompleteCtl .acCtlDropdwn {
width: expression( this.scrollWidth < 330 ? "300px" : ( this.scrollWidth > 620 ? "600px" : "auto" ) );
height: expression( this.scrollHeight < 20 ? "200px" : ( this.scrollHeight > 301 ? "300px" : "auto" ) );
}
.cAutoCompleteCtl .acCtlDropdwn a {
white-space: nowrap;
display: block;
text-decoration: none;
padding: 2px 5px;
color: #000;
border: 1px solid #fff;
}
.cAutoCompleteCtl .acCtlDropdwn a.lastOption {
}
.cAutoCompleteCtl .acCtlDropdwn a:hover {
background: #f5f5f5;
border: 1px solid #b3b3b3;
}
-->
</style>
</head>
<body onload="initPage();">
<div class="cAutoCompleteCtl clearfix">
<input type="text" /><a href="" class="dwnarrow"> </a>
<div class="acCtlDropdwn">
<!--<a href="#">options here options here options here options here options here options here options here options here options here options here options here</a>-->
<a href="#">options here</a>
<a href="">Boulder Logic</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
<a href="">A Rference With A Different Name</a>
</div>
</div>
</body>
</html>
I'm seeing some unexpected behaviour ihn Firefox. When the page is loaded for the 1st time, the height of the dropdown portion of the menu is only large enough to see 1 option and no scrollbars are displayed. If I hit refresh (without holding the Shift key), the menu's height goes to its max-height and displays as expected. The only property I could find that has any effect on this behaviour is overflow. If I remove it all together or set it to scroll, it displays at the correct height. Unfortunately, neither of these are an option since they will not produce the desired scrolling behaviour. Can anyone see where I'm going wrong? 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 ?? Hi, I thought I fixed this problem before. In the videos playlist at the bottom, video description (background black). It needs to be positioned 20 pixels down. You will understand it better if you view it in Firefox. http://pangeaadvisors.org/default.asp Code: #content #videos .playlist { float:left; width:442px; height:292px; margin:10px 0; background:#FFFFFF url(images/bg_videoplaylist.gif) repeat-x; background-position:-1px 0; border:1px solid #083684; position:relative; overflow:hidden; }
#content #videos .playlist .entries { position:absolute; width:10000em; height:60px; }
#content #videos .playlist .entries .video { float:left; width:422px; height:60px; font-size:14px; font-weight:bold; text-decoration:none; padding:20px; background:transparent url(images/player_entry.gif) 0 0 no-repeat; }
#content #videos .playlist .entries .playing { background-position:0px -80px; }
#content #videos .playlist .entries .paused { background-position:-432px -80px; }
#content #videos .playlist .entries .progress { opacity:0.8; }
#content #videos .playlist .entries em { float:right; color:red; font-style:normal; margin:14px; }
#content #videos .playlist .entries .description { float:right; width:442px; height:212px; background:#000 url(http://flowplayer.org/img/player/btn/play_large.png) right bottom no-repeat; }
#content #videos .playlist .entries .description p { color:#FFF; width:422px; height:192px; font-size:12px; font-weight:none; text-decoration:none; padding:10px; position:absolute; }
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 My website, currently http://12.214.26.185 does not render correctly in IE. It renders in Mozilla and Konqueror. I am posting my css file. Any advice would be greatly appreciated. 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. Thanks for reading my question. I have 2 sections. They are #info and #menu. The way I have my html set up is, I have <div id="info"> then <div id="menu"> that way, the height of "info" will always be at least as high as "menu". My problem arizes when "info" is higher than "menu". In this case I would like "info" to not grow in height, but rather have the Overflow: auto; come into effect, and have a scrollbar on the right hand side of the "info" section. For an example of what is happening right now check out www.pierced.ca/Kelly/index.htm index.htm looks the way I want all the pages to look. if you click on Cards, Tags, or Seasonal, you'll see how the page differs from index.htm or the contact, or order pages. Is there a way to say, height can be no bigger than the current height of "menu"? Thanks, Brad i always seem to have problems keeping inner elements within the confines of the div box. i always use overflow: auto, but i am wondering if i am going about this the wrong away. another annoying thing is using overflow: auto tends to make the div tab-able. Code:
<div class="info_box">
<img src="images/temp_tiger.png" class="imgalignleft" alt="Petition Title" />
<h5>Petition Title</h5>
</div>
...
.info_box {
clear: both;
overflow: auto;
border: 1px solid #999;
background-color: #fff;
margin-bottom: 8px;
padding: 10px;
font-size: 11px;
}
.info_box h5 {
color: #06c;
font-size: 14px;
}
Hello, I have overflow set to auto and it doesn't work in IE Mac. It works just right in all other bnrowsers that I've checked with, except IE 6 which adds the vertical scrolls when it shouldn't. I only want the horizontal scroll bar to show up. But, that's not as big an annoyance as the IE Mac, although, should you have a suggestion for that too, I'll take it. Scroll bars didn't work at all in IE 6 until I added a width to the <code> tag. The webpage is at www.huntacular.com and the css file is here What happens in IE Mac is that the contents of the div disappears when I try to set overflow: auto; I tried to set white-space: pre; as recommended at evolt, but no luck. On another note, is there any other way to resolve the vertical spacing in IE 6 other than using this solution which uses comments to retain the indentation so that the li elements don't need to span more than one line. If not, that's not too big a deal, just annoying. I hope someone can help, thanks. Let me guide you to a page I just wrote on this subject. http://www.freewebs.com/desertowl/textblink 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 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? 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. Hello, I have tried to do a div next to another div. This worked fine. However then in one div I placed thre other div's, and made them stay next to each other. Naturally one of them did not stay in the same line and wraped under neat the others. The problem is that the right div is now displaying well on FireFox, but incorect on Internet Explorer. (Altough when I set the borders I noticed that the border for the right div was wrong Here is my html code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
html {
min-width: 750px;
}
body {
margin: 0;
padding: 10px 0px;
background: #ff0000;
}
div#wrap {
width: 750px;
margin: 0 auto 10px auto;
padding: 0;
text-align: left;
background: #ffffff;
border: 1px solid #d1c7ac;
}
div#innerwrap {
width: 720px;
margin: 0 15px;
padding: 8px 0;
border: 1px sold #ff0000;
}
#body {
padding-top: 10px;
}
#left {
display: inline;
width:510px;
height:510px;
}
#box {
border: 1px solid #d1c7ac;
float: left;
color: #000000;
font-size: 8pt;
overflow: hidden;
width:250px;
height:220px;
}
#right {
height:510px;
text-align: center;
border: 1px solid #d1c7ac;
}
</style>
</head>
<body>
<div id="wrap">
<div id="innerwrap">
<div id="body">
<div id="left">
<div id="box" class="top-left">
Box 1.
</div>
<div id="box" class="top-right">
Box 2
</div>
<div id="box" class="middle-left">
Box 3
</div>
<div id="box" class="middle-left">
Box 4
</div>
</div>
<div id="right">
This is the right text
</div>
<br>
last line
</div>
</div>
</div>
</body>
</html>
Is there maybe a hack I can do to internet explorer so that this element will be solved? or my css is completly wrong, and I need to change it? Just a small explanation on the css; I have a div that contains boxes (left) and another div that just contains text (right). This should be placed next to each other since I did the display: inline; in the left div css. thanks for any sugestions, regards, sim085 Hi guys, On the following page http://www.thekhans.me.uk/origami.php Internet Explorer only displays the image below the content on the right hand side; This glitch is only apparent in IE, Firefox and Opera render the page correctly, like below: Any work arounds? 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. So I seem to have a problem with IE5.x and IE 7. The white bar in #top-bar that is supposed to run along the bottom of my blue banner on my page, works fine in IE6. But it either of the other two browsers it just hugs the top of the page. It doesn't seem to want to obey the padding-top css directive. I'm not really sure why though. Can someone have a look at it for me ? Thanks in advance ... :-) http://www.EnglishTeachingKorea.com 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 !! |
|||||||