CSS - Image In Nav Element Extending Beyond The Div

Hi everyone,

I would like to position several <div> elements in relation to image <maparea>'s on top of an image. I have an image with several small icons on it that have information related to it. The information related to the icon can change pretty often, so I want to have that information text based so I can update it easier. Does anyone have an idea of how I could position those <div> elements in relation to the hotspot?

I haven't really had much experience with 'relative' positioning, but with 'absolute' positioning I've always had issues with Netscape/Mozilla browsers displaying the elements about 10px off of where they look in IE. Is there any way around this?

I'm all ears to any advice you may have.

Brian

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

I'm totally stumped here.. Granted I'm still new to this, and learning as I go, but anyway

http://www.psyberarts.com/work/prism/index.html

There is a line in the content area that is being extended up from the footer color. I know it's from the footer color because when I change the footer background to white, it goes away.

Should I just make a repeat image for the footer and do it that way?

Hi. I am nearly finished with the main layout for my forums but just ran into this problem and can't quite seem to figure it out.

Right now I am updating vbulletin template to XHTML 1.1 and having some problems with tables / divs. I am attempting to keep the table code for the tabular data and use divs for the table headers/footers but for some reason the meat (table inbetween header and footer div) will not extend to meet the right border of the header and footer divs.

Here is the HTML:
Code:

<!-- TOP -->
 <div class="topOutter clearFloat">
  <div class="topInner floatLeft">

   <div class="floatLeft">

    <div class="floatLeft" style="width: 21px;">

     <img src="customStyle/structure/top_left.gif" alt="" />

    </div>

    <div class="floatLeft titleTxt" style="margin-left: 5px; padding-top: 12px;">

 <a class="darkLink" href="forumdisplay.php?f=16">Event TopiX</a> 
    </div>

   </div>

   <div class="floatRight">
    <img  src="customStyle/structure/top_end.gif" alt="" />
   </div>

  </div>

  <div class="floatRight">
   <img src="customStyle/structure/top_right.gif" alt="" />
  </div>

 </div>
<!-- /TOP -->



<!-- MIDDLE -->        

   <table style="border: 1px solid #000000;" cellpadding="0" cellspacing="0" width="100%" >
    
    
     <tbody id="collapseobj_forumbit_16" style="">
     

      <tr>
       <td class="thead" style="width: 100%; height: 17px;"></td>
      </tr>
  
     </tbody>

    
   </table>

<!-- /MIDDLE-->

<!-- BOTTOM -->
 <div class="bottomSpacer bottomOutter clearFloat">

  <div class="floatLeft">
   <img src="customStyle/structure/blc.gif" alt="" />
  </div>

  <div class="floatRight">
   <img src="customStyle/structure/brc.gif" alt="" />
  </div>

 </div>
<!-- /BOTTOM -->

The CSS Code (spacer and top/middle classes are just bordering and bottom margins):

Code:

.clearFloat { overflow: hidden; }

.floatLeft { float: left; }

.floatRight { float: right; }

Please see the attachment for the visual. This is only happening in IE, Firefox and opera render it fine.

And it only happens when I sandwhich a table between the header and footer divs. If the middle portion is also a div it does not display this problem.

Thx.

I really like this menu: http://alistapart.com/articles/horizdropdowns
(see demo: http://alistapart.com/d/horizdropdowns/horizontal.htm)

My problem is that it only works in one level. How can I modify it to support more levels?
Or do you guys know any simular menu, that support more levels?

I have a absolute layout in css with two colums. In left column i have a navigation bar, and then a footer which is positioned 10px from bottom of the div, and right column has content. both have height of 100%, however no matter what resolution, the height extends about 100px further than the browser window, so the header is not seen unless scrolled to, even if other content doesn't exceed the browser window.

I dont think its box model issue because there is no major vertical padding..any ideas?

I have a div that has a table inside of it. Even though the table expands with content added, the div does not.

It's important to me that the div extend with the table because this div in question has a background shadow border for the table.

Here is the CSS:

Code:

#right {
  float: right;
  width: 80%;
  height: 100%;
}

#rt_brdr {
 height: 100%;
 width: 100%;
 padding-bottom:5px;
 padding-right: 10px;
 margin-bottom: 5px;
 vertical-align: bottom;
 background: url(img/r_brdr.gif) repeat-y right;
}

My HTML:

Code:

