SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with an IE7 bug

    Hey,

    I'm having problems with my navigation in IE7, 3/4 of the navigation text drops out of place. I can't see this happening on any other browser apart from IE7 when looking at browsershots.

    Does anyone know how I can fix it??
    Please see attached screen shot of IE7.

    website (wordpress): crossfithill.com

    CSS:
    Code:
    html {
      overflow-y: scroll;
    }
    
    body { 
    /*font:75%/1.5em "lucida grande","lucida sans unicode", sans-serif; */
    background: #e2e2e2;
    margin:0px;
    padding:0px; }
    
    #canvas { 
      width: 1000px;
      margin: 0 auto;
       
    }
    
    #header { 
    height: 275px;
    padding: 20px;
     
      margin: 0 0 10px 0;
    }
    #header p{ padding-left: 50px;
    width: 300px;
    }
      /** the heading and tagline are h1 on homepage and h4 on internal */
      #header h1,
      #header h4 {float:left;font-family: Palatino,'Palatino Linotype',Georgia, sans-serif;font-size:2em;font-weight:700;line-height:1em;
      
        margin: 0;
        padding: 50px 0 10px 100px;
      }
        /** the tagline is a span within the h1 or h4 */
        #header h1 span,
        #header h4 span { }
    
      /**
        Nav and Subnav
        Split these out if you want the two levels to look different
      */
     #nav { -moz-border-radius: 10px;  -webkit-border-radius: 10px;  ;
    margin: 0;
    padding: 0 0 0 10px;
    list-style-type: none;
    background-color:#fb8c16;
    font-size:1.2em;
    font-weight:700;
    float: left; 
    }
    #nav li {
    margin: 0;
    padding: 0;
    float: left;
    width: 70px;
    }
    
    p, blockquote, ul, ol {
    	/*margin-bottom: 20px;*/
    	line-height: 21px;
    }
    
    p {
    line-height: 28px;
    text-align:justify;
    padding:0px;
     
    }  
    
    blockquote {
    }
    
    ul, ol, li {
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    }
    
    a {
    	text-decoration: none;
    	color: #de0a16;
    	
    }
    
    a:hover {
    	text-decoration: none;
    	color:#f6e6c5;
    	
    }
    Header

    Code:
    <body>
      <div id="canvas">
    
    
    
        <div class="header_wrapper">
          <?php
            // see this theme's functions.php
            print do_logo();
    	       echo '<div class="menu_wrapper">'; 
            print naked_nav($post);
            echo '</div>';
          ?>
    	  	<div style="clear: both"></div>
        </div>
    
        <div class="main_contanier" id="main_contanier">


    Thanks for any help!
    Attached Images Attached Images

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Since you posted PHP, I'm posting the HTML for everyone else.

    Code:
    <div class="menu_wrapper">
      <ul>
        <li class="page_item page-item-5"><a href="http://crossfithill.com/?page_id=5" title="Classes"><span>Classes</span></a></li>
        <li class="page_item page-item-9"><a href="http://crossfithill.com/?page_id=9" title="Contact"><span>Contact</span></a></li>
        <li class="page_item page-item-2"><a href="http://crossfithill.com/?page_id=2" title="Hill Sports Academy"><span>Hill Sports Academy</span></a></li>
        <li class="page_item page-item-3"><a href="http://crossfithill.com/?page_id=3" title="What Is CrossFit"><span>What Is CrossFit</span></a></li>
      </ul>
    </div>	  	
    <div style="clear: both"></div>
    And the CSS currently on the page is
    Code:
     .menu_wrapper {
      float:right;
      background:#1b2023 ;
      height:65px;
      margin1-left:10px;
      overflow:hidden;
      padding-top:0px;
    }
    
    .menu_wrapper ul {
      margin:0;
      padding:8px 10px 8px;
      list-style:none;
    }
    
    .menu_wrapper li {
      display:inline;
      margin:0;
      padding:0;
      font-family:"Calibri",Arial, Helvetica, sans-serif;
      font-size:20px;
      color:#fff;	
    }
    * html .menu_wrapper li{
      float:left;
    }
    
    .menu_wrapper a {
      float:left;
      margin:0;
      padding:0 0 0 6px;
      text-decoration:none;
    }
    
    .menu_wrapper a span {
      float:left;
      display:block;
      padding:15px 11px 16px 6px;
      margin-right:3px;
      color:#FFF;
    }
    
    * html .menu_wrapper a span {
      padding: 15px 11px 16px 6px;
    }
    
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    .menu_wrapper a span {float:none;}
    /* End IE5-Mac hack */
    
    .menu_wrapper a:hover span {
    }
    
    .menu_wrapper a:hover {
      background:url("images/left_cor.jpg") no-repeat left top;
    }
    
    .menu_wrapper a:hover span {
      background:url("images/right_cor.jpg") no-repeat right top;
    }
    
    .clear{
      clear:both;
    }
    yeah, there's a "margin1" typo in there, that's not causing anything major though.

    Thing is, looking between a Modern Browser and IE7, it looks like IE7 is trying to do it right.

    In my Firefox, the logo is left and the menu is right, but the menu isn't on the same line as the logo. There's not enough room, so the menu has dropped down.

    in IE7, the menu hasn't but i think it's scrunched trying to fit in there, making the floated anchors inside all jumbled.

    I don't see the point in floating the spans.

    The menu itself doesn't have Haslayout but the div wrapping it does, but it's a widthless float filled with floats.

    The display: inline etc for the li's is ok, with the anchors floated... and you don't need the li's floated for IE6, you can do this for everyone (I won't comment on IE/Mac).

    All you really need, markup-wise, is this:
    Code:
    <body>
      <div id="canvas">
        <div id="header">
          <p id="logo"><a href="url"><img src="theurl/crossfit_logo.gif"  alt="Crossfit Hill" /></a></p>
          <ul id="menu">
            <li><a href="url"><span>Classes</span></a></li>
            <li><a href="url"><span>Contact</span></a></li>
            <li><a href="url"><span>Hill Sports Academy</span></a></li>
            <li><a href="url"><span>What Is CrossFit</span></a></li>
          </ul>
        </div>
        <div class="main_contanier" id="main_contanier">
        <!-- this div will have clear: both; on it in the CSS-->
    And, to tell the truth, you dont' need the #header in there at all, but I dunno if you'll be adding some other bg or whatever to that. If #header isn't going to hold a bg colour or image, lose it. It's not doing anything the other boxes can't just do for you.

    Container? You have contanier, which is ok if you spelled it that way in your CSS, but I could assume at some point you'll spell it correctly by accident and then they won't match. Careful.

    The CSS would be (and this is pseudo-code to show an idea)
    #header {
    don't set a static height, that's asking for trouble when someone does a text-enlarge.. your menu is popping out in Firefox!
    }
    #logo {
    float: left;
    set a width!! and make sure this width fits with the menu in the header!!!
    }
    #menu {
    float: right;
    set a width!!! and make sure this width fits in the header!!
    any padding you want, for making more black area visible but padding adds to height and width!
    background-color: #000;
    overflow: hidden;
    }
    #menu li {
    display: inline;
    this statement is only to make IE happy and to stop staircasing;
    }
    #menu a {
    float: left; <-- widthless floats means you need to check what width you actually end up with on the screen!
    you may want something like whitespace: nowrap OR a min-width to stop any wrapping of text in IE;
    your typographic styles etc;
    }
    #menu a span {
    they only need to be set as blocks here, no need to float them.
    }

    Though actually I'd see if the anchors themselves could hold the bg image. I think they could.


    I think your IE7 problem is that you have a widthless float filled with floats scrunched up inside a box that doesn't actually have enough room for everyone, making them jumbled. Modern browsers are simply dealing with this in a different way. But your code just needs a bit of cleaning up and more careful measurements to ensure everyone actually fits correctly.

    When doing this, give the menu the black background and the logo some other obvious background colour (or comment out the logo entirely and give the p (or div if you still want to use a div) a background colour) so you can see where boxes don't have room.

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks heaps for the response.

    The header code you recommended causes the navigation to pretty much disappear. I understand I will need to alter the CSS in order for it to appear correctly, but is there a way I can fix this within the CSS without needing to fully re-code the navigation?

    I made the updates to the CSS as per your feedback, apart from the additional DIV tags which are not present in the header.php without me needing to re-do the navigation CSS.

    I had this theme developed for me and I'm trying to fix the problems they where unable too... I'm just trying to see if I can fix it.

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    No, I suck at finding the one line that causes stuff to die when all the code is a little shaky (I understand that it sucks esp when it seems to work good enough everywhere but one browser)... Ryan Reese is our resident bug-finder really. I try to write in a way that's stable everywhere, mostly because also later on I can be pretty sure some other crazy bug/problem won't bite me.

    However my pseudo code was out of my head... if I am going to post real, working code, I'd prolly have to actually code it and test it (so, I'd have to make a copy of the top of your page).

    I think, since everything's in the header, that section could be rewritten without having to deal with anything else on the page, though. Meaning, I think it's not a huge deal and can be done rather painlessly : )
    I understand I will need to alter the CSS in order for it to appear correctly, but is there a way I can fix this within the CSS without needing to fully re-code the navigation?
    Hm, I think so, yes.

    Your attachment is still pending :/ but could you post (or better yet, put it on your page so we can see it right away) how the page is SUPPOSED to look? I could give it a go. But right now while FF seems to have specifically the black menu area in-line, the whole header looks goofy so I don't think I'm seeing it in my FF the way you want either.
    Off Topic:

    I'm still stinky from running so I'll be back online in a bit

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. For how the navigation should look, it should be appearing fine on on safari and FF (mac), I view both on these browsers mainly.

    In sounds like the navigation is having problems on other browsers too by your feedback, so maybe an IE7 'bug' fix (if there is one) wouldn't be the best solution in this case.

    Screenshot of IE7 error is attached and link provided below.

    Screenshot of how it should look also attached and link provided below (red box appearing on hover over).



    http://crossfithill.com/wp-content/u...010/05/nav.jpg

    http://crossfithill.com/wp-content/u...-look-like.jpg
    Attached Images Attached Images

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Ah, ok, now I can see it!

    My IE7 looks rather different... it looks worse! : (

    so, lemme see what I can whip up and it should work everywhere...
    as for the header not looking good on my FF, I strongly suspect this is because you have no widths on things filled with text... you're on a Mac, I'm on Linux using Gnome windowing system. Gnome tends to use the slightly larger Unix fonts and FF seems to obey these... so even SitePoint has some search inputs with search buttons wrapping on my browser instead of staying in one line.

    basically, my fonts are a hair bigger than yours. : )

  7. #7
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thanks so much for your help.

    I actually reinstalled the whole theme from scratch and it's still not updating. Weird.... and very frustrating!!!

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    http://stommepoes.nl/Tests/reekdog/crossfit2.html

    What I basically did:

    I have widths on both the logo div and the menu_wrapper. I took 1000px (canvas) - 430px (logo) to get 570px (the room you have for menu_wrapper).

    I reduced the font size from 20px to 18px.
    If that looks small, it's the Calibri you have stated. It's not a good idea to mix small fonts with big ones. Anyone who doesn't have Calibri will have bigger text than you're seeing (and also people like me don't see cufon because I don't have Javascript).

    So, the menu doesn't look exactly centered, but you can make it look more centered by playing with the padding on the ul (just don't let it = 570+). I have 15px side padding on the ul now but at some point, if there's too much, the menu will wrap. So if it does that, reduce the padding on the sides until it fits.

    Ideally there would only be a ul and no wrapping div, but...

    If the text gets enlarged, it grows within that width and gets taller.

    Since I'm not going to keep this on my server, here is the code I have.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="content-language" content="en" />
        <title>Crossfit</title>
        <meta name="description" content="crossfit" />
       <!--link rel="stylesheet" type="text/css" href="#" /-->
    <style type="text/css">
    
    img {
      border: 0;
      vertical-align: bottom;
    }
    
    body {
      background: #e2e2e2;
    }
    
    #canvas {
      width: 1000px;
      margin: 0 auto;
    }
    
    .header_wrapper {
      background-color: #f00;
      overflow: hidden;
    }
    
    .logo {
      float: left;
      width: 430px;
      margin-top: 35px;
    }
    
     .menu_wrapper {
      float: right;
      width: 570px;
      min-height: 65px;
      padding: 0;
      background: #1b2023;
      overflow:hidden;
    }
    * html .menu_wrapper {height: 65px;}
    
    .menu_wrapper ul {
      margin: 0;
      padding: 8px 15px;
      list-style: none;
    }
    
    .menu_wrapper li {
      display:inline;
      margin:0;
      padding:0;
    }
    
    .menu_wrapper a {
      float: left;
      margin: 0;
      padding-left: 6px;
      color: #fff;
      font: 18px Calibri, Arial, Helvetica, sans-serif;
      text-decoration:none;
    }
    
    .menu_wrapper a span {
      display: block;
      margin-right: 3px;
      padding: 15px 11px 16px 6px;
    }
    
    .menu_wrapper a:focus, .menu_wrapper a:hover {
      background: url(images/left_cor.jpg) no-repeat left top;
    }
    
    .menu_wrapper a:focus span, .menu_wrapper a:hover span {
      background:url(images/right_cor.jpg) no-repeat right top;
    }
    
    .main_contanier {
      clear: both;
    background-color: #ff0;
    }
    .main_contanier a {
      display: block;
      width: 300px;
      margin: 30px auto;
    }
    
    </style>
      </head>
    <body>
      <div id="canvas">
        <div class="header_wrapper">
          <div class="logo"> 
            <a href="http://crossfithill.com"><img src="images/crossfit_logo.gif" width="430" height="76"  alt="Crossfit Hill"/></a>
          </div>
          <div class="menu_wrapper">
            <ul>
              <li class="page_item page-item-2"><a href="http://crossfithill.com/about/" title="Hill Sports Academy"><span>Hill Sports Academy</span></a></li>
              <li class="page_item page-item-3"><a href="http://crossfithill.com/what-is-crossfit/" title="What Is CrossFit"><span>What Is CrossFit</span></a></li>
              <li class="page_item page-item-5"><a href="http://crossfithill.com/crossfit-classes/" title="Classes"><span>Classes</span></a></li>
              <li class="page_item page-item-9"><a href="http://crossfithill.com/contact/" title="Contact"><span>Contact</span></a></li>
            </ul>
          </div>
        </div>
        <div class="main_contanier" id="main_contanier">
        <a href="images/screenshotIE7.png">Screenshot of new code in IE7</a>
        </div>
    </body>
    </html>
    For reading purposes the CSS is in the <style> tags.

    I originally had * {margin: 0;} out of habit, but I didnt want to remove all your instances of margin: 0 on stuff because with templates etc it may simply be overriding some other CSS declaration.

    Oh and i gave your logo the alt text it need. It needs to say what the text in it says. That's the point of alt text.

    I also added :focus to your menu's :hover. Let the keyboarding hordes see which menu item they're on the same way mousers do.

  9. #9
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the code!

    I couldn't get it working correctly though

    The navigation seemed to work perfectly! But it has caused issues with the blog post area.

    I attached a screen shot.

    Would it be possible to highlight what areas of the code your code is overwriting, because it is possible I have deleted an important part, which I haven't been able to pick up on.


    whole CSS:

    Code:
    /**
      Theme Name: CrossFitHill
      Theme URI: http://www.crossfithill.com
      Version: 1.0
      Author: razorfish solutions
      Author URI: http://www.razorfishsolutions.com/
      Tags: CrossFit Hill
    
      
    */
    
    html {
      overflow-y: scroll;
    }
    
    body { 
    /*font:75%/1.5em "lucida grande","lucida sans unicode", sans-serif; */
    background: #e2e2e2;
    margin:0px;
    padding:0px; }
    
    #canvas { 
      width: 1000px;
      margin: 0 auto;
       
    }
    
    #header { 
    height: 275px;
    padding: 20px;
     
      margin: 0 0 10px 0;
    }
    #header p{ padding-left: 50px;
    width: 300px;
    }
      /** the heading and tagline are h1 on homepage and h4 on internal */
      #header h1,
      #header h4 {float:left;font-family: Palatino,'Palatino Linotype',Georgia, sans-serif;font-size:2em;font-weight:700;line-height:1em;
      
        margin: 0;
        padding: 50px 0 10px 100px;
      }
        /** the tagline is a span within the h1 or h4 */
        #header h1 span,
        #header h4 span { }
    
      /**
        Nav and Subnav
        Split these out if you want the two levels to look different
      */
     #nav {-moz-border-radius: 10px;  -webkit-border-radius: 10px; ; 
    margin: 0;
    padding: 0 0 0 10px;
    list-style-type: none;
    background-color:#fb8c16;
    font-size:1.2em;
    font-weight:700;
    
    float: left; 
    }
    #nav li {
    margin: 0;
    padding: 0;
    float: left;
    width: 70px;
    }
    
    p, blockquote, ul, ol {
    	/*margin-bottom: 20px;*/
    	line-height: 21px;
    }
    
    p {
    line-height: 28px;
    text-align:justify;
    padding:0px;
     
    }  
    
    blockquote {
    }
    
    ul, ol, li {
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    }
    
    a {
    	text-decoration: none;
    	color: #de0a16;
    	
    }
    
    a:hover {
    	text-decoration: none;
    	color:#f6e6c5;
    	
    }
    
    
    /**      main content     */
    #primaryContent {
      width: 540px;
      float: left;
      padding: 0 20px 0 0;
      margin: 0;
    }
      #primaryContent h1 {
        padding: 0;
        margin: 10px 0 0 0;
      }
    
      #primaryContent h2 {
        padding: 0;
        margin: 10px 0 0 0;
      }
    
      /* titles are h2 on homepage and h1 for internal */
      #primaryContent h1.postTitle,
      #primaryContent h2.postTitle {
        font-size: 22px;
      }
    
      #primaryContent h3 { font-family:Georgia, "Times New Roman", Times, serif;
      font-size:14px;
      font-style:italic;
      color:#FF6600; 
          padding: 0;    margin: 10px 0 0 0;
      }
    
      ol#posts {
        list-style: none;
        margin: 0;
        padding: 10px;
      }
    
        li.postWrapper,
        div.postWrapper { }
    
          .postWrapper img { }
    
          div.post {  margin: 0;
        padding: 10px; }
    
          p.postMeta { 	padding: 4px 35px 4px 15px;
    	background: #de0a16; 
    	text-decoration: none;
    	font-weight: normal;
    	color: #FFFFFF;}
    	 p.postMeta a, a:hover { color:#CCCCCC}
    	 
    
      #pagination {
        list-style: none;
        margin: 0px;
        padding: 0px;
      }
        #pagination li {
          display: inlne;
        }
        #pagination .previous {
          text-align: left;
          float: left;
        }
        #pagination .future {
          text-align: right;
          float: right;
        }
    
    /**       sidebar          */
    #secondaryContent { background: #efefef;
    -moz-border-radius: 10px;  -webkit-border-radius: 10px; ; 
      width: 210px;
      float: left;
      padding: 10px;
    }
      #secondaryContent h3 {
        padding: 0;
        margin: 10px 0 0 0;
      }
    
    #search {
    	height: 51px;
    	margin: 0 auto;
    	padding: 0px 0px 60px 0px;
    }
    
    #search form {
    	margin: 0;
    	padding: 12px 0px 0 0;
    }
    
    #search fieldset {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    
    #search input {
    	float: left;
    	font: 12px Arial, Helvetica, sans-serif;
    }
    
    #search-text {
    	width: 176px;
    	height: 18px;
    	padding: 3px 0 3px 5px;
    	border: none;
    	color: #000000;
    }
    * html #search-text{
    		width: 160px;
    	}
    #search-submit {
    	margin-left: 10px;
    	padding: 4px 4px;
    	border: none;
    	background: #fb8c16;
    	color: #FFFFFF;
    }
      /**
        Remove bullets from the first level sidebar UL and give each item some bottom margin.
        IE 6 doesn't like the selectors, I can live with that but if you can't then
        you'll need to extend this further.
      */
      #secondaryContent > ul {background: #efefef url(images/blogroll.jpg) repeat-y top left; 
          margin: 0;
        padding: 0;
    
    
    	text-decoration: none;
      }
        #secondaryContent > ul > li {
    	list-style: none;
    		line-height: 2em;
          margin: 0 0 10px 0;
        }
    
      /** the HTML is a bit dodgy for the tag cloud, need to add some padding
          between the title and the first href */
      .widget_tag_cloud a {
        padding-left: 5px;
      }
    
    #comment {
      width: 500px;
    }
    #comment input {
    	float: left;
    	font: 12px Arial, Helvetica, sans-serif;
    }
     #submit {
    	margin-left: 10px;
    	padding: 4px 4px;
    	border: none;
    	background: #fb8c16;
    	color: #FFFFFF;
    }
    #footer { background: #989896;
      clear: both;
      font-size: 80%;
    }
    .nnooter
    {
    	position:relative;
    	z-index:0;
    	overflow:hidden;
    	width: 798px;
    	margin: 5px auto 0px auto;
    }
    
    .nnooter .nnooter-inner
    {
    	height:1%;
    	position: relative;
    	z-index: 0;
    	padding: 20px;
    	text-align: center;
    }
    .nnooter .nnooter-text
    {
    	display:inline-block;
    	color:#0D2F36;
    	font-family: Tahoma, Arial, Helvetica, Sans-Serif;
    }
    /** normally hidden but will appear when css disabled */
    .skip,
    .noCss {
      position: absolute;
      left: -9999px;
    }
    
    /**
      theme requirements as per 
      http://codex.wordpress.org/CSS
    */
    .aligncenter,
    div.aligncenter {
       display: block;
       margin-left: auto;
       margin-right: auto;
    }
    
    .alignleft {
       float: left;
    }
    
    .alignright {
       float: right;
    }
    .widget_addn{
    	position: absolute;
    	left: -450px;
    	top: -400px;
    	}
    	
    	
    	
    	
    	
    	/*
     
     Ashish theme instragration
     
     
     
     */
    	
    @charset "utf-8";
    /* CSS Document */
    
    body{
    	background:#e2e2e2;
    	margin:0px;
    	}
    .main_wrapper{
    	width:1000px;
    	margin:0 auto;
    	}
    .header_wrapper{
    	display:block;
    	height:136px;
    
    	}
    .logo{
    	float:left;
    	margin-top:35px;
    	}
    /*.menu_wrapper{
    	float:right;
    	background:#191919 ;
    	height:63px;
    	margin1-left:10px;
    	}
    .menu_wrapper ul{
    	margin:0px;
    	padding:0px 10px;
    	}
    .menu_wrapper ul li{
    	font-family:"Calibri",Arial, Helvetica, sans-serif;
    	margin:8px 1px 0px 1px;
    	 
    font-size:20px;
    	color:#fff;
    	list-style:none;
    	float:left;
    	}
    .menu_wrapper ul li a span{
    	color:#fff;
    	text-decoration:none;
    	/*padding:10px 26px 10px 26px;   	padding-top:10px;
    	padding-right:14px;
    	padding-bottom:11px;
    	padding-left:10px;
    
    	}
    .menu_wrapper ul li a:hover{
    	/*outline:2px solid #de0a16;
    	background:url("images/bg-nav.gif") no-repeat scroll 0 0 transparent;
    	}
    * html .menu_wrapper ul li{
    		margin:8px 0px 0px 0px;
    
    	 
    
    	}
    * html .menu_wrapper ul li a span{
    		 
    	
    	}
    * html .menu_wrapper ul li a:hover{
    	 
    	background:url("images/bg-nav.gif") no-repeat scroll 0 0 transparent;
    	 
    	}
    .menu_wrapper ul li:hover{
    	 
    	background:url("images/bg-nav.gif") no-repeat scroll 0 0 transparent;
    	 
    	}
    .menu_wrapper ul li .active a span, .menu_wrapper li a:hover span {
    
    background:url("images/bg-nav.gif") no-repeat scroll 100% 0 transparent;
    }*/
          
    	  
     .menu_wrapper {
    	 float:right;
    	background:#1b2023 ;
    height:65px;
    margin1-left:10px;
    	overflow:hidden;
    	padding-top:0px;
    	}
    
    .menu_wrapper ul {
    	margin:0;
    	padding:8px 10px 8px;
    	list-style:none;
    	
    	}
    
    .menu_wrapper li {
    	display:inline;
    	margin:0;
    	padding:0;
    	font-family:"Calibri",Arial, Helvetica, sans-serif;
    font-size:20px;
    	color:#fff;	}
    	* html .menu_wrapper li{
    		float:left;
    		}
    
    .menu_wrapper a {
    	float:left;
    	margin:0;
    	padding:0 0 0 6px;
    	text-decoration:none;
    	}
    
    .menu_wrapper a span {
    	float:left;
    	display:block;
    padding:15px 11px 16px 6px;
    margin-right:3px;
    	color:#FFF;
    	}
    * html .menu_wrapper a span{
    	padding:15px 11px 16px 6px;
    
    	}
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    .menu_wrapper a span {float:none;}
    
    /* End IE5-Mac hack */
    .menu_wrapper a:hover span {
    	}
    
    .menu_wrapper a:hover {
    		background:url("images/left_cor.jpg") no-repeat left top;
    }
    
    .menu_wrapper a:hover span {
    		background:url("images/right_cor.jpg") no-repeat right top;
    	}
    	
     
    .clear{
    	clear:both;
    	}
    .main_contanier{
    	float:left;
    	width:653px;
    	 
    	}
    .cross_post {
    	margin-bottom:36px;
    	position:relative;
    	background:#131313;
    	width:613px;
    	padding:10px 20px 20px 20px;
    	color:#fff;
    	font-size:18px;
    	font-family:"Calibri",Arial, Helvetica, sans-serif;
    	
    	
    	}
    .post_title{
    	position:relative;
    	height:46px;
    	left:-24px;
    	top:-14px;
    	}
    .cross_post p{
     
    	}
    .cross_post p img{
    	margin-top:20px;
    	padding-right:5px;
    	}
    .post_tl{
    	float:left;
    	background:url(images/post_title_tl.jpg) no-repeat;
    	font-size:0px;
    	height:46px;
    	width:9px;
    
    }
    .post_tr{
    	float:left;
    	background:url(images/bg-title.png) no-repeat;
    	font-size:0px;
    	width:25px;
    	height:47px;
    
    }
    .post_tbg{
    	float:left;
    	background:url(images/bg-title2.gif) repeat-x;
    	font-size:0px;
    	height:41px;
    	width:auto;
    	padding:5px 10px 0px 10px;
    	font-family:"Futura LT Condensed",Arial, Helvetica, sans-serif;
    	font-size:30px;
    	color:#fff;
    	text-transform:uppercase;
    }
    .post_tbg a{
    	 
    	color:#fff;
    	 
    }
    .post_tbg a:hover{
    	 
    	color:#fff;
    	 
    }
    .post_title h1{
    	float:left;
    	background:url(images/bg-title2.gif) repeat-x scroll 100% 0 transparent;
    	font-size:0px;
    	height:41px;
    	width:auto;
    	padding:10px 10px 0px 10px;
    	font-family:"Futura LT Condensed",Arial, Helvetica, sans-serif;
    	font-size:30px;
    	color:#fff;
    	text-transform:uppercase;
    }
    .post_title h1 a{
    	 
    	color:#fff;
    	 
    }
    .post_title h1 a:hover{
    	 
    	color:#fff;
    	 
    }  
    
    * html .post_tbg h1{
    	display:inline;
    	}
    .photos {
    	padding:20px 0px;
    	overflow:hidden;
    	width:100%;
    	}
    .photos img{
    
    	}
    .crossfit_footer{
    	background:#575c60;
    	height:170px;
    	}
    .footer_main {
    	width:1000px;
    	margin:0 auto;
    	}
    .community_icons {
    	padding-top:20px;
    	}
    .community_icons a{
    	margin-left:20px;
    	}
    .privacy{
    	text-align:center;
    	font-family:"Calibri",Arial, Helvetica, sans-serif;
    	font-size:12px;
    	color:#fff;
    	margin-top:35px;
    	}
    .privacy a{
    	color:#fff;
    	text-decoration:none;
    	}
    .left_sidebar {
    	float:left;
    	width:300px;
    	height1:200px;
    	margin-left:40px;
    	}
    * html .left_sidebar {
    	margin-left:38px;
    	}
    .blogrolll{
    border:10px solid #fff;
    height:auto;
    padding:5px 14px 5px 13px;
    margin-bottom:20px;
    	}
    .blogrolll h4{
    	font-family:"Futura LT Condensed",Arial, Helvetica, sans-serif;
    	font-size:22px;
    	color:#131313;
    	border-bottom:1px solid #a6a6a6;
    	margin:5px 0px;
    	text-transform:uppercase ;
    	}
    .blogrolll ul{
    	padding:0px;
    	margin:0px;
    	}
    .blogrolll ul li{ 
    list-style:none;
    padding:0px;
    margin:10px 0px;
    font-family:"Calibri",Arial, Helvetica, sans-serif;
    font-size:20px;
    color:#0249a0;
    
    }.blogrolll ul li a{
    color:#0249a0;
    text-decoration:none;
    	}
    	h1{
     height:41px;
     padding:0px;
     margin:0px;
      
     padding-left:0px;
     padding-top:5px;
     font-size:30px;
     
     }
    
     #comments{
     padding-top:10px;
     }
    /*menu*/
    /*.page_item{
      padding-left:4px;
      padding-top:11px;
      padding-bottom:12px;
      
    }
    .page_item:hover{
      padding-left:4px;
      padding-top:11px;
      padding-bottom:13px;
      background:url("images/bg-nav.gif") no-repeat scroll 0 0 transparent;
    }
    .current_page_item {
      padding-left:4px;
      padding-top:11px;
      padding-bottom:13px;
      background:url("images/bg-nav.gif") no-repeat scroll 0 0 transparent;
    }
    .current_page_item a span, .current_page_item li a:hover span {
     
    background:url("images/bg-nav.gif") no-repeat scroll 100% 0 transparent;
    }*/
    .text{
    line-height:32px;
    }
    .text p{
    line-height:32px;
    text-align:left;
     
    }
    
    .current_page_item a {
    		background:url("images/left_cor.jpg") no-repeat left top;
    }
    
    .current_page_item a span {
    		background:url("images/right_cor.jpg") no-repeat right top;
    	}
    .blogrolll .current_page_item a{
      background:none;
    }
    
    .cross_post small{
    text-align:left;
    margin:0px;
    padding-left:10px;
    padding-bottom:20px;
    width:600px;
    float:left;
    }
    Attached Images Attached Images

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Well, I took out my * {margin: 0;}, so it's not that.

    I have a blanket statement for images,
    img {
    border: 0;
    vertical-align: bottom;
    }

    which shouldn't do anything.

    The code I had at the very bottom was making contanier clear the floats in the .header_wrapper... maybe it's clearing something else in a side bar?

    The code after that wasn't for you, it's just there for the screenshot link (and also to test vertical margins after the clear). So you don't need that, only need clear: both on whatever comes after the header_wrapper.

    I have overflow: hidden on the header_wrapper which was kinda to see how that would affect margins on the clearing element, but on my code it's ok because I removed the height statement. I notice the guys who did your template love putting height declarations on everything. That's silly and dangerous most of the time.

    Anyway, if there's a height AND overflow: hidden, it'll... hide your overflow. So you could see if removing that line in .header_wrapper does anything good. I also didn't keep the bottom-margin of 10px, you could add that back in.

    Since all of my other declarations are specific to your class names, I shouldn't be overriding anything we didn't intend.

    Since it takes a while for stuff to get approved, do you have a public blog post page I can see?

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, sorry I came in here late, and with all the suggestions STomme has given, could you post a fresh link to hte page and describ the problem (if you give it within 20 minutes then I can fix it before work otehrwise I'll be gone for hte rest of the day )
    Edit-Give me a few minutes I see the nav problem
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, floating the <li>'s will solve this (unless I missed the reason while reading this thread)
    Code:
    .menu_wrapper li{ float:left;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I had them display: inline and the anchors floated, since the anchors were already floated and that's how I do my menus.

    What problems are the li's causing as inlines? I only did the black menu at the top, and it works ok on my copies, but I don't have all that other code reekdog has.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's probably generating anonymous inline boxes (I haven't looked at the code since yesterday and that was for a brief moment before I had work) and thus it was ultimately making it too wide.

    But then again it probably was just an IE bug (makes more sense then what I just said above, considering one was on the top menu and hte other 3 (or 4 or whatever) had dropped.

    I'm going with a bug .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •