WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] HTML/CSS Conflict? (10 posts)

  1. stonegauge
    Member
    Posted 7 years ago #

    I'm currently working on a blog theme for a sports site (www.fanhome.com) that mixes a CSS version of the header that can be found on that site, and a wordpress body.

    The Hybrid verison of this can be found at http://css.boltsmag.com

    So anyway, the theme was going to be tweaked on our wordpress install for FanHome until I noticed an error taking place in Firefox -- there is a link nav menu in the header (baseball, basketball, football, etc graphic links) that should have active links to those sections of the forums we operate. Yet those links (simple HTML) aren't working. They are working fine in IE, and off WordPress (on a Vbulletin testing forum( they are working OK with both browsers...

    I'm trying to gauge what's the problem. The CSS header tags are totally unique from the CSS tags for wordpress (and the only common tag they had, has a new name -- "container".

    Any help appreciated...

  2. stonegauge
    Member
    Posted 7 years ago #

    Lemme try to follow this up with the HTML code fromt eh section that is having problems:

    <div id="topnavleftgradient"></div>
    <div id="baseballlink"><a href="http://baseball.fanhome.com"><img src="http://fanhome.com/images/_n_ba_y.gif" border="0" alt="baseball" /></a></div>
    <div id="basketballlink"><a href="http://basketball.fanhome.com"><img src="http://fanhome.com/images/_n_bk_y.gif" border="0" alt="basketball" /></a></div>
    <div id="footballlink"><a href="http://football.fanhome.com"><img src="http://fanhome.com/images/_n_ft_y.gif" border="0" alt="football" /></a></div>
    <div id="hockeylink"><a href="http://hockey.fanhome.com"><img src="http://fanhome.com/images/_n_hk_y.gif" border="0" alt="hockey" /></a></div>
    <div id="moresportslink"><a href="http://moresports.fanhome.com"><img src="http://fanhome.com/images/_n_ms_y.gif" border="0" alt="more sports" /></a></div>
    <div id="topnavholder">
    <div id="topnavcontainer">
    <div id="topnavgradient" class="topnavcolumn"></div>
    <div id="topnavrightcolumn" class="topnavcolumn">
    <div id="topnavrightgradient"></div>
    </div>
    </div>

    )sorry if that posts wrong)

  3. drmike
    Member
    Posted 7 years ago #

    Please put your code within backticks. On a PC, it's the key above your tab key.

  4. stonegauge
    Member
    Posted 7 years ago #

    <div id="topnavleftgradient"></div>
    <div id="baseballlink"><a href="http://baseball.fanhome.com"><img src="http://fanhome.com/images/_n_ba_y.gif" border="0" alt="baseball" /></a></div>
    <div id="basketballlink"><a href="http://basketball.fanhome.com"><img src="http://fanhome.com/images/_n_bk_y.gif" border="0" alt="basketball" /></a></div>
    <div id="footballlink"><a href="http://football.fanhome.com"><img src="http://fanhome.com/images/_n_ft_y.gif" border="0" alt="football" /></a></div>
    <div id="hockeylink"><a href="http://hockey.fanhome.com"><img src="http://fanhome.com/images/_n_hk_y.gif" border="0" alt="hockey" /></a></div>
    <div id="moresportslink"><a href="http://moresports.fanhome.com"><img src="http://fanhome.com/images/_n_ms_y.gif" border="0" alt="more sports" /></a></div>
    <div id="topnavholder">
    <div id="topnavcontainer">
    <div id="topnavgradient" class="topnavcolumn"></div>
    <div id="topnavrightcolumn" class="topnavcolumn">
    <div id="topnavrightgradient"></div>
    </div>
    </div>

    As so?

  5. Chris_K
    Member
    Posted 7 years ago #

    no, but I'll fix it for you in a sec.

  6. stonegauge
    Member
    Posted 7 years ago #

    ok, forget about the code and just focus on this quesiton please:

    Is there a reason HTML link tags would be rendered useless due to CSS conflict?

  7. Chris_K
    Member
    Posted 7 years ago #

    Shot in the dark, but have a look at: http://wordpress.org/support/topic/85934?replies=7

  8. stonegauge
    Member
    Posted 7 years ago #

    Maybe not so much a shot in the dark Handy.

    Though I'm still clueless about the problem, that solution seems more accurate if I can figure out which positioning is causing the problem.

    take a look at http://css.boltsmag.com/wp-content/themes/FanHome/index.html which contains the raw source for the header as well as the CSS in the head.

  9. stonegauge
    Member
    Posted 7 years ago #

    Figured out what the problem is (an absent DIV) but though this DIV will make the navigation work, it will screw up the formating of wordpress below it.

    Basically this div is an open buffer (positioned absolutely) between the head and the content of the blog/message board. If I close the DIV, the effect will end up being for not. If I leave it open, it screws up everything below it

    "<div style="position: absolute; top: 135px;">"

    As a CSS novice, can someone lead me in the proper direction on this? Simply creating a new class in the CSS file with these properties and plopping it into the code doesn't seem to remedy the problem (at least as long as I actually close that DIV).

    thanks

  10. stonegauge
    Member
    Posted 7 years ago #

    Problem solved adding simple line breaks after the header section of this theme instead of changing or altering the CSS markup, or adding to it.

Topic Closed

This topic has been closed to new replies.

About this Topic