<div id="right">
   <div id="rt_brdr">
    <table border="0" align="left" width="100%" style="height: 93%; margin-top: 2px;"  cellpadding="0" cellspacing="0">
       <tr>
         <td class="top" style="background: url(img/w_tl.jpg) no-repeat top left #FFFFFF;"></td>
         <td class="white_fill"></td>
         <td class="top" style="background: url(img/w_tr.jpg) no-repeat top right #FFFFFF;"></td>
       </tr>
       <tr class="white_fill">
         <td></td>
         <td></td>
         <td></td>
       </tr>
       <tr>
         <td class="bottom" style="background: url(img/w_bl.jpg) no-repeat bottom left #FFFFFF;"></td>
         <td class="white_fill"></td>
         <td class="bottom" style="background: url(img/w_br.jpg) no-repeat bottom right #FFFFFF;"></td>
      </tr>
    </table>
  </div>
  </div>

I have attached a screenshot. Note that I took the content out of the table in the post so that the code doesn't extend forever. I have put a black border around the right border to make it stand out in the screenshot.

hi, i have the following css

Code:

#content { width:1000px; text-align:center; height:100%; border:2px #000 solid; }

#mainbody { width:1000px; height:100%; display:run-in; border:#03F 1px solid; }

and my xhtml looks like

Code:

<div id="content">
 <div id="mainbody">
</div>
</div>

basically what i want to do is to have full available page height covered by content div so that i can stick a footer div at the end of it. so that regardless of the height of the contents covering the mainbody-div my footer always sticks to the bottom of the page.

now even before i add footer, the problem is that mainbody is going 50px outside the content div at the bottom making the page to scroll. should it not take the available height within the content-div because it is nested within content div?

thanks

I swear that I really am learning a great deal about CSS but you wouldn't think so as many threads as I've started in the past few days...

Anyhow, consider the following code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>My site</title>
    <style type="text/css">
      #base { 
        clear: both;
        padding-top: 1px;
        border-top: 1px solid #ffffff;
        border-bottom: 1px solid #ffffff;
        width: 100%; 
        background: #00ff00;  } /* end #base */

      #main { 
        background: #0000ff;
        margin: auto;
        text-align: left;
        width: 800px; } /* end #main*/

      #content { 
        background: #ffffff;
        border-left: 1px solid #0000ff;
        padding-top: 1em;
        padding-bottom: 1em;
        border-right: 1px solid #0000ff; } /* end #content */

      #bottom_part { 
        padding: 0;
        line-height: 130%;
        padding-left: 1em;
        padding-right: 1em;
        display: block;
        margin: 0;
        border: 0;
        clear: both; } /* end #bottom_part */

      #column_a {
        padding: 1em;
        margin: 0; 
        float: left;
        width: 33%; } /* end #column_a */

      #column_b {
        margin-left: 33%;
        margin-right: 33%;
        padding: 1em;
        padding-right: 0;
        width: 25%; } /* end #column_b */

      #column_c { 
        display: block;
        float: right; 
        padding: 1em;
        width: 33%; } /* end #column_c */

      #bottom { 
        background: #ff0000; 
        border: none; } /* end #bottom */

      .header { font-weight: bold; } 
    </style>
  </head>
  <body>
    <div id="base">
      <div id="main">
         <div id="content">
           <div id="bottom_part">
            <div id="column_a">
              <p class="header">Column A</p>
              <p>A - A</p>
              <p>A - B</p>
              <p>A - C</p>
            </div>
            <div id="column_c">
              <p class="header">Column C</p>
              <p>C - A</p>
              <p>C - B</p>
              <p>C - C</p>
              <p>C - D</p>
              <p>C - E</p>
              <p>C - F</p>
            </div>
            <div id="column_b">
              <p class="header">Column B</p>
              <p>B - A</p>
              <p>B - B</p>
              <p>B - C</p>
            </div>
          </div>
        </div>
        <div id="bottom">&nbsp;</div>
      </div>
    </div>
  </body>
</html>

The problem is that the content in Column C does not completely render inside the white box. The same problem occurs when the content is really long in Column A. Column B will extend the height of the white box and I'm certain it is because there is no float style associated with it. How can I achieve this for the other two columns? Removing the floats will do the trick but will also place the columns on top of each other.

I am quite new to css and have stumbled my way through making a page. My issue is the footer. My footer contains a background image that repeats across the page. In order to make the footer stick to the bottom I have placed it in a container. My issue is, when the page is minimized and you scroll over the right of the page, the menu that is on the bottom is on the right but the background image does not extend behind it.

Code:

/*---------------------------------------------
    Footer Area Starts here
----------------------------------------------*/
#FooterBody{
            background: #6f1e1a url(http://www.cleverchickcreations.com/images/footer.png) repeat-x;
			height:232px;
			width:100%;
			border:1px solid;
			color:#f2f1df;
			
			             
			}
