|
CSS - Ie6 'overflow: None' Not Working
#navList {
background-color: #FF0000; height: 10px; overflow: none; width: 600px; float: left; line-height: 0px; } #navList li { float: left; cursor: pointer; overflow: none; } in every other browser the next div after the list touches navList, which contains images that are 42px high. in ie6, there are an extra 2 pixels. at first I put height: 42px; overflow: none, to see what would happen - and nothing did. i set it to 10 for kicks to see if the overflow would do anything at all and it's not. very confused today. Similar TutorialsHi, Here's the page: http://www.caillouette.com/alpha-dream3/alpha-maschio2.html Scroll down and you will see a row of parfume bottles. The width of the box is supposed to be 300px, but it comes out much bigger. Here's the CSS Code: #productImages{
postion:absolute;
height:78px !important;
width:300px;
overflow: auto;
border:1px solid #333333;
white-space:nowrap;
}
Here's the HTML: Code: <table bordercolor="333333" border="1" cellpadding="8"><th valign="center"><p class="productText"> MEET THE PHERMONES</p></th>
<tr><td height="75" width="300" id="productImages">
<a href="MaschioPage/MaschioText1.html" target="maschioText"><img src="images/products/thumbs/prod1T.jpg" border="0"></a>
<a href="http://www.caillouette.com/alpha-dream3/MaschioPage/MaschioText2.html" target="maschioText">
<img src="images/products/thumbs/prod2T.jpg" border="0"></a>
<a href="../../MaschioPage/MaschioText3.html" target="maschioText"><img src="images/products/thumbs/prod3T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod4T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod5T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod6T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod7T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod8T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod9T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod10T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod11T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod12T.jpg" border="0"></a>
</td>
</tr>
<tr>
<td height="138"><iframe name="maschioText" src ="maschioText0.html">
</iframe>
<p> </p>
</td>
</tr>
</table>
Pretty simple stuff, except I can't make the div stay at a 300px width, and have only a horizontal scrollbar. Can somebody please help me out? thanks - Hello everyone, relatively new web developer seeking help! I'm working on a template that will eventually be used with Joomla, but right now I'm just concerned about getting the layout to work with just the HTML and CSS. I want to create a fixed frame around the webpage that expands and contracts to fit different resolutions and browser window resizing, and then have the content scroll inside of that frame. The frame is also comprised of transparent PNG's since the client wanted lots of art on the frame around the content. It mostly works in Firefox, and is a giant mess in IE at the moment. I'd like to get it working in the standards compliant browsers first and then figure out some hacks that I can use for IE. Hopefully I can do that.... Here is my HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Site Test</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <link rel="stylesheet" type="text/css" href="site_test.css" /> </HEAD> <BODY> <div id="wrapper"> <div id="frame_left"> </div><!--End frame_left--> <div id="logo"> </div><!--End logo--> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> etc, etc, </div><!--End content--> <div id="frame_right"> </div><!--End frame_right--> </div><!-- End wrapper --> </BODY> </HTML> Here is the CSS: Code: #wrapper {
margin: 0px;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
background-image: url(frame_middle.png);
background-repeat: repeat-x;
z-index: 10;
}
#frame_left {
margin: 0px;
background-color: transparent;
background-image: url(frame_left2.png);
background-repeat: no-repeat;
width: 224px;
height: 625px;
position: fixed;
left: 0px;
top:0px;
z-index:50;
}
#frame_right {
margin: 0px;
background-color: transparent;
background-image: url(frame_right2.png);
background-repeat: no-repeat;
width: 198px;
height: 625px;
position: fixed;
right: 0px;
top: 0px;
z-index: 25;
}
#logo {
margin: 0px;
background-color: transparent;
background-image: url(pink_logo2.png);
background-repeat: no-repeat;
width: 316px;
height: 125px;
position: fixed;
top: 0px;
left: 34.5%;
z-index: 75;
}
#content {
background-color:transparent;
position: fixed;
top: 145px;
bottom: 60px;
left: 160px;
right: 150px;
width: auto;
height: auto;
overflow: auto;
}
In FireFox everything works and the scroll bar pops up, but won't actually scroll anywhere, even though there is content off screen? Any thoughts? I am slightly concerned that this is just totally undoable, but then I look at some of the stuff on CSS Zen Garden and think that there must be a way to pull it off! Any help is very, very much appreciated. Overflow:hidden, is supposed to expand a box (unless a height is set) to it's contents (just another quirky, stupid CSS rule). I have this working on all browsers except IE6 in one area. I've placed a green box around the problem area, which is the footer of this page: http://www.poweredpages.com/newtarget/ctia/ You'll see it looks fine in most places but is a skinny line in IE. I need it to render correctly because it has some padding attributes. Here it is in the css file: .footer{ padding:10px 35px 10px 35px; overflow:hidden; } Any thoughts why it's not working in IE6? My CSS works in IE and Mozilla but not Netscape or Opera I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there). Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately? Here are the related parts of my CSS: /* CSS styles */ BODY { font-family : Verdana, Arial, Helvetica, sans-serif ; font-size : 10pt; background : Black; color : White; margin: 0; padding: 0; border-width: 0; overflow: hidden; } HTML { overflow: hidden; } #LeftNavDIV { position:relative; width:185px; height:100%; float:left; padding:2px 0px 0px 0px; margin:0px 0px 0px 0px; border:1px solid white; overflow:auto; } #ContentDIV { position:relative; height:100%; width:75%; float:right; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; border:0px dashed #336699; overflow:auto; } How do I make the DIV overflow in the below codes? It works in IE but not firefox. <html > <head> <style type="text/css"> html, body { height : 100%; } </style> </head> <body> <table style="height : 100%; width : 100%"> <tr style="height : 64px; background-color : Blue;"> <td></td> </tr> <tr style="height : auto; background-color : red;"> <td> <!-- THIS IS THE PROBLEM --> <div style="height :auto; overflow-y : scroll"> <!-- THIS IS THE PROBLEM --> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> asd<br /> </div> </td> </tr> <tr style="height : 64px; background-color : Blue;"> <td></td> </tr> </table> </body> </html> My page looks decent in Firefox but in IE the overflow property doesn't seem to be working. Perhaps you can give me some pointers as to which tags may be messing up the display in Internet Explorer. The link to the page in question. http://www.paulvincentgandolfi.com/blog/?page_id=123 Thanks Hi all, I'm working on the site http://boolarongpress.com.au and have hit a problem. In IE7 if you click into either the title or author search fields in the left hand nav menu the cpu usage maxes out and IE7 hangs. There is no javascript attached to these inputs. The problem seems to be caused by a line in the css, overflow: auto; This is set for the content div so that it scrolls as if it were a frame. If I remove this line from the css the problem dissappears but of course the content div no longer scrolls. Has anyone got any ideas on how I can fix/work around this issue? Cheers, Peter this is the code i'm having problems with: Code:
<style type="text/css">
body {
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color:#666;
margin : 0;
padding : 0;
}
/* text */
h1 {
font: bold 10px Verdana, Arial, Helvetica, sans-serif;
line-height:30px;
}
/* div classes */
div.row {
position:relative;
left:10px;
width:326px;
height:20px;
z-index:1;
margin-bottom:8px;
text-align:right;
}
div.cell_title, div.cell_content {
position:absolute;
top:0px;
float:left;
padding:0px 0px 0px 8px;
border:1px solid #E4E4E4;
text-align:left;
line-height:17px;
}
div.cell_title {
background-color: #E4E4E4;
left:0px;
width:100px;
z-index:2;
}
div.cell_content {
background-color:#FCFCFC;
left:100px;
width:224px;
z-index:3;
}
/* form elements */
.input {
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color:#666;
background-color: #FCFCFC;
height:15px;
width:213px;
border:0;
}
.textarea {
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color:#666;
background-color: #FCFCFC;
height:100px;
width:213px;
border:0;
overflow:auto;
}
</style>
<h1>Contact</h1>
<form action="?menu=contact" method="post" name="contact">
<div class="row">
<div class="cell_title"><label for="name">name:</label></div>
<div class="cell_content"><input type="text" class="input" name="name" id="name"/></div>
</div>
<div class="row">
<div class="cell_title"><label for="email">email:</label></div>
<div class="cell_content"><input type="text" class="input" name="email" id="email" /></div>
</div>
<div class="row">
<div class="cell_title"><label for="message">message:</label></div>
<div class="cell_content"><textarea class="textarea" name="message" id="message"></textarea></div>
</div>
<div class="row">
<input type="image" src="includes/images/btn_add.gif" name="Submit" value="Submit">
</div>
</form>
My problem is that my "row" div's overlay if their content is larger. Because of that i cannot see the send button from my form (the textarea height is bigger that the height of the "row" div - i need the layer to expland according to the content, but i don't want it to overlay on what is after it!). I hope that you understood my problem and could help my with it. Thanks in advance! hi, I have 3 DIV's, The first div is like a menu header DIV and the second DIV is the menu links and the third DIV has some information I want to click on the first DIV then show the second DIV like a menu problem is the third DIV moves down.. How can i let the second DIV overflow over the third DIV without it moving down? Thanks what i'm trying to accomplish is two boxes next to each other inside a div, which i can scroll horizontally to see the two boxes. if you copy the code below it works correctly, only because the width of the parent div is set. Code:
<style type="text/css">
#container {
overflow:scroll;
width:100px;
}
#parent {
overflow:hidden;
width:400px;
}
.box1 {
border:1px solid black;
float: left;
height: 101px;
width: 101px;
}
</style>
<div id='container'>
<div id='parent'>
<div class='box1'></div>
<div class='box1'></div>
</div>
</div>
if i change width:900px in the parent div to width:auto then the boxes go underneath one another. That's the problem, the parent div should auto adjust to the width of both boxes. i'd really appreciate solving this. i can't have a fixed width on the parent div it should auto adjust and both boxes should be next to each other. While working on my site, I am testing it in Mozilla Firefox 1.0pr and IE 6. In my code: body, td, iframe, table, div, tr { font-variant: small-caps; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; background-color: #666666; scrollbar-3dlight-color: #666666; scrollbar-arrow-color: #666666; scrollbar-base-color: #666666; scrollbar-darkshadow-color: #666666; scrollbar-face-color: #666666; scrollbar-highlight-color: #666666; scrollbar-shadow-color: #666666; } a:link { color: #ffffff; text-decoration: none; } a:visited { text-decoration: none; color: #ffffff; } a:hover { text-decoration: none; color: #ff0000; } a:active { text-decoration: none; color: #ffffff; } select, option, textarea, input { border: #ffffff 1px solid; font-size: 11px; font-variation: normal; font-family: Verdana; background-color: #666666; } I would add "overflow: auto;" right under 'body, td, iframe, table, div, tr {' so that in Mozilla the scrollbars would not show up. However, when I load it in IE, the windows do not scroll at all. Is there a quick-fix for this, or what can I do so it will work properly in both browsers? Hi, I am trying to display an image (in its own div) which extends past the height of the container div it is in. The problem is that in FF it chops off the piece of the image (as overflow is hidden??) that extends below the container div, it doesn't in any version of IE. However, if I don't set overflow to hidden, in IE6, the portion of the image that extends also makes the container divs background color display below the height I have set for it... Hope you get what I mean Anyway, here is the code Code:
<div id="banner-container">
<div id="banner">
<div id="banner-txt">
<img src="images/banner-txt.png" />
<p>
Lorem ipsum...</p>
</div><!-- banner txt -->
<div id="banner-img">
<img src="images/banner-img1.png" alt="the image" />
</div><!-- banner img -->
</div><!--banner-->
</div><!-- banner container -->
And the css Code:
#banner-container{width:100%; height:314px; margin:0 auto; padding:0; background-color:#212582; overflow:hidden;}
#banner{width:920px; height:314px; margin:0 auto; padding:0; background-image:url(../images/banner-bg.jpg); background-repeat: repeat-x; }
#banner-txt{width:519px; height:280px; float:left;}
#banner-img{width:340px; height:314px; position:relative; padding-top:10px; float:right;}
Does anyone have any ideas on how I can get it to stop chopping off the end of the image in FF?? Thanks... EDIT: Some screens... Firefox Internet Explorer Hey everyone, I'm making a photo gallery for a client. What I need is the overflow-x to be hidden, and overflow-y to be visible, but even when i set overflow-y to be visible, it appears with a scrollbar. My code is below... 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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#galleryContainer{
position:absolute;
height:140px;
background-image:url(/images/galleryBack.png);
background-repeat:no-repeat;
width: 536px;
}
#galleryShow{
position:absolute;
width:478px;
height:113px;
margin-left:28px;
margin-top:14px;
overflow:hidden;
}
#galleryView{
position:absolute;
width:10000px;
}
.galThumb{
float:left;
height:113px;
width: 152px;
z-index:60;
text-align:center;
}
#leftArrow{
position:absolute;
top:52px;
left:7px;
}
#rightArrow{
position:absolute;
top:53px;
left:506px;
}
.galleryArrow{
width:23px;
height:37px;
z-index:40;
}
</style>
<script src="/js/scriptaculous-js-1.8.3/lib/prototype.js" type="text/javascript"></script>
<script src="/js/scriptaculous-js-1.8.3/src/scriptaculous.js" type="text/javascript"></script>
<script language="javascript">
galleryLocation = 2;
function slideGallery(gallMove,gallIncrement){
new Effect.Scale('thumbImg' + galleryLocation, 70);
new Effect.Scale('galleryThumb' + galleryLocation, 94);
galleryLocation = galleryLocation + gallIncrement;
/*adjust center*/
new Effect.Move('galleryView', { x: gallMove, y: 0});
new Effect.Move('galleryThumb' + galleryLocation, { x: 0, y: -20});
new Effect.Scale('thumbImg' + galleryLocation, 150);
new Effect.Scale('galleryThumb' + galleryLocation, 114);
}
function adjustCenter(){
new Effect.Scale('galleryThumb2', 114);
new Effect.Scale('thumbImg2', 150);
}
</script>
</head>
<body onload="adjustCenter()">
<div id="galleryContainer">
<div id="leftArrow" class="galleryArrow" onclick="slideGallery(163,-1)"></div>
<div id="galleryShow">
<div id="galleryView">
<?php
for($i=1;$i<=14;$i++){
echo "
<div id='galleryThumb" . $i ."' class='galThumb'>
<img src='/images/cupcakeThumbs/galleryThumbs/" . $i . ".JPG' id='thumbImg" . $i . "'/>
</div>
";
}
?>
</div>
</div>
<div id="rightArrow" class="galleryArrow" onclick="slideGallery(-163,1);"></div>
</div>
</body>
</html>
Thoughts? When i resize my band website www.smilingindustries.be , the text flows over my menu :s try for yourself when resizing your browser window . www.smilingindustries.be/Style.css is the style page I've been trying to figure that one out all afternoon |
|||||||