Problema allineamento con IE e FF

**ZapoTeX** · 05-11-2009, 17:31

Ciao a tutti!

Disturbo voi esperti di CSS per un problemino con IE: nel sito che vedete:

http://www.davidearchetti.com/test2/

il div "lowerThree", ovverosia quello in basso a destra con "Website Statistics" è disallineato. Con FF invece è a posto, ma la scritta "copyright" ancora più in basso (nel div footer) non è centrata, mentre invece con IE lo è.

Perché mi succedono questi due problemi? Cosa posso fare per evitarli? Riporto sotto il mio CSS e il mio codice.

Grazie mille e buona giornata!

PS: non sono molto esperto, quindi se vedete altre scorrettezze nel mio codice oltre a quella che causa i problemi, ovviamente le critiche sono ben accette. Grazie ancora e ciao!

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>company - Pharma company</title>
<meta name="keywords" content="company, drug delivery" />
<meta name="description" content="company website" />
<link href="default.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="logohead">

[img]images/logo HD_0399.gif[/img]
</div>
<div id="container">
<div id="header">
<h1>Pharma company</h1>
</div>
<div id="menu">
<ul>
[*]Home
[*]Technology
[*]R&D Pipeline
[*]Team
[*]Success cases
<li class="last">Contact Us
[/list]
</div>
<div id="content">

<div id="colOne">

<script type="text/javascript">
var pictureArchive= ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'];

window.onload=function() {
var o=document.createElement('img');
o.setAttribute('id', 'image');
o.setAttribute('src', pictureArchive[0]);
o.setAttribute('alt', '');
document.getElementById('imagebox').appendChild(o) ;
rotate(pictureArchive.length);
}

function rotate(idx) {
if(idx>=pictureArchive.length) {
idx=0;
}
document.getElementById('image').src=pictureArchiv e[idx++];
timerID=setTimeout('rotate('+idx+')', 5000);
}
</script>
<h2>company</h2>
<div id="imagebox"></div>

Bla bla bla</p>

Bla bla bla</p>

Bla bla bla</p>

Bla bla bla</p>

Bla bla bla</p>
</div>

<div id="colThree">
<h2>Health news</h2>
<?php
include "./lastRSS.php";
$rss = new lastRSS;
$rss->cache_dir = './temp';
$rss->cache_time = 1200;

if ($rs = $rss->get('http://www.who.int/feeds/entity/mediacentre/news/en/rss.xml')) {
echo "<h3><a target=\"_blank\" href=\"$rs[link]\">$rs[title]</a></h3>\n";
echo "

";
foreach($rs['items'] as $item) {
echo "\t<a target=\"_blank\" href=\"$item[link]\">".$item['title']."</a>
".$item['description']."

\n";
}
echo "</p>\n";
}
else {
echo "

Connection problem - The website feeding news is not responding. company would like to apologize for any inconvenience</p>\n";
}

if ($rs = $rss->get('http://ezinearticles.com/rss/Health-and-Fitness-Asthma.xml')) {
echo "<h3><a target=\"_blank\" href=\"$rs[link]\">$rs[title]</a></h3>\n";
echo "

";
foreach($rs['items'] as $item) {
$i++;
echo "\t<a target=\"_blank\" href=\"$item[link]\">".$item['title']."</a>
".$item['description']."

\n";
}
echo "</p>\n";
}
else {
echo "

Connection problem - The website feeding news is not responding. company would like to apologize for any inconvenience</p>\n";
}

if ($rs = $rss->get('http://www.medpagetoday.com/medical-news-rss-feeds/SmokingCOPD-Specific.xml')) {
echo "<h3><a target=\"_blank\" href=\"$rs[link]\">$rs[title]</a></h3>\n";
echo "

";
foreach($rs['items'] as $item) {
echo "\t<a target=\"_blank\" href=\"$item[link]\">".$item['title']."</a>
".$item['description']."

\n";
}
echo "</p>\n";
}
else {
echo "

SiConnection problem - The website feeding news is not responding. company would like to apologize for any inconvenience</p>\n";
}

?>

</div>

</div>

<div style="clear: both;"></div>
<div id="lowerbar">
<div id="lowerTwo">
<h2>Google Search</h2>
<form method="get" action="http://www.google.com/search">
<input type="hidden" name="ie" value="UTF-8" />
<input type="hidden" name="oe" value="UTF-8" />

<p align="center"><input type="text" name="q" size="23" maxlength="255" value="" />
<input type="submit" name="btnG" value="Search" />
<input type="hidden" name="domains" value="company.it" />
<input type="radio" name="sitesearch" value="" /> Search Internet<input type="radio" name="sitesearch" value="company.it" checked="checked" /> Search this website

</p>
</div>
<div id="lowerOne">
<h2>Google Scholar Search</h2>

