...

View Full Version : Resolved - Absolute Position IE 8 off



orangesoup
09-05-2011, 08:48 PM
Hello,

Bear with me as this is my first site that I've gone into the code on a site builder (like Weebly, which I'm using now) and changed more than the font colors.

My problem is with the circle buttons on the home page of this site: flipsweb.weebly.com

Looks like I want it to in Firefox, Safari, and Opera. IE 8 is another story. All of the buttons are about 20 pixels too far to the right on IE 8. Also, the logo on the top has a blue border around it .. no idea where that came from.

Any ideas? Or - is there a way I can create the same kind of circular menu that would be a bit more stable (the original was in Flash, but I don't have that so I rebuilt the images and am trying just CSS).

This is on Weebly. THANKS!!!

CSS (most relevant code is at the bottom)

[CODE]

*|* {
margin:0pt;
padding:0pt;
}

body {
font-size:11px;
font-family:Verdana,Arial,Helvetica,sans-serif;
color:#003366;
}

p {
font-size:1.15em;
}

h1 {
font-size:2em;
font-weight:bold;
}

h2 {
font-size:1.875em;
font-weight:bold;
}

#wrapper {
width: 960px;
background-color:#FFFFFF;
margin-top: 10px;
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}

#header {
padding: 5px;
margin: 0px;
text-align: center;
}

#navigation {
width: 960px;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
}


#navigation ul {
font-size:1.25em;
display:block;
list-style-type:none;
margin:0;
padding:8px 15px;
padding-top:6px;
padding-bottom:6px;
}

#navigation li {
display:inline;
text-align:center;
border-left:1px solid #fff;
}

#navigation a:link, a:visited {
font-weight:bold;
color:#FFFFFF;
background-color:#003366;
text-align:center;
padding:6px;
text-decoration:none;
}

#navigation a:hover, a:active {
background-color:#cc6600;
}

#content {
width: 900px;
min-height: 500px;
_height: 500px;
padding: 19px 30px 25px 30px;
}

#content a:link {
color:#cc6600;
text-decoration: none}

#content a:visited {
color:#cc6600;
text-decoration: none}

#content a:active {
text-decoration: none}

#content a:hover {
text-decoration: underline;
color:#cc6600;
}

#quotebox {
margin:0;
padding:10px;
border:4px solid #E8ECF1;
/*background: url(images/startquote.gif) no-repeat;*/
}

.quote {
font: bold 11px Verdana,Arial,Helvetica,sans-serif;
color:#003366;
margin:10px 20px 10px 20px;
}

.quote .emp {
font: bold italic 11px Verdana,Arial,Helvetica,sans-serif;
}

#footer{
width: 960px;
padding: 36px 0px 20px 0px;
text-align: right;
color: #666666;
font-size: 12px;
}

#footer a{
color: #ff6633;
text-decoration: none;
}

#footer .weebly-footer a{
color: #666666;
}

#circle {
height: 500px;
background-image:url('homecircle.gif');
background-repeat:no-repeat;
background-position: center;
}

#buttons {position:relative;}
#buttons li {margin:0;padding:0;list-style:none;position:absolute;}
#buttons li, #buttons a{height:97px;display:block;}

#buttonscompany{position:absolute;top:0px;left:305px;width:97px;}
#buttonscompany{background:url('icons.gif') 0 0;}
#buttonscompany a:hover{background: url('icons.gif') 0 -97px;}

#buttonsprocess{position:absolute;top:0px;left:545px;width:97px;}
#buttonsprocess{background:url('icons.gif') -97px 0;}
#buttonsprocess a:hover{background: url('icons.gif') -97px -97px;}

#buttonsvalues{position:absolute;top:150px;left:210px;width:97px;}
#buttonsvalues{background:url('icons.gif') -194px 0;}
#buttonsvalues a:hover{background: url('icons.gif') -194px -97px;}

#buttonsclients{position:absolute;top:150px;left:650px;width:97px;}
#buttonsclients{background:url('icons.gif') 291px 0;}
#buttonsclients a:hover{background: url('icons.gif') 291px -97px;}

#buttonsresults{position:absolute;top:350px;left:250px;width:97px;}
#buttonsresults{background:url('icons.gif') -388px 0;}
#buttonsresults a:hover{background: url('icons.gif') -388px -97px;}

#buttonsresources{position:absolute;top:350px;left:600px;width:97px;}
#buttonsresources{background:url('icons.gif') -485px 0;}
#buttonsresources a:hover{background: url('icons.gif') -485px -97px;}
[CODE]

and the HTML

[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>{title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="wrapper">
<div id="header">
<a href="http://www.businesscultureconsultants.com">
<img src="/files/theme/masthead.gif" alt="Business Culture Consultants logo" align="center"></a></div>
<div id="sitename">{title}</div>
<div id="circle">
<ul id="buttons">
<li id="buttonscompany"><a href="http://flipsweb.weebly.com/company.html"></a></li>
<li id="buttonsprocess"><a href="process.html"></a></li>
<li id="buttonsvalues"><a href="values.html"></a></li>
<li id="buttonsclients"><a href="clients.html"></a></li>
<li id="buttonsresults"><a href="results.html"></a></li>
<li id="buttonsresources"><a href="resources.html"></a></li>
</ul>
</div>

<div id="content">{content}</div>
<div id="footer">{footer}</div>
</div>

<div style='display:none;'>{menu}</div>
</body>
</html>
[CODE]

chaule
09-06-2011, 05:50 AM
I think you can get rid of the border explicitly and it should clear the problem in IE8:

img {border:0px;}
Specify a Class or Id if you have other images that need borders.

I think the spacing issue is a padding issue with IE rendering it differently.. Not sure if you want to use an ie workaround to fix this.. not sure if there are proper ways to handle this

SB65
09-06-2011, 10:57 AM
It's because of the default margin that IE applies to a ul element - other browsers use padding. Try adding:


#buttons {
position: relative;
margin:0
}



PS: It helps if you wrap your code in # tags when posting.

orangesoup
09-06-2011, 11:39 PM
Thank you coding geniuses! Both little lines of code fixed the problem.

:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum