|
CSS - Firefox Bug: Div Ends On It's Own
I have a site construced of divs run off css. If I have a lot of content, Firefox will cut off the div at a certain point stopping the text and background color from displaying. IE looks fine. I don't have height set up. Does anyone know of this bug and how to stop it? I'm not finding an answer through google.
Similar TutorialsHi Guys, I'm sure that it's something simple but on my new site the white box containing the logo and menu ought to cover include the thumbnails too. I have the div tag close after the divs containing the thumbnails, but i need to somehow have those thumbs part of the 'content' div. Here is the html: Code:
<body>
<!--Center Content Column-->
<div class="content">
<center>
<!--Logo-->
<img src="logo.jpg" alt="HeldTogether Logo" name="logo" width="450" height="250" class="logo" id="logo" />
<br />
<!------>
<!--Navigation bar-->
<div class="nav">
<img src="left.jpg" width="24" height="40" />
<a href="#" onmouseout="MM_swapImgRestore()"onmouseover="MM_swapImage('Portfolio','','portfolio_over.jpg',1)" >
<img src="portfolio.jpg" alt="Portfolio" name="Portfolio" width="105" height="40" border="0" id="Portfolio" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','contact_over.jpg',1)" >
<img src="contact.jpg" alt="Contact" name="Contact" width="100" height="40" border="0" id="Contact" /></a>
<img src="right.jpg" width="221" height="40" />
</div>
<br />
<!----->
<!--Thumnails-->
<div class="float"> <img src="images/fire_escape_thumb.jpg" width="100" height="100" alt="Fire Escape" /><br />
<p>Fire Escape</p>
</div>
<div class="float"> <img src="images/leaning_man_thumb.jpg" width="100" height="100" alt="Leaning Man" /><br />
<p>Leaning Man </p>
</div>
<!--- etc etc etc -->
<!----->
</center>
</div>
</body>
And the CSS: Code:
body {
background-color:#808E8F;
margin-top:0px;
padding-top:0px;
font-family:Arial, Helvetica, sans-serif;
}
img{
padding:0px;
margin:0px;
}
img.logo {
padding: 6px;
}
div.content {
background-color:#FFFFFF;
margin-left:9%;
margin-right:9%;
padding: 5px;
padding-top:10px;
}
.nav {
height:40px;
width:450px;
padding:0px;
margin:0px;
padding-left:6px;
padding-right:6px;
}
div.float {
padding:7px;
float:left;
}
div.float p {
text-align:center;
}
Any thoughts would be appreciated. I am intergating my forum software into my main page. I have created a 100% non-table front page, but there is one table that is stuck at the bottom of the page by the forum software. So my DIV tag ends and a TABLE begins and they overlap. I placed a clear:both DIV tag after my last DIV tag, but that didn't seem to help. I don't think I can convert the TABLE to DIV since it's part of the software. I was just thinking of adding a height:20px to my "clearit" DIV to pad the bottom enough to push the table down but that seems hokey. Gday CSS PPL, Im still yet to test on other browers, but im using IE 6.0 while the explorer is full screen the width of my div is 100% But when i resize the browser on the horizontal untill a horizontal scroll bar appear, and scroll to the right, the div cuts off where the scrolling begins, div.banner { background-image: url(../images/banner_repeat.gif); width:100%; height:163px; text-align:center; } and yeah, the background image 'banner_repeat' stops repeating at that point. any help would be great, Thx in advance, James I posted something the other day, but that thread was elaborate but not helpful at all, because it missed a useful example with CSS sheet and everything. So here's another attempt and hopefully people know where the problem resides. I've stripped down the following page as far as I could within limited time. Before you click and open this URL, I think it's best to read my introduction first, because the problem often only occurs the first time after opening IE5.5 or IE6.0. With IE6.0 it might be that it _does_ work for you now. I notice that the bug is very infrequent with IE6.0. Sometimes it feels like IE6.0 cached the right page and doesn't want to show the wrong page the first time anymore. With IE5.5 it's still consistent on first time though... it will show the bug! A refresh may fix the page. Which is basically like opening the page a second time. http://www.stack.nl/~rem/problem.html It's a page with 3 big sections: header, middle, footer. I've stripped the footer as far as possible and reduced the header. The footer stays at the bottom of the window/viewport or bottom of the page if the page is longer and requires scrolling. What problem to look for? The news section to the right, it should have 2 identical blocks (in this example). But it cuts off the second block entirely and cuts the end of the first one. Basically where the form ends on the left side. On reload of the page the error will be "fixed". By accident I stumbled upon this thread (<- link) where they also seem to discuss the cut off of contents when the regular body text is shorter than the float text. Though for me the problem only appears on the page with the form and not with other pages. They couldn't figure out the trigger or cause either and the thread stopped in 2002. I'm trying that <p></p><p></p> workaround... If anybody knows some other workarounds or knows what triggers this problem. Feel free and invited to post any suggestion that can solve this matter. Adding more contents text is no option alas. I have a css layout I'm working, that is all divs (my first time doing this without tables). My page consists of all divs, and then the body is a table for displaying date from a database. My problem is that I have the footer positioned absolutely at the bottom of the page, which is what I want, EXCEPT when the table extends longer and the user needs to scroll down. If the table does not extend the full height of the screen, then I want the footer at the bottom of the screen, but if the table extends past the bottom of the screen, I need to footer to be at the end of the table. I hope that makes sense. CSS Tags -- Just a portion of them: Code:
body {
margin: 0px 0px 0px 0px;
background-color: #E7F1FD;
font-family: Tahoma, Verdana, Arial, sans-serif;
height: 100%;
}
/*This is the main body of the page and contains the db data*/
#pwdb_body {
background-color: #E7F1FD;
border: 2px solid #FFF;
width: 100%;
height: 100%;
position: absolute;
top: 165px;
}
/*Footer */
#left_footer {
background-image:url(images/bar_header2.jpg);
width:100%;
height:36px;
position:absolute;
bottom: 0px;
}
My DIVS (partial): Code: <!-- START BODY --> <div id="pwdb_body"> <table width=100% border=1 name="main_body" bordercolor="#000000" style="border-collapse: collapse;" cellspacing=0 cellpadding=1> <tr> <td>...table data...</td> </tr> </table> </div> <div id="left_footer"><img src="images/index_02.gif"/></div> I have attached a screenshot of what I'm talking about. The footer bar is highlighted in a red box, and the table bottom is pointed out by a red arrow. I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. I'm having an issue where a website is showing up a few pixels off in Mac Firefox than it is in PC firefox. Anyone have a quick fix for this? Mac Screenshots: http://graffetto.com/chops/clairus_screens.pdf PC Firefox Screenshot: Firefox, IE, and Netscape all look identical on PC, while firefox, IE and safari look identical on Mac, but different from PC (except safari - messed up text) Any help is greatly appreciated Edit: after reviewing my post I realized I was quite vague. What I'm looking for is a way to filter CSS so that only Mac Firefox users will receive one CSS file, and PC users will receive another. My website works fine with all browsers except IE. Can anyone help me with the issue? www.opennys.com It uses CSS and xHTML and PHP. Thanks, Dennis I have two divs on a page and the last two are about 10 pixels higher up the screen than the last one. But if I adjust the window size they move back down where they should be. This only happens on of the pages though which is quite odd. Does anyone know of any firefox bugs that would cause this and any work-arounds? my css in IE is GREAT and look good. but on firefox, it doesnt show my background and all that. can anyone give me some suggestions. www.na-magodai.net Can someone please help me, i am desparate to intergrate transparency into my forum but im finding out what a pain in the *** it is. I tried semi transparent png's, but they only work in firefox and IE7 but most people are using IE6 (42.3%). I looked around on the internet for a fix that solves the ie6 png transparency issue but i didnt find one that shows it as semi transparent and doesnt bugger all of the links. Now ive moved onto CSS, ive found a solution that works great for IE 6 + 7 but not firefox. What happens is i apply a transparent css to the pagebackground: Code: filter:alpha(opacity=50); opacity: 0.5; but it applies it to everything on top as well. To get around this i apply a non transparent css to everything on top: Code: filter:alpha(opacity=100); opacity: 1; This works fine in IE making the background transparent and the contents on top solid but in firefox everything (including the content and the background) is transparent. Is there anything i can do to get around this? Its getting really annoying! Any help you can give would be much appreciated. James now i don't like saying things like possible bug because 99/100 it's not a bug, but some kind of user error. however, i have the following situation and i thought that describing it as a bug may get people interested in it two tables, both with auto width / height, both the same code. one table is set so that when viewed on screen it has display: none and then when printed it has display: block. if you do a print preview in internet explorer, the page shows two identicle tables. in mozilla, the table expands to fill the width of the page for the hidden table. see html attached for example; load in firefox / ie; do a print preview and you'll see what i mean. any ideas? I see there is another post here on this. But it may be a different issue. I was hoping some of the experts could take 30 seconds to see why this looks fine in Firefox and not IE. It did validate at w3c. I am sure there is a hack, but if there is something that sicks out real quick it would be much appreciated. I know everyone gives there extra time here and it is greatly appreciated. echo9design.com/willoughby/index3.html i read the thread posted about this not too long ago, and tried out the DOCTYPE! tag suggested, along with a few others from W3... however all that did was screw up the page more. anything you could do to help would be great Page Link Have a page at www.maxxedmotors.com/damo There is a div called "container" which is supposed to surround all of the content with a border. This works fine in IE 6/5.x, but in firefox the border only surrounds the div called "header". Can anyone tell me where i'm being dumb Any help greatfully appreciated. Hi, I'm having an issue with Firefox displaying my home page correctly. It previews smaller than other pages in my site even though they all share the same style sheet. In IE 7 my site previews fine, the issue is with Firefox for some reason the wrapper seems to shrink on the home page and any help or tips to steer me the right way would be greatly appreciated, thanks. Code: <---Style sheet---->
body {
margin: 0;
padding: 0;
background-image: url(assests/wrapperimage.jpg);
background-attachment: fixed;
}
p {
color: #FFFFFF;
font-family: "Courier New", Courier, monospace;
line-height: 20px;
letter-spacing: 2px;
font-size: 12px;
margin-top: 0;
margin-bottom: 0px;
}
h1 {
font-size: 2.4em;
color: #00FF00;
border-bottom-width: thin;
border-bottom-color: #00FF00;
border-bottom-style: dashed;
margin-top: 40px;
text-align: center;
}
h2 {
font-size: 20px;
color: #CCFF66;
text-align: center;
}
#wrapper {
width: 800px;
height: 1150px;
border-right: 2px solid #00FF00;
border-left: 2px solid #00FF00;
border-bottom: #000000 10px;
margin-right: auto;
margin-left: auto;
background: #000000;
}
#banner {
height: 250px;
width: 800px;
}
#sidebar {
float: left;
width: 190px;
height: 500px;
margin-top: 60px;
margin-left: 10px;
margin-bottom: 60px;
padding-left: 10px;
color: #FFFFFF;
text-align: center;
border-color: #999999;
border-style: thin;
}
#sidebar li {
list-style: none;
background-image: url(assests/images/images/images/check.jpg);
background-repeat: no-repeat;
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 6px;
text-align: left;
}
#main {
float:right;
width: 500px;
padding: 5px;
}
ul.nav {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-left: 50px;
padding-left: 0px;
list-style: none;
float: left;
width: 750px;
letter-spacing: 3px;
}
ul.nav li {
float: left;
padding-left: 10px;
margin-left: 15px;
margin-right: 10px;
}
ul.nav a {
display: block;
padding-left: 15px;
padding-right: 5px;
margin-left: 10px;
margin-right: 5px;
background-color: #000000;
text-decoration: none;
color: #00FF00;
text-align: center;
}
ul.nav a:hover {
background-image: url(assests/images/images/images/check.jpg);
background-position: left;
background-repeat: no-repeat;
padding-right: 10px;
color: #FFFFFF;
}
</style>
<----Home page HTML---->
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="banner">
<img src="assests/images/starbanner.jpg" />
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About us?</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
<div id="sidebar">
<h2>Why have a website?</h2>
<p>In todays market having a business or being a professional can cost thousands of dollars and you could be missing out on siginificantly increasing revenues. The internet is low cost method of marketing that yields results with the proper planning, marketing and implemnation.
Taking advantage of the internet in your overall marketing plan is essential in today's market for your company to grow and remain competitve.
Take a look at our portfolio to see some of the work we've done or contact us today to schedule a no-obligation free consultation.</p>
<p>
</p>
</div>
<div id="main">
<h1>Web Design Studio</h1>
<p>star media is a web design studio located in Troy, Michigan. Our specialty is providing afforadable and customized web design services as well as graphic design and print services. With our competitve pricing and custom tailored marketing programs we will drive customers to your website and through your business doors. Our competitive pricing and quick turn around time in developing websites ensures you have your website up and running as quickly as possible without breaking the bank.
From basic and simple websites to high caliber e-commerce database driven websites Gstar media does it all.
<h2>Why have a website?</h2>
<p>In todays market having a business or being a professional can cost thousands of dollars and you could be missing out on siginificantly increasing revenues. The internet is low cost method of marketing that yields results with the proper planning, marketing and implemnation.
Taking advantage of the internet in your overall marketing plan is essential in today's market for your company to grow and remain competitve.
Take a look at our portfolio to see some of the work we've done or contact us today to schedule a no-obligation free consultation.</p>
</div>
</div>
</body>
</body>
</html>
<-------About US HTML------>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="banner">
<img src="assests/images/starbanner.jpg" />
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
<div id="sidebar">
<h2>We offer:</h2>
<ul>
<li>web design</li>
<li>web hosting</li>
<li>e-commerce</li>
<li>logo design</li>
<li>business card design</li>
<li>flyer design</li>
<li>customized marketing campaigns</li>
<li>Search engine optimization</li>
<li>web maintence</li>
<li>illustration</li>
</ul>
</p>
</div>
<div id="main">
<h1>Our Promise.</h1>
<p>star media is created with the goal of providing affordable web design service to small business owners and professionals. I graduated from Sheridan college with a degree in business and later went on to get a degree in graphic design. With a strong background in business I understand how to market your business and message effectively to prospective customers that will help spread the awarness of your products and services in order to increase your revenues. I have a strong understanding of graphic design principles with a working knowledge of CSS/XHTML, Photoshop CS3, and Illustrator CS3.
</p>
</div>
</div>
</body>
</html>
users.accesscomm.ca/kendemchuk/test/education_tmp.html preview in firefox and IE. Lines appear in IE but not firefox This is related to the display of a text box on mouseover. why ?? is there a better method ?? I have a question regarding CSS and it's compatibility with FireFox, the problem is, when I have the CSS in a seperate file (e.g. <link rel="stylesheet" type="text/css" href="content.css"> ) it wont work in FireFox browser, works fine in Internet Explorer, but when I copy and paste the CSS directly onto the page, in between the <head> </head> tags of course, it works fine in FireFox and Internet Explorer fine, what am I doing wrong, do I need to specify something in the "stylesheet type" tag above? Any help would be great! I built a website and its rendering one way in firefox and another in IE. I want it to display just the way Firefox has it. However, IE keeps messing up the padding and the whole layout is destroyed. Can anyone look at my code and tell me where I am going wrong? Please can someone tell me what I must do to get the code working in both IE and Firefox. |
|||||||