CSS - Wordpress Css Problem
I was wondering if someone could give me a hand on a CSS problem I am having. This is for my personal site that my wife and I use to update people on our lives. I have the page at a temporary location right now as I am moving the site between servers.
Anyhow, I am working with WordPress and redoing the stylesheet. I am about half way done and am having a very strange problem. You can view the page here. The CSS is located below: Code: body,html { margin: 0; padding: 0; font: 10pt/15pt arial; background: #800000 url(images/topback.jpg) repeat-x top; text-align: center; } hr,h1,.description { display: none; } h2 { margin: 0; padding: 0; } #page { width: 843px; text-align: left; background: url(images/mainback.jpg) repeat-y; } #header { background: url(images/header.jpg) no-repeat; height: 275px; } #content { float: left; width: 300px; padding-left: 100px; } #sidebar { float: left; width: 200px; font-size: 8.5pt; } #sidebar li { list-style-type: none; } #footer { clear: both; } Here's the problem. In IE the width of the 'content' div is 509 pixels as can be seen by the red border (put in there to show the borders of the div). I am not defining the width to be 509 pixels, it is just defaulting to that width. You need to look at the page in IE...in Firefox it works fine. Similar Tutorialsif you look at my web page http://www.invalidheart.org/index.php when i have two or more entries my layout looks totally messed up, when i just have one entry, everything is fine. I can't for the life of my figure out what's going wrong with my template when i have 2+ posts. this is my index.php which is the template for wordpress: Code: <?php /* Don't remove this line. */ require('./wp-blog-header.php'); ?> <!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" xml:lang="en" lang="en"> <head profile="http://gmpg.org/xfn/1"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Invalid Heart - The Portfolio</title> <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" /> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --> <style type="text/css" media="screen"> @import url( <?php wp_stylesheet("default"); ?> ); </style> <!-- compliance patch for microsoft browsers --> <!--[if lt IE 7]> <script src="http://www.invalidheart.org/ie7-standard.js" type="text/javascript"> </script> <![endif]--> <link rel="stylesheet" type="text/css" media="print" href="<?php echo get_settings('siteurl'); ?>/print.css" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_get_archives('type=monthly&format=link'); ?> <?php //comments_popup_script(); // off by default ?> <?php wp_head(); ?> </head> <body id="sectionone"> <?php if ($posts) : foreach ($posts as $post) : start_wp(); ?> <div id="wrap"> <div id="header"></div> <div id="container"> <div id="menu"><?php include ("menu.php"); ?></div> <div id="extra"> <h3>Navigation</h3> <div class="line"></div> <div class="item"> <ul class="nav"> <?php include ("navigation.php"); ?> </ul> </div> <h3>Change Style</h3> <div class="line"></div> <div class="item"> <ul class="nav2"> <?php wp_style_switcher(0); ?> </ul> </div> <h3>Recent Posts</h3> <div class="line"></div> <div class="item"> <ul class="nav2"> <?php get_recent_posts(); ?> </ul> </div> <h3>Archives</h3> <div class="line"></div> <div class="item"> <ul class="nav2"> <?php wp_get_archives('type=monthly'); ?> </ul> </div> <h3>Links</h3> <div class="line"></div> <div class="item"> <ul class="nav2"> <?php include ("links.php"); ?> </ul> </div> </div> <div id="main"> <h3>News & updates</h3> <div class="line"></div> <div class="item"> <?php the_date('','<h4>','</h4>'); ?> <?php the_content(); ?> <p>Thanks: <?php comment_plugger(); ?></p> <p><?php wp_link_pages(); ?> <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?></p> <!-- <?php trackback_rdf(); ?> --> <?php include(ABSPATH . 'wp-comments.php'); ?> <br style="clear:both;" /> <?php endforeach; else: ?><br style="clear:both;" /> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> <?php endif; ?><br style="clear:both;" /> <div id="center"><div class="break"></div></div> </div> </div><br style="clear:both;" /></div> <div id="copyright"><?php include ("copyright.php"); ?></div></div> <br style="clear:both;" /> </body> </html> and my css is he http://invalidheart.org/wp-style/default/style.css any suggestions? Help! I've been holding my head on this one for a couple days. I have a wordpress theme that works fine in IE7, but in Firefox the header and navigation aligns left instead of center. I have not tested in IE6 yet. I can't, for the life of me, figure out what's causing it. Any help would be greatly appreciated! www dot sccustomfacade dot com slash site Thank you! I tried a bunch of stuff to fix this. I only removed the sidebar from the pages, not the blog. This is how the footer is SUPPOSED to look: http://www.regionalcreations.com/fotografix/?page_id=4 This is how it looks on the pages: http://www.regionalcreations.com/fotografix/ For some reason the footer is up inside the body. Help? All I did was comment out the sidebar like this: Code: <!-- </div class="art-sidebar1"> <?php include (TEMPLATEPATH . '/sidebar1.php'); ?> </div> --> And copy the css for the width and change the name and values: Code: .page-contentLayout .page-content { position: relative; margin: 0; padding: 0; border: 0; float: left; overflow: hidden; width: 876px; } .page-contentLayout .page-content-wide { position: relative; margin: 0; padding: 0; border: 0; float: left; overflow: hidden; width: 875px; } I'm using wordpress 2.9 and I installed a plugin called wp-polls the problem is that the Y in Yes and N in No on the poll won't show up in IE. the url is mcs.assistui.net How do you fix this? Here is the blog page: wavgirl.com/blog If you open it in firefox or other browsers, it works fine. The menu at the top is on all pages on my site (via a php include). All pages also are linked to a main stylesheet for my website. Everything works in internet explorer EXCEPT that blog page (if you go to the main page of my site in IE, it loads fine). This has led me to conclude that there is something specifically in the blog's style sheet that doesn't work in IE. When you load the blog page in IE, the page is thrown off center, and the menu dropdown does not work anymore. Can someone simply look at this stylesheet and tell me how to correct it for internet explorer? As I said, all of this loads fine in other browsers, and the menu works on all other pages of the site in any browser. Any help would be appreciated, and I apologize if I posted this in the wrong place. Code: /* Theme Name: Simple Blog Design Theme URI: Description: A simple clear theme with 2-sidebar and 3-sidebar layouts. Version: 1.0 Author: BlogDesignStudio Author URI: http://blogdesignstudio.com/ Tags: widget ready, white, blue, right sidebar Valid XHTML 1.0 Transitional */ * { margin: 0; padding: 0; } body { color: #000; background: #fff; font-family: Verdana, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif; font-size: 70%; line-height: 1.6; } p { font-size: 1.1em; margin: 0 0 10px 0; } blockquote { background: url(images/quote.png) no-repeat; color: #000; margin: 15px; padding-left: 25px; } em { font-style: italic; } strong { font-weight: 700; } pre, code { font-family: Verdana, "Courier New", Courier, Monospace; line-height: 1.5; } pre { border-top: 1px solid #ccc; white-space: pre; overflow: auto; margin: 0 15px; padding: 10px 15px; max-height: 300px; } img { } a { color: #555555!important; text-decoration: none; outline: none; } a:focus, a:hover { color: #555555!important; text-decoration: none; } .clear { float:none; clear: both; } .aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignleft { float: left; } .alignright { float: right; } .wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; } .wp-caption img { margin: 0; padding: 0; border: 0 none; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; } img.alignleft { margin:5px 10px 10px 0; } img.alignright { margin:5px 0 10px 10px; } hr { background: #E6E6D2; color: #E6E6D2; clear: both; float: none; width: 100%; height: .1em; margin: 0 0 1.4em; border: none; } hr.space { height: 4em; } .clearer { clear:both; } /************************* HOLDERS ********************************/ .container { text-align: left; background: #fff; min-height: 100%; max-width: 1000px; padding-left: 20px; padding-right: 20px; margin: 0; margin: 0 auto; } .container2 { width: 100%; margin: 0 auto; text-align:left; } /************************* HEADER ********************************/ .blender { background: #eae0da; } #header { width: 100%; } #header .container { width: 980px; } #headline { float:left; margin:15px 0 20px 20px; font-size:16px; color:#a6a379; } #headline h1 { font-size:40px; line-height:40px; margin:0; color:#3e4b54; letter-spacing:-1px; } /************************* SUBSCRIBE START ********************************/ .subs { display:block; float:right; width:280px; } .subs a { margin:10px 0 0 0; padding:0 0 0 25px; height:20px; display:block; float:left; background:url(images/rss.gif) left top no-repeat; } /************************* SUBSCRIBE END ********************************/ /************************* PAGES MENU START ********************************/ .topline { height:40px; background:#3E4B54; } ul.menu { width:980px; list-style-type: none; margin: 0px auto; padding:0; font-weight:normal; height:40px; } ul.menu li.page_item { float: left; display: inline; font-size: 18px; margin:0 1px 0 0; padding:0; text-transform:uppercase; } ul.menu li.page_item a { color:#fff!important; display: block; float:left; text-decoration: none; padding:6px 20px 5px 20px; } ul.menu li.page_item a:hover { color: #3e4b54!important; text-decoration:none; background:#E6E2D9; } ul.menu li.current_page_item a { color: #3e4b54!important; text-decoration:none; background:#E6E2D9; } /************************* PAGES MENU END ********************************/ /* Search */ #searchform { padding:0; margin:10px 0 0 0; display:block; float:left; clear:both; width:250px; height:33px; font-size:15px; color:#003e4f; } input#s { width: 240px; float:left; margin:5px 7px 0 0; padding:4px 5px 6px 5px; font-family: Verdana, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif; border:none; font-size:14px; background:#fff; color:white; } /************************* CONTENT PACKER ********************************/ #leftcolumn, #rightcolumn { margin:0; } #leftcolumn { float: left; width: 70%; padding:0; } #leftcolumn_top { height:6px; margin-bottom:15px; } #leftcolumn_bot { height:6px; margin-top:30px; } #rightcolumn { float: right; width: 29%; margin:0; } .sidebar_left { display:none; } /************************* CONTENT START ********************************/ .title { margin:0; clear:both; } .title h2 { color: #3e4b54; } .title h2 a { color: #3e4b54!important; text-decoration: none; } .title h2 a:hover { color: #3e4b54!important; text-decoration: none; border-bottom:1px dotted #3e4b54!important; } .date { color:#555555; margin-bottom:10px; } .post { padding: 0; margin:0 23px 10px 20px; clear:both; } .post p { padding:0; margin:0; } .postdata { margin: 10px 0 20px 0; padding:0 10px 3px 10px; float:left; font-size:12px; background:#eae0da; color:#000; width:97%; } a.more-link { display:block; clear:both; color:#a6a379; margin:10px 0 20px 0; width:135px; } a:hover.more-link { color:#a6a379; } #related h3, h3#comments { padding: 8px 0 5px 0; border-bottom:1px dotted #999; } .cmd-avatar { clear: none; display: inline; float: right; margin: 0px; } /************************* CONTENT END ********************************/ /************************* SIDEBAR MAINS START ********************************/ ul.sidebar { list-style-type: none; margin: 0 0 0px 0; padding: 0; } .sidebar li { padding:0; margin:0; } li.widget ul { list-style-type: none; margin: 0 0 30px 0; padding: 0; font-size:15px; } .sidebar ul li { margin: 5px 0 5px 0; } .sidebar .children { margin: 0 0 10px 10px; } .sidebar h2 { letter-spacing:-1px; } .sidebar a { color: #000!important; padding:4px 5px 6px 15px; font-size:14px; background-position:0 6px; } .sidebar a:hover { color:#555555!important; background-position:0 6px; } /************************* SIDEBAR MAINS END ********************************/ #tag_cloud { display:block; margin-bottom:30px; float:left; clear:both; width:100%; } ul#recentcomments { width:210px; } ul#recentcomments li { background-position:0 5px; padding-left:15px; } #recentcomments a { background:none; padding-left:0; } #recentcomments a:hover { background:none } #tag_cloud a { margin-right:5px; } /************************* COMMENTS AREA START ********************************/ .commentlist { margin: 0; padding:0; list-style-type:none; } .commentlist p { padding:5px; margin:0; } .komentar { margin:0; padding:0; } .commentlist a { border-bottom:1px dotted; } .commentlist a:hover { text-decoration:none; border-bottom:none; } .commentlist .body { padding: 0; margin:0; overflow: hidden; float:right; width:580px; display:block; text-align:justify; color:#45322f; } .commentlist .body .body-author { padding: 0; margin:0; overflow: hidden; color:#555555; float:left; display:block; } .commentlist .body p { float:left; padding-top:0; } .commentlist li { width: 100%; padding: 0 0 5px 0; clear:both; display:block; float:left; font-size:11px; } .commentlist li .top { color: #45322f; padding: 0; margin:0; width:575px; float:right; font-weight: bold; } .commentlist li .top a { color: #555555; } .commentlist li .top span { font-size: 0.9em; font-weight: 400; color:#505e66; } .gravatar { height:70px; width:60px; float:left; margin:0; } img.avatar { margin:0; height:60px; width:60px; padding:2px; border:1px solid #E5E1DE; } .theform { padding: 1.5em 0 2em; } .theform label { font-size: 0.9em; vertical-align: middle; } #remember, #forget, #txpCommentHelpLink { margin-left: 2em; } #commentform { padding:0; } #commentform input:focus, #commentform textarea:focus { border: 1px solid #CECABE; background: white; } .comment_input { vertical-align: middle; width: 260px; border: 1px solid #ffffff; background: #ffffff; padding: 0.3em; margin-right: 5px; margin-bottom:10px; } .message_input { font-size: 1em; width: 98%; height: 200px; border: 1px solid #CECABE; background: #ffffff; margin-top: 0.2em; margin-bottom:10px; padding: 0.3em; } .commentlist_error { color: #c00; } .button { background: #fff; width:75px; padding:5px 0 5px 0; border:1px solid #CECABE; color:#6000; font-weight:bold; text-transform:uppercase; font-size:12px; cursor:pointer; } .button:hover { background: #555555; color:white; cursor:pointer; } #commentform .button:focus { background: #cccccc; color:white; cursor:pointer; border:1px solid #CECABE; } /************************* COMMENTS AREA END ********************************/ /************************* FOOTER START ********************************/ #footer { width: 992px; margin:0px auto; padding:10px 0 20px 0; display: block; } #footer .container { padding:0; width:950px; } .copyright { float:left; color:#a4a093; font-size:11px; margin-bottom:10px; } #footer .credits { float:left; color:#a4a093; } #footer .credits p { float:left; font-size:12px; margin:6px 5px 0 0; } #footer .credits a, #footer .credits a:visited { text-decoration:none; } a.wordpress { display:block; float:left; width:25px; height:25px; background:url(images/wordpress.gif) no-repeat; color:#ccc!important; padding-left:26px; line-height:30px; } a:hover.wordpress { background:url(images/wordpress.gif) no-repeat 0 100%; color:#000!important; } /************************* FOOTER END ********************************/ /*************** SOCIAL LINKS ************************/ .inside_subpost { display:block; clear:both; margin:30px 23px 30px 20px; padding:0; } .related_rss_icon { float:left; background:url(images/rss.gif) no-repeat; width:25px; height:20px; border-bottom:none; } .related_rss { padding:0; margin:0 0 20px 0; font-size:18px; font-weight:normal; border-bottom:none; } .related_rss a, .related_rss a:visited { border-bottom:1px dotted; } .related_rss a:hover { border-bottom:none; text-decoration:none; } .social { margin:0; padding:0; float:left; margin-right:30px; } /*************** END SOCIAL LINKS ************************/ #calendar_wrap { margin:0px auto; width:210px; margin-bottom:30px; clear:both; } #calendar_wrap a { padding: 3px 0px; background:none } #calendar_wrap table { width: 210px; border: solid 1px #ccc; background:#f7f7f7} #calendar_wrap caption { padding: 5px 0px; width: 210px; color:#585449; font-size:14px; font-weight:bold; } #calendar_wrap table th { text-align: center; letter-spacing: -1px; padding: 0px; font-size:12px; color:#585449; height:30px; } #calendar_wrap table td { text-align: center; border: solid 1px #ccc; padding: 3px; font-size: 12px; color:#585449} #calendar_wrap table td a { font-size: 12px; font-weight:bold;} #calendar_wrap table td a:hover { color:#9CC318; font-weight:bold; border:none; } /* Page Navigation +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .pageNav { padding: 5px 0 0 0; margin:30px 23px 20px 20px; height:30px; font-size:15px; } .pageNav a, .pageNav a:visited { display:block; float:left; text-align:center; line-height:25px; height:25px; width:25px; color:#3A3A3A; text-decoration:none; } .pageNav a:hover { text-decoration: none; color:#a6a379; border-bottom:1px dashed #a6a379; } .pageNav span { display:block; float:left; text-align:center; line-height:25px; height:25px; width:130px; color:#333;} .pageNav .on { display:block; float:left; text-align:center; line-height:25px; height:25px; width:25px; color:#a6a379; } .dotts {width:25px; text-align:center; display:block; float:left;} .pageNav a.lastpage {color: #3a3a3a;width:35px;} .pageNav a:hover.lastpage {color: #222; width:35px;} #singleNav { margin:20px; } .previous { float:left; } .next { float:right; } .list404-table { font-size:17px; } ul.list404, ul.list404 li ul { list-style-type:none; font-size:14px; margin:10px 20px 20px 20px; } ul.list404 li a { background-position:0 4px; padding-left:20px; } ul.list404 li a:hover { background-position:0 4px; } I have a pretty awesome looking wordpress theme. I was wondering if someone could guide me through making a small change to it though! Firstly, here is the page now: theangrywalrus.com/blog What I would like to do, is take the black bar at the top and stretch it so it goes under the title of my site, and ends near where the 'content' starts. Then I'd like to move the gradient bg image down so it starts under where the black bar ends. So far, using the firefox web dev plugin, I've only been able to get the black bar/gradient working in one part of the page, where the content is. How can I get it to be how I want it? Could someone show me how to get this done please? I'd really appreciate some help. My style sheet is he theangrywalrus.com/blog/wp-content/themes/simpla/style.css I'm trying to edit a free Wordpress theme called "Imprezz 1.3" so that the date of each post is displayed about 20 pixels more to the left. Here's a picture of what I'm going for: i.imgur.com/l2EyM.png I've tried to mess with positioning and z-index in the stylesheet for .postTime, .postDay & .postEra without much success (I get the div to move but the part that's supposed to be 'sticking out' of the page doesn't show). Any help would be much appreciated! Thx I know this probably has a really simple answer but how do I make it so the sidebar is on the right side of the content box on a WordPress theme? Here is what it looks like right now: http://reptilenewsstation.1sthoster.com/ The sidebar is below the content box and I want it to be on the right side of the content box. I know the theme sucks right now but this is my first WordPress theme and I want to set everything up in the correct places before I start getting into really styling it. Hey Guys, I hope this is in the right forum. I've purchased a wordpress theme and it contains a video background using JWPlayer. Part of the JWPlayer functionality is that it allows play/pause control when hovering over the video and a "hover hand" replaces the regular cursor. I'd like the cursor to stay the same at all times, and remove the ability to play/pause the video. So it's essentially just a regular looking background that's a video. I've done some searching online and it appears this is possible by placing a transparent div frame over the entire page with a cooresponding z index. Seems easy enough, but I'm not very familiar with CSS and the more I look online for the best way to go about this, the more confused and lost I'm getting. Can anybody shed some light on the best way to go about this? Certainly it must be quite straightforward? Someone just pointed this out on a site I'm working on. Any help would be appreciated. collettforcongress/com Works in Firefox (of course), doesn't work in IE8. Let the slider move one slide (the featured story box). Hello All, As this is my first post on the forum, thank you in advance. Although I'm just a beginner with HTML/CSS I will do my best to give back to the community in the future. Currently I am pulling my hair out over what should be straight forward. I am working on a Wordpress site under the 2011 theme, trying to create a row of text made up of an unordered list with the first li left aligned, the second li centered, and the third li right aligned. Unfortunately I cannot get my list to display inline and after researching online and trying for hours I am no closer. I'm using a class because I am going to repeat this multiple times on the page but that shouldn't matter. I'm running OSX 10.6.8 on Safari. I look forward to discovering what I'm doing wrong! Thanks, Ross Hi, I am looking to align the links in the top right hand corner of my blog fully to the right but at the moment they are moved to the left slightly can anyone help with this? www dot gadgetwire dot co dot uk Thanks Hello there, I'm looking for some assistance in coding the CSS for a plugin I installed called Participants Database. It's excatly what I need to record a survey for buyers. However I'm not very savvy in CSS, in fact I had someone else style my website. However I'm trying to add a page and make it look identical to one of my existing pages. This page has the correct style: monkeybreadbooks.com/contact/ This page is the new database page that is not styled: monkeybreadbooks.com/about/survey/ Basically I'm trying to mimic the appearance of the contact page to match the new survey page. Can someone help me out? Thanks Let me know if you need more information. I'm unsure of which .css files contain the code I need to edit, that's why I'm asking for help. Hi, For some reason my website is not showing in IE8, just a blank white screen?. I've checked the source code, and above the doctype declaration, a comment is appearing Code: <!-- Include the header --> My website It is working fine in other browsers, but not IE8. I cannot see where this comment is comming from though?. the code for my header.php is : here I'm new to this site and I'm hope someone is kind enough to help with this CSS issue. I'm running a blog on the wordpress platform usig Coraline theme, I tweaked the CSS style sheet to add a background and opacity for the content container. The problem is with margins inside the content container, when I add padding larger than 0PX mybsidebars move to bottom of the site. I've tried a lot of changes but nothing seems to work. I've attached part of the content container code below and thanks in advance. container { clear: both; margin: 0 auto; opacity: 0.978; } #content-container { background:#E5E5E5; width: 100%; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } #main-sidebars { max-width: 450px; width: 45.5%; } #feature { width: 100%; float: left; } #primary, #secondary { overflow: visible; } #footer { clear: both; width: 100%; } Above is the code for the options I'm using for the site. The sites name is hhrapinfo dot com. I'm new to wordpress and have coded with CSS before but this is doing my nut in! So any help would be very helpful I'm changing and existing template to suit a customer. I have 3 images as the header to the page on float left and the other right, the 3rd is in the center. In firefox and every other normal browser its displaying correctly, rounded corners etc. but in IE the main bit of the page is below the floated images and i cannot seem to make the clear:none hack in IE work. the site is occasionsbyjennifer .co .uk (wouldn't let me add a url) If you can have a look and suggest some ideas to try as i'm bleeding fed up with this. and because i haven't coded the full site etc i think i must be missing something obvious. thanks. I'm using Wordpress 3.0.4 with the WP Remix theme 3.0 for my website. URL: joelwyant.com I want to be able to add a page to the site during the Christmas season. To make it standout more, I'd like that specific page to always have a different background color in the navbar than the other "normal" pages. I have the CSS for the navbar style, but I don't know where to begin to make it specific to just that one page. In other words, how do I create CSS that overides the normal navbar background color for just that one specific page? Any thoughts, suggestions, or guidance is much appreciated! Joel Sorry to ask but I cannnnnnot find this answer. I know it can be done too... Ok, I have a wordpress site and every time I add in custom CSS with a "background-image" TAG It works locally but not when I plug it to the live site. The graphics are a navigation bar thats it... here is the code Code: @charset "utf-8"; /* CSS Document */ a span { display: none; } #container #nav { background-image: url(../images/nav.png); height: 30px; width: 926px; margin-left: 100px; } #container #nav li { float: left; list-style-type: none; } a.main_nav { display: block; height: 30px; z-index: 1; } a.main_nav:hover { background-position: 0px -30px; } #nav_1 { background-image: url(DIRECT WEB LOCATION OF IMAGE); width: 133px; float: left; padding-left: 5px; background-repeat:no-repeat; } #nav_2 { background-image: url(DIRECT WEB LOCATION OF IMAGE); width: 182px; float: left; padding-left: 10px; background-repeat:no-repeat; } #nav_3 { background-image: url(DIRECT WEB LOCATION OF IMAGE); width: 160px; float: left; padding-left: 5px; background-repeat:no-repeat; } #nav_4 { background-image: url(DIRECT WEB LOCATION OF IMAGE); width: 148px; float: left; padding-left: 5px; background-repeat:no-repeat; } #nav_5 { background-image: url(DIRECT WEB LOCATION OF IMAGE); width: 115px; float: left; padding-left: 5px; background-repeat:no-repeat; } #nav_6 { background-image: url(DIRECT WEB LOCATION OF IMAGE); width: 122px; float: left; padding-left: 5px; background-repeat:no-repeat; } #nav_7 { background-image: url(DIRECT WEB LOCATION OF IMAGE); width: 122px; float: left; padding-left: 5px; background-repeat:no-repeat; } and my HTML Code: <div id="nav"> <a href="" class="main_nav" id="nav_1"><span>button</span></a> <a href="" class="main_nav" id="nav_2"><span>button</span> </a> <a href="" class="main_nav" id="nav_3"><span>button</span> </a> <a href="" class="main_nav" id="nav_4"><span>button</span> </a> <a href="" class="main_nav" id="nav_5"><span>button</span> </a> <a href="" class="main_nav" id="nav_6"><span>button</span> </a> <a href="" class="main_nav" id="nav_7"><span>button</span> </a> <div class="clear"></div> </div> if anyone can help me understand why this does not work in WP that would be most gracious of you -Jordan I wish to use a wordpress header on vBulletin and for the most part it has worked. I have a couple issues though with staying logged in + the sub navigation bar. -Visually wise, it perfect on PC's....however it looks odd on my MAC. On MAC in "Safari" Code: http://i250.photobucket.com/albums/gg247/Rush23Hester/Screenshot2010-05-22at25823PM.png On MAC in "FireFox & Chrome : both looked like this" Code: http://i250.photobucket.com/albums/gg247/Rush23Hester/Screenshot2010-05-22at25823PM.png On PC's it "looks" perfect. As the sub navigation bar doesn't give a problem and it's lined up just fine. Any help? I am willing to pay to get this resolved. The style in question is Code: www.chicitysports.com/forum/?styleid=7 |