SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    northborough
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nav List-Having trouble w/ Postion

    Hi there,

    I have a top nav bar- that i would like in a fixed postion- when you resize the screen in either IE or Mozilla it moves over to the left. Any idea what I can do to fix this?

    thanks!
    sha

    Here is the page:
    http://www.wicklowdesigns.com/escher/index.html

    here is the css for the nav:
    Code:
    }
    
    #mainlevel-nav {
    	border-right: medium none;
    	padding-right: 0px;
    	border-top: medium none;
    	padding-left: 0px;
    	left: 316px;
    	padding-bottom: 0px;
    	border-left: medium none;
    	width: 565px;
    	padding-top: 0px;
    	border-bottom: medium none;
    	position: absolute;
    	top: 40px;
    	height: 30px;
    	margin: 0px;
    }
    #mainlevel-nav LI {
    	padding-right: 0px; 
    	display: inline; 
    	padding-left: 0px; 
    	padding-bottom: 0px; 
    	margin: 0px; 
    	padding-top: 0px; 
    	list-style-type: none
    }
    #mainlevel-nav a:link {
    	border-right: medium none;
    	padding-right: 2px;
    	border-top: medium none;
    	padding-left: 2px;
    	font-weight: bold;
    	font-size: 11px;
    	float: left;
    	padding-bottom: 2px;
    	margin: 4px 8px 0px;
    	border-left: medium none;
    	color: #003366;
    	line-height: 12px;
    	padding-top: 2px;
    	border-bottom: medium none;
    	text-decoration: none;
    	font-variant: small-caps;
    	font-family: verdana, arial, helvetica, sans-serif;
    }
    #mainlevel-nav a:visited {
    	border-right: medium none;
    	padding-right: 2px;
    	border-top: medium none;
    	padding-left: 2px;
    	font-weight: bold;
    	font-size: 11px;
    	float: left;
    	padding-bottom: 2px;
    	margin: 4px 8px 0px;
    	border-left: medium none;
    	color: #003366;
    	line-height: 12px;
    	padding-top: 2px;
    	border-bottom: medium none;
    	text-decoration: none;
    	font-variant: small-caps;
    	font-family: verdana, arial, helvetica, sans-serif;
    }
    #mainlevel-nav a:hover {
    	padding-right: 2px;
    	padding-left: 2px;
    	padding-bottom: 2px;
    	color: #0066CC;
    	padding-top: 2px;
    	border-bottom: 4px solid #0066CC;
    	font-family: verdana, arial, helvetica, sans-serif;
    }
    #mainlevel-nav a#active_menu-nav {
    	padding-right: 2px;
    	padding-left: 2px;
    	padding-bottom: 2px;
    	color: #0066CC;
    	padding-top: 2px;
    	border-bottom: 4px solid #0066CC;
    	font-family: verdana, arial, helvetica, sans-serif;
    }
    HTML Code
    Code:
    <UL id=mainlevel-nav>
      <LI><A class=mainlevel-nav id=active_menu-nav 
      href="http://www.aurum3.com/">About Us</A></li>
      <LI><A class=mainlevel-nav href="http://www.aurum3.com/company">In the News</A></li>
      <LI><A class=mainlevel-nav href="http://www.aurum3.com/what_we_do">Our Customers</A></li>
      <LI><A class=mainlevel-nav href="http://www.aurum3.com/our_process">Products & Services</A></li>
      <LI><A class=mainlevel-nav href="http://www.aurum3.com/our_work">Support</A></li>
      <LI><A class=mainlevel-nav href="http://www.aurum3.com/contact">Contact</A></LI></UL>

  2. #2
    SitePoint Member pubsinbgk's Avatar
    Join Date
    Apr 2005
    Location
    Den,Heaven.
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by shaparis
    Hi there,

    I have a top nav bar- that i would like in a fixed postion- when you resize the screen in either IE or Mozilla it moves over to the left. Any idea what I can do to fix this?

    thanks!
    sha
    Hi,

    Try changing

    left: 316px;

    to

    left: 210px;

    in #mainlevel-nav

    That should do the trick.


    Pubsinbgk

  3. #3
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    northborough
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi there,

    i am afraid that did not do it:

    http://www.wicklowdesigns.com/escher/index.html#

    I would like the nabar fixed no matter what size the screen is, full size or smaller.

    thanks!
    sha

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not seeing a top navbar that moves to the left but rather a top navbar that has been absolutely positioned and stays exactly where you put it.

    If you want the top navbar to be part of the content container and move with it as the page is resized then you need to set a local stacking context for it and not use the viewprt as its containing block.

    You can do this by simply adding position:relative to #content and then changing the left position of the mainlevel-nav style.

    Code:
    #content {
     padding-right: 0px;
     padding-left: 0px;
     padding-bottom: 20px;
     margin: 0px auto;
     width: 750px;
     padding-top: 0px;
     position:relative;
    }
    
    #mainlevel-nav {
     border-right: medium none;
     padding-right: 0px;
     border-top: medium none;
     padding-left: 0px;
     left: 50px;/* or whatever you want it to be*/
     padding-bottom: 0px;
     border-left: medium none;
     width: 565px;
     padding-top: 0px;
     border-bottom: medium none;
     position: absolute;
     top: 40px;
     height: 30px;
     margin: 0px;
    }
    The navbar is now attached to #content and its position is now defined from the left top of its containing block (#content - and not the viewport) and will therefore move when the centred page is resized.

    Hope that's what you meant.

  5. #5
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    northborough
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    that is just what I wanted- thank-you!!!
    You saved me hours of banging my head against the wall on this one!

    thanks!
    sha

  6. #6
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    northborough
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    space between navbar and header?

    Hi there,

    i have a gap showing up in IE between the top navbar and the header- I can not figure what is causing it- any ideas?

    thanks!
    sha

    here is the code:

    CSS
    Code:
      {
    	FONT-SIZE: 100%
    }
    BODY {
    	FONT: 75%/140% Arial, Helvetica, sans-serif; TEXT-ALIGN: center
    }
    DIV {
    	BACKGROUND: #efefef; MARGIN: 10px 0px
    }
    DD {
    	MARGIN-RIGHT: 0px
    }
    #wrap H1 {
    	COLOR: #000;
    	font-size: 12px;
    }
    H2 {
    	COLOR: red;
    	font-size: 12px;
    }
    #wrap {
    	BACKGROUND: #fff;
    	MARGIN: 0px auto;
    	WIDTH: 770px;
    	TEXT-ALIGN: left;
    	border: 1px solid #ccc;
    }
    #main-content {
    	DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 185px; WIDTH: 400px
    }
    #sub-content {
    	FLOAT: left; MARGIN-LEFT: 10px; WIDTH: 175px
    }
    #navigations {
    	FLOAT: left; MARGIN-LEFT: -770px; WIDTH: 175px
    }
    #foot {
    	CLEAR: both
    }
    #logo {
    	color: #ffffff;
    	text-decoration: none;
    	background-color: #ffffff;
    }
    
    #navcontainer ul
    {
    	background-color: #036;
    	color: White;
    	width: 100%;
    	font-family: arial, helvetica, sans-serif;
    	margin: 0;
    	padding: 0;
    	float: left;
    }
    
    #navcontainer ul li { display: inline; }
    
    #navcontainer ul li a
    {
    	padding: 0.2em 1em;
    	background-color: #036;
    	color: White;
    	text-decoration: none;
    	float: left;
    	border-right: 1px solid #fff;
    	margin: 0px;
    }
    
    #navcontainer ul li a:hover
    {
    background-color: #369;
    color: #fff;
    }
    #banner {
    	BACKGROUND-IMAGE: url(images/hp_banner.jpg);
    	MARGIN: 0px;
    	WIDTH: 770px;
    	HEIGHT: 141px;
    	padding: 0px;
    }
    HTML
    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>Escher Group, Ltd.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta content="MSHTML 6.00.2900.2627" name="GENERATOR" />
    <link href="escher.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrap">
    <div id="logo"><a class="imagelink" title="Home Page" href="http://www.eschergroup.com/"><img 
    src="images/escherlogoh.gif" alt="Welcome to Escher Group." width="230" height="38" border="0" /></a></div>
    
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">Item one</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    <li><a href="#">Item four</a></li>
    <li><a href="#">Item five</a></li>
    </ul>
    </div>
    <DIV id=banner></DIV>
    <div id="main-content">
    <h2>#main-content</h2>
    </div>
    <div id="sub-content">
    <h2>#sub-content</h2>
    </div>
    <div id="navigations">
    <h2>#navigations</h2>
    <h3>Content</h3>
    </div>
    <div id="foot">
    <h2>#foot</h2>
    
    <p>Where would we be without 
    feet?</p></div><!-- end #wrap --></div></body></html>

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    I can't see exactly what's happenng without your images but you're not talking about a 10px gap are you?

    If so then its probably this style where you have specified a top and bottom margin for all divs.
    Code:
    DIV {
     BACKGROUND: #efefef; MARGIN: 10px 0px
    }
    Obviously that will place a 10px space around any div.

    If that's not what you meant you may need to explain a bit more

  8. #8
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    northborough
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pail,

    actually i have that fixed now i have another issue, I have one of my left hand boxes, in this case In the News:

    http://www.wicklowdesigns.com/eg/index.html

    the images is extending past the box-iam just not sure what I need to apply to the image class to get it to fit into the box. Any ideas?

    thanks sha!

    Here is the code:
    CSS
    Code:
    #leftcolpressbox {
    	padding:6px 6px 0px;
    	border: 1px solid #999999;
    	margin: 0px;
    }
    #pressboxheader {
    	height:22px;
    	line-height:22px;
    	color:#FFFFFF;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:10px;
    	padding:0px 5px;
    	background-color:#333333;
    	font-weight: bold;
    	letter-spacing: 0.1em;
    	text-transform: uppercase;
    	margin: 8px 0px 0px;
    }
    .pressboxitem {
    	margin-bottom:8px;
    	font-size:9px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	line-height: 1.3em;
    	padding: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-left: 0px;
    }
    .readNewsLink {
    	margin-bottom:10px;
    	font-size:9px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	line-height: 1.3em;
    }
    #leftcolpressbox a:link {
    	font-size: 10px; color: #333333; font-family: verdana, arial, helvetica, sans-serif; text-decoration: none
    }
    #leftcolpressbox a:active {
    	font-size: 10px; color: #333333; font-family: verdana, arial, helvetica, sans-serif; text-decoration: none
    }
    #leftcolpressbox a:visited {
    	font-size: 10px; color: #333333; font-family: verdana, arial, helvetica, sans-serif; text-decoration: none
    }
    #leftcolpressbox a:hover {
    	font-size: 10px; color: #616C81; font-family: verdana, arial, helvetica, sans-serif; text-decoration: none
    }
    .clearboth {
    	clear: both;
    	padding: 0px;
    	margin: 0px;
    }
    .floatimgleft {
    	background: #f2f2f2;
    	float: left;
    	margin: 0px 8px 10px 0px;
    	padding: 3px;
    	border: 1px solid #bdc6cc;
    	clear: left;
    	height: auto;
    }
    HTML:
    Code:
    <div id="leftcol">
    
    							<div id="pressboxheader">press releases</div>
    							<div id="leftcolpressbox">
    								<div class="pressboxitem"><a href="http://www.eschergroup.com/">Escher Group welcomes Elmar Toime as Consultant</a></div>
    								<div class="pressboxitem"><a href="#">Escher Group Announces New IBM Center of Excellence will Feature WebRiposte™ Products</a></div>
    								<div class="pressboxitem"><a href="#">Escher Group selected by Postkantoren for Counter Automation Project</div></a>
    								<div class="pressboxitem"><a href="#">Escher Group and IBM Win Postal Counter Automation Project in Norway</div></a>
    							</div>
    	
    	<div class="clear"></div>
    	
    	
    	<div id="pressboxheader">in the news</div>
    							<div id="leftcolpressbox">
    								<div class="pressboxitem"><img src="images/homepage_postaltech0312.gif" alt="Postal Technology" width="38" height="52" class="floatimgleft" /><a href="http://www.eschergroup.com/">Escher Group featured in Postal Technology article (1349Kb)</a></div>
    								<div class="pressboxitem"><img src="images/InsightV4_2_homepage.gif" alt="Postal Technology" width="38" height="52" class="floatimgleft" /> <a href="http://www.eschergroup.com/">Read the latest issue of <i>Insight</i></a></div>
    <div class="clear"></div>
    	</div>
    						
    </div>

  9. #9
    SitePoint Member pubsinbgk's Avatar
    Join Date
    Apr 2005
    Location
    Den,Heaven.
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by shaparis
    Hi Pail,
    He is Paul, I am a big fan of him.

    Hi,

    I am a newbie, I tried to add a paragraph after the image and it worked fine.

    <div class="pressboxitem"><img src="images/InsightV4_2_homepage.gif" alt="Postal Technology" width="38" height="52" class="floatimgleft" /> <a href="<A href="http://www.eschergroup.com/">Read">http://www.eschergroup.com/">Read the latest issue of <i>Insight</i></a></div>
    <p>&nbsp;</p>
    <div class="clear">

    I do not know whether this is the correct method.

    Pubsinbgk

  10. #10
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    northborough
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, we are all a big fan of "Paul"- a typo on my part

    thanks- but that did not work- well kind of in IE but not Mozilla- and now i am having issues when i add another box underneath? Help? Please

    note: please refresh page to see updates

    thanks!
    sha

  11. #11
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    northborough
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi there,

    so i am workign on this more...and i see that i have to have enough content in the middle to accomodate the left nav. I have two issues now:

    1. how can i handle it if the left nav has more content in it then the middle or right column does, i want to make sure it clears the footer- if there is not enough in the middle column the left nav runs into the footer. how do i fix that?

    2. I am sitll havin the issue in FireFox with the image not fitting in the box. how do i fix that?

    thanks!
    sha

    Here is the page:
    http://www.wicklowdesigns.com/eg/index.html

    CSS:
    Code:
     {
    	font-size: 100%
    }
    body {
    	font: 75%/140% arial, helvetica, sans-serif; text-align: center
    }
    dd {
    	margin-right: 0px
    }
    h2 {
    	color: red;
    	font-size: 12px;
    }
    #wrap {
    	background: #fff;
    	margin: 0px auto;
    	width: 770px;
    	text-align: left;
    	border: 1px solid #ccc;
    }
    #maincol {
    	display: inline; float: left; margin-left: 185px; width: 400px
    }
    #rightcol {
    	float: left;
    	margin-left: 10px;
    	width: 167px;
    	padding: 2px 0px 4px 4px;
    }
    #leftcol {
    	float: left;
    	margin-left: -770px;
    	width: 167px;
    	padding: 2px 0px 6px 10px;
    }
    
    #footer {
    	border-top: #c1b4ab 1px solid;
    	font-size: 9px;
    	padding-bottom: 10px;
    	margin: 0px;
    	width: 770px;
    	color: #cfcfc5;
    	line-height: 14px;
    	padding-top: 10px;
    	font-family: verdana, arial, helvetica, sans-serif;
    	background-color: #425e75;
    	text-align: center;
    	clear: both;
    }
    #footer a:link {
    	font-size: 10px; color: #cfcfc5; font-family: verdana, arial, helvetica, sans-serif; text-decoration: underline
    }
    #footer a:active {
    	font-size: 10px; color: #cfcfc5; font-family: verdana, arial, helvetica, sans-serif; text-decoration: underline
    }
    #footer a:visited {
    	font-size: 10px; color: #cfcfc5; font-family: verdana, arial, helvetica, sans-serif; text-decoration: underline
    }
    #footer a:hover {
    	font-size: 10px; color: #ffffff; font-family: verdana, arial, helvetica, sans-serif; text-decoration: none
    }
    #logo {
    	color: #ffffff;
    	text-decoration: none;
    	background-color: #ffffff;
    	padding: 5px 10px 20px 0px;
    }
    
    #navcontainer ul
    {
    	background-color: #666666;
    	color: white;
    	width: 100%;
    	font-family: arial, helvetica, sans-serif;
    	margin: 0;
    	padding: 0;
    	float: left;
    }
    
    #navcontainer ul li { display: inline; }
    
    #navcontainer ul li a
    {
    	padding: 0.2em 1em;
    	background-color: #666666;
    	color: white;
    	text-decoration: none;
    	float: left;
    	border-right: 1px solid #fff;
    	margin: 0px;
    }
    
    #navcontainer ul li a:hover
    {
    background-color: #369;
    color: #fff;
    }
    #banner {
    	background-image: url(images/hp_banner.jpg);
    	margin: 0px;
    	width: 770px;
    	padding: 0px;
    	height: 141px;
    	float: left;
    }
    #leftcolpressbox {
    	padding:6px 6px 0px;
    	border: 1px solid #999999;
    	margin: 0px;
    }
    #pressboxheader {
    	height:14px;
    	color:#FFFFFF;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:9px;
    	padding:2px 5px 2px 8px;
    	background-color:#8C8C8C;
    	font-weight: bold;
    	letter-spacing: 0.1em;
    	text-transform: uppercase;
    	margin: 8px 0px 0px;
    }
    .pressboxitem {
    	margin-bottom:8px;
    	font-size:9px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	line-height: 1.3em;
    	padding: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-left: 0px;
    }
    .readNewsLink {
    	margin-bottom:10px;
    	font-size:9px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	line-height: 1.3em;
    }
    #leftcolpressbox a:link {
    	font-size: 10px; color: #333333; font-family: verdana, arial, helvetica, sans-serif; text-decoration: none
    }
    #leftcolpressbox a:active {
    	font-size: 10px; color: #333333; font-family: verdana, arial, helvetica, sans-serif; text-decoration: none
    }
    #leftcolpressbox a:visited {
    	font-size: 10px; color: #333333; font-family: verdana, arial, helvetica, sans-serif; text-decoration: none
    }
    #leftcolpressbox a:hover {
    	font-size: 10px; color: #616C81; font-family: verdana, arial, helvetica, sans-serif; text-decoration: none
    }
    .clearboth {
    	clear: both;
    	padding: 0px;
    	margin: 10px;
    }
    .floatimgleft {
    	background: #f2f2f2;
    	float: left;
    	margin: 0px 8px 10px 0px;
    	padding: 3px;
    	border: 1px solid #bdc6cc;
    	clear: both;
    }
    HTML
    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>escher group, ltd.</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta content="mshtml 6.00.2900.2627" name="generator" />
    <link href="escher.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrap">
    <div id="logo"><a class="imagelink" title="home page" href="http://www.eschergroup.com/"><img 
    src="images/escherlogoh.gif" alt="welcome to escher group." width="230" height="38" border="0" /></a></div>
    
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">about us </a></li>
    <li><a href="#">in the news</a></li>
    <li><a href="#">our customers</a></li>
    <li><a href="#">products & services</a></li>
    <li><a href="#">support</a></li>
    <li><a href="#">contact</a></li>
    </ul>
    </div>
    <div id=banner></div>
    <div id="maincol">
    <h2>#main-content</h2>
    <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    
    </div>
    <div id="rightcol">
    <h2>#sub-content</h2>
    <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    </div>
    <div id="leftcol">
    
    							<div id="pressboxheader">press releases</div>
    							<div id="leftcolpressbox">
    								<div class="pressboxitem"><a href="http://www.eschergroup.com/">Escher Group welcomes Elmar Toime as Consultant</a></div>
    								<div class="pressboxitem"><a href="#">Escher Group Announces New IBM Center of Excellence will Feature WebRiposte™ Products</a></div>
    								<div class="pressboxitem"><a href="#">Escher Group selected by Postkantoren for Counter Automation Project</div></a>
    								<div class="pressboxitem"><a href="#">Escher Group and IBM Win Postal Counter Automation Project in Norway</div></a>
    							</div>
    	
    	<div class="clear"></div>
    	
    	
    	<div id="pressboxheader">in the news</div>
    							<div id="leftcolpressbox">
    								<div class="pressboxitem"><img src="images/homepage_postaltech0312.gif" alt="Postal Technology" width="38" height="52" class="floatimgleft" /><a href="http://www.eschergroup.com/">Escher Group featured in Postal Technology article (1349Kb)</a></div>
    								<div class="pressboxitem"><img src="images/InsightV4_2_homepage.gif" alt="Postal Technology" width="38" height="52" class="floatimgleft" /> <a href="http://www.eschergroup.com/">Read the latest issue of <i>Insight</i></a></div>
    <p>&nbsp;</p>
    
    </div>
    
    <div id="pressboxheader">press releases</div>
    							<div id="leftcolpressbox">
    								<div class="pressboxitem"><a href="http://www.eschergroup.com/">Escher Group welcomes Elmar Toime as Consultant</a></div>
    								<div class="pressboxitem"><a href="#">Escher Group Announces New IBM Center of Excellence will Feature WebRiposte™ Products</a></div>
    								<div class="pressboxitem"><a href="#">Escher Group selected by Postkantoren for Counter Automation Project</div></a>
    								<div class="pressboxitem"><a href="#">Escher Group and IBM Win Postal Counter Automation Project in Norway</div></a>
    							</div>
    <br />
    </div>
    
    <div class="clear"></div>
    
    <div id="footer">
    <p> 2005 escher group limited. all rights reserved. <a 
    href="http://www.wicklowdesigns.com/eg2/indextest.html#">legal</a></p>
    <p><a href="http://www.wicklowdesigns.com/eg2/indextest.html#">home</a> | <a 
    href="http://www.wicklowdesigns.com/eg2/indextest.html#">about us</a> | <a 
    href="http://www.wicklowdesigns.com/eg2/indextest.html#">in the news</a> | <a 
    href="http://www.wicklowdesigns.com/eg2/indextest.html#">our customers</a> | <a 
    href="http://www.wicklowdesigns.com/eg2/indextest.html#">products and 
    services</a> | <a 
    href="http://www.wicklowdesigns.com/eg2/indextest.html#">support</a> | <a 
    href="http://www.wicklowdesigns.com/eg2/indextest.html#">contact</a> 
    </p></div>
    </div></body></html>

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sorry I've been out most of the day (the sun came out lol).

    The image sticking out in mozilla looks like you just need to clear it before the closing div of the parent.

    Code:
    .clearer{
    height:1px;
    overflow:hidden;
    clear:both;
    }
    Code:
    <div class="clearer"></div>
    </div><!-- closing div of parent container that holds the image and text -->
    actual code:
    Code:
    <div id="leftcolpressbox"> 
    <div class="pressboxitem"><img src="http://www.wicklowdesigns.com/eg/ima...altech0312.gif" alt="Postal Technology" width="38" height="52" class="floatimgleft" /><a href="<A href="http://www.eschergroup.com/">Escher">http://www.eschergroup.com/">Escher 
    Group featured in Postal Technology article (1349Kb)</a></div>
    <div class="pressboxitem"><img src="http://www.wicklowdesigns.com/eg/ima...2_homepage.gif" alt="Postal Technology" width="38" height="52" class="floatimgleft" /> 
    <a href="<A href="http://www.eschergroup.com/">Read">http://www.eschergroup.com/">Read the latest issue of <i>Insight</i></a></div>
    <div class="clearer"></div>
    </div>
    I'm just going to check the other issue with your page now

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It looks like you've already fixed the other issue by adding clear:both to the footer. Is that what you meant or is there another issue?

  14. #14
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    northborough
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    you must be on the east coast,I had to look twice to see what all that color was outside my window- surely not the sun

    yes, you hit both points, and i guess if i hack away long enough i come upon a solution- i just hope they are good solutions!

    many thanks as always for all your help and knowledge!

    thanks!
    sha


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •