WordPress.org

1. dd7268
   Member
   Posted 10 months ago #

   I have recently made some changes to Stylesheet in the hopes of centering my logo above my flash banner. I achieved this in Firefox, but Internet Explorer and Safari do not render the same way. Can anyone shed some light on what I might have done wrong here? Thank you very much.
   http://www.danieldunnphotography.com is the site.

2. samboll
   moderator
   Posted 10 months ago #

   coding errors are usually a good place to start

3. dd7268
   Member
   Posted 10 months ago #

   samboll, where it states position where error was detected, does that need to be deleted to correct the issue? I added certain items that show as errors to get the logo centered in the header. Why would this render properly in Firefox but not IE or Safari? As well, how did you get the code errors? Can I retrieve those on my site? Thank you very much.

4. richarduk
   Member
   Posted 10 months ago #

   Try this - in the body styl put text-align:center eg. body {text-align:center;}

   IE can be crap at centering - this should center divs, whilst for FF use margin-left:auto and margin-right:auto on the divs

   Downside is that you then have to specify text-align left for everything e.g. H2, p

   Not sure offhand if the doctypes make a difference - usually in quirks mode anything can happen.

5. dd7268
   Member
   Posted 10 months ago #

   Richarduk,
   I am a complete newb at this, but thank you very much for the help.
   Here is where I made my changes to the blog title and that centered the logo for me. The original height and width were in the 300's and created a smaller space for my logo. But once I made this change in the theme editor, nothing shows up correctly.

   h1#blog-title {
   float: left; /*logo on left, set to right to switch, also edit #ppt_topnav below*/
   position: relative;
   height: 265px; /*height of logo*/
   width: 700px; /* smaller if narrower logo - gives links more room */
   overflow: hidden;

6. dd7268
   Member
   Posted 10 months ago #

   one other thing. When I bring the original settings back to the blog, IE does not display any posts, but FF does. What have I done here?

7. kmessinger
   Member
   Posted 10 months ago #

   Did NetRivet do your original site?
   They (or whom ever did) should upgrade you to the current version and deliver a site that will validate, here http://validator.w3.org/ which is the link samboll gave you.

   Why I won't shoot wedding photos - I don't know how.
   If you are completely new at this, don't learn by messing up your commercial site. Set-up another directory, like hmmm, practiceblog, install the default WP and learn there.

   Errors.
   Your site has quite a few but remember they are cascading, so very often when you correct one, many will go away. This doesn't mean you should try to correct them if you are just guessing.

8. richarduk
   Member
   Posted 10 months ago #

   Try this: replace the following
   

   <center><div id="header">
   		<img src="http://danieldunnphotography.com/wp-content/themes/prophoto/images/header-logo.jpg" style="display:none;" alt="" />
   		<h1 id="blog-title"><a href="http://danieldunnphotography.com/" title="Daniel Dunn Photography" rel="home"></a><span></span>Daniel Dunn Photography</h1>

   with
   

   <div id="header">
   		<img src="http://danieldunnphotography.com/wp-content/themes/prophoto/images/header-logo.jpg" style="display:none;" alt="" />
   <h1 id="blog-title"><a href="http://danieldunnphotography.com/" title="Daniel Dunn Photography" rel="home">Daniel Dunn Photography</a></h1>

   Then remove the </center> a little further down the page

   In your stylesheet create

   body {text-align:center;}

   Find div#header
   I'm not sure why you're floating the h1#blog-title to the left (rather than text-align:left) but mine is not to reason why.
   Make sure that for the div#header in the stylesheet there is an overflow:auto which prevents all contained elements flying off all over the place (breaking out of their box)

   Also remove the extr = from the following
   

   <li><a></a></li>
   <li><a href="blank"></a></li>

9. richarduk
   Member
   Posted 10 months ago #

   Hope there aren't duplicates of this post, but they're getting swallowed up.

   last try

   Try this: replace the following
   

   <center><div id="header">
   		<img src="http://danieldunnphotography.com/wp-content/themes/prophoto/images/header-logo.jpg" style="display:none;" alt="" />
   		<h1 id="blog-title"><a href="http://danieldunnphotography.com/" title="Daniel Dunn Photography" rel="home"></a><span></span>Daniel Dunn Photography</h1>

   with
   

   <div id="header">
   		<img src="http://danieldunnphotography.com/wp-content/themes/prophoto/images/header-logo.jpg" style="display:none;" alt="" />
   <h1 id="blog-title"><a href="http://danieldunnphotography.com/" title="Daniel Dunn Photography" rel="home">Daniel Dunn Photography</a></h1>

   Then remove the </center> a little further down the page

   In your stylesheet create

   body {text-align:center;}

   Find div#header
   I'm not sure why you're floating the h1#blog-title to the left (rather than text-align:left) but mine is not to reason why.
   Make sure that for the div#header in the stylesheet there is an overflow:auto which prevents all contained elements flying off all over the place (breaking out of their box)

   Yes, as kmessinger mentions, you have multiple errors and the first thing to do is to fix them

10. dd7268
    Member
    Posted 10 months ago #

    Thank you for all the responses. I know it's probably terrible coding on my part, but I made my site the way i want it to look on FF. Unfortunately on IE it renders totally different and doesn't show posts. I see what you are all referring to with my errors and i know I need to upgrade, but what bonehead mistake did i do to make one browser work and others not work?

11. richarduk
    Member
    Posted 10 months ago #

    What you need to do is get the html validator plugin for firefox, which will show you all your mistakes when you view source.

    If you're doing this yourself, then you're doing fine - it's a learning curve, and boy! does it eat into your time.

    But it's the only way if you want it to look exactly how you want it (unless you're very rich, in which case it's not the only way - but you then have to spend a lot of time finding someone reliable who's going to be around long-term etc.)

    The usual reason for not showing up in nasty old IE is the wrong doctype - put a strict doctype declaration at the top of the page, and then you can't go wrong provided you then go through the page removing all errors. You only need one error for it to cascade down, as mentioned above.

    Strict xhtml usually simply has /> added at the end of it and isn't in any way difficult e.g
    

    <img src="blah.jpg" />
    <div> another blah </div>
    <h1> more blah </h1>

    For example, one missing end div e.g no </div> will usually destroy the whole page as the browser tries to figure out what the heck is going on.

    Buy html, xhrml and css by Elizabeth Castro, which is the most useful book I've ever found on html. I use it all the time and I've been learning this stuff for years.

Reply

You must log in to post.