/    Sign up×
Community /Pin to ProfileBookmark

positioning problem with IE7

Copy linkTweet thisAlerts:
May 29.2010

I’m almost completing a site and I have problem with IE7 and positioning some elements.

Check this link [url]http://www.itp.it/eng/tecnology.html[/url] with IE7 and the element #up.menu is shifted to the right. How can I avoid this?

This is the CSS file for IE7. Thanks in advance.

@charset “utf-8”;
/* CSS Document */

html, body{
margin:30 0 0 0;
padding:0;
text-align:center;
height:100%;
background-color:#666;}

#pagewidth{
width:760px;
text-align:left;
margin-left:auto;
margin-right:auto;}

#header{
position:relative;
height:155px;
width:100%;}

#wrapper {background-color:#D2E7F8; z-index:30; width: 760px;}
#wrapper-intro {background-color:#999; z-index:30;}

#leftcol {
height:400px;
width:50%;
float:left;
position:relative;
margin-top:25px;}

#logo {margin-left:25px; margin-top:25px;}

.scroll{overflow-x:hidden; overflow-y:scroll;}

#maincol, #maincol-unique {
float: right;
display:inline;
position: relative;
padding-top:25px;
height:400px;
z-index:20;}

#maincol {width:50%;}

#laterale {
font:80%;
float:right;
width:60%;}

.prodotti a { font:90%; text-decoration:none; color:#000; font-weight:bold;}
.prodotti a:hover {color:#F00;}

#FlashID3.affidabilita {
float:left;
clear:both;
position:absolute;
margin-top:2px;
margin-left:-260px;}

.imgazienda {
margin-left:25px;
margin-right:100%;
margin-top:5px;
float:left;
clear:right;}

.qualita {padding-right:5px;}

#maincol-unique {width:100%;}

.bold {font-weight:bold;}

.indent {text-indent:25px;}

#maincol ul, #maincol-unique ul, #leftcol ul {
list-style-image:url(../img/punto-rosso.png);
list-style-position:outside;}

#carosello {
position:relative;
float:left;
clear:both;
top:-5px;}

#maincol ul {
float:left;
clear:both;
width:42%;}

#maincol p, #maincol-unique p, #maincol li, #maincol-unique li, #leftcol li, #leftcol p {
font: 90% Verdana, Helvetica, sans-serif; /*era font 100%*/
line-height:1.5;
margin-bottom:10px;
padding-right:10px;}

#maincol p{display:block; float:right; clear:left;}
#maincol-unique p {margin-left:20px;}

.testo {width:45%;}

p.contatti {text-align:left; width:100%; margin-left:10px; font-weight:bolder; background-color:#b6d9fc; margin-top:40px;}

#maincol li {text-transform:uppercase;}

#leftcol p {margin-left:30px;}

.menu {
list-style: none;
margin: 0;
padding: 0;}

#up.menu, #up-eng.menu {
position:absolute;
float:right;
margin-top:-23px;
background-image:url(../img/stondatura-bianca.png);
background-repeat:no-repeat;
background-position:right;
left:0px;}

#down.menu, #down-eng.menu {
position:absolute;
padding-right:25px;
background-image:url(../img/stondatura-blu.png);
background-repeat:no-repeat;
background-position:right;
z-index:30;}

#down-eng.menu {border-left:#5b92a4 solid 75px;}

.menu li {
font: 67.5% Verdana, Helvetica, sans-serif;
font-weight:bold;
margin: 0;
padding: 0;}

#up.menu li, #up-eng.menu li{background-color:#FFF; display:inline;}
#down.menu li, #down-eng.menu li{float:left; background-color:#5b92a4;}

.menu a {
display: block;
margin: 0;
padding: 5px 5px;
text-decoration: none;}

#up.menu a, #up-eng.menu a {float:right; color:#333; background-color:#FFF;}
#down.menu a, #down-eng.menu a {float:left; color:#FFF;}
#up.menu a:hover, #up-eng.menu a:hover {color:#F00;}
#down a:hover, #down-eng a:hover {color:#F00;}

