css leaving huge whitespace.

[flint]

I just set up my weather display at http://new.agriscribe.com under the weather tab. Under the forecast there is about 300px of white space I can't seem to get rid of. That space is due to the size of the radar image and the forecasts but, i used css to reposition them relatively and it left that space.

Any help is appreciated.

[Hades]

what is generating the weather content? did you write the script or is it a third-party widget?

If it's external there isn't much you can do, except putting it into a div with fixed height and the css "overflow:hidden;" to hide these 300px.

If you wrote the widget, can you point to the file or put the code here?

If you try to select with the mouse the white space, it has some very small text in there: "Local Pollen Reports Airport Conditions Lawn and Garden Weather Rush Hour Traffic". I think it's been added for SEO purposes, but if you can remove it, maybe it will help.

[Cars-blog]

I'm getting "an unknown error has occurred" might be because I'm in Pretoria, South Africa and not stateside. Maybe you could use your geolocation to filter which visitors see the weather map?

[flint]

Cars-blog,

International users will see a different weather report I just haven't gotten it up yet. Most of the users are stateside so that is the first priority.

Hades,

That text at the bottom isn't supposed to be invisible I did that trying to get rid of the white space. Those are links that the weather.com insist you display for using their xml feed. I didn't write the script but I have modified it, it is a php file on my server. Below is the section of code that generates the output html:

PHP Code:

if($weather_array[type] == "weather")
{
    $system = $weather_array['unit']['temp'];
    $barometer = $weather_array['unit']['pressure'];
    $response = '';

    $response = "<div id=\"today\"><table>\n";
    //$response .= "<tr><td colspan=\"2\" class=\"loc_name\"> Currently in " . $weather_array['loc_info']['name'] . "</td></tr>\n";
    $response .= "<tr><td class=\"loc_text\"><img src=\"/images/weather/93x93/" .$weather_array['cc']['icon'] . ".png\" /><br />" . $weather_array['cc']['text'] . "</td><td valign=\"top\">";
    $response .= "<strong>" .$weather_array['cc']['temp'] . "°$system</strong> (Feels like " . $weather_array['cc']['feels_like'] . "°$system)<br />\n";
    $response .= "<span class=\"details\">Last update: " . $weather_array['cc']['last_update'] . "<br />\n";
    $response .= "Data from: " . $weather_array['cc']['observation_station'] . "<br />\n";
    $response .= "Humidity: " . $weather_array['cc']['humidity'] . "%<br />\n";
    $response .= "Visibility: " . $weather_array['cc']['visibility'] . " " .$weather_array['unit']['dist'] . "<br />\n";
    $response .= "Dew Point: " . $weather_array['cc']['dew_point'] . "°$system<br />\n";
    $response .= "UV Index: " . $weather_array['cc']['uv_index'] . " (" . $weather_array['cc']['uv_text'] . ")<br />\n";
    $response .= "Barometer: " . $weather_array['cc']['barometer'] . "$barometer " . $weather_array['cc']['barometer_dir'] . "<br />\n";
    $response .= "Moon: " . $weather_array['cc']['moon_text'] . "<br />\n";
    $response .= "Wind: " . $weather_array['cc']['wind_speed'];
    if(is_numeric($weather_array['cc']['wind_speed'])) $response .= $weather_array['unit']['speed'];
    $response .= " From: " . $weather_array['cc']['wind_text'] . "</span>\n";
    $response .= "</td></tr></table></div>";

    if(array_key_exists("day",$weather_array))
    {
        $day_counter = 1;
        foreach($weather_array['day'] as $forecast_day)
        {
//            print_r($forecast_day);

            if($day_counter == 1)
            {
                $forecast_date = ($forecast_day[hi] == "N/A") ? "Tonight":"Today";
                $forecast_icon = ($forecast_day[hi] == "N/A") ? $forecast_day['night_icon']:$forecast_day['day_icon'];
                $forecast_data = ($forecast_day[hi] == "N/A") ? "$forecast_day[night_text]<br />":"$forecast_day[day_text]<br />";
                if($forecast_day[hi] != "N/A") $forecast_data .= "High: <strong>$forecast_day[hi]°</strong>$system<br />";
                $forecast_data .= "Low: <strong>$forecast_day[low]°</strong>$system<br />";
            }
            else
            {
                $forecast_date = "$forecast_day[day] <span class=\"for_date\">[$forecast_day[date]]</span>";
                $forecast_icon = $forecast_day['day_icon'];
                $forecast_data = $forecast_day['day_text']."<br />High: <strong>".$forecast_day['hi']."°</strong>$system<br />Low: <strong>".$forecast_day['low']."°</strong>$system<br />";
            }
            $forecast_data .= "Sunrise: $forecast_day[sunrise]<br />Sunset: $forecast_day[sunset]";
            if($day_counter == 1 And $forecast_day[hi] == "N/A") $forecast_data .= "<br />&nbsp;";
            $response1 .= "<div id=\"pos_forcast\"><div id=\"day$day_counter\" class=\"forecast ".applyforecaststyle($forecast_day['hi'])."\">\n";
            $response1 .= "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n";
            $response1 .= "    <tr><td colspan=\"2\" align=\"center\" class=\"for_border\">$forecast_date</td></tr>\n";
            $response1 .= "    <tr><td><img src=\"/images/weather/61x61/$forecast_icon.png\" /></td><td><span class=\"details\">$forecast_data</span></td></tr>\n";
            $response1 .= "</table></div></div>";

            $day_counter++;
        }
    }


    //$response .= "<div style=\"clear:left;\">\n";
    //$response .= ($_REQUEST['remember']) ? "":"<input type=\"button\" value=\"Remember Location\" name=\"remember\" onclick=\"getModule(theForm.elements['zip'].value,1)\" />";
    //$response .= "</div>\n";
    $response .= "<a class=\"****tylinks\" href=\"".$weather_array['****tylinks'][0]."\">".$weather_array['****tylinktext'][0]."</a> ";
    $response .= "<a class=\"****tylinks\" href=\"".$weather_array['****tylinks'][1]."\">".$weather_array['****tylinktext'][1]."</a> ";
    $response .= "<a class=\"****tylinks\" href=\"".$weather_array['****tylinks'][2]."\">".$weather_array['****tylinktext'][2]."</a> ";
    $response .= "<a class=\"****tylinks\" href=\"".$weather_array['****tylinks'][3]."\">".$weather_array['****tylinktext'][3]."</a> ";
    echo "<weather>$response$response1</weather>";
    
}