#FooterContainer{
            
			      width: 936px; margin: 0 auto; padding: 0; text-align: left; 
				 
             
			}
			/*------------------------------------------------footer--------------------*/



#footer{
	width:100%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding: 0px;
	float: left;
	height: 232px;
	background-image: url(http://www.cleverchickcreations.com/images/footer.png);
	background-repeat: repeat-x;
        position: relative;
}



#btmmenu_area{
	width:1100px;
	height:120px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	font-family: Tahoma;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #dcd66e;
	text-decoration: none;
	padding: 0px;
	float: none;
}



.navcolumn {
	float: left;
	width: 300px;
	height: 120px;
	margin-left: 10px;
        padding-left: 20px;
        padding-right: 20px;
}


.row1 {
	float: left;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
	width: 140px;
	text-align: left;
	margin-top: 10px;
	padding-left: 10px;
	line-height: 140%;
}
.row1 a:link, .row1 a:visited, .row1 a:active {
	float: left;
	color: #301010;
	text-decoration: none;
}
.row1 a:hover{
	color: #6d5f52;
	text-decoration: none;
}
.row2 {
float: left;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
	width: 130px;
	text-align: left;
	margin-top: 10px;
	padding-left: 20px;
	line-height: 140%;
}
.row2 a:link, .row2 a:visited, .row2 a:active {
	float: left;
	color: #301010;
	text-decoration: none;
}
.row2 a:hover {
	color: #6d5f52;
	text-decoration: none;
}
.row3 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
	width: 130px;
	text-align: left;
	margin-top: 10px;
	padding-left: 20px;
	line-height: 140%;
}
.row3 a:link, .row3 a:visited, .row3 a:active {
	float: left;
	color: #301010;
	text-decoration: none;
}
 .row3 a:hover {
	color: #6d5f52;
	text-decoration: none;
}


.foot-headers {
        font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #ef5f9b;
	line-height: 140%;
}


.footer_links {
	font-family: Arial;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	margin: 0px;
	float: left;
	height: 20px;
	width: 100%;
	color: #333333;
	padding-top: 35px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}



.footer_copyrights {
	font-family: Arial;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	margin: 0px;
	float: left;
	height: 20px;
	width: 100%;
	color: #c2c093;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}



/*------------------------------------------------validation --------------------*/


#validation_area {
	width:100px;
	height:34px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	font-family: Tahoma;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #dcd66e;
	text-decoration: none;
	padding: 0px;
	float: none;
}


