|
CSS - Height And Overflow Problems With Firefox And Mozilla
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 Similar TutorialsI've been pulling out my hair trying to figure out what it is i'm doing wrong here. I've been messing with this code and trying different things, but can't seem to figure out what the problem is. One of my divs is not sized properly. Can someone take a quick look and see what it could be? I'd realyl appreciate it. Thanks! http://ritchie.acomp.usf.edu/~lamba/my2.html I'm having a problem getting a child element to be the full height of its parent without going over. So if I have: Code: html, body {
height: 100%;
background-color: #E2E9EA;
}
#mainContainer {
width: 770px;
height: 100%;
background-color: #fff;
margin-left: auto;
margin-right: auto;
border: 1px solid #000;
position: relative;
}
and then I implement: Code: <body> <div id="mainContainer"></div> </body> This should show a centered area in a layout. However, using a hieght of 100% for the child (mainContainer) makes it too long on the page and it extends beyond the border of the "parent" body tag. Even when I try using: Code: body #mainContainer { ... }
it does not work. How can I make the child (mainContainer) element be 100% of the parent (body) element without going over? Does anyone know why overflow:hidden does not work when height is given in percentage? The following example does not work and all values from 1 to 20 are shown on screen ... Code: <div style="overflow:hidden;height:10%;border:1px solid green;"> 1<br /> 2<br /> 3<br /> 4<br /> 5<br /> 6<br /> 7<br /> 8<br /> 9<br /> 10<br /> 11<br /> 12<br /> 13<br /> 14<br /> 15<br /> 16<br /> 17<br /> 18<br /> 19<br /> 20<br /> </div> Changing height:10% to height:50px makes the overflow:hidden works fine. Does anyone know how I can make the overflow:hidden css rule with height rule given in percentage? I am trying to set a height of a container div, and have the inner div spill out of the container without changing the height of the container div: Code: <style media="screen" type="text/css">
.inner{
width: 80px;
height: 80px;
background-color: #0000FF;
}
.outer {
width: 120px;
height: 20px;
background-color: #FFFF00;
overflow:visible;
}
</style>
IE 6 is giving me trouble. It insists on making the container div the same height as the inner div. Anything I can do to tell IE6 to not change the height of the container? Hi - I'm working on a page with what I think should be a relatively simple CSS layout. Basically, I have a table on the top half of the page (it displays an address book). The table has a <thead> and <tbody>, and the <tbody> is set to overflow: auto, to give me a scrollbar when its contents gets too big. The bottom half of the page uses AJAX to fetch an entry from the address book, and display more details. It too uses overflow: auto to show scroll bars when necessary. Each element is in a <div>, and I used height: 45% (or so) on each to try to make the whole thing fit on one page, so that there is no whole-page vertical scrolling. An example of the code I'm working with can be found at http://kc9ddi.us/ex.html . My design is working nicely in Firefox, but not IE. IE does not seem to do the right thing with the height: attribute in CSS, so their is no scroll bars in the individual parts of the page, like I want. Can anyone offer any advice here? I am new to CSS so bare with me if this is dumb, i have taken my page to the bare minimum trying to diagnose this. Mozilla Firefox does not seem to work with nested divs the way I think it should. IE7 works like a champ. I have a content area (mainpage) with a Vertical Navigation bar nested in it. I would expect the page to have a full background of coatedmetalsm.jpg since the mainpage is set to height: auto; But this only works in IE and Mozilla has no background. Can someone show me the error of my ways? Thanks, Carlos 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>Heimburger Construction Company LLC - Links</title>
<link href="custom.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header"> </div>
<div id="maincontent">
<div id="navbar">
<p>testing</p>
<p>testing</p>
<p>testing</p>
</div>
</div>
</body>
</html>
My CSS Code:
@charset "utf-8";
/* CSS Document */
body {
background-color: #000;
margin-top: 17px;
margin-bottom: 15px;
}
#header {
background-image: url(images/header.jpg);
margin:0 auto;
height: 167px;
width: 810px;
background-repeat: no-repeat;
}
#maincontent {
background-image: url(images/coatedmetalsm.jpg);
background-repeat: repeat;
margin:0 auto;
width: 810px;
height: auto;
}
#navbar {
float: left;
width: auto;
position: relative;
}
I know it's an age old problem, and I know there should be many links in the forums showing me where to go...the thing is that I don't think I'm doing anything wrong. http://www.rocksolidhq.com/anmar/index.php , renders fine in IE but not Mozilla. Simply going into the CSS and changing the margin-top on the #container OR moving #services_blackout higher fixes this. I'm wondering if anyone knows wether I must fix something or whether in this case one of the browsers has a bug and needs a separate style sheet. I'm designing a site and have an absolute div with a z-index of -1. This div has a background image. On top of this div I have a normal layout table with my content, in effect I wanted a background image that didn't tile, so I threw it in a div. When i view it in IE6 everything looks nice, but when I view it in firefox, the image doesn't show up, the dive borders dont show up and any text I put in the div doesn't show up. Any thoughts or workarounds why the image isn't showing. Thanks chuck_samsonite _______________________________________________ Lloyd: Oh yeah! It's right here, Samsonite! I was way off! I knew it started with an S though! 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 :} 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 Hello, I'm going nuts over a (probably very simple) problem in my CSS layout coding. Everything works perfectly in IE 6.0 but not in mozilla (any?) and FireFox 1.0PR. I believe the same problem is found in Safari on MAC as well... The problem is, I can't get two "content boxes" aligned side by side in my "main content" area. Take a look at this page : The whole layout You'll see that the box "test55?" and "test66?" is not aligned side by side as they should be. Everything else in the layout works out OK. If you look at this page : Stripped layout You'll see the same problem, but I've stripped out all the other code. Even if I expand the length of the "content div" it won't align side by side, so there's not a "space" problem. I'm sure it's a very simple solution, but I can't seem to find out what it is.. Help! PS: everything works in IE 6.0 (on XP) so don't bother look with that browser unless you want to see what it should look like Thanks, Sep This is just driving me up a wall here. It's been like this for a while, and I never cared b/c I don't use IE. My viewers, however, do, and it's an eyesore. Link to crappy page This is a sidebar I have on all the pages. It grabs the latest 10 threads from the forum. Gets the latest 10 additions to the database, and finally gets the top 10 viewed items. As you'll see (specifically in the top entry of the top list (latest news) it messes up the vertical alignment for some reason. AFAIK, my CSS is fine. Again, this problem only exists in IE. Thanks 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 i am trying to use the suckerfish dropdown menu. starting from the pretty example, i got it going in IE6 but it looked pretty off in mozilla. i tinkered around further the the IE code which changed things a bit there and made things look a bit better in mozilla but not much! my code is at http://www.fizzycherry.com/menutest.html - i would *really* appeciate any ideas. the main things really bugging me a how can i get the menu bar to fill the width of the screen in mozilla? my navbar div did this before i inserted the sub menus! once i tinkered with my css, placing padding on the links rather than the li elements, huge vertical gaps started appearing in the submenus in both IE and Mozilla, even with no margins padding and borders. i need to *add* a bottom border (same colour as background) to remove these gaps! why?? ideally i would like the submenus to look somethign like they do in ie6 but even if someone could just tell me how to make the bar fill the screen i'd be chuffed! http://www.chequedelarealidad.org/ There seems to be a problem with this site when loaded into the Mozilla broswer. When you initially click on the 'Projecten' page, the bottom bar contents are placed about two inches too high up the page. However, when I click the refresh button, this problems corrects itself. Once corrected, the page loads fine every time, but if I clear my web cache and try again, the first time I click on the link the problem appears again. Is there are mistake in my css, or does anyone know how I can correct this? I will appreciate any input. Thank you in advance, Toria I'm not sure what is causing the extra spaces to the top and bottom area of the images... Code:
<div style="margin:0px;padding:0px;background-color: #FF0000;">
<img src="images/mod_bt2.gif"><br>
<img src="images/mod_bt1.gif"><br>
<img src="images/mod_bt7.gif"><br>
<img src="images/mod_bt6.gif">
</div>
I'm having trouble with a layout issue. Position is fine in IE, but in Firefox and Mozilla there's a 55 pixel gap on this drop down list and an even larger gap when the list is expanded. Here's my css for the navbar: /* Navbar */ #nav { width: 158px; margin-left: 0; } #nav ul { font-family: "Trebuchet MS", serif; font-size: 11px; margin-left: 0px; list-style-type: none; } #nav ul li ul { margin-left: 12px; } Any suggestions or help would be appreciated. Hello all, I recently redesigned my site from table layout to css layout. when viewed in ie it looks good however when viewed in anything else the layout falls apart. the link is: Benefit Solutions, Inc Do i need to copy the css to the site? I'm not too sure how to go about getting the help i need. any opinions would be appreciated. thanks in advance hi all... i have a huge style sheet, and i need to convert it to display properly in IE, how do i go about doing that, not recoding all the styles, i am also thinking about the check to se which style sheet to use, i think that i saw a method to do it under the <link> tag or something ?... help a fellow out there are over 800 lines of code in the style sheet.... frank/ 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 |
|||||||