function applyforecaststyle($temp)
{
    // returns the class name to apply based on high temp
    if ($temp >= 0) $class = "temp_0";
    if ($temp >= 10) $class = "temp_10";
    if ($temp >= 20) $class = "temp_20";
    if ($temp >= 30) $class = "temp_30";
    if ($temp >= 40) $class = "temp_40";
    if ($temp >= 50) $class = "temp_50";
    if ($temp >= 60) $class = "temp_60";
    if ($temp >= 70) $class = "temp_70";
    if ($temp >= 80) $class = "temp_80";
    if ($temp >= 90) $class = "temp_90";
    if ($temp >= 100) $class = "temp_100";
    if ($temp == "N/A") $class = "temp_u";
    return $class;
}
?> 


[Hades]

Great, if you have access to the script that generates the forecast, you should be able to determine what is making the space.

A few tips:

1-Add borders, temporarily:
Put border=1 to these tables, and through css: "border: 1px solid red" to the divs:
#today
#pos_forcast
and to that div that has clear left.

By adding a border to it you can see which one takes the 300px. Even if that doesn't solve the problem will show you which of the elements must be fixed.
Once you find the element, make sure it doesn't have any margin or padding applied.

2-remove the PHP variables,
$forecast_data
$forecast_day, etc...
That will leave only the empty HTML, and you can see easily what is causing troubles.

[flint]

Thanks for the help guys but I gave up on css and used a table within the weather tab. This angers me because I hate using tables for site layout but I did it. thanks guys.

[flint]

And I did do the border thing, it was my animated gif weather radar. causing all the headache.