#down a img, #down-eng a img {height: 0; width: 0; border-width: 0;}
#down a:hover img.uno {position: absolute; top: -83px; left: 100px; height: 83px; width: 70px;}
#down a:hover img.due {position: absolute; top: -60px; left: 176px; height: 60px; width: 68px;}
#down a:hover img.tre {position: absolute; top: -46px; left: 232px; height: 46px; width: 80px;}
#down a:hover img.quattro {position: absolute; top: -85px; left: 322px; height: 89px; width: 60px;}
#down a:hover img.cinque {position: absolute; top: -70px; left: 400px; height: 78px; width: 90px;}

#down-eng a:hover img.uno {position: absolute; top: -83px; left: 0px; height: 83px; width: 70px;}
#down-eng a:hover img.due {position: absolute; top: -60px; left: 65px; height: 60px; width: 68px;}
#down-eng a:hover img.tre {position: absolute; top: -46px; left: 122px; height: 46px; width: 80px;}
#down-eng a:hover img.quattro {position: absolute; top: -85px; left: 200px; height: 89px; width: 60px;}
#down-eng a:hover img.cinque {position: absolute; top: -70px; left: 270px; height: 78px; width: 90px;}

#down a img.currentuno {position: absolute; top: -83px; left: 100px; height: 83px; width: 70px; border-width: 0;}
#down a img.currentdue {position: absolute; top: -60px; left: 176px; height: 60px; width: 68px; border-width: 0;}
#down a img.currenttre {position: absolute; top: -46px; left: 232px; height: 46px; width: 80px; border-width: 0;}
#down a img.currentquattro {position: absolute; top: -85px; left: 322px; height: 89px; width: 60px; border-width: 0;}
#down a img.currentcinque {position: absolute; top: -70px; left: 400px; height: 78px; width: 90px; border-width: 0;}

#down-eng a img.currentuno {position: absolute; top: -83px; left: 0px; height: 83px; width: 70px; border-width: 0;}
#down-eng a img.currentdue {position: absolute; top: -60px; left: 65px; height: 60px; width: 68px; border-width: 0;}
#down-eng a img.currenttre {position: absolute; top: -46px; left: 122px; height: 46px; width: 80px; border-width: 0;}
#down-eng a img.currentquattro {position: absolute; top: -85px; left: 200px; height: 89px; width: 60px; border-width: 0;}
#down-eng a img.currentcinque {position: absolute; top: -70px; left: 270px; height: 78px; width: 90px; border-width: 0;}

#english {float:right; margin-top:-25px; border:0px;}
#english-intro {float:left; margin-top:15px; margin-left:25px; border:0px;}
#skip {float:right; margin-right:25px;}

#footer{
border-top:solid 1px #999;
margin-top:5px;
clear:both;}

#footer p {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
line-height:1,5;
text-align:center;
display:block;
padding-top:2px;
padding-bottom:5px;}

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@tinimicJun 01.2010 — I'm new to Web design, but I did find some errors (minor and didn't have any effect on the problem), and I did change the positioning of your #wrapper and #up.menu to get it basically working. Didn't have time to chase down all the flash files and backgrounds, so you'll have to do the fine tuning.


[CODE]#wrapper {
background-color:#D2E7F8;
z-index:30;
width: 760px;
position: relative;
}

#laterale {
font-size:80%;
float:right;
width:60%;
}


.prodotti a {
font-size:90%;
text-decoration:none;
color:#000;
font-weight:bold;
}

#up.menu, #up-eng.menu {
position:relative;
margin-top:-23px;
background-image:url(http://www.itp.it/img/stondatura-bianca.png);
background-repeat:repeat-x;
background-position:right;
right:0px;
bottom: 448px;
}[/CODE]

Hope this helps.
Copy linkTweet thisAlerts:
@tinimicJun 01.2010 — One more minor error in your CSS:
[CODE]html, body {
margin:30px 0 0 0;
padding:0;
text-align:center;
height:100%;
background-color:#666;
}[/CODE]

Nice looking site!
Copy linkTweet thisAlerts:
@alexthecattaauthorJun 02.2010 — thanks for us suggestions, now it works.

Couple of comments:

- I did not take all of the CSS u suggested me. Now the site works fine in IE7 with the following code

[CODE]@charset "utf-8";
/* CSS Document */


