ThemeShaper Forums » Thematic

[closed]

Div order broken in Firefox 4 and Chrome

(7 posts)
  • Started 8 years ago by joshuaiz
  • Latest reply from joshuaiz
  • This topic is resolved
  1. joshuaiz
    Member

    Hi,

    After testing my site on Firefox 4 and Chrome, the div order is broken - specifically for the second and third subsidiary asides which are now outside the #footer (and #wrapper for that matter). This is causing all kinds of trouble with my layout in those browsers and I'm not exactly sure how to fix it.

    Here is how the divs are structured in Safari, Firefox 3.x:

    <div id="footer">
    	<div id="subsidiary">
    		<div id="first" class="aside sub-aside"></div>
    		<div id="second" class="aside sub-aside"></div>
    		<div id="third" class="aside sub-aside"></div>
    	</div>
    </div>

    Now, here is the structure in Firefox 4 and Google Chrome:

    <div id="wrapper" class="hfeed">
    <div id="header"></div>
    <div id="main"></div>
    <div id="footer">
    	<div id="subsidiary">
    		<div id="first" class="aside sub-aside"></div>
    	</div>
    	<div id="social_icons"></div> //should be inside "first"
    </div>
    </div>
    <div id="second" class="aside sub-aside"> //outside "wrapper" - should be inside "subsidiary" after "first"
    <div id="third" class="aside sub-aside"> //outside "wrapper" - should be inside "subsidiary" after "second"

    [I guess the tabs aren't showing here but in the first example, all of the asides are within the "subsidiary" div inside the "footer" div; in the second example, the 2nd and 3rd subsidiary asides are outside of the "wrapper" div - not within "subsidiary" and "footer" at all]

    Any idea on how to fix this?

    I'm using the latest version of Thematic/WP 3.1.2/Latest versions of FF and Chrome.

    Posted 8 years ago #
  2. joshuaiz
    Member

    Well, I'm closer - looks like FF4 and Chrome don't like PHP code in widgets so this is the culprit...how to get around it is the question now.

    Posted 8 years ago #
  3. some browsers try to auto-correct improperly closed divs and others don't. what are you putting in the widgets and can you get around that?

    Posted 8 years ago #
  4. joshuaiz
    Member

    Hi Helga,

    At first I thought it was an umatched div but they are all closed properly (or at least I think they are). There's no errors or warnings in any web inspectors...

    The code I have works in Safari, FF3 but not in FF4 or Chrome. When I take out the php code, the footer displays properly.

    You can see here: http://www.vizualrecords.com/catalog/eps/viz001

    (or any page really - it is in the first subsidiary widget)

    Here is the full code for this particular widget:

    <div id="aside1-top">
    <div id="aside1-image"><img id="footlogo" src="http://www.vizualrecords.com/images/vizual_logo_side_text.png"></div>
    <ul class="sub-text">
    
    <li>1200 W Monroe #613 Chicago, IL 60607 USA</li>
    <li>Tel: +1 312 476 9716</li>
    <li>Fax: +1 267 565 3327</li>
    </div>
    <div id="aside1-tweet">
    <p class="sub-head">Follow Vizual Records and Joshua Iz on <i>Twitter</i>:
    
    <ul class="sub1-tweet">
    <li id="viztweet"><a href="http://twitter.com/vizualrecords" title="Follow Vizual Records on Twitter">@vizualrecords</a>
    <li><a href="http://twitter.com/joshuaiz" title="Follow Joshua Iz on Twitter">@joshuaiz</a></li>
     <div id="tweet">
       <?php
      $feedURL = "http://twitter.com/statuses/user_timeline/116496056.rss";
      $headers = @get_headers($feedURL);
    if (preg_match("/200/", $headers[0])){
    $doc = new DOMDocument();
    $doc->load($feedURL);
    $arrFeeds = array();
    foreach ($doc->getElementsByTagName('item') as $node) {
        $itemRSS = array (
            'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
            );
        array_push($arrFeeds, $itemRSS);
    }
    $limit = 1;
    for($x=0;$x<$limit;$x++) {
        $title = str_replace('vizualrecords: ', '', $arrFeeds[$x]['title']);
        $str = ereg_replace("[[:alpha:]]+://[^<>[:space:]]+[[:alnum:]/]","<a>\</a>", $title);
        $pattern = '/[#|@][^\s]*/';
        preg_match_all($pattern, $str, $matches);
    
        foreach($matches[0] as $keyword) {
            $keyword = str_replace(")","",$keyword);
            $link = str_replace("#","%23",$keyword);
            $link = str_replace("@","",$keyword);
            if(strstr($keyword,"@")) {
                $search = "<a>$keyword</a>";
            } else {
                $link = urlencode($link);
                $search = "<a>$keyword</a>";
            }
            $str = str_replace($keyword, $search, $str);
        }
        echo '<li id="tweetlist">'.$str.'';
    }
    }
    else echo '<li id="tweetlist"> Follow <a href="http://twitter.com/joshuaiz">@joshuaiz</a> and <a href="http://twitter.com/izanddiz">@izanddiz!</a> Go Bears. Love yourself and help those less fortunate than you. Eat good food. Smile.';
    
    ?>
    </div>
    
    <div id="tweet2">
       <?php
      $feedURL = "http://twitter.com/statuses/user_timeline/17103844.rss";
      $headers = @get_headers($feedURL);
    if (preg_match("/200/", $headers[0])){
    $doc = new DOMDocument();
    $doc->load($feedURL);
    $arrFeeds = array();
    foreach ($doc->getElementsByTagName('item') as $node) {
        $itemRSS = array (
            'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
            );
        array_push($arrFeeds, $itemRSS);
    }
    $limit = 1;
    for($x=0;$x<$limit;$x++) {
        $title = str_replace('joshuaiz: ', '', $arrFeeds[$x]['title']);
        $str = ereg_replace("[[:alpha:]]+://[^<>[:space:]]+[[:alnum:]/]","<a>\</a>", $title);
        $pattern = '/[#|@][^\s]*/';
        preg_match_all($pattern, $str, $matches);
    
        foreach($matches[0] as $keyword) {
            $keyword = str_replace(")","",$keyword);
            $link = str_replace("#","%23",$keyword);
            $link = str_replace("@","",$keyword);
            if(strstr($keyword,"@")) {
                $search = "<a>$keyword</a>";
            } else {
                $link = urlencode($link);
                $search = "<a>$keyword</a>";
            }
            $str = str_replace($keyword, $search, $str);
        }
        echo '<li id="tweetlist2">'.$str.'';
    }
    }
    else echo '<li id="tweetlist2"> Big hearts in a small world. It Iz What It Iz.';
    
    ?>
    </div>
    </div>
    <div id="social_icons"><a href="http://www.facebook.com/vizualrecords" title="Vizual Records on Facebook"></a><a href="http://www.twitter.com/vizualrecords" title="Follow Vizual Records on Twitter"></a><a href="http://soundcloud.com/vizual" title="Vizual Records on SoundCloud"></a><a href="http://www.joshuaiz.com/" title="Joshua Iz"></a><a href="http://www.vizualrecords.com/feed/" title="Vizual Records posts RSS feed"></a></div>

    I've tried all different php scripts and functions and either they don't work at all (in any browser) or they break the layout in FF4/Chrome. There must be something that FF4 and Chrome don't like.

    In addition, I've tried different PHP widget plugins to no avail.

    J

    Posted 8 years ago #
  5. middlesister
    Member

    Hmm..
    I wonder if it hasn't got to do with element nesting anyway.
    You have a resulting html structure of

    <div id="aside1-tweet">
    	<ul class="sub1-tweet">
    		<li id="viztweet"></li>
    		<li></li>
    	</ul>
    
    	 <div id="tweet">
    	   <li id="tweetlist"></li>
    	</div>
    
    	<div id="tweet2">
    	   <li id="tweetlist2"></li>
    	</div>
    </div>

    Where the tweetlists <li> items are not enclosed in <ul>'s. This is not valid markup. What Chrome seems to be doing is trying to 'fix' this by moving the li#tweetlist as sibling to the li.widgetcontainer (which is the nearest un-closed <ul> element). And then the confusion goes on.

    Posted 8 years ago #
  6. joshuaiz
    Member

    @middlesister: you are right...let me fix that and see if it works - thanks I never noticed that :)

    Posted 8 years ago #
  7. joshuaiz
    Member

    That was it - thank you @middlesister!

    Posted 8 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.