Learn VBA & Macros in 1 Week!

CSS - Block Element Alignment Issue In Firefox

Full Excel VBA Course - Beginner to Expert

Block Element Alignment Issue In Firefox	View Content

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

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Right Alignment Within Inline-block Element

Div Element Alignment Issue

Firefox Div Alignment Issue

Thumbnails In Block Style Alignment ?

Centering An Image Within A Block Element

Width Property Is Being Ignored On A Block Element

Block Level Element Inside Inline?

Position Absolute Within Block Level Element

Simple Q: Block Element Without Line Break

Strange Problem With Block Element Spacing/positioning

Block Element Doesn't Fill Parent Container.

Block Element: Inherit Height Of Surrounding Table Cell

Inline-block Hack For Firefox?

Alignment In Firefox

How Can I Fix This Alignment Issue?

Alignment Issue On Ie8

Div Alignment Issue

Css Alignment Issue

Alignment Issue

Help With Alignment Issue With I.e. 6

Learn VBA & Macros for Excel in 1 Week!

Right Alignment Within Inline-block Element

Similar Tutorials

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!

Div Element Alignment Issue

Similar Tutorials

I have a table inside of a div, and I need to push the table down a little bit but can't get it to without using line breaks, which push it down too far.

I have a background image that I'm using to emulate a shadow and need the table to just be a little bit lower so that the upper right hand corner image blends in with it.

Here is my CSS:

Code:

#header {
  width: 100%;
  height: 90px;
  padding-bottom:5px;
  padding-right: 10px;
  margin-bottom: 5px;
  vertical-align: bottom;
  background: url(img/hd_shw.gif) no-repeat right;
}
.top {
  width: 16px;
  height: 16px;
  vertical-align: top;
}

.bottom {
  height: 16px;
  width: 16px;
  vertical-align: bottom;
}

.blue_fill{
  background-color: #4095BF;
}

My HTML:

Code:

<div id="header">
     <table class="hdr_bk" align="center" width="100%" style="height: 92%;" cellpadding="0" cellspacing="0">
       <tr>
         <td class="top" style="background: url(img/b_tl.jpg) no-repeat top left #4095BF;"></td>
         <td class="blue_fill"></td>
         <td class="top" style="background: url(img/b_tr.gif) no-repeat top right;"></td>
       </tr>
       <tr class="blue_fill">
         <td></td>
         <td>Header</td>
         <td></td>
       </tr>
       <tr>
         <td class="bottom" style="background: url(img/b_bl.jpg) no-repeat bottom left #4095BF;"></td>
         <td class="blue_fill"></td>
         <td class="bottom" style="background: url(img/b_br.jpg) no-repeat bottom right #4095BF;"></td>
       </tr>
     </table>
  </div>

I realize that there is a gap, which will be fixed when I figure out how to push down the table.

Firefox Div Alignment Issue

Similar Tutorials

Hello everyone! A pre-emptive thank you to anyone and everyone who reads and responds to my questions! I'm new to CSS, being more of a designer and far, far less of a coder, so forgive any potential glaring errors I may be making. I'm having to learn all this stuff as I go along, with little to no guidance, so any advice you guys might have as far as repairing my lackluster coding will be taken with shy graciousness.

I'm attempting to put together a basic template for a website I am trying to build, to use in conjunction with concrete5, an open-source CMS. I've managed to make it look and operate correctly in IE and Chrome, but in FireFox the navbar on the bottom does not align itself correctly. It jumps several hundred pixels down the page and jolts sharply to the left.

I've managed to make use of the @-moz tag to get it to accept FireFox-specific behavior. However, I cannot get it to maintain absolute positioning, despite assigning it that attribute. Rescaling the window or zooming in and out in a browser causes it to slide around willy-nilly, even if I reposition it specifically in the CSS.

As a note, I had a lot of trouble getting other elements to properly center in the process of making the whole template, but I'm not sure what was causing that, either. I've not been able to get things to center themselves properly or respond correctly to instructions; I'm basically running in the dark, here.

The code is below. Please let me know what I'm doing wrong!

Code:

<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
$this->inc('elements/header.php');
?>

<body>
<div id="container">
    <div id="navbar">
	   	<div class="navspacer">
        	<a href=""></a></div>
        <div class="nav1">
        	<a href="plans.html"></a></div>
        <div class="nav2">
        	<a href="phones.html"></a></div>
        <div class="nav3">
        	<a href="broadband.html"></a></div>
        <div class="nav4">
        	<a href="index.html"></a></div>
		<div class="nav5">
        	<a href="services.html"></a></div>
		<div class="nav6">
        	<a href="accessories.html"></a></div>
   		<div class="nav7">
        	<a href="locations.html"></a></div>
          <div class="display">
          <div class="presentation">
          	<div class="columnzone">
		<div class="column1">
			<div class="columncontent">
				  <?php
         	$a = new Area('Sidebar');
         	$a->display($c);
         	?>
			</div>
            </div>
		<div class="column2">
			<div class="columncontent">
			    <?php
         	$a = new Area('Main');
         	$a->display($c);
         	?>
			</div>
		</div>
		<div class="column3">
			<div class="columncontent">
			    <?php
         	$a = new Area('Column3');
         	$a->display($c);
         	?>
			</div>
		</div>
        </div>
        </div>
	<div id="bottomnav">
        <div class="bnav1">
        	<a href="contactus.html"></a></div>
        <div class="bnav2">
        	<a href="feedback.html"></a></div>
        <div class="bnav3">
        	<a href="employment.html"></a></div>
      	</div>
        </div>
        </div>
</div>
</div>
<div class="footer">
<?php  $this->inc('elements/footer.php'); ?>
</div>
</body>

And the CSS:

Code:

/* CSS Document */

body {
	font:12px Trebuchet MS, Tahoma, Arial;
	color:#000000;
	background:url(/images/bg.jpg) repeat;
				
}

#container {
margin:0 auto;
width:1050px;
bottom:0;
}

/*	NavBar 	*/

#navbar {
	width: 928px;
	height: 90px;
	position:absolute;
	padding-left:50px;
	top:0;
}

#navbar li {
    list-style:none;
    display:inline;
}

