|
CSS - Block Element Doesn't Fill Parent Container.
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? Similar TutorialsI have read and read through the CSS2 spec and I am unable to figure out if this is possible. Hopefully I can describe it well enough for somebody to help out. Okay, what I want to accomplish seems simple. I want a div, lets call this one "container", with a calculated height/width relative to the document (in terms of percentage). Inside this div will be another div, lets call it "header", whos width will span the length of the containing div (100%) and height is fixed, lets say 30px. Now here comes the tricky part... a third div, lets call it "content" should sit right underneath "header" and its width will also be 100% of the containing div, but the height should fill the remainder of the containing div. I can't seem to get the "content" div to fill the remainder of "container" and scroll when needed. If I specify a calculated height, the offset of the "header" div is not taken into account so "content" div does not fit properly. Thanks a ton if you can help me out. Please let me know if this doesn't make sense. I 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. Argh. Tried a number of variations on this probably simple task. Nonetheless: In this example how do I get the 'sidebar' to fill the vertical space of the container, and ensure the 'footer' remains positioned at the bottom (which it currently does) http://www.mandgweb.net/css_test/css_test.html Thank you Suppose I have the following script that creates a div element and set its width and height to fill the whole screen: Code:
<script type="text/javascript">
var oDiv = document.createElement('div');
oDiv.style.width = window.screen.availWidth + "px";
oDiv.style.height = window.screen.availHeight + "px";
//oDiv.style.width = window.screen.width + "px";
//oDiv.style.height = window.screen.height + "px";
oDiv.style.border = "solid 1px #ccc";
document.body.appendChild(oDiv );
</script>
well, the code above actually does the job, BUT a scrollbar (vertical and horizontal) is also created ... how to get rid of the scrollbars? Hi all I'm stumbling over the oddities of IE's hasLayout again and again, and often I can fix it using the properties overflow:auto and display:inline-block: Code: div#container {
overflow: hidden; /* For clearing floating inner elements */
display: inline-block; /* For regarding margins of inner elements etc. */
}
(Of course I only assign the display value to IE only.) As far as I could see so far, assigning these properties does not affect the expected behavior of the element in any negative way. Now I thought: why not assign them to all div elements as default? Code: div {
overflow: auto;
display: inline-table;
}
I didn't test this yet, but as long as the whole website's other CSS and the whole XHTML structure are clean (speak: the elements are only used for purposes they are intended to be used), this shouldn't have any negative consequences, should it? Thanks for your opinion, Josh Hi! Is it possible to align vertically block elements in a fixed-height (unknown) container? If not, this is a serious shortcoming of the css model of placing objects on the screen. Thanks! Hoping someone can help. I'm trying to figure out a way to align something to the left of an existing element within a container of variable height. The existing element is already aligned to the left edge of the container. To be more specific, I am trying to place a helper graphic to the left of the email text-field in the "Leave a Comment" form (not the "Email this Zing" form) on this page: http://www.zingfu.com/?zing=4419693e9e98f If it's possible to the place the helper graphic right next to the text field in the code, but then to break it out of the container div to move to the left of the text field, that would be great. Or if I could apply positioning to the helper graphic based on the positioning of the text field, that'd be fine too. But I'm not sure if either is possible. Little help? 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 I have a container div that has a height of 500px. My page content only takes up about 300px and I want a copyright notice at the bottom of the page. So I am trying to get the copyright div to bottom align on the container div. In FF, position:absolute;bottom:0; works but that doesn't work in IE which for some reason places the div outside the container div. Any tips on how to do this? I usually lurk in the Javascript forum, but a frustrating CSS issue has presented itself. I've googled this extensively and haven't found any working solutions. I'll write in pseudo-code what I want to happen, and hopefully someone can fill in the blanks... here goes: Code:
<style type="text/css">
.container {
display: inline-block;
}
.title {
align: left;
}
.subtext {
align: right;
}
</style>
<div class="container">
<div class="header">
<div class="title">Title Goes Here</div>
<div class="subtext">Align Me Right</div>
</div>
<div class="content">
Variable content which container needs to size dynamically to fit. Could be 300px wide, could be 500px wide...
</div>
</div>
What I've tried so far: Tried setting the container width to 1% so IE would autosize to content (while setting white-space: nowrap for the title/subtext), but IE wrapped between the title and subtext elements) Played around with setting absolute widths for the container, but I would really prefer being able to have variably sized content And unfortunately (in many ways) it only has to work in IE. Any help would be greatly appreciated. Thanks! the width property of the element "#globalNavWrapper #nav .subnav li a" in this drop down menu is being ignored. when i add padding-right: 200px to it, the full element is visible in the drop down menu, but the long text strings get cut off. why is the width element being ignored? Thanks in advance! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Groups</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#navbar {
position: relative;
z-index: 10000;
}
#globalNavWrapper {
position: relative;
width: 100%;
font-family: Arial, Verdana, sans-serif;
font-size: 11px;
z-index: 10;
}
#globalNavWrapper #nav ul {
list-style: none;
z-index: 20;
}
#globalNavWrapper #nav li {
float: left;
background: #0f0 url(sprite.gif) no-repeat scroll 0%;
display: inline;
height: 24px;
}
#globalNavWrapper #nav li.navpadleft {
border-left: 1px solid #999;
}
#globalNavWrapper #nav li a {
display: block;
background: #0f0 url(sprite.gif) no-repeat scroll 0%;
height: 0;
width: 100%;
padding-top: 24px;
overflow: hidden;
}
#globalNavWrapper #nav li#nav_home, #globalNavWrapper #nav li#nav_home a:hover, #globalNavWrapper #nav #nav_home.over a { width: 53px; }
#globalNavWrapper #nav li#nav_home a { background-position: -155px -18px; }
#globalNavWrapper #nav li#nav_home.active a { background-position: -155px -64px; }
#globalNavWrapper #nav li#nav_home a:hover, #globalNavWrapper #nav li#nav_home.active.over a, #globalNavWrapper #nav #nav_home.over a { background-position: -155px -87px; }
#globalNavWrapper #nav li#nav_myXXXX, #globalNavWrapper #nav li#nav_myXXXX a:hover, #globalNavWrapper #nav #nav_myXXXX.over a { width: 73px; }
#globalNavWrapper #nav li#nav_myXXXX a { background-position: -720px -18px; }
#globalNavWrapper #nav li#nav_myXXXX.active a { background-position: -720px -64px; }
#globalNavWrapper #nav li#nav_myXXXX a:hover, #globalNavWrapper #nav li#nav_myXXXX.active.over a, #globalNavWrapper #nav #nav_myXXXX.over a { background-position: -720px -87px; }
#globalNavWrapper #nav li#nav_people, #globalNavWrapper #nav li#nav_people a:hover, #globalNavWrapper #nav #nav_people.over a { width: 56px; }
#globalNavWrapper #nav li#nav_people a { background-position: -208px -18px; }
#globalNavWrapper #nav li#nav_people.active a { background-position: -208px -64px; }
#globalNavWrapper #nav li#nav_people a:hover, #globalNavWrapper #nav li#nav_people.active.over a, #globalNavWrapper #nav #nav_people.over a { background-position: -208px -87px; }
#globalNavWrapper #nav li#nav_groups, #globalNavWrapper #nav li#nav_groups a:hover, #globalNavWrapper #nav #nav_groups.over a { width: 60px; }
#globalNavWrapper #nav li#nav_groups a { background-position: -264px -18px; }
#globalNavWrapper #nav li#nav_groups.active a { background-position: -264px -64px; }
#globalNavWrapper #nav li#nav_groups a:hover, #globalNavWrapper #nav li#nav_groups.active.over a, #globalNavWrapper #nav #nav_groups.over a { background-position: -264px -87px; }
#globalNavWrapper #nav li#nav_tnn, #globalNavWrapper #nav li#nav_tnn a:hover, #globalNavWrapper #nav #nav_tnn.over a { width: 103px; }
#globalNavWrapper #nav li#nav_tnn a { background-position: -324px -18px; }
#globalNavWrapper #nav li#nav_tnn.active a { background-position: -324px -64px; }
#globalNavWrapper #nav li#nav_tnn a:hover, #globalNavWrapper #nav li#nav_tnn.active.over a, #globalNavWrapper #nav #nav_tnn.over a { background-position: -324px -87px; }
#globalNavWrapper #nav li#nav_green, #globalNavWrapper #nav li#nav_green a:hover, #globalNavWrapper #nav #nav_green.over a { width: 91px; }
#globalNavWrapper #nav li#nav_green a { background-position: -427px -18px; }
#globalNavWrapper #nav li#nav_green.active a { background-position: -427px -64px; }
#globalNavWrapper #nav li#nav_green a:hover, #globalNavWrapper #nav li#nav_green.active.over a, #globalNavWrapper #nav #nav_green.over a { background-position: -427px -87px; }
#globalNavWrapper #nav li#nav_ecards, #globalNavWrapper #nav li#nav_ecards a:hover, #globalNavWrapper #nav #nav_ecards.over a { width: 60px; }
#globalNavWrapper #nav li#nav_ecards a { background-position: -518px -18px; }
#globalNavWrapper #nav li#nav_ecards a.active { background-position: -518px -64px; }
#globalNavWrapper #nav li#nav_ecards a:hover, #globalNavWrapper #nav li#nav_ecards.active.over a, #globalNavWrapper #nav #nav_ecards.over a { background-position: -518px -87px; }
#globalNavWrapper #nav li#nav_shopping, #globalNavWrapper #nav li#nav_shopping a:hover, #globalNavWrapper #nav #nav_shopping.over a { width: 73px; }
#globalNavWrapper #nav li#nav_shopping a { background-position: -578px -18px; }
#globalNavWrapper #nav li#nav_shopping a.active { background-position: -578px -64px; }
#globalNavWrapper #nav li#nav_shopping a:hover, #globalNavWrapper #nav li#nav_shopping.active.over a, #globalNavWrapper #nav #nav_shopping.over a { background-position: -578px -87px; }
#globalNavWrapper #nav li#nav_petit, #globalNavWrapper #nav li#nav_petit a:hover, #globalNavWrapper #nav #nav_petit.over a { width: 69px; }
#globalNavWrapper #nav li#nav_petit a { background-position: -651px -18px; }
#globalNavWrapper #nav li#nav_petit a.active { background-position: -651px -64px; }
#globalNavWrapper #nav li#nav_petit a:hover, #globalNavWrapper #nav li#nav_petit.active.over a, #globalNavWrapper #nav #nav_petit.over a { background-position: -651px -87px; }
#globalNavWrapper #nav li#nav_don, #globalNavWrapper #nav li#nav_don a:hover, #globalNavWrapper #nav #nav_don.over a { width: 107px; }
#globalNavWrapper #nav li#nav_don a { background-position: -793px -18px; }
#globalNavWrapper #nav li#nav_don a.active { background-position: -793px -64px; }
#globalNavWrapper #nav li#nav_don a:hover, #globalNavWrapper #nav li#nav_don.active.over a, #globalNavWrapper #nav #nav_don.over a { background-position: -793px -87px; }
#globalNavWrapper #nav li.over .subnav, #globalNavWrapper #nav li.over iframe { display: block; }
#globalNavWrapper #nav .subnav {
position: absolute;
margin: -1px;
border: 1px solid #999;
background: #fff;
width: 150px;
z-index: -10;
display: none;
overflow: hidden;
}
#globalNavWrapper #nav .subnav li {
clear: both;
float: none;
display: block;
background: none;
line-height: 18px;
height: 18px;
width: 150px;
list-style: none;
border: 0;
}
#globalNavWrapper #nav .subnav li.hr {
border-bottom: 1px solid #999;
}
#globalNavWrapper #nav .subnav li a {
background: #fff;
padding: 0 0 0 5px;
width: 1000px;
height: 18px;
color: #000;
text-decoration: none;
}
#globalNavWrapper #nav .subnav li a:hover {
background: #e4f5e5;
color: #009f00;
}
#globalNavWrapper #nav li iframe {
display: none;
z-index: -1000;
height: 220px;
width: 151px;
-moz-opacity: 0;
opacity: 0;
filter: alpha(opacity=0);
}
</style>
</head>
<body>
<div id="globalNavWrapper">
<ul id="nav">
<li id="nav_home" class="navpadleft">
<a href="#">Home</a>
</li>
<li id="nav_myXXXX">
<a href="#">My XXXX</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_people">
<a href="#">People</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
<li id="nav_groups" class="active">
<a href="#">People</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_tnn">
<a href="#">News Network</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_green">
<a href="#">Green Living</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_ecards">
<a href="#">E-Cards</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_shopping">
<a href="#">Shopping</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_petit">
<a href="#">Petite</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
<li id="nav_don">
<a href="#">Don</a>
<ul class="subnav">
<li class="hr"><a href="#">Main</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page</a></li>
<li><a href="#">Next Page Long Text</a></li>
<li><a href="#">Next Page</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
startList = function() {
var navRoot = document.getElementById("nav");
var is_MSIE = false;
if(navigator.userAgent.indexOf('MSIE') >= 0) is_MSIE = true;
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if ( (node.nodeName=="LI") && (!node.id.match(/noMenu$/)) ) {
node.onmouseover = function() { this.className += " over"; }
node.onmouseout = function() {
this.className = this.className.replace(" over", "");
this.className = this.className.replace("over", "");
}
for(j=0; j<node.childNodes.length; j++) {
if(node.childNodes[j].nodeName=="UL"){
if(is_MSIE) {
var iframe = document.createElement('<iframe frameborder="0">');
iframe.style.position = 'absolute';
iframe.border = '0';
iframe.frameborder = 0;
iframe.style.backgroundColor = '#f00';
iframe.src = 'about:blank';
node.appendChild(iframe);
}
}
}
}
}
}
startList(); // could run elsewhere on the page, or onLoad, but inline just after seems to work best.
document.getElementById('nav').style.zIndex = 2000;
</script>
</body>
</html>
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? I'm looking for a CSS element that behaves like a table, where the size of the container will always be just big enough to surround the data inside, and will grow or shrink based on the content inside without having to specify any widths or heights. A div (with a border) with no width specified will go on forever horizontally. A table (with a border) with no width will stop as soon as the data inside ends. Is there a way to simulate this table behavior using CSS? Thanks okay I don't know why my text will not wrap in any of my "float:rights" My quicklink section I don't care about as much as the feature student section I'm building. The text spills out of the paragrah block and keeps running. http://www.mgan.net/form-honors/main(2).htm Any thoughts on how to fix it or a link to a site that would explain it's just as good Hi all 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>
<title> new document </title>
<style>
div.outer {
background-color: yellow;
overflow: auto;
}
h1 {
margin: 10px;
}
</style>
</head>
<body>
<div class="outer">
<h1>Title</h1>
</div>
</body>
</html>
Expected result (Firefox): expected.JPG Unexpected result (Internet Explorer): unexpected.JPG Is there something I can do against this instead of adding a padding-top to the H1 or a padding-top to the div.outer? Thanks for help, Josh I am trying to get the blue box (which is the content container) to be big enough to cover both divs "cbox1" and "cbox2". Right now it only covers the <h1> title and neither of the cboxs. I also need these two cbox's to be side by side instead of on top of or below each other. I can achieve one of these at a time but not both when I play around with the float values of the cbox's. I would appreciate any help at getting the results I desire. Thanks. Here is the basic html I am working with. Code: <!DOCTYPE html>
<html>
<head>
<style media="screen" type="text/css">
#content {
margin:0px;
padding:0px;
background-color:#90C0FF;
}
#cbox1 {
border-radius:15px;
border: 2px solid #000000;
width:250px;
background-color:#FFFFFF;
padding:20px;
float:left;
}
#cbox2 {
border-radius:15px;
border: 2px solid #000000;
width:200px;
background-color:#FFFFFF;
padding:20px;
margin-left:10px;
float:left;
}
</style>
</head>
<body>
<div id="content">
<h2>LOREM IPSUM:</h2>
<div id="cbox1">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
</div>
<div id="cbox2">
But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?
</div>
</div>
</body>
</html>
You can pop this right into try it: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic 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. 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 |
|||||||