Yikes, Wordpress help needed (template CSS help technically)

Discussion in 'Web Design and Development' started by torndownunit, Mar 16, 2009.

  1. torndownunit macrumors regular

    Joined:
    Jan 4, 2009
    #1
    Hey guys. I made a really silly mistake. I built a site around a theme I downloaded for Wordpress, but I didn't even think to check it on IE7. Usually those themes work on IE. I did minor edits to the theme, but did not touch the navigation in way because I liked it how it was.

    I check it on a PC today though, and the menu is all out of whack in IE7. Each type is in a different vertical position, making the menu look like a set of stairs.

    I don't know what code I need to post to get advice, so I am going to start by just posting the style sheet for the theme. Can anyone see anything in this that would be causing what I am seeing?

    My site is here http://www.ic-designs.ca the wordpress directory though is http://www.ic-designs.ca/wordpress . I have it's index page set as my home page on my server though.

    Here is the CSS:

    Code:
    /*
    Theme Name: Businesslite
    Theme URI: http://www.freewordpresslayouts.com
    Description: Get More Free Wordpress Themes By Visiting <a href="http://www.amazingwordpressthemes.com">Free Wordpress Themes</a> 
    Version: 1.0
    Author: Makequick
    Author URI: http://www.makequick.com
    */
    
    /* standard elements */
    html {min-height: 100%;}
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    a {color: #963; border: none;}
    a:hover {color: #C60; border: none;}
    
    body {
    	background: #333333 url('img/newbg.gif') repeat-x;
    	color: #333333;
    	font: normal 62.5% Tahoma, sans-serif
    }
    
    p,code,ul {padding-bottom: 10px;}
    
    li {list-style: none;}
    
    h1 {
    	font-style: italic;
    	font-family: serif;
    	color: #996633;
    	font: 1.6em;
    	margin-bottom: 8px;
    }
    h2 { font-style: italic; color: #996633; margin-bottom: 10px; margin-top: 10px; font: 1.5em serif;}
    h3 { font-style: italic; color: #996633; margin-bottom: 10px; margin-top: 10px; font-variant: normal; font: 1.4em serif;}
    
    code {
    	background: #FFF;
    	border: 1px solid #EEE;
    	border-left: 6px solid #C1CAD3;
    	color: #666;
    	display: block;
    	font: normal 1em Tahoma,sans-serif;
    	line-height: 1.6em;
    	margin: 4px 0 12px;
    	padding: 8px 10px;
    	white-space: pre;
    }
    
    blockquote {
    	background: url('img/quote.gif') no-repeat;
    	display: block;
    	font: bold 0.9em Verdana,sans-serif;
    	padding-left: 20px
    }
    
    big {font-size: 1.1em;}
    
    h1, h2, h3 {font-family: serif; margin-left: 10px; margin-bottom: 10px; padding-top: 6px;}
    
    label {
    	display: block;
    	font-size: 0.9em;
    }
    
    /* misc */
    .clearer {clear: both;}
    .left {float: left;}
    .right {float: right;}
    
    /* structure */
    .container {
    	background: #FFF;
    	font-size: 1.2em;
    	margin: 0 auto;
    	padding: 0 10px 0px;
    	width: 780px;
    	border-bottom: 4px solid #FFFFFF;
    }
    
    /* header */
    .top {
    	padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:0
    }
    
    /* title */
    .header {
    	background: #FFF;
    	font-size: 1.2em;
    	height: 150px;
    	margin: 0 auto;
    	padding: 10px 10px 5px;
    	width: 780px;
    }
    .header .left, .header .right {
    	background: #A4A4A0;
    	color: #FFF;
    	height: 150px;	
    }
    .logo {
    margin-left: auto;
    margin-right: auto;
    width: 770px;
    padding-left: 50px;
    font: normal 2.8em "Trebuchet MS",sans-serif;
    margin-top: 20px;
    background-image: url('img/logo.png');
    background-repeat: no-repeat;
    background-position: left;
    }
    
    .logo a {
    color: #D9D7CA;
    text-decoration: none;
    }
    
    .logo a:hover {
    color: #D9D7CA;
    text-decoration: none;
    }
    
    .logo a:visisted {
    color: #D9D7CA;
    text-decoration: none;
    }
    .header .left {
    	background: url('img/header2.gif') no-repeat;
    	text-align: center;	
    	width: 780px;
    	font: normal 2.8em "Trebuchet MS",sans-serif;
    	line-height: 150px;
    }
    .header .right p, .header .right h2 {padding: 0 16px;}
    .header .right h2 {padding-top: 16px; font: normal 1.6em "Trebuchet MS",sans-serif;}
    
    /* navigation */
    .navigation {	
    	border: 1px solid #000000;
    	border-color: #000000;
    	background:#000000 url('img/nav.gif');
    	height: 41px;
    	margin: 0px;
    	paddin-top: 0px;
    }
    .navigation a {
    	background: #000000 url('img/nav.gif');
    	border-right: 1px solid #000000;
    	color: #FFFFFF;
    	display: block;
    	float: left;
    	text-decoration: none;
    	font: bold 1em sans-serif;
    	line-height: 41px;
    	padding: 0 20px;
    	padding-top: 0px;
    
    }
    
    .floater {
    margin-left: -66px;
    background: url('img/floaterbg.gif');
    background-repeat: no-repeat;
    background-position: left;
    height: 70px;
    padding-left: 15px;
    padding-top: 5px;
    }
    
    
    .navigation a:hover {background-position: left bottom; color: #DAD8CC;}
    
    /* main */
    .main {
    	border-top: 4px solid #FFF;
    	background: url('img/bgmain.gif') repeat-y;
    
    }
    
    /* sub navigation */
    .sidenav {
    	float: right;
    	width: 210px;
    }
    .sidenav h2 {
    	color: #5A5A43;
    	font: bold 1em Tahoma,sans-serif;
    	line-height: 25px;
    	padding-left: 12px;
    	display: block;
    	background-image: url('img/h2bg.gif');
    	background-repeat: no-repeat;
    	padding-top: 0px;
    	margin-top: 8px;
    	margin-bottom: 8px;
    }
    .sidenav ul {
    	padding: 0;
    	border-top: 1px solid #EAEADA;
    }
    .sidenav li {border-bottom: 1px solid #EAEADA;}
    .sidenav li a {
    	font-size: 1.1em;
    	color: #554;
    	display: block;
    	padding: 8px 0 8px 5%;
    	text-decoration: none;
    	width: 95%;
    }
    .sidenav li a:hover {
    	background: #F0F0EB url('img/sidebarnavbg.gif');
    	color: #654;	
    }
    
    /* content */
    .content {
    	padding-left: 16px;
    	padding-bottom: 0;
    	padding-right: 16px;
    	padding-top: 0;
    	float: left;
    	margin: 10px 0;
    	width: 531px;
    }
    .content .descr {
    	color: #664;
    	font-size: 0.9em;
    	margin-bottom: 6px;
    }
    .content li {
    	background: url('img/li.gif') no-repeat 0 30%;
    	padding: 1px 0 1px 16px;
    }
    .content p {font-family: "Lucida Sans Unicode",sans-serif;}
    
    /* footer */
    .footer {
    	background: #333333;
    	color: #FFF;
    	font: bold 1em sans-serif;
    	padding: 0 16px;
    	line-height: 39px;
    	height: 39px;
    	margin-bottom: 10px;
    }
    .footer a, .footer a:hover {color: #FFF;}
    
    /* posts */
    .post h1 a {text-decoration:none;}
    .post h1 a:hover {text-decoration:underline;}
    
    .post {margin: 6px 0 2px;}
    .post .info{
    	padding: 5px 10px;
    	border: 1px solid #E3E4E4;
    	background:#F5F5F5;
    	color: #555;
    	margin: 2px 0 4px;
    }
    .post img {border: 4px solid #DDD; margin: 4px 0;}
    .post a img {border: none}
    .post a:hover img {border-color: #CCC;}
    
    .info a {text-decoration: none;}
    .info a:hover {text-decoration: underline;}
    
    /* comments */
    .content ol li {list-style: none; background: none;}
    
    #commentlist li {
    	margin-bottom: 1.5em;
    	padding-bottom: 1em;
    	border-bottom: 1px solid #700000;
    	list-style: none;
    }
    #commentform {
    	margin: 1em 0;
    	background: #FAFAFA;
    	width: 280px;
    }
    .commentmetadata {padding: 2px 0 4px;}
    .commentmetadata a {color: #664;}
    
    textarea.styled {width: 280px;}
    
    .styled {
    	font-size: 1.1em;
    	background: #F8F7F6;
    	border: 1px solid #D6D3D3;
    }
    .styled:hover {
    	background: #FFF;
    	border: 1px solid #D6D3D3;
    }
    .styled:focus {
    	background: #FFF;
    	border: 1px solid #939793;
    }
    #commentform input {margin-bottom: 3px;}
    
    a img {border:none;}
    
    /* calendar */
    #wp-calendar {color:#A0A0A0;}
    
    .sidenav table caption {border-bottom-color:#000;}
    
    .sidenav table thead tr {
      border-bottom-color:#000;
      color:#A53512;
    }
    
    .sidenav table th {border-bottom-color:#000;}
    
    .sidenav table td#today {
      border-color:#000;
      color:#A53512;
    }
    
    .sidenav table td a {
      border-bottom-color:#000;
      background-color:#EDF3DE;
    }
    
    .sidenav table tfoot {border-top-color:#000;}
    
    .sidenav table tfoot a {background:none;}
    
    /* calendar
    --------------------------------------------------*/
    #wp-calendar {
      display:inline-table;
      border-collapse:collapse;
      width:185px;
      margin:0px 10px 0 10px;
      text-align:center;
    }
    
    .sidenav table caption {
      margin: -5px 10px 0 10px;
      padding-bottom: 5px;
      border-bottom: 1px solid;
      letter-spacing: 0.1em;
    }
    
    .sidenav table thead tr {border-bottom:1px solid;}
    
    .sidenav table th {border-bottom:1px solid;}
    
    .sidenav table td {
      width: 225px; /* maximaize width; honestly, I don't know much about tables... */
      padding: 1px;
      font-size: 0.9em;
    }
    
    .sidenav table td#today {
      padding: 0;
      border: 1px solid;
      font-size: 1em;
      font-weight: bold;
    }
    
    .sidenav table td a {
      display: block;
      border-bottom: 1px solid;
      font-weight: bold;
      font-size: 1.15em;
    }
    
    .sidenav table tfoot {border-top:1px solid;}
    .sidenav table tfoot a {
      border: none;
      font-weight: bold;
    }
    .sidenav table tfoot #prev a {text-align:left;}
    .sidenav table tfoot #next a {text-align:center;}
    
    #searchform {padding:10px;}
    If there is anything else I need to post to help, please let me know.

    Thanks a ton.
     
  2. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #2
    p.s.

    This is what I see in IE7 on a PC and in VMfusion

    [​IMG]
     
  3. lindsayanng macrumors 68000

    lindsayanng

    Joined:
    May 4, 2008
    Location:
    East Haven, CT
    #3
    try this
    change the margin from -66 to 0

    last time I had an issue with that it was an outter element margin.
     
  4. lindsayanng macrumors 68000

    lindsayanng

    Joined:
    May 4, 2008
    Location:
    East Haven, CT
    #4
    thats what i THOUGHT, but i didnt see
    #outer{
    margin: XXpx
    }


    Copy your code and paste it into a code editor and do a search for #outer

    I looked and couldnt find it. thats why i thought MAYBE it was in the float, but i didnt look TOO close, but its LIKELY a margin in some div id. Possible OUTER since you remember it being that.. OUTER is a common name for a containing div with those attributes.
     
  5. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #5
    Hey, thanks for taking a look. I can't find any tags with 'outer' or a variation. So would you suggest trying the tip you gave in your first post?

    Thanks
     
  6. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #6
    I can't find #outer either... Not sure what he's saying there.


    I haven't looked that in depth yet, but padding: 0 20px 0; is a bit odd and may be confusing ie7?

    You can have 1 value, 2 values, or 4 values.

    e.g.

    padding:1px; adds 1px all round

    padding:1px 20px; adds 1px top and bottom & 20px right and left

    padding:1px 2px 3px 4px; adds in order of North, East, South, West. Top, Right, Bottom, Left.

    If that doesn't help, let us know to investigate further?

    -EDIT-

    Opps, sorry, that's just what FireBug told me you had. I see you have actually coded padding: 0 20px; which is fine. I'll continue my investigation :) Though, your .header and .container padding have 3 values... Maybe fix that?

    Also,
    Code:
    /* header */
    
    .top {
    
    	padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:0
    
    }
    
    
    You need to close that with a ;

    Having checked the css validation there are some errors, which if you fix, would be a better grounding for an investigation... HTML too, but the errors you have here shouldn't affect your issues (in theory). Never hurts to validate though.
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    Means Top (0), Left & Right (20), Bottom (0). I often forget the ordering for the 3-value method so often avoid it, but as you noted, this came from Firebug.
     
  8. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #8
    Ah, thanks for clarifying that angelwatt. Not come across 3 values before...
     
  9. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #9
    Thanks for the input guys. I am running around like crazy today, but am going to sit down and try these tips when I get in tonight. I'll update.

    I can't believe I didn't test this out beforehand. I like the theme so much though that I hope I don't have to change it. Hopefully it can be fixed.
     
  10. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #10
    I am working through the validation as suggested. I found one tag that might be the culprit, though I won't know till I test.

    This tag in .navigation:

    padding-top: 0px;

    Was spelled incorrectly:

    paddin-top: 0px;
     
  11. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #11
    darn none of those validation fixes seemed to solve the problem.

    The only fix I haven't done is the padding.

    I am a little unclear on what the fix entails here. Or as per angelwatt's post, is the code ok as is?

    The only errors I get now are in the lighbox plug-in, and I don't think it's something I want to dive in to. I can't see why it would be affecting the navigation menu anyway? http://jigsaw.w3.org/css-validator/...warning=0&uri=http://ic-designs.ca/wordpress/

    Should I maybe try to find a navigation menu that is gauranteed IE friendly and insert it in place of the old navigation? Or do you guys think the navigation css is the issue?

    Again, I'd like to be able to keep this theme intact and get that navigation functioning.

    Thanks guys.
     
  12. FourCandles macrumors 6502a

    Joined:
    Feb 10, 2009
    Location:
    England
    #12
    If you do have to go down this route, you could try the Multi-level Navigation Plugin. There are numerous others, some which work well in IE and validate, others less so; try going to http://wordpress.org/extend/plugins/ and search for "menu IE6".
     
  13. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #13
    Thanks, I bookmarked the link in case I can't find a solution to fixing the current menu.
     
  14. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #14
    Hey guys.

    Someone on another forum gave me a tip that worked. I don't know if it's the best way to achieve the result or not, but I am posting it here in case anyone has a similar problem at some point.

    I was told to just replace the old css for 'li'

    Code:
    li {list-style: none;}
    with

    Code:
    li {display:inline;list-style-image:none;list-style-position:outside;list-style-type:none;}
    The menu displays great now.
     
  15. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #15
    Weird. Glad you got it sorted out :)

    Damn IE in all it's guises lol

    Hopefully 8 will play nicer.
     
  16. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #16
    Small FYI. The first and last pieces of that change are what is important, and you already had the last piece so it was just display:inline that you needed most likely. I never got around to checking out this problem. The other pieces here would only matter if you had a list-style-image set somewhere else.
     
  17. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #17
    Ya, after the guy posted that tip, he also gave me a tip on just applying it to the li elements in the nav. I am finally getting decent enough at css that I realized the limitation of the original fix and asked about that.
     

Share This Page