.navspacer a {
	display:inline;
	float:left;
	width: 20px;
	height: 90px;
	background:url(/images/nav00.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav1 a {
	display:inline;
	float:left;
	width: 132px;
	height: 90px;
	background:url(/images/nav01.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav1 a:hover { 
	background:url(/images/nav08.png) no-repeat;
}

.nav2 a {
	display:inline;
	float:left;
	width: 127px;
	height: 90px;
	background:url(/images/nav02.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav2 a:hover { 
	background:url(/images/nav09.png) no-repeat;
}

.nav3 a {
	display:inline;
	float:left;
	width: 139px;
	height: 90px;
	background:url(/images/nav03.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav3 a:hover { 
	background:url(/images/nav10.png) no-repeat;
}

.nav4 a {
	display:inline;
	float:left;
	width: 114px;
	height: 90px;
	background:url(/images/nav04.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav4 a:hover { 
	background:url(/images/nav04.png) no-repeat;
}

.nav5 a {
	display:inline;
	float:left;
	width: 126px;
	height: 90px;
	background:url(/images/nav05.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav5 a:hover { 
	background:url(/images/nav12.png) no-repeat;
}

.nav6 a {
	display:inline;
	float:left;
	width: 129px;
	height: 90px;
	background:url(/images/nav06.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav6 a:hover { 
	background:url(/images/nav13.png) no-repeat;
}

.nav7 a {
	display:inline;
	float:left;
	width: 141px;
	height: 90px;
	background:url(/images/nav07.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.nav7 a:hover { 
	background:url(/images/nav14.png) no-repeat;
}

/*	NavBar End 	*/


/*	Central Display Area 	*/

.display {
	display:block;
	height:475px;
	left: 74Px;
	position: static	;
	width:950px; 
	background:url(/images/display.png) top no-repeat;

}

/*	Central Display Area 	*/


/*	Presentation Area 	*/

.presentation {
	display:block;
	height:466px;
	position: absolute;
	left:71px;
	width:908px;
	top:421px;
	background:url(/images/presentation01.png) top no-repeat;
}


.columnzone {
	margin-top:-35px;
	padding-top:52px;
	position:relative;
	z-index:0;
}

.columncontent {
	padding: 18px 0px 0px 0px;
}

.column1 {
	width:259px;
	float:left;
	padding: 0px 15px 10px 20px;
}

.column2 {
	width:303px;
	float:left;
	padding: 0px 10px 10px 9px;
}

.column3 {
	width:259px;
	float:left;
	padding: 0px 10px 10px 15px;
}

/*	Presentation Area End	*/


/*	Bottom Nav	*/


#bottomnav {
	display:block;
	width: 928px;
	height: 90px;
	position:absolute;
	margin-top:887px;
	margin-left:21px;
}

#bottomnav li {
    list-style:none;
    display:inline;
}

.bnav1 a {
	display:inline;
	float:left;
	width: 326px;
	height: 37px;
	background:url(/images/presentation02.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.bnav1 a:hover { 
	background:url(/images/presentation05.png) no-repeat;
}

.bnav2 a {
	display:inline;
	float:left;
	width: 250px;
	height: 37px;
	background:url(/images/presentation03.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.bnav2 a:hover { 
	background:url(/images/presentation06.png) no-repeat;
}

.bnav3 a {
	display:inline;
	float:left;
	width: 332px;
	height: 37px;
	background:url(/images/presentation04.png) no-repeat;
	text-decoration: none;
	position:inherit;
}

.bnav3 a:hover { 
	background:url(/images/presentation07.png) no-repeat;
}


@-moz-document url-prefix() {
  #bottomnav {
   	display: inline-block;
	position:absolute;
	width: 928px;
	height: 90px;
margin-left:0px;
padding:0 0 0 0; 
} 

/*	Bottom Nav End	*/

.footer {
	background:url(/images/footer.png) no-repeat;
	height:60px;
	text-align:center;
	color:#fefaca;
	padding-top:18px;
	margin-top: -500px;
	margin-bottom:20px;
	position:relative;
	z-index:2;
}

Thumbnails In Block Style Alignment ?

Similar Tutorials

I'm using:
Code:

div#iselDiv li {
			margin: 5px;
			padding: 5px;
			display: block;
			border: 1px solid #cccccc;	
			float: left;	

}

and:

Code:

<div id="iselDiv">
    <ul>
<li ><a href="#"><img src="image.jpg" border="0"></a></li>
<li ><a href="#"><img src="image.jpg" border="0"></a></li>
<li ><a href="#"><img src="image.jpg" border="0"></a></li>
<li ><a href="#"><img src="image.jpg" border="0"></a></li>
. . . 

	</ul>
</div>

to draw thumbnails of images in block style, the problem is they will not align to the left, there is allways extra space larger then margin, like in this image:

(when I set float: right, it floats to the right OK, but float: left; has a problem ). Help?

Centering An Image Within A Block Element

Similar Tutorials

Width Property Is Being Ignored On A Block Element

Similar Tutorials

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>

Block Level Element Inside Inline?

Similar Tutorials

Hello,

I know that putting a block level element (such as <p> or <div>) inside an inline element (such as <a>) is against "xhtml 1.0 strict" rules, so I'm putting a <span> (inline) within an <a> (also inline).

I've made my <span> "display: block;", and it works in all browsers and validates fine, but I feel like I'm cheating the system a bit?

The thing is, I need to put a margin under a piece of text without using <br /> (as when a browser forces a line break, it will use that rule and make different pieces of text look odd), but all the text is within an anchor tag, so I can't use <p> or <div>.

Would appreciate any thoughts on the matter,

Cheers!

Position Absolute Within Block Level Element

Similar Tutorials

Hey,

I've got a quick question - I know this must have a common workaround to it, I just can't seem to find it.

I have a div positioned absolutely within several parent divs making up the rest of the page. To put the issue simply, it seems to be positioning this child div relative to the body. top:20; and left:20; will put it 20 from the top and left of the body of the page rather than he top and left of the block level div it's nested within. There's no positioning applied to its direct parent.

The issue is the same in both IE5.5+ and FF.

I can whip up a code example, but I think this is a simple issue that would be easier interpreted as I've put it.

Thanks in advance for any help on this. =)

Simple Q: Block Element Without Line Break

Similar Tutorials

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.

Strange Problem With Block Element Spacing/positioning

Similar Tutorials

I am working on a site right now. I have two adjacent divs, one on top of the other. Both are styled with margins and padding set to "0." I want the second div to be directly below the first with no spacing. If I include a single-pixel border on the second div, the elements touch with the border being the only thing between the first and second div. Without the border, there is a space of what I believe to be 20 pixels. I don't want to actually use the border so I'm not sure what to do. I don't understand why the page is behaving this way. Feel free to check it out at kellyshipe.com. I would have linked but forum rules evidently prevent it.

Block Element Doesn't Fill Parent Container.

Similar Tutorials

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?

Block Element: Inherit Height Of Surrounding Table Cell

Similar Tutorials

Hi everybody

Is there a way to inherit the height of a surrounding table cell?

<td>
<a href="..." style="display: block;">...</a> 
</td>

Thanks for help :-)
Josh

Inline-block Hack For Firefox?

Similar Tutorials

I'm trying to display 5 images across, and underneath each image will be a caption.

So, i'm using an inline list, but how do I go about getting something to the second line for each list item, seems that inline-block works fine in IE, but since its not available for Firefox, what's the method people use here?

Alignment In Firefox

Similar Tutorials

Hello,

I have a question about alignment in firefox.
The menu i have has some space while it needed to reach the top, like it does in IE.

The page you can see on: http://217.115.203.132/dcvtest/

I hope anyone has a solution for me.

Thanks in advance.

Tim

How Can I Fix This Alignment Issue?

Similar Tutorials

Hi there,

I want to make the text in my post content to align left and take the same width as the image (448px). I have changed the CSS of the post content, but all that happens is the posts get more un-aligned as you go down, as if the new 'left' alignment ruins the centering of everything.

I'm using wordpress.

Does anyone have any suggestions as to why this is happening, and how I can align my content text to the left?

Thanks.

Alignment Issue On Ie8

Similar Tutorials

Good day!

when i run my webpages in IE8 the alignment was change i don't know why it happens. Before my webpage is fix on my screen but now the scrollbar was visible, which is i don't want to happen...is it css code help me in my problem?

Div Alignment Issue

Similar Tutorials

Hello everyone.

Another episode of stupid CSS tricks here!

h-t-t-p://rewards.yarnell.openi.com/

This site looks good in IE8, Firefox, Safari, Chrome. Only older IE shows the rightmost DIV, the main content area, as underneath the rest of the page. This is not my first CSS only site, but for some reason, I can't figure out why it isnt displaying correctly in older IE. If you are using IE8 and need to see it broken, just throw the site into compatibility mode.

I have all the DIV styles in the source, not in a stylesheet to make it easy for anyone to help me with this.

I just know this is going to be something simple, and thank you in advance to anyone kind enough to give this a look!

Have a great day!

Css Alignment Issue

Similar Tutorials

Hello all!

I am trying to create a simple website. I had it working in html alignment wise here
URL

But i want it working in CSS. Look here URL
and tell me what it is i have done wrong. I want the two colums to sit next to each other, centered.

Thanks for your time.

Alignment Issue

Similar Tutorials

Hey,

I have a three column fixed layout design. In the center, middle column, the boxes stack perfectly between the left and right columns. When the center column content's height exceeds the left and right column my problems beings; the center content'll hug the left, leaving it's center position.

Website please scroll to bottom

I've tried a variation of different techniques to try and fix my problem, but the solution's eluded me to no ends.

Can anyone help me?

Kind Regards
The Coder

Help With Alignment Issue With I.e. 6

Similar Tutorials

Here is the thing.. i got this code that works just fine at any browser except IE < 6.

Look the issue's image (better than explaining):
http://img23.imageshack.us/img23/43/borderissue.jpg

The code (for the page in the screenshot)

Code:

<div id="container">
 <div id="main">
 <!-- INCLUDE CONTENT -->
  <div id="content">
  <!-- Conteudo Novidades -->
  <div id="midnewsb">
  <div id="midwrap">
  <div id="midtitle">
  <img src="bar_news.jpg" border="0" /> <b>NOVIDADES</b>
      <div id="midnews">
      <div id="textwrap">
       <p><font color="#333333">dd/mm/aa - Novidade 1</font><br />
      - Novidade 1 novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade</p><br />
      <p><font color="#333333">dd/mm/aa - Novidade 1</font><br />
- Novidade 1 novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade 1 novidade novidade</p><br />
       </div>
      <div id="midb"></div>
      </div> 
     </div>
     <br />
   </div>  
   <div id="midb"></div>
  </div>
   <!-- FIM Conteudo Novidades -->
  </div>
  <div id="block"><br /></div>
  <!-- FIM INCLUDE CONTENT -->
 </div>
</div>

And the CSS:

Code:

#container {
position:relative;
top:30px;
width:704px;
height:auto;
min-height:800px;
margin:auto;
margin:0 auto;
text-align:center;
}
#main {
width:704px;
height:100%;
margin:auto;
background-image:url(bg_mainb.jpg);
text-align:left;
}
#block {
margin:auto;
height:30px;
}
#content {
position:relative;
left:-3px;
top:20px;
width:496px;
height:auto;
min-height:450px;
margin:0px;
display: inline-block;
}
#midb {
background-image:url(bg_midb.jpg);
width:100%;
height:18px;
position:absolute;
bottom:0px;
}
#midwrap {
margin:6px;
}
#midtitle {
position:relative;
margin-top:2px;
width:496px;
color:#3E6F88;
}
#midnews {
position:relative;
margin-top:2px;
top:1px;
width:482px;
height:auto;
min-height:100px;
display: inline-block;
background-image:url(bg_mid.jpg);
background-repeat:no-repeat;
border:solid 1px #C9DEEC;
}
#midnewsb {
position:relative;
margin-top:0px;
width:496px;
height:auto;
display: inline-block;
background-image:url(bg_mid.jpg);
background-repeat:no-repeat;
border:solid 1px #C9DEEC;
}
#textwrap {
margin:6px;
width:476px;
height:auto;
}

Can anyone help me, please? Thanks