html, body{
margin:30 0 0 0;
padding:0;
text-align:center;
height:100%;
background-color:#999999;}

#pagewidth{
width:760px;
text-align:left;
margin-left:auto;
margin-right:auto;}

#header{
position:relative;
height:155px;
width:100%;}

#wrapper {background-color:#D2E7F8; z-index:30;}
#wrapper-intro {background-color:#999; z-index:30;}

#leftcol, #leftcol-press {
height:400px;
float:left;
position:relative;
margin-top:25px;}

#leftcol {width:50%;}
#leftcol-press {width:30%;}

#logo {margin-left:25px; margin-top:25px;}

.scroll{overflow-x:hidden; overflow-y:scroll;}

#maincol, #maincol-press, #maincol-unique {
float: right;
display:inline;
position: relative;
padding-top:25px;
height:400px;
z-index:20;}

#maincol {width:50%;}
#maincol-press {width:70%;}

#laterale {
font:80%;
float:right;
width:60%;}

.prodotti a { font:80%; text-decoration:none; color:#000; font-weight:bold;}
.prodotti a:hover {color:#F00;}

#FlashID3.affidabilita {
float:left;
clear:both;
position:absolute;
margin-top:2px;
margin-left:-260px;}

.imgazienda {
margin-left:25px;
margin-right:100%;
margin-top:5px;
float:left;
clear:right;}

.qualita {padding-right:5px;}

#maincol-unique {width:100%;}

.bold {font-weight:bold;}

.indent {text-indent:25px;}

#maincol ul, #maincol-unique ul, #leftcol ul {
list-style-image:url(../img/punto-rosso.png);
list-style-position:outside;}

table {width:80%; margin-left:auto; margin-right:auto; margin-top:10px; margin-bottom:10px; background-color:#fff;
border:solid #333 1px;}
table p {text-align:right;}
table td {vertical-align:top;}
table img {border:0;}
table #testo {z-index:20; float:right; clear:left; position:relative; right:0;}
table #news {float:left; z-index:10; clear:both; position:absolute; left:55; margin-top:40px;}
table a {text-decoration:none;}
table a:hover {text-decoration:underline;}

#carosello {
position:relative;
float:left;
clear:both;
top:-5px;}

#maincol ul, #maincol-press ul {
float:left;
clear:both;
width:42%;}


#maincol p, #maincol-press p, #maincol-unique p, #maincol li, #maincol-press li, #maincol-unique li, #leftcol li, #leftcol p {
font: 80% Verdana, Helvetica, sans-serif; /*era font 100%*/
line-height:1.5;
margin-bottom:10px;
padding-right:10px;}

#foto img {margin-left:25px; border:0;}

#maincol p, #maincol-press p{display:block; float:right; clear:left;}
#maincol-unique p {margin-left:20px;}

.testo {width:45%;}

p.contatti {text-align:left; width:100%; margin-left:10px; font-weight:bolder; background-color:#b6d9fc; margin-top:40px;}

#maincol li, #maincol-press li {text-transform:uppercase;}

#leftcol p {margin-left:30px;}

.menu {
list-style: none;
margin: 0;
padding: 0;}

#up.menu, #up-eng.menu {
position:absolute;
margin-top:-23px;
background-image:url(../img/stondatura-bianca.png);
background-position:left;
background-repeat:no-repeat;
padding-left:25px;}

#up.menu {margin-left:432px;}
#up-eng.menu {margin-left:564px;}

#down.menu, #down-eng.menu {
position:absolute;
padding-right:25px;
background-image:url(../img/stondatura-blu.png);
background-repeat:no-repeat;
background-position:right;
z-index:30;}

#down-eng.menu {border-left:#5b92a4 solid 75px;}

.menu li {
font: 67.5% Verdana, Helvetica, sans-serif;
font-weight:bold;
margin: 0;
padding: 0;}

#up.menu li, #up-eng.menu li{float:right; background-color:#FFF;}
#down.menu li, #down-eng.menu li{float:left; background-color:#5b92a4;}

.menu a {
display: block;
margin: 0;
padding: 5px 5px;
text-decoration: none;}

#up.menu a, #up-eng.menu a {float:right; color:#333;}
#down.menu a, #down-eng.menu a {float:left; color:#FFF;}
#up.menu a:hover, #up-eng.menu a:hover {color:#F00;}
#down a:hover, #down-eng a:hover {color:#F00;}


#down a img, #down-eng a img {height: 0; width: 0; border-width: 0;}
#down a:hover img.uno {position: absolute; top: -83px; left: 100px; height: 83px; width: 70px;}
#down a:hover img.due {position: absolute; top: -60px; left: 176px; height: 60px; width: 68px;}
#down a:hover img.tre {position: absolute; top: -46px; left: 232px; height: 46px; width: 80px;}
#down a:hover img.quattro {position: absolute; top: -85px; left: 322px; height: 89px; width: 60px;}
#down a:hover img.cinque {position: absolute; top: -70px; left: 400px; height: 78px; width: 90px;}

#down-eng a:hover img.uno {position: absolute; top: -83px; left: 0px; height: 83px; width: 70px;}
#down-eng a:hover img.due {position: absolute; top: -60px; left: 65px; height: 60px; width: 68px;}
#down-eng a:hover img.tre {position: absolute; top: -46px; left: 122px; height: 46px; width: 80px;}
#down-eng a:hover img.quattro {position: absolute; top: -85px; left: 200px; height: 89px; width: 60px;}
#down-eng a:hover img.cinque {position: absolute; top: -70px; left: 270px; height: 78px; width: 90px;}

#down a img.currentuno {position: absolute; top: -83px; left: 100px; height: 83px; width: 70px; border-width: 0;}
#down a img.currentdue {position: absolute; top: -60px; left: 176px; height: 60px; width: 68px; border-width: 0;}
#down a img.currenttre {position: absolute; top: -46px; left: 232px; height: 46px; width: 80px; border-width: 0;}
#down a img.currentquattro {position: absolute; top: -85px; left: 322px; height: 89px; width: 60px; border-width: 0;}
#down a img.currentcinque {position: absolute; top: -70px; left: 400px; height: 78px; width: 90px; border-width: 0;}

#down-eng a img.currentuno {position: absolute; top: -83px; left: 0px; height: 83px; width: 70px; border-width: 0;}
#down-eng a img.currentdue {position: absolute; top: -60px; left: 65px; height: 60px; width: 68px; border-width: 0;}
#down-eng a img.currenttre {position: absolute; top: -46px; left: 122px; height: 46px; width: 80px; border-width: 0;}
#down-eng a img.currentquattro {position: absolute; top: -85px; left: 200px; height: 89px; width: 60px; border-width: 0;}
#down-eng a img.currentcinque {position: absolute; top: -70px; left: 270px; height: 78px; width: 90px; border-width: 0;}


#english {float:right; margin-top:-25px; border:0px;}
#english-intro {float:left; margin-top:15px; margin-left:25px; border:0px;}
#skip {float:right; margin-right:25px;}

#footer{
border-top:solid 1px #999;
margin-top:5px;
clear:both;}

#footer p {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
line-height:1,5;
text-align:center;
display:block;
padding-top:2px;
padding-bottom:5px;}[/CODE]

  • - in IE7 the white round corner of the up menu (the white menu) is not visible. The effect is obtained with a PNG image and works fine in all the other browsers.
    • Copy linkTweet thisAlerts:
    @PrisJul 13.2010 — Your code ends with [CODE]<script type="text/javascript">
    try {
    var pageTracker = _gat._getTracker("UA-12890861-1");
    pageTracker._trackPageview();
    } catch(err) {}</script>


    </body>
    </html>tTracker("UA-12890861-1");
    pageTracker._trackPageview();
    } catch(err) {}</script>


    </body>
    </html>[/CODE]     Generating the line tTracker("UA-12890861-1"); pageTracker._trackPageview(); } catch(err) {} [/QUOTE] in the <body> tag (which is closed twice as you can see).
    Copy linkTweet thisAlerts:
    @alexthecattaauthorJul 13.2010 — oh god, thanks a lot! I did not get this error... I hope this did not affect the tracking.

    Thanks again.
    ×

    Success!

    Help @alexthecatta spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...