SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <Hx> Positioning Problem...

    On all browsers except IE the first H3 tag in the content-column is aligned with the H3 tag in the menu_colum. Can anyone help?

    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>
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Phoenix London UK Ltd - </title>
    <!-- TemplateEndEditable --><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="../phoenixlondon.css" />
    <!-- TemplateBeginEditable name="head" -->
    <meta name="keywords" content="Keywords" />
    <meta name="description" content="Description " />
    <meta name="Agency" content="Phoenix London UK Ltd" />
    <!-- TemplateEndEditable -->
    </head>
    <body>
    <!-- START CENTER -->
    <center>
      <!-- START SURROUND -->
      <div id="surround">
        <!-- START MENU HEADER -->
        <div id="menu-header">
          <div align="left">
            <table width="720"  border="0" cellspacing="5" cellpadding="0">
              <tr>
                <td width="624"><img src="../buttonClear.gif" alt="Button" width="86" height="65" /> <img src="../buttonClear.gif" alt="Button" width="86" height="65" /> <img src="../buttonClear.gif" alt="Button" width="86" height="65" /> <img src="../buttonClear.gif" alt="Button" width="86" height="65" /> <img src="../buttonClear.gif" alt="Button" width="86" height="65" /><img src="../buttonClear.gif" alt="Button" width="86" height="65" /><img src="../buttonClear.gif" alt="Button" width="86" height="65" /> </td>
                <td width="81"><div align="right"><img src="../logo_simple.gif" alt="Phoenix London UK Ltd" width="62" height="65" /></div></td>
              </tr>
            </table>
          </div>
    	<!-- END MENU HEADER -->
        </div>
        <!-- START FLASH CONTENT -->
    	<div id="flash-content">
          <!-- TemplateBeginEditable name="Flash Content" -->
          <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="720" height="140">
            <param name="movie" value="../sample.swf" />
            <param name="quality" value="high" />
            <embed src="../sample.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="720" height="140"></embed>
          </object>
          <!-- TemplateEndEditable -->
          <!-- END FLASH CONTENT -->
        </div>
    	<!-- START BREADCRUMBS -->
    	<div id="breadcrumb-content">
    	<div align="left"><span class="notes">You are here: </span><a href="home.htm" class="textmenu">Home</a> | <!-- TemplateBeginEditable name="Breadcrumbs" --><a href="#" class="textmenu">Section</a> | <span class="notes">Page</span><!-- TemplateEndEditable --></div>	
    	</div>
    	<!-- END BREADCRUMBS -->
        <!-- START CONTENT BLOCK -->
    	<div id="c-block">
          <!-- START MENU COLUMN -->
    	  <div id="menu-column">
            <h1>Section Menu</h1><ul>
            <!-- TemplateBeginEditable name="Menu" --><a href="#" class="menu">
            <li>Menu Item</li>
            </a> <a href="#" class="menu">
            <li>Menu Item</li>
            </a> <a href="#" class="menu">
            <li>Menu Item</li>
            </a> <a href="#" class="menu">
            <li>Menu Item</li>
            </a> <a href="#" class="menu">
            <li>Menu Item</li>
            </a> <a href="#" class="menu">
            <li>Menu Item</li>
            </a> <a href="#" class="menu">
            <li>Menu Item</li>
            </a> <a href="#" class="menu">
            <li>Menu Item</li>
            </a> <a href="#" class="menu">
            <li>Menu Item</li>
            </a><!-- TemplateEndEditable --></ul>
    		<!-- TemplateBeginEditable name="Related Menu" -->
    <h1>Related Items</h1>
    <ul>
      <a href="#" class="related">
      <li>Related Item</li>
      </a> <a href="#" class="related">
      <li>Related Item</li>
      </a> <a href="#" class="related">
      <li>Related Item</li>
      </a> <a href="#" class="related">
      <li>Related Item</li>
      </a> <a href="#" class="related">
      <li>Related Item</li>
      </a> <a href="#" class="related">
      <li>Related Item</li>
      </a>
    </ul>
    <h1>Case Studies</h1>
    <ul>
      <a href="#" class="related">
      <li>Case Study</li>
      </a> <a href="#" class="related">
      <li>Case Study</li>
      </a> <a href="#" class="related">
      <li>Case Study</li>
      </a> <a href="#" class="related">
      <li>Case Study</li>
      </a>
    </ul>
    <!-- TemplateEndEditable -->
    <!-- END CENTER -->
            <br /><input type="text" class="notes" size="18"/>
    		<br /><input name="SEARCH" type="submit" class="notes" value="SEARCH NOW" /><!-- END MENU COLUMN -->
          </div>
    	  <!-- START CONTENT-COLUMN -->
          <div id="content-column"><!-- TemplateBeginEditable name="Content" -->
            <h1>H1: Balanced Score Card</h1>
            <p>From binary cause and effect to complex patterns, the balanced scorecard, like the executive dashboard, is an essential tool benchmarking against industry leaders, an essential process, should be a top priority at all times. Building flexibility through spreading knowledge and self-organization, defensive reasoning, the doom loop and doom zoom whenever single-loop learning strategies go wrong. </p>
            <h2>H2: Core Competency</h2>
            <p>Exploitation of core competencies as an essential enabler, the components and priorities for the change program to focus on improvement, not cost. Combined with optimal use of human resources, maximization of shareholder wealth through separation of ownership from management the balanced scorecard, like the executive dashboard, is an essential tool. By moving executive focus from lag financial indicators to more actionable lead indicators, by adopting project appraisal through incremental cash flow analysis, building a dynamic relationship between the main players.</p>
            <h3>H3: Measure Process</h3>
            <p>Measure the process, not the people. By moving executive focus from lag financial indicators to more actionable lead indicators, as knowledge is fragmented into specialities working through a top-down, bottom-up approach. In order to build a shared view of what can be improved, motivating participants and capturing their expectations, an investment program where cash flows exactly match shareholders' preferred time patterns of consumption. The strategic vision - if indeed there be one - is required to identify empowerment of all personnel, not just key operatives, whenever single-loop learning strategies go wrong. The components and priorities for the change program the vitality of conceptual synergies is of supreme importance taking full cognizance of organizational learning parameters and principles.</p>
            <h4>H4: A thing to note... </h4>
            <p class="notes">In order to build a shared view of what can be improved, empowerment of all personnel, not just key operatives, exploiting the productive lifecycle. Measure the process, not the people. Motivating participants and capturing their expectations, the balanced scorecard, like the executive dashboard, is an essential tool the strategic vision - if indeed there be one - is required to identify.</p>
          <!-- TemplateEndEditable --><br />
    	  <!-- END CONTENT-COLUMN -->
          </div>
        <!-- END CONTENT BLOCK -->
        </div>
    	<!-- START FOOTER -->
        <div id="footer" align="center"><!-- TemplateBeginEditable name="Footer" --><a href="home.htm" class="textmenu"> Home</a> | <a href="about_us" class="textmenu">About Us</a> | <a href="services.htm" class="textmenu">Services</a> | <a href="print_media" class="textmenu">Print Media</a> | <a href="digital_media" class="textmenu">Digital Media</a> | <a href="integration.htm" class="textmenu">Integration</a> | <a href="portfolio.htm" class="textmenu">Portfolio</a> | <a href="privacy_policy.htm" class="textmenu">Privacy Policy</a> | <a href="terms_conditions.htm" class="textmenu">Terms & Conditions</a><!-- TemplateEndEditable --></div>
    	<!-- END FOOTER -->
      </div>
      <!-- END SURROUND -->
    </center>
    </body>
    </html>
    Code:
    /* !!!!!!!!!!!! */
    /* SET DEFAULTS */
    /* !!!!!!!!!!!! */
    
    body{
    	margin-left: 10px;
    	margin-top: 10px;
    	margin-right: 10px;
    	margin-bottom: 10px;
    	background-color: #FFFFFF;
    }
      
    body,td,th {
    	font-family: Verdana, Helvetica, Arial, sans-serif;
    	color: #999999;
    	font-size: 12px;
    }
    
    /* !!!!!!!!!!!!!!!!!!! */
    /* SPECIAL TEXT STYLES */
    /* !!!!!!!!!!!!!!!!!!! */
     
    h1 {
    	font-size: 110%;
    	color: #CC0000;
    }
    
    h2 {
    	font-size: 100%;
    	color: #CC0000;
    }
    
    h3 {
    	font-size: 90%;
    	color: #CC0000;
    }
    
    h4 {
    	font-size: 75%;
    	color: #CC0000;
    }
    
    .notes {
    	font-size: 75%;
    }
    
    /* !!!!!!!!!!!!!! */
    /* SET LINK TYPES */
    /* !!!!!!!!!!!!!! */
    
    /* Default */ 
    
    a:link {
    	color: #CCCCCC;
    }
    
    a:visited {
    	color: #999999;
    }
    
    a:hover {
    	color: #CC0000;
    }
    
    a:active {
    	color: #CC0000;
    }
    
    /* menu */ 
    #menu-column ul {
    	margin: 0;
    	padding: 0;
    	list-style-type: square;
    	list-style-position:inside;
    	color: #FFFFFF;
    }
    
    a.menu:link {
    	color: #CCCCCC;
    	text-decoration: none;
    	font-weight:bold;
    }
    
    a.menu:visited {
    	text-decoration: none;
    	color: #999999;
    	font-weight:bold;
    }
    
    a.menu:hover {
    	text-decoration: none;
    	color: #CC0000;
    	font-weight:bold;
    }
    
    a.menu:active {
    	text-decoration: none;
    	color: #CC0000;
    	font-weight:bold;
    }
    
    a.textmenu:link {
    	color: #CCCCCC;
    	text-decoration: none;
    	font-size:9px;
    }
    
    /* Footer and breadcrumb */ 
    
    a.textmenu:visited {
    	text-decoration: none;
    	color: #999999;
    	font-size:9px;
    }
    
    a.textmenu:hover {
    	text-decoration: none;
    	color: #CC0000;
    	font-size:9px;
    }
    
    a.textmenu:active {
    	text-decoration: none;
    	color: #CC0000;
    	font-size:9px;
    }
    
    /* Related links */ 
    
    a.related:link {
    	color: #CCCCCC;
    	text-decoration: none;
    }
    
    a.related:visited {
    	text-decoration: none;
    	color: #999999;
    }
    
    a.related:hover {
    	text-decoration: none;
    	color: #CC0000;
    }
    
    a.related:active {
    	text-decoration: none;
    	color: #CC0000;
    }
    
    /* !!!!!!!!!!!!!! */
    /* LAYOUT DIV IDS */
    /* !!!!!!!!!!!!!! */
    
    /* Surround */  
    
    #surround {
    	margin: 0px;
    	padding: 0px;
    	width: 720px;
    }
    
    /* Headers */  
    
    #menu-header{
    	height:70px;
    	background:#FFFFFF;
    	margin:0px 72px 0px 0px;
    	border: Solid 1px #FFFFFF;
    }
    
    #flash-content{
    	height:140px;
    	width:100%;
    	background:#CCCCCC;
    	margin:0;
    	border: Solid 1px #999999;
    }
    
    #breadcrumb-content {
    	width:100%;
    	height:20px;
    	margin:0;
    	background-color: #FFFFFF;
    	border: solid #FFFFFF 5px;
    }
     
     /* Content */ 
    
    #c-block {
     	width:100%;
     	z-index:1;
     	background:#F5F5F5;
     	height:80%;
    }
    
    #menu-column{
    	position:relative;
    	margin: 0px 0px 0px 0px
    	width:130px;
    	background:#F5F5F5;
    	text-align:left;
    	float: left;
    	border-top-color: #F5F5F5;
    	border-top-style: solid;
    	border-top-width: 10px;
    	width: auto;
    	padding: 0 5px 0 0;
     }
     
    #content-column{
     	margin:0px 0px 0px 130px;
     	position:relative;
     	background:#ffffff;
     	border: solid #FFFFFF 10px;
     	text-align:justify;
    }
     
     /* Footer */ 
    
    #footer {
    	width:100%;
    	height:20px;
    	border: solid #CC0000;
    	border-width:1px;
    	margin:10px 0 0 0;
    	background-color: #FFFFFF;
    }
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If I've said this once I've said it a hundred times this week lol

    Don't forget that browsers give all the elements default margins and padding which varies from browser to brower. Its your job to control these margins and padding and apply the dimensions you require.

    If you were to add this to the end of your stylesheet.

    Code:
    h1 {margin:0;}
    ul {margin:0}
    Then look at the page in moz and ie and you will see that they are more or less the same. The answer then is to put the margin/padding that you want on those elements explicitly and in the context that you require.

    Hope that makes sense.

    Paul

  3. #3
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops silly me

    Now.. another tiny item... for some reason (in IE) the content in the menu-column is slightly displacing the content in the content-column. This means that after the search box there is a noticeable (albeit vey small) shift left. This is most noticeable when it occurs in the middle of an unordered list but also visible in text and so forth.

    If you want me to post the css & html up again with Paul's small alterations I will
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.

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

    That displacement is caused by the famous ie 3 pixel jog on static content next to floats.

    The easiest fix is the height:1% hack.

    Code:
    #content-column{
      margin:0px 0px 0px 130px;
      position:relative;
      background:#ffffff;
      border: solid #FFFFFF 10px;
      text-align:justify;
    }
     * html #content-column{height:1%}

    If you want to support ie5 mac then you need to hide the height 1% with one of the mac hiding hacks.

    IE win treats height as min-height anyway so there should be no ill effects.

    You may want to knock 3pixels off the left float as well but it all depends how picky you are.

    More info here:

    http://www.positioniseverything.net/...reepxtest.html

    Paul

  5. #5
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fantastic, I have a brain like a sieve at times

    So took 3 off the left float and added the *hack but was left a tad confused by your link.

    What would be a Mac IE5 hiding trick? I's a little unclear, or my brain is a tad muddled.

    (And thank you so much, I have learn't more 'in combat' CSS from you in your replies to my posts than I did from the book HTML Utopia which gave me the desire and most of the skills to get started, it's a fantastic book none the less.)
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.

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

    What would be a Mac IE5 hiding trick
    This will hide the style from ie5 mac due to a parsing bug.

    Code:
    /* commented backslash hides from ie5 mac \*/ 
    * html #content-column{height:1%}
    
    /* end hack */
    So took 3 off the left float and added the
    What I meant was three pixels off the right margin of the float to even ie up (because it adds 3 pixels).

    Code:
    * html #menu-column {margin-right:-3px}/* for ie only */
    * html is the star selector hack and is used to pass styles safely to ie only.

    http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html

    The three pixel jog is a bug in ie in that it adds 3 pixels of space around a float that addects static content alongside the float.

    The height:1% on the static content cures the indentation (as would width or any height) but doesn't actually reduce the extra padding on the float. The negative margin on the float takes off the three pixels and evens things out.

    Paul


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
  •