Elaborated CSS questions with example

  • Hi guys,
    I have design problems with my blog
    https://www.revelation-of-silence.com

    I will post the CSS code behind after my text.

    1. In the internet explorer, the page is centered, in firefox, it is on the left border. I had this bug several times now and always had to use the original CSS and copy my changes into it – it worked out fine again.
    Then I started changing things very carefully – and after changing this part of code

    #masthead {
    letter-spacing: 0.2em;
    margin: 8px 8px 0 8px;
    padding: 0 10px 10px 60px;
    font: normal 100% 'Lucida Grande', 'Lucida Sans Unicode',

    to 0 10px 10px 40px, the bug appeared. I changed the code back, but still it does not work out.
    I replicated the bug several times, and wanted to ask if you can help me out with this.

    2. The internet explorer does not put a margin at the bottom of the page, the fire fox does. It should be this part of code:

    #farouter {
    background: #000000;
    width: 760px;
    border: 1px solid #545454;
    margin: 20px 0 20px 0;

    But it does not work out properly with the IE. Any suggestions?

    3. Right navigation, pages, subpages (like black and white, photoshop, dsa or vampire) – I have no idea how to edit them. I want them margined left, but I do not understand how to edit them in the sourcecode.
    Could be this part of code, but it is not working (does not change everything if I put it out of the code):
    #nav ul ul ul.children {
    font-size: 100%;
    padding-left: 15px;

    }

    Would be happy about your help. Tried to fix the problems for several days now, do not know what to do.

    Thank you guys ??
    Eiko

    here the whole code:

    [Moderated – please do not post huge chunks of code. We can see the code we need if we have your url]

Viewing 15 replies - 1 through 15 (of 20 total)

  • Wow, this is way more information than we need. Just for future references, the Internet browser, Firefox, has Web Development Tools that all us power user volunteers to see ALL of your HTML and CSS so we ask that you only post the effected areas – little bits of information – to help us, not the whole thing.

    First thing, Eiko, you need to validate your page as there are some problems there that could be hurting your end results. If you aren’t familiar with how validation works, there is a little primer in the WordPress Codex article on validation.

    Once that is cleaned up, then we can concentrate on your CSS.

    By the way, it’s very hard to see if anything is centered or not as the grey text on black makes everything very hard to see.

    I recommend that you download Firefox (it’s free – link at the bottom of this screen) and install the Web Developer Extension tools. There is a feature called Edit CSS that allows you to edit the CSS associated with a page while looking at the page. You can see the changes right as you make modifications – right there on the screen. It’s a fabulous way to design a web page as you watch.

    No problem. You have a comment inside your CSS rule (second one down). Plus: -When Geeksmakemehot released that theme she inadvertently left in some keywords and stuff from an earlier version. You should delete them from the meta.

    Thread Starter Torvon

    (@torvon)

    @ Lorelle: Wow, thanks for the fast answer. I do have Firefox, though I did not know about the extension. And my problem is that the whole thing there ?? is on the left border, whereas in the internet explorer it is in the middle. I will work on the colors, my monitor seems to display things fairly bright – I can see it very well.

    @ Root: There are many comments – are there problems with comments within { … } tags?
    And I have problems with deleting old code, because I do not exactly know what is good for what :-). Trying to check this out!

    The comment in the CSS is the *IE hack Part 2* It has worked its way inside the bracket. The keywords are in index.php under meta keywords. Just delete all the words which follow.

    Thread Starter Torvon

    (@torvon)

    Heyho, I did most of the comments INTO brackets, so did the author of this theme ?? – I did not know there is a problem with that.

    @ Validation:
    https://validator.w3.org/check?verbose=1&uri=http%3A//www.revelation-of-silence.com/
    I do not understand where to find most of the code, to be honestly. Most of it is in none of the files I can edit via WP (which means it is in none of the *php files). Where can I find it?

    In the CSS

    Instead of <br> you should use <br /> to validate in XHMTL 1.0.

    Thread Starter Torvon

    (@torvon)

    <li id="linkcat-1"><h4><br>blogs</h4>
    this is the first one to validate – and it is neither in the php files nor in the css file. It is a subcategory of links, which seems to be generated, but I do not know where to read it out.
    In the php file regarding links, there is nothing written about the submenues as far as I see.

    Thread Starter Torvon

    (@torvon)

    Thx Moshu – that cleared many valid. problems ??

    Look at the php files within your theme’s folder. You will find the sidebar list of links in the sidebar.php template file.

    Go through slowly look for specific areas that match in the different files. Each template file covers a specific area so if the problem is in the sidebar, it would be in the sidebar.php file, if in the header, in the header.php file, and so on. Slow down and be patient as you work through it.

    Thread Starter Torvon

    (@torvon)

    This Page Is Valid XHTML 1.0 Transitional!

    Had to change 10 br tags – now it’s validated.

    Still have the problems mentioned above ?? … though I have validated and killed all the comments within the code.

    Thread Starter Torvon

    (@torvon)

    *bump*
    Can anyone help me out with this? Just look at the first posting, questions are not yet answered.
    If any questions occur (I am not a native speaker, and my “programmers-English” is rather bad), feel free to write me. I will try to explain my problems better, if anything is unclear.

    Torvon,
    Do you want the layout centered or to the left?

    Adding margin-left: auto; margin-right: auto; after the margin: 20px 0 20px 0; in #farouter {} (stylesheet) should center the layout in FF/Mozilla. margin: 20px auto 20px auto; could be valid too

    Thread Starter Torvon

    (@torvon)

    I want it centerd, Kiddeath91. I’ll try this, Minna :-), thx.

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Elaborated CSS questions with example’ is closed to new replies.