.validation {
	font-family: Arial;
	font-size: 9px;
	font-weight: normal;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;
	background-image: url(http://www.cleverchickcreations.com/images/validation.png);
	background-repeat: no-repeat;
	float: right;
	height: 16px;
	width: 44px;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.validation:hover {
	font-family: Arial;
	font-size: 9px;
	font-weight: normal;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;
	background-image: url(http://www.cleverchickcreations.com/images/validation-0.png);
	background-repeat: no-repeat;
	float: right;
	height: 16px;
	width: 44px;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	margin-left: 0px;
}

I guess let me start with centering. I have
Code:

body {
	margin: 1%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	line-height: 1.75em;
	background-color: #6E4E1C;
  	text-align: center;
}
#wrapper {
	background-color: #343457;
	width: 775px;
	position:absolute;
	margin: 0px auto;
	text-align: left;

By everything I read, setting the body's text-align to center, and the wrapper's margins to auto should do the trick. When I copy other stylesheets, they work. But when I type it in, it doesn't? Mozilla puts content at the left, and IE6 puts the left border of the wrapper in the center of the page causing horizontal scroll.
(actual pages at http://lgs.lambrite.com/new.css and http://lgs.lambrite.com/test2.htm

2nd, if you visit the htm page above you see that my content div does not extend down to meet the footer. I have looked at the faux columns, but can't make that work and keep my blue border at the bottom, unless I add another wrapper div to hold the background, inside of the primary wrapper div. This seems not the best way to do this. Any suggestions?

Lastly, in Mozilla, the url background on my sublinks nicely meets the content background, but in IE, there is a nice empty blue space between them I understand that this probably has to do with the box model issues, but have no idea how to fix it.

I'd also welcome any criticism on my stylesheet (aside from the fact that it is not in short-hand - I am not familiar enough yet).

You guys are great for newcomers - I know I really appreciate the help!

Sarah

I have a site that is using the suckerfish style dropdown sorta...

On a previous version I had the li dropdown block entirely clickable, so a user could click in any part of the 160px block, but on a current site using the same navigation just dropped in you can only click on the word and nothing happens for the rest of the 'box'.. It works fine in Firefox but not IE, if there is an image aligned to the right of the link it extends the clickable region...

Any help would be appreciated.

Here is the CSS for that section:
Code:

 /*******************************/
	/*   BEGIN: Drop-Down Styles   */
	/*******************************/
	
	#navigation, #navigation ul {
		position:absolute;
		padding: 0;
		margin: 0;
		list-style: none;
		line-height: 20px;
		font-size: 11px;
		font-family: Arial, Helvetica, sans-serif;
		z-index: 10;
		font-weight: bold;
	}
	#navigation li.main {
		text-align: center;
		}
	
	#navigation ul {
		margin: 0 0 0 -1px;
	}
	
	#navigation a {
		display: block;
		background-color: transparent;
		color: #F1F1F1;
		text-decoration: none;
		padding: 2px 4px 2px 6px;
		z-index: 10;
	}
	
	#navigation li {
		float: left;
		width: auto;
		border: solid 1px #0f2344;
		border-right: none;
		background-color: #0f2344;
		color: white;
		z-index: 10;
	}
	
	#navigation li li {
		border-right: solid 1px black;
		border-bottom: none;
		width: 160px;
	}
	
	#navigation li.last {
		border-right: solid 1px black;
		border-bottom: solid 1px black;
	}
	#navigation li.hr {
		border-right: solid 1px black;
		border-bottom: solid 1px black;
		
	}
	
	#navigation li ul {
		position: absolute;
		width: 160px;
		display: none;
	}
	
	#navigation ul ul {
		margin: -20px 0 0 160px;
	}
	
	#navigation li:hover ul ul, #navigation li.over ul ul, #navigation li.over ul ul, #navigation li.over ul ul ul {
		display: none;
	}
	
	#navigation li:hover ul, #navigation li li:hover ul, #navigation li.over ul, #navigation li li.over ul, #navigation li li li.over ul  {
		display: block;
	}
	
	#navigation li:hover, #navigation li.over {
		color: black;
		background-color: #467BB4;
		cursor: pointer;
	}
			
	#navigation li:hover>a { /* IE/Win ignores this declaraion */
		color: black;
		background-color: #467BB4;
	}

And a segment of the HTML I'm using.

Code:

<ul id="navigation">
			<li><a href="http://links.com">Home <img src="http://links.com/comm_demo3/img/dn_arrow.gif" alt="" border="0"></a>
			  <ul>
			    <li><a href="http://links.com/comm_demo3/pages/news/news.asp">Newsroom</a>
				<li><a href="http://links.com/comm_demo3/pages/news/archives/archives.asp">Newsletter Archives</a>
				<li class="last"><a href="http://links.com/dashboard/corporat.htm">Dashboard</a>
				</li>
		      </ul>
			</li>

At first this was slightly amusing. The border in the lower middle column dubbed "News" extended underneath the other divs to the top in Firefox.

See he
www.djoj.net/test/indexwierd.html
Css: (Look at the way bottom of the CSS. The last 3 styles)
www.djoj.net/test/styles2.css

So I changed my div's to span's and wrapped them in one div labled "bottom" Now look...

www.djoj.net/test/index.html
Css: (once again, at the bottom)
www.djoj.net/test/styles.css

How can I fix this? It's a problem in both browsers. I don't want to use tables, I'd rather stick to CSS positioning.

Thank you in advance!

~B

I have an issue where I have created a template for an organization and the horizontal drop menu can contain about 9 elements.

It has tiered drop downs which extend off the end of the page to the right.

Is there a way to make them flip left ONLY if they are at the end of the page?

I did do some javascript that takes the last element and gives it a class that can make it flip, as in the image. But if there are only 3 menu items that would look a bit goofy.

Anyone else encounter this issue and how did they resolve it?

It's hard for me to explain this so bear with me.

This is the page in question.

The right side is my float. If it is longer than the left side, then it continues, but the white background does not. I've tried doing height: 100% and so forth and can't get it to stretch.

I've tried reversing the float assigning it to the left side and it appears fine in Net/Moz, but IE won't run it right.


I don't really want to use float but I can't find another way to do it. I'm redoing the site from tables to CSS to make it cleaner. Floating has always been a problem but I've found ways to deal with it. Now, I'm realizing how finicky it is on different browsers.

Any suggestions or alternatives to float? The heights of both sides may change at any point so I don't really want to use any position elements. Will I have to?

Thanks in advance.

Tim