|
CSS - <p> Outside Parent Div Element In Ff
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 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. 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! 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? 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 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? 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! 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 Is there a way to get the style sheet to let the inner tag to override the parent's tag? Seem that only one webpage need that while many other doesn't. I'll post the code below, take a look at the text-align:left ...... Code: <div style="margin:0px;padding:25px 30px;text-align:left;"> <img style="text-align:center;" src="..."> </div> I'm using a web application for an online survey system. The pages rendered are XHTML transitional ("<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">")... but it doesn't validate (a big problem, I know). It looks like this initially... ...and I'm trying to indent the entire element below the header text like so... ...but the problem is that it applies the change not only the parent TABLE/DIV combo, but then the children as well (which is why the radio buttons ended up being shifted over too I believe). I can't change any of the code of the application, but the application references an external CSS file that I can edit only (so I can't change the fact that there aren't many/any classes assigned to the elements to use directly... but I can modify this one file and have the changes applied). What I've tried thus far is to use either of the following... Code: TABLE DIV {position: relative; left: 25px;}
TABLE DIV {padding-left: 25px;}
I found the tree using Firebug for Firefox. Is there a way to make the CSS code be applied to only the first/parent TABLE/DIV combo and not it's children? Maybe I could start with BODY TABLE DIV or something? I would really appreciate any assistance possible. Hey AHH I know that there is a lot of code to look at but I'm only working on the middle box with the cross. All I am wanting to figure out right now is how to get the parent div.icross to show all it's background in FF. It shows and looks how I want it to look in IE, so you can use that as reference. You guys are always so much help and I REALLY appercaite it. Thanks so much to whoever helps me. - Jacenta Here is the page: tri-m.com/index_newlayout.html Here is the css that only corresponds to the middle to make things easier for you to see: Code:
div.icross /* index cross */
{
background:url(trim_images/layout/cross_background.gif);
background-color:#FFFFFF;
background-repeat:no-repeat;
background-position:top;
width:540px;
height:1%;
}
div.ilogo /* logo in cross, top left box */
{
width:192px;
height:57px;
margin-right:1px;
margin-bottom:2px;
float:left;
text-align:right;
padding:0;
}
div.ind /* name/description in cross, top right box */
{
width:346px;
height:57px;
margin-left:1px;
margin-bottom:2px;
float:right;
text-align:right;
padding:0;
}
div.iimage /* image in cross, bottom left box */
{
width:192px;
float:left;
margin-right:1px;
margin-top:1px;
height:1%;
}
div.iinfo /* info in cross, bottom right box */
{
width:346px;
float:right;
margin-left:1px;
margin-top:1px;
text-align:left;
height:1%;
}
.trimdescription
{
color:#1b4da6;
font-family:Arial;
font-size:12px;
text-align:left;
font-weight:normal;
width:540px;
}
.pname /* product name */
{
color:#063891;
font-family:Arial;
font-size:28px;
padding:0;
}
.pdescription /* product description */
{
color:#f47720;
font-family:Arial;
font-size:12px;
font-style:italic;
text-align:right;
padding:0;
margin-left:15px;
}
div.clear /* clear div/container */
{
clear:both;
}
div.fptitle /* featured products title/banner */
{
width:540px;
height:19px;
padding:0;
margin:0;
}
div.fproducts /* featured products small images */
{
background-color:#e8e8e8;
width:540px;
height:76px;
padding:0;
margin:0;
}
Is there a way to get the style sheet to let the inner tag to override the parent's tag? Seem that only one webpage need that while many other doesn't. I'll post the code below, take a look at the text-align:left ...... Code: <div style="margin:0px;padding:25px 30px;text-align:left;"> <img style="text-align:center;" src="..."> </div> Please look at this page http://osake.garychus.com/menu2.asp I am trying to wrap a div (red border) around each category on this restaurant menu. For some reason the code looks right but the red border does not enclose the entire category section(s). I validated the html but think the issue is css related. Any help is appreciated. I am confused by the "rules" of how to indicate what you are trying to style when an element is within other elements. Specifically in this case (but hopefully this lesson will be portable to other contexts). I have a UL with an LI (classed) that is within an id'd UL that is within an id'd DIV. Code: <div id="horzmenu">
<ul id="horznavmenu">
<li><a href='rooms.php'>Accomodations</a></li>
<li class='hot'>Location & Info
<ul>
<li><a href='/otherprops.php'>Other Properties</a></li>
<li><a href='/news.php'>News & Photos</a></li>
</ul>
</li>
<li><a href='booking.php'>Booking</a></li>
</ul>
</div>
So if I were to wish to style this new UL and its LI's do I refer to: The parent UL as in: #horznavmenu ul ul { The parent UL and the class'd LI as in: #horznavmenu ul ul li.class{ Or? Thanks in advance for any feedback or suggested reading... http://weightlossforever.ca/ Works fine in everything but ie7 the leaves appear in front of their parent, they should be behind it. Thoughts? Hi. How would I go about horizontally centering a number of divs within another parent div which has a set width of 500px? There maybe 2,3 or 4 divs of varying length within the parent div but no matter the number I always want them centered within the parent div. |............................................................| |............................................................| |............................................................| | <---DIV---> | <---DIV---> | <---DIV---> | |............................................................| |............................................................| |............................................................| I have just a few more CSS bugs to iron out and I can't seem to figure this one out. Here's a link: http://www.plml.org/multitool/index.php In IE8/Firefox it works just as it should: the #solution_area div (contains the multiplication problems) doesn't stretch to its max width. In IE7 the #solution_area div stretches. I've tried taking out all of the contents of the .tab_content divs (just inside the #solution_area div) except for some gibberish text and it works fine. As soon as I put a single thing in, it stretches. What's going on? |
|||||||