WordPress.org

Ready to get started?Download WordPress

Forums

css problem (windows ie/mozilla users) (12 posts)

  1. initials_es
    Member
    Posted 8 years ago #

    hello, i posted about this a week or so ago.. basically what is happening is the sidebar menu on my page is showing up at the top on a mac (using both firefox & safari), however it appears at the bottom of the screen when on a pc (using ie & firefox)

    http://waxidermy.com/index.php

    does anyone have any solutions to this problem? this is really frustrating..

  2. dherren
    Member
    Posted 8 years ago #

    I know this really isn't much help, but one thing you might want to do is to start addressing your validation problems. Your home page has 123 xhtml errors and won't validate as of the time of this reply.

  3. vkaryl
    Member
    Posted 8 years ago #

    dherren: it can only help! Many times cleaning up a validation mess will either fix the initial problem, or at least reduce the initial problem to a manageable situation.

  4. katie1
    Member
    Posted 8 years ago #

    Actually you posted your request a week ago, to be precise :)

    Did you do what skulled suggested when he replied to your initial request? Because I don't see your corresponding reply.

    http://wordpress.org/support/topic/56295?replies=11


    1. Check your widths in the CSS and make sure none of the posts are making any trouble.

    2. Check for un-closed containers in the (X)HTML code ..

    3. And perhaps you might want to validate your document a little better, that would help a lot in seeing what might be going wrong. You have a whopping 432 errors in your XHTML Strict DOCTYPE validation .. :D

    Validating your html helps a lot, believe me. If your page isn't coded correctly, then all the world's best css won't fix or even correct your problems.

    A single html page can only display what you code into it, hence why you MUST validate first. And, for the record, x/html is stuff like this...

    <body>
    <div id="rap">
    <div id="entry">
    </div>
    </div>
    </div>

    it is also stuff like this...

    <span>,[p], <blockquote>, <img src>

    I strongly recommend, for ease of design/validating, that if you don't already have FireFox downloaded on your computer, then do so.

    It's free and it makes checking a battery of stuff dead easy. You can even do it - corrections and design changes -on the fly.

    You don't have to like FF, but it is the only browser, truly, that allows minute changes without being overly complex.

    I use all five browsers (FF, Moz, Opera, IE6 & Net) to check my stuff as I go along. I use to have a preference for IE & Opera, but I've since been converted to FF because it is easy to use.

  5. initials_es
    Member
    Posted 8 years ago #

    i'm sorry, i must sound like a moron but how do i 'validate' the page? i clicked on that 'valid xhtml' link and it just showed like 6000 errors on the page.

    this is just annoying that it works on safari but not on firefox or ie. anyone else have any other suggestions?

  6. katie1
    Member
    Posted 8 years ago #

    You can do it two ways.

    Locally, but using their file upload service.

    Copy your theme's style.css and save it to your desktop for ease of upload and corrections, then use the "upload" button, browsing to your parked style.css on your desktop.

    or

    You can paste the URL of your website: yoursite.com or yoursite.com/blog or ../wordpress into the URL validation part, and W3C.org will validate your style.css automatically.

    Either scenerio, W3C will render all the errors on an output page, and you then have a choice as to further displaying "Source Output" or something like that, which will show you where, exactly, in your stylesheet the corresponding errors lurk.

    Then, you painstakingly make the necessary corrections to your stylesheet (desktop or admin/presentation/theme-editor/style.css) until you have no errors - warnings are ok. It's the errors you must remove, in order to have vaild CSS.

    Once W3C has confirmed an error free stylesheet, copy/paste your new error free stylesheet into your existing theme's style.css, being particularly careful not to remove or alter the author's /*blah*/ particulars.

    Next Step: Validate HTML

    You have to validate your html output - this is done by copy/pasting the URL for each individual page of your new website into their HTML validation URL section, one page at a time, and again away you go.

    W3C supports valid html, and you should too. If errors come up, read their report and make the necessary changes to your theme's.php templates and/or 'inline' styles you've applied in individual post content, then re-validate again, and again, every page until all html errors have gone.

    Hope this answers your question

    Good luck.

  7. initials_es
    Member
    Posted 8 years ago #

    thanks for the help.

    what i did was install the 'goldengrey' theme again and basically started to redesign it all over again. i now only have 8 errors. wooh. haha

    http://waxidermy.com/category/electronic/

    ok, ive been at this for the past few hours and cant figure the spacing out. its driving me crazy.

    the header is 700x250px. i want the top menu to be 700px as well, but when i do that, thats where everything screws up and the sidebar goes to the bottom of the page.

    basically i want the entire thing to be 700px wide. (the "post" area 520px and the sidebar 180px)

    clearly it is a css issue and not something within a post itself or a template that is screwing up the spacing..

    if anyone else could help out i would greatly appreciate it.. trying to get this up and running by the end of this week!

  8. diretribe
    Member
    Posted 8 years ago #

    From experience even matching up the totals does not always work. For example, a 700px width page, two columns one 500px, one 200px wide should fit together right? Right, but it might not.

    Things that have worked in the past is shrinking one element - e.g. the main column or the sidebar - then using margin to shift the elements over.

    It will take some fiddling. A useful way to do this is add to the CSS for a particular element:

    border: 1px solid #f00;

    Which will draw a nice big red box around your element, making it much easier to see where the edges are lying. If developing in Firefox the following extension is very useful:

    Web Developer Extensions 1.0

    It will draw lines around things, highlight errors & it even does the validation submission for you. Good luck.

  9. katie1
    Member
    Posted 8 years ago #

    Try:

    #minitabs {
    margin: 0;
    width:730px; /*FF*/
    padding: 10px 0 20px 0px;
    background: #9FA19E;
    }

    * html #minitabs {width:733px;} /*IE WIN*/

    and see how you go. You may have to slightly tweaking your width margins, to render properly in FF & IE6, but it looks ok from my end.

  10. moshu
    Member
    Posted 8 years ago #

    want the entire thing to be 700px wide. (the "post" area 520px and the sidebar 180px)

    Some basics: If the post area and sidebar have borders, margins/paddings ==> all those has to be added for IE.
    Example: If the sidebar has a right/left border of 1 px = 2px in total, its width is already 182px (for IE) which means it will not fit in the 700px container...
    Read more: http://tantek.com/CSS/Examples/boxmodelhack.html
    (or Google for box model)

  11. initials_es
    Member
    Posted 8 years ago #

    hey i think i got it!

    http://waxidermy.com/category/comedy/

    one last thing -- how do i get the white background in the main post section to stretch all the way to the bottom of the page?

  12. vkaryl
    Member
    Posted 8 years ago #

    It will probably stretch normally when you have more posts. To force it before then, you can use a white graphic the width of the post area and 10px high as the background for whatever that section of the page is named. It's called the "faux column" technique; see a full exposition of it here: http://www.communitymx.com/content/article.cfm?cid=AFC58. A google search for faux columns will provide way more than you want to know about it....

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.