CSS change is overwritten by a local style in HTML that i need to change.. help!

  • Author
    Posts
  • #369862

    peekabu9
    Member

    Hi – I am currently editing the CSS for my blog template but am noticing in the page source that a particular CSS style is overwritten by a local style directly in the HTML . I need to change this because it is throwing off my layout. the code is this:

    <div id=”content” class=”narrowcolumn” style=”margin:0px; “>

    the ‘style=”margin:0px;’ needs to be removed. can you please help me with this?

    http://peekabublog.wordpress.com/?csspreview=true
    (click on one the the blog topics on the right to see the problem.)

    thanks!

    The blog I need help with is peekabublog.wordpress.com.

    #370064

    Go to “narrowcolumn” in the CSS and change it to what you want. The div is pulling from that selector in the CSS.

    #370066

    I looked at your sourcecode, and find nowhere that this occurs:

    <div id="content" class="narrowcolumn" style="margin:0px; ">

    #370085

    peekabu9
    Member

    from the home page of my blog, click on one of the blogs on the right hand side, for example ‘Miss California‚Äôs Political (and Pubic) Phooey!’ . On the page that comes up, you will see that the window on the right side is too far up and right. look at the source code of this page and you will see on line 156: <div id=”content” class=”narrowcolumn” style=”margin:0px; “>. I have in fact changed ‘narrowcolumn’ and it has worked for the homepage, but on this subpage, because ‘narrowcolumn’ is overwritten by a local style style=”margin:0px;’ it doesn’t apply the margin settings i make to ‘narrowcolumn’.

    #370096

    In element.style in your CSS set margin-right to 15px and margin-top to 30px.

    #370098

    aw1923
    Member

    In general settings did you enter in a blog title and description??
    When I tested this out on my blog it seems the main reason is because you don’t have a header title. I recommend going to general settings and entering something in the blog title and description fields and then replace the following CSS classes and make adjustments from there,

    #header a {
    font-size:2em;
    color:transparent;
    margin-left:220px;
    }
    #blog_description {
    font-size:1.2em;
    color:transparent;
    margin-left:220px;
    }

    HTH

    #370099

    My opinion (and it and a couple buck will get you a bus ride across town) is that the position of the content section on the single post page should not rely on whether you have a title defined in settings > general or not. My view is that is a shortcoming in the CSS.

    #370113

    aw1923
    Member

    I agree too, but I changed the CSS and once everything was right on the post page, if went wrong on the front page of the blog. Theres actually a lot of things wrong in the CSS it has a lot to do with the header including the fact that its in the page class instead of the header class. This is just the quickest fix to stop the column from overlapping on the header. I was actually going to recommend starting over or designing a new theme that already allows space for the header you want to use.

    #370138

    peekabu9
    Member

    I tried searching in the CSS for element.style or just element and the search found no results. thesacredpath, where did you see this? so is there no way to fix this unless i remove my header image and just put text in the header and blog description fields?

    #370139

    Hmmm, it shows up with firebug, but it isn’t actually in the CSS. Interesting.

    Add the following to your CSS

    element.style {
    margin-right:15px;
    margin-top:30px;
    }

    And see if that does not fix it for you.

    #370143

    peekabu9
    Member

    Hi – I tried adding that style to the CSS and it didnt seem to help.. where do we go from here? It seems odd that the local style ‘style=”margin:0px;’ simply cant be deleted.. is this a possibility?

    #370144

    Did you try doing what aw1923 suggested?

    #370145

    peekabu9
    Member

    that would mean me losing my header logo graphic , right? :(

    #370146

    No. The header text will overlay the graphic, but I believe where she has color:transparent; that takes care of the issue and the text will not be visible over the header.

    #370156

    peekabu9
    Member

    I tried changing ‘header a’ as well as a few styles associated with ‘h1’ to color:transparent, and I also added the ‘blog_description’ style to the CSS because it was not previously in there. unfortunately you can still see the header and blog description

    #header a {
    font-size:2em;
    color:transparent;
    margin-left:220px;
    }
    #blog_description {
    font-size:1.2em;
    color:transparent;
    margin-left:220px;
    }

    #370158

    peekabu9
    Member

    I’ve also looked through all of the CSS to find any style with that blue color that the header is showing up in and I am not finding any style referencing that color.. its as if there are styles I cannot access through this one CSS file

    #370160

    aw1923
    Member

    I can’t even see the header text or description in FireFox.
    The only time you can see the header and description is if you move your cursor over the text and highlight it.

    #370161

    peekabu9
    Member

    weird.. I’m in Firefox and can see them both

    #370162

    aw1923
    Member

    Well, I’d recommend playing around with it or design using a theme thats more workable with a header especially since the “White as Milk” theme doesn’t originally allow for a custom header image.

    #370170

    peekabu9
    Member

    fixed it! I removed all side margin settings from both ‘sidebar’ and ‘content’ and instead applied it to ‘page’.. whew!

The topic ‘CSS change is overwritten by a local style in HTML that i need to change.. help!’ is closed to new replies.