|
CSS - Simple Content Not Contained In Parent Element In Firefox
Hi guys,
I'm changing a simple page from a table style layout to CSS Positioning style. Here's a common line...it's working fine in IE, but not in Firefox (which immediately tells me there's something wrong with my coding). The code is: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Overflowing Box</title>
<style type="text/css">
div.row{
padding-top : 10px;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
}
.image{
float : left;
font-weight : bold;
width : 210px;
}
.description{
float : right;
width : 235px;
}
</style>
</head>
<body>
<div style="width: 450px; background-color: #cc9;
border: 1px dotted #333; padding: 5px;
margin: 0px auto">
<div class="row">
<div class="image">An image will go here</div>
<div class="description">
<strong>Heading:</strong> Text <br>
<a href="http://www.somesite.com" target="_blank">http://www.somesite.com</a><br>
<br>
This is some meaningless text. This is some meaningless text. This is some meaningless text. This is some meaningless text.<br>
<br>
This is some meaningless text.
This is some meaningless text. This is some meaningless text. This is some meaningless text. This is some meaningless text.<br>
<br>
This is some meaningless text.
This is some meaningless text. This is some meaningless text. <br>
<br>
</div>
</div>
</div>
</body>
</html>
It's a very simple example, but for some reason, the container doesn't "expand" in Firefox as I'd expect. I've hunted around the web, played around and tried some of my other code to no avail. Am I missing the simplest of attributes? Any help would be GREATLY appreciated. Thanks in advance! Similar TutorialsI have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover. Here is an example: Code:
<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>
.link a { some link height }
.link a span { display: none; }
.link a:hover span {
position: abolute;
top: (some link height * the number of links);
background-image: (some image url)
width: (image width)
height: (image height)
}
Appearance: ------ Link1 Link2 Link3 Link4 ------- ------- Rollover Image to appear here ------- The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed. IE ------ Link1 sublink1 sublink2 Link2 Link3 Link4 ------- will break my scheme. Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang? If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that. thanks. Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim Please look at this page - http://hometown.tmhdesign.com/ask.asp?faq=9 See how the <p> exceeds the containing box at the bottom? I put a border-bottom on the containing div to show you where the issue occurs. It does not happen in IE7 I just noticed it does it also on this page http://hometown.tmhdesign.com/staff.asp Is there a way to style an element's parent with css? I know something like .div1 p { stuff here } takes care of p's that are inside div1 but is there a way to style say any div1 with a div2 inside? Or a ul with a ul inside? Can anyone explain the difference between the two? For example, what is the difference between: this: element element {} div p { } and this: element > element { } div > p { } I don't understand it and have not found an explanation in tireless searching. Thx! i have a block that i have the opacity set to .80. within this block i have text. The reason i have the opacity set at .80 is to help increase contrast between the background and text. the heading of the page is within the the block and is inheriting the opacity behaviour. Is there a way to turn this off? like a no-inherit? heres the block: #content { width: 470px; height: 380px; background: #fff; padding: 0px 5px 10px 10px; border: 0px solid yellow; overflow: scroll; float: clear; filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.8; } page titles a .pagetitles { font-size: .8em; font-weight: bold; font-family: verdana, Georgia, Times, serif; color: #ffcc00; line-height: .4em ; } Hi, Is it possible to change the css properties of a parent element without changing the properties of its childreen? That is, in the following code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>ccc</title>
</head>
<body>
<ul>
<li>Hello
<ul>
<li>World</li>
</ul>
</li>
</ul>
</body>
</html>
Is it possible to modify the root UL to have font set to 200% without the child UL also being effected?? Thansk and Regards, Sim085 Please look at this page - http://www.soarminden.com/glider-soaring-gallery.asp I put a red border on parent element. The children divs appear outside the parent at page bottom? Can someone shed some light please? I think the issue is with the styling of the div(s) innerLeftColumn or LeftColumn Code: <div style='width:670px;margin:0;border:1px solid red;min-height:500px;position:relative;'> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;clear:left;'> <img src='images/gallery/1/tom6.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=1' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Tom Hall Soaring</a></h4> </div> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'> <img src='images/gallery/12/phil-jones2.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=12' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Phil Jones Goes Gold & Diamond!</a></h4> </div> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'> <img src='images/gallery/13/wedding1.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=13' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Wolfram and Lydia's Wedding</a></h4> </div> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;clear:left;'> <img src='images/gallery/15/DSC_6547.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=15' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Brennan Hall Soaring Lake Tahoe</a></h4> </div> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'> <img src='images/gallery/16/teresa.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=16' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Teresa Luther</a></h4> </div> </div> My css is at CSS. The site is at site The problem I am having is that on the .maintextdiv or the .subtextdiv if I add any left or right margin values IE6 in strict mode is adding that value to the parent element, #rightbox. I should clarify that if I add margin values to just one of them it displays fine, but if I add margin values to both of them then I end up with the problem of extra space added to the parent element. More wierdness, if those (maintextdiv and subtextdiv) are not floated then the problem doesn't show up at all. It's only once they got floated did I have problems. This behavior doesn't show up in FF or Safari. Anyone with any ideas? The goal of the following code is to have a search box with several tabs above it to narrow down the search. The issue is that the design calls for a little upside down triangle to appear below the tab and bleed into the text box. The code works great in Firefox and even in IE6 where the Doctype was switched to HTML 3.2. I'm using 4.01 Transitional and noticing that the arrow doesn't center itself below the tab, rather it centers itself in the entire page. If I take out the width: 100% from .searchbox li.active .downarrow, then both browsers behave the same, although the downarrow now appears in the left bottom corner of the tab rather than the center. Note that I've stripped most of the code away to narrow down the issue. Code:
<style>
.searchbox ul { float: left; padding-left: 10px; list-style: none; padding: 0; margin: 10px 0 0 0; }
.searchbox li { float: left; }
.searchbox li .downarrow { display: none; }
.searchbox li a { display: block; float: left; font-size: 12px; padding: 3px; color: #213327; }
.searchbox li.active { position: relative; }
.searchbox li.active a { color: #fff; border: 1px solid #b3b2b0; background: #266d1e url('/c2footsearchbg.jpg') repeat-x scroll top left; }
.searchbox li.active a:hover { text-decoration: none; }
.searchbox li.active .downarrow { display: block; position: absolute; bottom: -9px; width: 100%; height: 10px; text-align: center; margin: auto; }
.searchbox div { clear: both; display: inline-block; }
.searchbox input.txt { border: 2px solid #999; padding: 5px 0 0 3px; width: 305px; height: 30px; }
.searchbox input.submit { font-weight: bold; font-size: 12px; color: #fff; width: 71px; height: 30px; border: 0; background: transparent url('/c2searchbutton.jpg') no-repeat scroll top left; vertical-align: top; cursor: pointer; }
.searchbox input.submit:hover { background-position: 0 -30px; }
</style>
<div class="searchbox">
<h3>Search</h3>
<ul id="c2FootSearch">
<li class="active"><a href="/index.php">Main</a><div class="downarrow">↓</div></li>
<li><a href="/groups/">Groups</a><div class="downarrow">↓</div></li>
<li><a href="/people/">People</a><div class="downarrow">↓</div></li>
<li><a href="/petitions/">Petitions</a><div class="downarrow">↓</div></li>
<li><a href="/news/">News</a><div class="downarrow">↓</div></li>
<li><a href="http://www.google.com">Google</a><div class="downarrow">↓</div></li>
</ul>
<div>
<form action="/searchall.html" method="post">
<input type="hidden" name="search" value="main" />
<input type="text" name="q" class="txt" />
<input type="submit" value="Search" class="submit" />
</form>
</div>
</div>
Hi all, The easiest way to see the problem is to look at this demo in firefox. (I haven't patched it to work in IE yet.) The menu items in the 1st 2 menu's don't expand to fill the available area. Any ideas? Hello everyone! my apologies if this is a dumb/old question - I did a search but didn't find anything like this... Question is, how can I make a page within an Iframe inherit the parent pages css? Reason is, I have a site with a css switcher (using php - a copy and paste job, still learning!) that uses iframes. Or would I be better ditching the iframes and using hidable DIV's? cheers guys! Please look at the carousel at the bottom of this page - www.mts-diesel.com What I would ultimately like to do is have it such that each image is vertically centered in the yellow box? Can this be done w/out use of a table cell? Thanks. Tom try to make a UL into a horizontal nav. i want the a's inside the li's to be display:block, so i need a block element around the outside, but that means they wrap to new lines. What is block without new lines? thanks. Please look at http://www.rodstrans.com/diagnosis/body_leaks.html In IE & Chrome the checkboxes are positioned absolute in each table cell, but in Firefox they all bunch at the top left. I have put a position:relative on all parent elements and can not figure out what is happening. I'm having trouble getting two textual elements to align oppositely, one left one right, within a DIV. Visually, I am attempting this: PHP Code: ================================================================= User: John Doe Main Menu :: Logout ================================================================= To accomplish this in all browsers as compliantly as possible, I attempted to define the outer div in CSS, align the content left in the XHTML, and then float another DIV inside to the right to hold the right-aligned textual content. I know that since <DIVs> are considered block level items, they are preceeded and followed by a linebreak. Thus, I defined the Right-floated DIV as display: inline, hoping to fix that. The CSS: PHP Code: #loginbar { height: 14px; font-size: 7pt; line-height: 7pt; font-weight: bold; color: #ffffff; background: #285064; margin: 0; padding: 3px 3px 0px 3px; } #logout { float: right; display: inline; } .loglink { font-size: 7pt; line-height: 7pt; font-weight: bold; color: #ffffff; } And the markup: Code: <div id="loginbar" align="left"> User: '.$_SESSION['fullname'].' <div id="logout" align="right"> <a class="loglink" href="main.php">Main Menu</a> :: <a class="loglink" href="logout.php">Logout</a> </div></div> This system works nicely in every browser I've tried (IE6 Win, IE5.1 Mac, Opera 7.54, Camino, Safari, and NN7.2) EXCEPT Firefox. Firefox continues to put the linebreak in before the logout, dropping the text halfway below the bottom of the div even when the div is defined as display:inline. (Interesting enough, the other so-called compliant browsers don'tput in the linebreak before the div even when it's not defined inline.) Anyone have a more elegant solution to this? I'm pretty sure I'm doing it the hard way now and can't see the forest from the trees at this point Hi everyone, I'm interested in making the ads in the rightmost sidebar stay within the 900px of the layout. How can I alter this page so that: 1. The images stay inside the container div 2. If the images are larger than the rightmost column, the column expands to the left and will make the main content feed smaller. I'm still kind of rusty with how fluid width works. Site is h**p://www.topofferspage.com I want to do this design: http://hermann.sonyextreme.com/upload/design.png * means it should be "the rest". Just like when working with frames. So the sites height is 100% and width is 800px. I've set it up like this: Code: <div id="container">
<div id="header">
</div>
<div id="main">
<div id="menu">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
</div>
But no matter what I try, the css just keeps ****ing with me So do you have any tricks/know any sites who have done this succesfully... or just anything to help me, then I'd love to hear from you Thanks in advance Hermann Here's the url Template Any comments on the code will be very helpfull. Even if it is out of topic. In IE it looks pretty good. In firefox the border goes under the large image and the image navigation is left there naked on the body background. Hi all, this is my first post and hope I get help in a hear-tearing problem that I face at this link: (URL address blocked : See forum rules) ie show the complete page fine but firefox obscure the bottom content, no need for more explanation since it is obvious from looking at the page, I have the same problem when page content get much long as in the above link. any help would be greatly appreciated. sorry for my bad english |
|||||||