|
CSS - Ie Vs Firefox Overflow Issue
The site I am working now has a discussion group. Sometimes someone will post a pic and the thread will break the 955px boundary of the wrapper.
In Firefox, what happens is the thread will leave the wrapper. In IE, the thread makes the wrapper expand. In an ideal world I'd have all images resized or not even limit myself to a 955px width, but this won't work with this site... I'd like to know if it is possible to make the thread div leave the wrapper in tact at 955px like it does in Firefox. Thanks in advance :} Similar TutorialsHi, I have faced a strange issue with the CSS overflow property while using nested DIVs.The DIV with class main has the DIV main-1a as its child which in turn has the DIV with class main-1a-child as its child. As the height of main is not fixed, so it is supposed to increase with main-1a and main-1a-child. But in Mozila FireFox, the height of main is not getting increased with the child DIVs. When the overflow property is set to hidden in main, then only the height of main gets increased with its childs. The issue is fine in IE6 regardless of the overflow property. Any help/explanation in this regard will be very helpful. <html> <head> <title>My Page</title> <style type="text/css"> .main { position:relative; width:800px; display:block; border:1px solid #000000; margin:auto; padding:10px 10px 10px 10px; background:#BABB99; height:100%; overflow:hidden; } .main-1a { width:780px; float:left; background:#FFFFFF; border:1px solid #FF0000; padding:10px 10px 10px 10px; } .main-1a-child { width:760px; float:left; border:1px solid #000000; padding:10px 10px 10px 10px; background:#BABB99; } </style> </head> <body> <div class="main"> <div class="main-1a"> <div class="main-1a-child"> <p>text of div1 a2</p> <p>snkjkjsd</p> <p>snkjkjsd</p> <p>snkjkjsd</p> </div> </div> </div> </body> </html> 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 I have an annoying problem that causes my css boxes to overflow in IE. You can see the problem here URL The CSS for these boxes is as follows Code:
.rbroundbox { background: url(images/postbackground.gif) repeat; }
.rbtop div { background: url(images/topleft.gif) no-repeat top left; }
.rbtop { background: url(images/topright.gif) no-repeat top right; }
.rbbot div { background: url(images/bottomleft.gif) no-repeat bottom left; }
.rbbot { background: url(images/bottomright.gif) no-repeat bottom right; }
/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 60%; margin: 1em auto; }
The HTML is Code:
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">
<b>[INSERT TITLE]</b>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
[INSERT NEWS]
</td>
</tr>
</table>
<p><font face="Tahoma" size="2">Posted by <a href="mailto:[INSERT EMAIL]">[INSERT REALNAME]</a> at [INSERT DATE]</font></p>
</div><!-- /rbcontent -->
<div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->
What is causing the overflow in IE? it doesnt show up in any other browser I know of. tinyurl(dotcom)/6dw6jp4 Hi everyone I am a newbie here, Please have a look at the above link. The second box which has the therapist images and their names do not appear correctly on IE8. On all other browsers it seems to work fine. Can any one please have a look at the page and let me know a solutions. Thanks a lot. hi the following img will help u understand the layout of my page. my page content is in <td id="cont"> my links are in <div id="scroll"> i have got several links in that div and i made the div scrollable with the following code. Code: <table id="tab"><tr> <td id="iframe"> <div id="scroll"> <ul> %%links%% </ul> </div> </td> <td id="cont">%%content%%</td> </tr></table> Code: #tab{width: 100%;}
#iframe{width: 25%;
vertical-align: top;
padding-top: 3em;
}
/* only for ie */
* html #scroll{overflow: auto;
width: auto;
height: 100%;
text-align: left;
}
/* only for firefox */
#scroll{overflow:auto;
width: auto;
height: auto;
text-align: left;
}
#cont{width: 75%;
height: 100%;
vertical-align: top;
text-align: center;
padding: 2em;
}
my links <div> is scrollable in ie but not in firefox. in firefox i see all the links with no scrollbar. i know i would get a scrollbar in firefox if i say height:400px; instead of height: auto; but that's the problem. i want the height of <div id="scroll"> to depend on <td id="cont">. that means the height of the scrollable links should depend upon the height of the content. thank you Heys, I have the following code: <html> <head></head> <body> <div style="width: 100px; height: 100px; border: 1px solid red;"> <div style="width: 200px; border: 1px solid green; float: left;">-</div> </div> </body> </html> In FF and IE7 it works the way I'm desiring; specifically, the child div (width: 200px is contained inside a box, however it breaks outside of it due to the width. ||||||||| ||||||||| |||||||||||| |||||||||||| ||||||||| ||||||||| That's how it should look; but I can't replicate it in IE6. Any ideas? Thanks Please look at this page - Example Page On the above page you will see a link that reads "Click Here" Doing so opens a lightbox. In Chrome & FF their is a small "X" graphic appearing in the top right corner to close the lightbox, but that same graphic does not appear in IE for some reason. Can someone shed some light as to why? Tom I have a div that I have set the overflow property to auto - enabling scroll bars when the content is longer then the fixed size of the div. This doesn't seem to work in Safari, or and older version of Firefox. I could use overflow: scroll, but then there is a scroll bar when the content doesn't overflow. Is there any clever fix for this? Cheers, whiteatom Hi There all, I've got this problem with a overflow div tag. I've tried just about everything possible. Easy way of saying it, I want a content box that is basically form 80px of the page down to the bottom of the browser. This "content box will be scrollable, but i want a menu to be the top 80 pixels of the page. EDIT: IE just does the content in the full page! Here's sample here of my small css: Code: <style type='text/css'>
#content {
top: 75px;
bottom: 0px;
width: 100%;
position: absolute;
overflow: auto;
}
</style>
Thanks in advance! James Can anyone tell me whether they have experienced height and overflow problems with FireFox and Mozilla browsers? Check this out: Test Page. It looks fine in IE, but not the other two. I've been working on this half the day with no solution. Can anyone help? If the problem can be solved without the use of javascript, that would be preferred. Thanks, Darin Hi, Please use Firefox and look at: https://67.18.220.222/~duoboots/secure/test_start.php Only on Firefox do I see scrollbars on the right white box. The white box is fixed width, and is supposed to expand vertically with the content. However, the white box does not expand as much as I'd like to. Eventually, as the content gets bigger, Firefox displays unwanted scroll bars. Then, if I simply press 'Refresh'... the scroll bars disappear, and Firefox displays the page exactly how I want it! Its really wierd because I can't test this properly. Once the page is refreshed, there are no scroll bars. But, a general user won't press Refresh..and will end up at that page eventually, to find unwanted scroll bars. I've tried it on Opera, and a friend said its definitely a Firefox bug. I am sure the <table> is causing the problem - because all other pages display fine. The scroll bars are only appearing on this particular page, with a <table>. Note : if you do not see scrollbars... then thats not a surprise, because Firefox is acting strange on this one.... I mainly see the scroll bars after signing in and accessing the actual PHP page that is dynamically generated. The above link is just a static version whose code I copied and pasted. Anyway, if anyone has had any similar problems with tables and overflow-scrollbars.. please could you let me know what you did about it? Some CSS: Code:
table.oa_results {
border: 1px solid #C9AA90;
border-collapse: collapse;
width: 310px;
}
table.oa_results td {
border: 1px inset #C9AA90;
padding: 2px 2px 2px 4px;
}
table.oa_results th {
border: 1px inset #C9AA90;
padding: 2px 4px;
font-weight: bold;
text-align: left;
}
.whitebox_general_oa {
width: 387px;
background: #FFFFFF;
line-height: 18px;
overflow:visible;
display: block;
clear: both;
}
Thanks very much! WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! 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; } Hello I am having difficulties with a site I am working on. First, if you look at it in IE and roll your mouse to the right of the site the whole thing shifts to the left. No idea why it does this. Second: In Firefox it looks like a disaster! Help! http://www.tombraiders.net/katie/shelly/index.html User: letme Pass: in Thank you! Hello, this is my first post on this forum! I've noticed there's another firefox thread right above mine, I don't mean to spam the forum with firefox issues but I checked that one first and it didn't have the same problem as I'm having. I'm a novice to CSS, I've only been on it for around 2-3 months for college, and i've encountered a problem I can't find a solution to likely because there could be so many ways for it being wrong. If anyone can please help me with this problem, i'd appreciate it so much! I'm just starting to create a template for college, and for some reason I've just noticed it's not working in firefox. I use i.e to develop at school so I haven't noticed it until now, and I can't seem to find a solution. I've uploaded the template here so it can be seen: bonkenmoose.com/john It works fine in internet explorer, but seems to be not working correctly in Firefox. Any help will be great! Thanks. Again, IE displays fine but firefox the bottom getting_started div is all wierd. Code:
<div id="container">
<div id="inner">
<?php include('header.php'); ?>
<div id="index_login">
<p style="text-align: left"><b><font size="4">Login!
</font></b></p>
<p style="text-align: left"> </p>
<form method="POST" action="">
<p style="text-align: left">Email: </p>
<p style="text-align: left"><input type="text" name="email" size="20" id="index_textbox"></p>
<p style="text-align: left"> </p>
<p style="text-align: left">Password:</p>
<p style="text-align: left"><input type="password" name="password" size="20" id="index_textbox"><br>
</p>
<p style="text-align: left">
<input type="submit" value="Login" name="do_login" id="index_button"></p>
</form>
</div>
<div id="whos_new">
<div id="section_header">
Who's New
</div>
</div>
<div id="get_started">
<div id="get_started_box">
<b>Step One:</b><br/><br/>Sign up with your basic info to get your own personal page.<br/><a href="#"><b>Sign Up!</b></a></div>
<div id="get_started_box">
<b>Step Two:</b><br/><br/>Login and enter your information about yourself to allow people to find you and express yourself with the look of your profile.</div>
<div id="get_started_box">
<b>Step Three:</b><br/><br/>Search for your friends and family and add them as your friend to your friend circle.</div>
<div id="get_started_box_nb">
<b>Step Four:</b><br/><br/>Tell your friends about FriendTrend.com and invite them to join and be your friend.</div>
</div>
</div><font color="white">Copyright 2006 FriendTrend.com</font>
</div>
Here is my css: Code: * {
margin: 0 auto;
padding: 0;
}
body{
font-family: verdana;
font-size: 8pt;
}
#container{
font-family: verdana;
position:absolute;
width: 100%;
height: 100%;
z-index: 1;
text-align: center;
background-color: gray;
}
#inner{
position:relative;
width: 800px;
height: 100%;
border-style: solid;
border-width: 1px;
z-index: 2;
background-color: white;
}
#header{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 100%;
height: 30px;
padding: 5px;
background-color: orange;
z-index: 3;
}
a:link,a:active,a:visited{
text-decoration:none;
color:black;
}
a:hover{
font-weight:bold;
}
#header_link:link,#header_link:active,#header_link:visited{
text-decoration:none;
color:white;
}
#header_link:hover{
color: #ccccff;;
}
#index_login{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 200px;
height: 150px;
top: 25px;
left: -250px;
border-style: solid;
border-width: 1px;
z-index: 3;
background-color: #ccccff;
padding: 10px;
}
#whos_new{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 300px;
height: 150px;
top: 25px;
left: -25px;
border-style: solid;
border-width: 1px;
z-index: 3;
float:right;
}
#get_started{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 600px;
height: 75px;
top: 100px;
border-style: solid;
border-width: 1px;
z-index: 3;
}
#get_started_box{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 149px;
height: 100%;
z-index: 3;
float:left;
border-right: 1px, solid;
}
#get_started_box_nb{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 149px;
height: 100%;
z-index: 3;
float:left;
}
#section_header{
background-color: #ccccff;
width: 100%;
position:relative;
font-family:verdana;
font-size: 10pt;
text-align:left;
}
#index_login{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 200px;
height: 150px;
top: 25px;
left: 20px;
border-style: solid;
border-width: 1px;
z-index: 3;
background-color: #ccccff;
padding: 10px;
float:left;
}
#index_textbox{
border-width: 0;
font-family:verdana;
color:orange;
}
#index_button{
border-width: 0;
font-family:verdana;
color:black;
background-color: orange;
}
#user_box{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 350px;
height: 200px;
top: 25px;
left: -200px;
border-style: solid;
border-width: 1px;
z-index: 3;
}
#user_photo{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 150px;
height: 150px;
border-style: solid;
border-width: 1px;
z-index: 3;
left: 15px;
top: 10px;
float:left;
}
#user_friends{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 450px;
height: 200px;
border-style: solid;
border-width: 1px;
z-index: 3;
right: 20px;
top: 150px;
float:right;
}
#view_basic{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 300px;
height: 200px;
top: 25px;
border-style: solid;
border-width: 1px;
z-index: 3;
float:left;
left: 12px;
}
#view_contact{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 300px;
height: 200px;
top:75px;
border-style: solid;
border-width: 1px;
z-index: 3;
float:left;
left: 12px;
}
#view_custom{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 300px;
height: 200px;
top: 25px;
border-style: solid;
border-width: 1px;
z-index: 3;
float:right;
right: 12px;
}
#view_friends{
font-family: verdana;
font-size: 8pt;
position: relative;
width: 450px;
height: 200px;
border-style: solid;
border-width: 1px;
z-index: 3;
top: 150px;
float:right;
right: 12px;
}
Hi, Ive got a site im currently working on using html and css. After just putting the navigation bar in ive discovered it lookins perfect in IE and slightly off in firefox: http://www.lnicholson.co.uk It looks hows i want it to in IE but in fiefox i notice that there is a bigger gap above the navigation bar and I have no idea how to get rid of it. Its quite annoying as some of my friends use firefox! Any help would be much appreciated, if you need anymore info let me know. Thanks Lozza Kay, So I've been trying to open a gaming league, but unfortunately my skills lie in PHP and C++. Not so much html and css. For some reason this site works pretty well in IE, but has what I call micro-tears in the firefox version, I'm really not sure whats wrong with it, can anyone help? http:// www . vl-league.com / index . html is the site. |
|||||||