<form method="get" action="http://scholar.google.com/scholar">

<p align="center"><input type="hidden" name="hl" value="en">
<input type="text" name="q" size="23" maxlength="255" value="" />
<input type="submit" name="btnG" value="Search" />

Search scientific publications</p>
</form>

</div>
<div id="lowerThree">
<h2>Website statistics</h2>

Bla bla bla - qui mettiamo il contatore delle visite</p>
</div>

</form>
</div>
<div id="footer">

Copyright 2009 company.</p>
</div>
</div>
</body>
</html>

default.css

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

/* Elements */

body {
background-image: url(images/fade.jpg);
background-repeat: repeat-x;
text-align: justify;
font-family: Arial;
font-size: 12px;
color: #333333;
}

h1 {
}

h2, h3 {
margin-top: 0px;
}

h4, h5, h6 {
}

p, ol, ul, dl, blockquote {
}

a {
color: #333333;
}

a:hover {
text-decoration: none;
}

.img1 {
float: left;
margin: 3px 15px 0px 0px;
}

#container {
background: #FFFFFF;
width: 798px;
margin: 0px auto;
padding: 0px;
border-width: 4px;
border-color: #138FEF;
border-style: solid;
margin-bottom: 20px;
}

/* Header */

#logohead {
width: 798px;
height: 91px;
margin: 0px auto;
}

#logohead img {
margin: 0px;
padding: 0px;
}

#header {
width: 798px;
height: 150px;
margin: 0px;
background: url(images/headerbg.jpg);
margin-top: 0px;
}

#header img {
margin: 0px;
padding: 0px;
}

#header h1 {
margin: 0px;
padding-right:30px;
padding-top:90px;
font-size: 32px;
font-style: italic;
text-align: right;
color:#138FEF;
}

#header h2 {
margin: 0;
padding-right:30px;
padding-top:10px;
font-size: 26px;
font-style: italic;
text-align: right;
color:#138FEF;
}

/* Menu */

#menu {
width: 798px;
height: 42px;
margin: 0px auto;
}

#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
display: block;
float: left;
width: 133px;
height: 42px;
padding-top: 10px;
color: #138FEF;
text-align: center;
text-decoration: none;
font-size: 16px;
font-weight: bold;
background: url(images/img4.jpg) no-repeat;
}

#menu .last a {
background: url(images/img5.jpg) no-repeat;
}

#menu a:hover {
color:#FFFFFF;
}

#menu li a:hover,
#menu li a.on {
background: url(images/menu_hover_bgr.jpg) repeat-x 0 0;
}

#menu .last a:hover,
#menu .last a.on {
background: url(images/menu_hover_bgr_last.jpg) repeat-x 0 0;
}

/* Content */

#content {
background: #FFFFFF;
width: 798px;
margin: 0px auto;
padding: 2px 0px 0px 0px;

}

#colOne {
float: left;
width: 492px;
margin-top: 10px;
margin-bottom: 20px;
margin-left: 20px;
}

#imagebox {
}

#colThree {
float: right;
width: 246px;
margin: 10px 20px 20px 20px;
}

#colTwo ul {
margin-left: 0px;
padding-left: 0px;
list-style-position: inside;
}

#content h1 {
padding: 5px 0px 5px 5px;
color: #173E68;
}

#content h2 {
padding: 5px 0px 5px 5px;
text-transform: uppercase;
font-size: 14px;
color: #138FEF;
border-bottom: 1px solid;
border-bottom-color: #138FEF;
}

#content h3 {
color: #6C6C6C;
}

#lowerbar {
width: 798px;
margin: 0px auto;
padding: 0px;
height: 100px;
background-image: url(images/lowerbg.jpg);
background-repeat: repeat-x;
}

#lowerbar h2 {
padding: 0px 0px 5px 5px;
text-transform: uppercase;
font-size: 14px;
color: #138FEF;
border-bottom: 1px solid;
border-bottom-color: #138FEF;
}

#lowerOne {
float: left;
width: 240px;
margin-top: 10px;
margin-bottom: 20px;
}

#lowerTwo {
float: left;
width: 239px;
margin: 10px 20px 20px 20px;
}

#lowerThree {
float: right;
width: 239px;
margin: 10px 20px 20px 20px;
}

/* Footer */

#footer {
width: 798px;
margin: 0px auto;
padding: 3px 0px;
height: 10px;
background: #138FEF;
}

#footer p {
margin: 0px;
padding-top: 0px;
text-align: center;
font-size: 10px;
color: #000000;
}

#footer a {
color: #000000;
}

#footer a:hover {
color: #000000;
}

Discussione: Problema allineamento con IE e FF

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzazione discussione

Problema allineamento con IE e FF

Permessi di invio